안녕하세요. 오픈마루에서 웹 컨텐트 개발을 맡고 있는 유인동 입니다. 그동안 오픈마루에서 웹 서비스를 만들면서 가치있는 UI에 대해 고민하다가 새롭게 Adaptive Layout 이라는 개념을 이번에 오픈한 오픈마루 공식홈에 적용해 보아서 소개해드리려고 합니다.
화면 해상도와 폰트 크기에 따라 달라지는 UI를 스크린 캐스트로 찍어 보았습니다. 요약하자면 아래 그림과 같은 UI 변화가 생깁니다.
웹 사용자는 참 다양합니다. 또한 웹을 보여 주는 유저 에이전트들도 참 다양합니다. 그렇지만 뭐니뭐니해도 다양한 크기와 다양한 해상도의 디스플레이 장치들은 더욱 많습니다. 미니기기, 노트북 화면, 17인치, 19인치, 20인치 와이드, 24인치... 등등 필요에 따라 여러 형태의 디스플레이 장치를 사용합니다.
같은 크기의 디스플레이 장치도 굉장히 다양한 이유와 필요로 사용 됩니다. 같은 15인치 모니터일지라도 해상도가 낮은 보급형 모니터 일수도 있고 15인치 노트북일 수도 있습니다. 20인치가 넘어가는 큰 모니터 역시 전문 작업자가 여러 윈도우를 띄워 넓은 작업환경을 필요로 했을 수도 있고 눈이 좋지 않아 크게 확대해서 보려고 사용할 수 도 있습니다. 대부분의 일반인 역시 때로는 인터넷 창을 크게 띄우고 싶을 수도 있고 작게 띄우고 싶을 수도 있습니다. 프리젠테이션을 위한 문서나 소스코드들 역시 멀리 앉은 청중들에게 전달이 되지 않을 경우 많은 내용을 한번에 보여주지 못하더라도 화면을 크게 확대해서 전달해야 하는 경우가 있습니다.
디스플레이 기기들이 다양화 되는 요즘 같은 시대에, 다양한 환경과 다양한 기기, 그리고 다양한 필요에 의해 컨텐트를 읽고 쓰고 있습니다. 하지만 대부분의 웹 컨텐트는 인쇄물 처럼 고정된 레이아웃을 많이 사용하고 있기 때문에, 같은 컨텐트를 다양한 기기를 통해서 사용할 수 있다는 이용자 가치가 무색해 질 때도 많습니다.
장애인부터 또 다양한 이유로 여러 기기를 쓰는 많은 사용자들을 위해 컨텐트를 어떠한 레이아웃으로 제공하면 효과적일 것인가를 계속 고민해 오다가 모니터 크기나 해상도, 브라우저 크기, 폰트 크기같은 요소들에 적응 하여 적용 되는 Adaptive Layout 개념을 이번 기회에 오픈마루 공식홈페이지에 적용해 보았습니다. ^^ (오픈마루 공식 홈에서 폰트크기를 변경해보시거나 브라우저 크기를 늘렸다 줄였다 해보세요^^;;)
저 스스로도 실제로 적용 후 사용해 봤더니 또 다른 가치를 발견할 수 있었습니다. 예를 들면 디스플레이 배너 광고를 적용하는 포털사이트에서도 이런 Adaptive Layout 개념을 활용하면 고정 사이즈에 국한되지 않고, 다양한 이용 환경에 맞는 디스플레이 광고를 할 수 있어 더욱 효과적인 노출을 할 수 있지 않을까 생각해 봤습니다. 더욱 넓은 화면에서 효과적인 서비스 제공을 하면서 노트북 사용자 같은 작은 화면도 충분히 고려할 수 있게 되어 광고 영역을 확보하면서도 이용자를 방해하지 않게 되는 것이죠. ^^
이제 고정폭을 깨뜨려보면 어떨까요? 잡지, 신문과 같은 인쇄물과 달리 다양한 화면에서 보여지는 웹 컨텐트이 기에 가능성은 무한한 것 같습니다. 저는 물론 오픈마루 UI 개발자들 (오픈마루에서는 UI 개발자를 웹컨텐트 개발자라고도 합니다.) 모두 오픈마루에서 출시되는 서비스들이 사용자분들에게 좀 더 편리하고 좀 더 많은 가치를 만들어 드릴 수 있도록 노력하겠습니다.
이상 빡빡이 인동이 두서 없이 적어보았습니다. ^^
---- 오픈마루 웹 컨텐트 개발자 유인동
화면 해상도와 폰트 크기에 따라 달라지는 UI를 스크린 캐스트로 찍어 보았습니다. 요약하자면 아래 그림과 같은 UI 변화가 생깁니다.
웹 사용자는 참 다양합니다. 또한 웹을 보여 주는 유저 에이전트들도 참 다양합니다. 그렇지만 뭐니뭐니해도 다양한 크기와 다양한 해상도의 디스플레이 장치들은 더욱 많습니다. 미니기기, 노트북 화면, 17인치, 19인치, 20인치 와이드, 24인치... 등등 필요에 따라 여러 형태의 디스플레이 장치를 사용합니다.
같은 크기의 디스플레이 장치도 굉장히 다양한 이유와 필요로 사용 됩니다. 같은 15인치 모니터일지라도 해상도가 낮은 보급형 모니터 일수도 있고 15인치 노트북일 수도 있습니다. 20인치가 넘어가는 큰 모니터 역시 전문 작업자가 여러 윈도우를 띄워 넓은 작업환경을 필요로 했을 수도 있고 눈이 좋지 않아 크게 확대해서 보려고 사용할 수 도 있습니다. 대부분의 일반인 역시 때로는 인터넷 창을 크게 띄우고 싶을 수도 있고 작게 띄우고 싶을 수도 있습니다. 프리젠테이션을 위한 문서나 소스코드들 역시 멀리 앉은 청중들에게 전달이 되지 않을 경우 많은 내용을 한번에 보여주지 못하더라도 화면을 크게 확대해서 전달해야 하는 경우가 있습니다.
디스플레이 기기들이 다양화 되는 요즘 같은 시대에, 다양한 환경과 다양한 기기, 그리고 다양한 필요에 의해 컨텐트를 읽고 쓰고 있습니다. 하지만 대부분의 웹 컨텐트는 인쇄물 처럼 고정된 레이아웃을 많이 사용하고 있기 때문에, 같은 컨텐트를 다양한 기기를 통해서 사용할 수 있다는 이용자 가치가 무색해 질 때도 많습니다.
장애인부터 또 다양한 이유로 여러 기기를 쓰는 많은 사용자들을 위해 컨텐트를 어떠한 레이아웃으로 제공하면 효과적일 것인가를 계속 고민해 오다가 모니터 크기나 해상도, 브라우저 크기, 폰트 크기같은 요소들에 적응 하여 적용 되는 Adaptive Layout 개념을 이번 기회에 오픈마루 공식홈페이지에 적용해 보았습니다. ^^ (오픈마루 공식 홈에서 폰트크기를 변경해보시거나 브라우저 크기를 늘렸다 줄였다 해보세요^^;;)
저 스스로도 실제로 적용 후 사용해 봤더니 또 다른 가치를 발견할 수 있었습니다. 예를 들면 디스플레이 배너 광고를 적용하는 포털사이트에서도 이런 Adaptive Layout 개념을 활용하면 고정 사이즈에 국한되지 않고, 다양한 이용 환경에 맞는 디스플레이 광고를 할 수 있어 더욱 효과적인 노출을 할 수 있지 않을까 생각해 봤습니다. 더욱 넓은 화면에서 효과적인 서비스 제공을 하면서 노트북 사용자 같은 작은 화면도 충분히 고려할 수 있게 되어 광고 영역을 확보하면서도 이용자를 방해하지 않게 되는 것이죠. ^^
이제 고정폭을 깨뜨려보면 어떨까요? 잡지, 신문과 같은 인쇄물과 달리 다양한 화면에서 보여지는 웹 컨텐트이 기에 가능성은 무한한 것 같습니다. 저는 물론 오픈마루 UI 개발자들 (오픈마루에서는 UI 개발자를 웹컨텐트 개발자라고도 합니다.) 모두 오픈마루에서 출시되는 서비스들이 사용자분들에게 좀 더 편리하고 좀 더 많은 가치를 만들어 드릴 수 있도록 노력하겠습니다.
이상 빡빡이 인동이 두서 없이 적어보았습니다. ^^
---- 오픈마루 웹 컨텐트 개발자 유인동
트랙백
댓글 31
