안녕하세요. 오픈마루에서 웹 컨텐트 개발을 맡고 있는 유인동 입니다. 그동안 오픈마루에서 웹 서비스를 만들면서 가치있는 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 개발자를 웹컨텐트 개발자라고도 합니다.) 모두 오픈마루에서 출시되는 서비스들이 사용자분들에게 좀 더 편리하고 좀 더 많은 가치를 만들어 드릴 수 있도록 노력하겠습니다.
이상 빡빡이 인동이 두서 없이 적어보았습니다. ^^
---- 오픈마루 웹 컨텐트 개발자 유인동
Trackback
트랙백 주소 :: http://www.openmaru.com/trackback/152
Comment
공감가는 글이네요. 오픈마루 화이팅^^ (2007.06.25 17:48)
멋지네요~
앞으로도 더욱 좋은 서비스 기대하겠습니다 (2007.06.25 18:17)
감사합니다
아직 접근성 관련해서 노력해야 할 부분이 너무 많습니다..ㅠ..
잘 하려고 하는건 정말 어려운 것 같아요.
앞으로도 노력하겠습니다. (2007.06.25 18:39)
전혀 다른 상황에 놓여진 각각의 사용자에게 어떻게 하면 효과적인 레이아웃을 보여줄 수 있느냐, 이 문제는 웹이 끝까지 안고 가야할 고민거리죠.. 거기다가 장애인의 접근성 문제까지 나아가면, 현실에서 일하는 사람은 참 힘들어집니다.
하지만 무시할 수는 없는 부분이니. (2007.06.25 19:15)
힘들긴 정말 힘든 것 같습니다.
하지만 말씀하신대로 가치가 보이기에 많은 개발자 분들이 노력하시는 것 이겠지요. 화이팅 하자구요 ^^; (2007.06.26 10:11)
layoutSmall, layoutLarge처럼 해상도에 따라 layout.css를 분리해서 js로 불러들이면 더욱 좋은 기법이겠네요. <link title="1024x768 이상용"... />처럼 제목도 상세하게 달아주면 더더욱 좋겠죠. 최근 브라우저들은 웹 페이지에 연결된 css를 선택해서 사용할 수 있는 기능을 제공해주고 있으니깐요.
99점이나 100점이나 잘한 건 잘한 거죠~ ㅎㅎ (2007.06.25 19:30)
후니님 조언 감사해요~^^
고민해보고 적용하도록 하겠습니다.
오페라 껀은 큰 실수를 범했네요ㅠ_ㅠ..
오페라에서 정상적으로 동작 하도록 했습니다.
다시 천천히 IE, FF, Safari, Opera 에서 테스트 해보았습니다. 제보 감사합니다^^;;
오해하시는 분들이 계셔서..
IE7과 오페라의 줌 기능은 브라우저 화면 자체를 확대하고 축소하기 때문에 이 레이아웃이 적용되지 않습니다. 폰트 크기와 윈도우 크기의 변경에 의해 동작하기 때문에 위 브라우저에서도 폰트 크기를 변경하시면 무리 없이 동작합니다. (물론 윈도우 크기 변경에 의한 레이아웃 변경은 모두 동작 합니다.)
코드도 간략한 코멘트와 함께 조만간 포스팅하겠습니다.
감사합니다^^ (2007.06.26 11:38)
이 레이아웃이 오페라에서는 안되네요. ㅠ.ㅠ (2007.06.25 19:34)
와...멋진데요. 오픈했을 때에는 뭔가 좀 이상했는데 이거 하려고 그랬던 거군요. 인동씨 화이팅~ (2007.06.26 01:03)
신현석님 응원이 정말 제일 힘되네요!
요즘 모임에 자꾸 빠져서 죄송해요~
자세한 내용은 따로~^^ (2007.06.26 11:43)
좋은 개념인 것 같습니다. ^^
진정한 크로스 브라우징은 단순히 웹 브라우저 밴더들의 입맛에 맞추는 걸 의미하는 것은 아닐테지요. 하지만 사용자를 위해 모든 경우를 다 고려하려는 '노력'이 있어야만 진정한 서비스라고 할 수 있을 것 같습니다.
항상 노력하시는 오픈 마루의 모습에 화이팅을 보냅니다. ^^ (2007.06.26 10:38)
격려 감사합니다. 앞으로도 노력하겠습니다^^ (2007.06.26 11:44)
와. 이거 대단하네요. 주깁니다~~ (2007.06.26 14:09)
와~ 이런 심오한 의미가 있었군요. 리사이징 해보면서 정말 신기했습니다.
수고 많으셨어요~ (2007.06.26 15:27)
UI의 신선한 변화 네요.
(2007.06.26 15:59)
재미 있는 시연 잘 봤습니다.
이제는 각 화면 사이즈 마다 컨텐츠를 어떻게 배치해야 할지를 고민하는 시대가 왔군요..
요맨~ (2007.06.26 17:07)
정말 신기하네요. 사용자를 위한 마음이 느껴집니다. (2007.06.26 19:38)
오...이런것두 되는군요. 대단합니다.
근데...그림에서 blog content랑 blog sidebar위치가 뒤바뀐듯...아닌가 ^^;; 왜 난 이런것만 보이지-_-; (2007.06.27 09:09)
수정했습니다 __) (2007.06.27 11:04)
작년에 해외사이트에서 시도된 것을 목격한 이래 드디어 국내에서도 시도되는군요.
adaptive layout 이란 표현이 딱인 것 같습니다.
꾸벅~! (2007.06.30 02:33)
전에는 브라우저 크기에 따라만 변동 되는 걸 봤었는데
이거는 폰트크기와 브라우저 크기 두가지의 상황을 고려해서 "적응" 하네요..
정말 신기하고 굿 입니다. 안에 어떻게 만들어졌는지 궁금해여!! (2007.06.30 17:31)
아침에 정말 신선하게 느껴졌습니다.
그러나.. 하고 싶은 의지와는 달리 현실적으로 서비스에 고려사항이 너무나 많습니다.
신규 서비스이거나 런칭되는 신규 채널정도, 특히 개인화에 포지셔닝이 되면 적절할거 같네요^^ (2007.07.03 08:28)
와우. 컨트롤 마우스로 열심히 조작하면서 매력에 푹! 빠졌습니다.
정말 사용자를 고려한 UI라는 느낌이 ^^ 확~ 와닿네요. 멋집니다! (2007.07.03 16:39)
감사합니다. 앞으로도 노력하겠습니다^^ (2007.07.03 20:26)
처음엔 무슨말인가 했습니다.
너무 멋집니다....^^ (2007.07.05 16:24)
하하 감사합니다 cOOkIE님
(2007.07.06 02:01)
이상하네요. 제가 쓰는 파폭에서는 조금 이상하게 보입니다. http://practical-spikeekips.blogspot.com/2007/07/blog-post.html (2007.07.09 23:40)
안녕하세요. 오픈마루 유인동입니다.
먼저 관심에 감사 드리고 지적해주신 사항 역시 잘 읽어 보았습니다.
말씀하신 것처럼 폰트 크기를 키웠을 때 이미지가 함께 확대 되면서 이미지가 깔끔하게 보이지 않습니다.
결론부터 말씀 드리면, 이미지가 레이아웃의 비율에 맞게 강제로 커지도록 작업한 것은 의도에 의해서였습니다. ^^
IE7, Opera, Mac 등의 Zoom 기능에서 화면을 크게 확대하면 동일한 비율로 이미지도 커지는 것에서 힌트를 얻은 것인데요,
IE7, Opera 외에 FF, IE6, Safari 환경에서도, 폰트를 키워 써야 하는 분들을 위해 Zoom과 동일한 기능을 제공하려고 배려한 부분이니 이해해주시면 감사하겠습니다.
물론, 모두 이미지 폰트가 아닌 시스템폰트를 사용한다면 이런 문제는 없겠습니다.
하지만, 이미지 폰트를 써야 하는 경우에는, 확대 했을 때 이미지가 깔끔하게 보이지 않더라도 전체적인 화면의 균형을 이루는 것이 오히려 보기 편하다고 판단했기 때문입니다.
현재 실질적인 테스트 환경은 윈도우 IE6/IE7/FF, 맥 FF/Safari 입니다만, 현재 오픈마루 내에서도 리눅스 사용자 분들이 많아 리눅스 FF도 자연스럽게 고려하고 있습니다.
관심과 지적 감사드립니다. ^^ (2007.07.10 12:12)
딴지는 아니구요, 일반적인 경우에 "확대했을 때 깔끔하게 보이지 않더라도 .. 전체적인 화면의 균형을 이루"도록 하는 것보다, 오히려 "확대됐을 경우에 전체 레이아웃이 원래 의도와 다르게 약간 왜곡되더라도 사용자에게 명확하게 텍스트를 전달하는게 /* 유리 */하지 않을까하는 생각이 듭니다.
(2007.07.10 12:44)
넵^^; 장단점이 있는 것 같습니다.
추후개편이나 다른 서비스 출시시 고민해보도록 하겠습니다.
감사합니다^^; (2007.07.10 14:01)
ㅎㅎㅎ 신기하네요! ^ ^*
그런데 지금 것은 빈 공간 끼워맞추기 같은 느낌이... 으흐흐 ^ ^;;;;
좀 더 다양한 레이아웃을 보고 싶어횻 >. < (2007.07.31 13:06)