웹에서 쫌 놀아봤다면? 최고의 UI를 창조할 수 있다!?

통신서비스를 말한다 2010/07/15 10:09

유저인터페이스 이야기 2탄- 일류를 경험해야 좋은 UI를 만들수 있다!
지난 글 책속에 숨어있는 유저인터페이스 비밀에 이어 계속 UX에 대해 이야기를 풀어 보려고 합니다.

우리가 전하고 싶은 콘텐츠와 서비스가 있습니다.
콘텐츠는 정보구조(Info Architecture)를 잘 다듬어서 배열을 해두면 사용자가 내비게이션이 쉬워지니
그렇게 준비하고, 서비스는 사용자와 인터랙션을 고려하여 인터랙션 요소들의 배치를 염두에 둡니다.

그리고 사용자가 콘텐츠나 서비스에 접근하는 것을 지원해주어야 하는 기술이 있습니다.
어떤 기술 기반을 사용할 것인지에 대해 심각히 고려해야 합니다.
현재와 가까운 미래의 추세는 당연히 웹(Web)기반입니다. 이것 말고는 생각하기 어렵습니다.


웹을 기술 기반으로 삼아야 한다는 것은 어떤 뜻일까요?
어찌 보면 모든 것들을 웹사이트 만들 듯이 한다는 것입니다. 브라우저로 액세스하고 인터랙션한다는 뜻입니다.
그러면 액세스의 대상이 문서일 수도 있고 서비스일 수도 있고 사물(Things)도 가능하다는 것입니다.
뭐 먼 미래의 이야기도 아니고 지금의 현실입니다.

미래는 멀리 있는 것이 아닙니다. 그저 여기 저기 불균질하게 존재할 뿐입니다.
우리는 인터넷 접속속도가 느리다고 불평하지만 다른 나라에 가면 그 불평이 복에 겨운 것이라는 것을 알게 됩니다.
우리가 미래인 것입니다.

좋은 웹을 많이 사용해 보십시오.
그러면 이해도가 높아집니다.
웹은 기본적으로 Loosely Connected,라는 철학입니다.
그러나 우리가 일하는 네트워크는 Tightly Connected,라고 할 수 있습니다.
그 철학의 차이를 이해해야 합니다. 왜 이해하고 그 방향을 따라가야 하는 지 묻지 마십시오.
세상은 불공평한 법입니다.

왜 그런지 이유를 묻기보다는 그 차이를 극복하는 데 노력하는 편이 현실적입니다.
이런 기술을 바탕으로 여러 가지 유저인터페이스 패턴(User Interface Pattern)들을 사용하면 됩니다.
기술 기반이 웹이니, 웹 패턴을 효과적으로 사용하면 좋습니다.

어떤 상황에 어떤 패턴을 사용할 지 정하고,
데이터 내비게이션이 쉽도록 정보구조를 어떻게 만들지 정하기만 하면 됩니다.

그 다음 단계로, 일반인들이 중요하게 생각하는 비주얼 요소인 GUI를 다듬으면 됩니다.
이런 과정들이 유기적으로 연결되면 좋은 유저인터페이스가 얻어집니다.

‘Beauty is only skin deep’ 이란 말이 있습니다.
하지만 유저인터페이스는 절대 스킨딥 수준이 아닙니다.
아름다운 유저인터페이스는 구조적이며 유기적인 것입니다.
좋은 유저인터페이스를 많이 사용해보고 구조적으로 바로 보는 일을 게을리 해서는 되지 않습니다.

하지만 그리 어려운 것도 아닙니다. 몇 가지 단순한 원리만 충실히 따르면 됩니다.
처음에 엔트리포인트(Entry Point)는 무엇으로 할 지, 사용자들이 선택에 대한 고민을 줄여주는 것은 어떻게 할지,
내가 부지런하게 움직이고 배려하면 사용자들은 행복합니다.
콘텐츠나 데이터를 다룰 때는 정보구조를, 서비스를 다룰 때는 상호작용을 염두에 두고
사용자의 입장에서 생각하면 됩니다.

유저 인터페이스를 일상생활에서도 많이 접합니다.
대표적인 것이 건축이라는 공간이기도 하고, 식당에 갔을 때, 
식당이 움직이는 것을 보면 많은 것들을 배웁니다.
이 모든 것이 다 유저인터페이스 입니다. 일류를 많이 경험해야 합니다.
일류를 경험하지 못하면 일류 상품과 서비스를 절대 만들 수 없습니다.


전자책에 대한 과도한 기대가 여기 저기서 나오지만, 저는 유보적인 시각입니다.
기술적인 관점에서 보면 전자책은 종이책의 단점을 극복한 장점들이 많습니다.
하지만 종이책은 종이책만이 가진 장점이 많다는 것을 잊으면 안됩니다.
즉 종이책의 자원성이나 사회적인 유산을 잊지 말고 종이책의 단점을 기술적으로 극복해야 하지만,
종이책이 가지고 있는 자원성은 계승 발전시켜야 합니다.

우리의 기술을 적용시킬때 간과하기 쉬운 부분이 바로 이런 것입니다.
문제점을 극복해야 하지만, 극복의 대상이 되는 것도 자원성이 있으니  그 자원성도 같이 육성해야 한다는 것입니다.
신기술을 개발하는 사람들이 가지기 쉬운 이런 오류는 균형잡힌 시각을 갖으려고 노력할 때 비로서 교정됩니다.

추가적으로 유저인터페이스가 갖추어야 할 덕목의 하나는 컨텍스트(Context)입니다. 

사용할 때의 컨텍스트나, 미디어의 컨텍스트 등을 잘 반영해야 합니다.
사용 관점에서 가장 중요한 컨텍스트는  ‘언제나 어디서나 사용자를 이해하고 있어야 한다’는 겁니다.
 
일상에서 반복적으로 사용하는 씬, 니시타임(Niche Time)에 시간을 죽이려고 하는 사용하는 씬,
급하게 데이터를 찾아 보려고 사용하는 씬, 이 세가지 정도면 중요한 사용씬은 전부 고려한 것 같습니다.

미디어 관점의 컨텍스트는 모바일은 작은 스크린(Small Screen)이란 것입니다.
이를 고려하지 않은 유저인터페이스는 재앙입니다.

지금까지 간략하게 유저인터페이스에 대해 이야기해봤습니다.
하지만 이것도 어떤 규율에 대해서 이야기 한 것일 뿐 절대적인 것은 아닙니다.
유저인터페이스야말로 보는 사람의 눈에 따라 다르게 느낄 수 있습니다.
누구의 눈에는 좋지만 다른 사람들은 불편한 겁니다.

애플의 UI가 불편하다고 느끼는 사람도 있는 법입니다.
아무리 그래도 몇가지 원칙만은 마음에 간직하며
유저인터페이스를 고려하도록 디테일에 민감하면 좋겠습니다.

글쓴이 : 제너시스템즈 마케팅기획본부 조준성 팀장

곧 다가올 변화를 예의주시하고 있습니다. 웹과 모바일, Communication과 Collaboration에서 생기는 변화는 사용자들에게 전에 보지 못했던 새로운 경험과 가치를 제공하고 있습니다. 제너시스템즈 역시 그 경험을 일궈내는데 주도적으로 참여하고자 합니다. 그리고 제가 이 변화의 현장에서 함께 고민할 수 있다는 데 자부심을 느낍니다.


저작자 표시

"xenerdo의 운영정책에 의해 포스팅 주제와 맞지 않는 댓글과 트랙백은 삭제될 수 있습니다."
Posted by 제너시스템즈

트랙백 주소 : http://xenerdo.com/trackback/370 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://blogsabo.ahnlab.com BlogIcon 보안세상 2010/07/15 15:06  댓글주소  수정/삭제  댓글쓰기

    좋은 글 잘 읽었습니다^-^~
    '고기도 먹어 본 놈이 잘먹는다' 라는 말이 생각 나네요ㅋ
    UI의 세계는 뭔가 특정한 바운더리 안에서 이루어지는 않아서 ㅎㅎ
    저에게는 잡힏듯 하고 알듯 하고 보일 듯하는 그런 느낌이에요ㅠㅠ
    누군가에게 설명하긴 힘들지만 경험하면 느낄 수 있는 오묘한 UI의 세계~

    • Favicon of http://xenerdo.com BlogIcon 제너두_ 2010/07/15 16:51  댓글주소  수정/삭제

      오묘한 UI의 세계에 빠지는 중이죠..스마트폰 덕분에요..ㅎㅎ

      보안도 해본 녀석이 잘한다고 그래서 보안세상님의 안철수연구소가 잘하는 거 아니겠습니까?ㅎㅎㅎ

  2. Favicon of http://blue2310.tistory.com BlogIcon 드자이너김군 2010/07/15 16:47  댓글주소  수정/삭제  댓글쓰기

    보안세상 님이 딱 맞는 표현을 써 주셨내요. 고기도 먹어본 놈이 잘 먹는다..ㅎㅎ
    저도 디자이너라 나름 UX에 민감한 편인데 이렇게 글로 잘 풀어 주시니 너무 좋군요.

    • Favicon of http://xenerdo.com BlogIcon 제너두_ 2010/07/15 16:51  댓글주소  수정/삭제

      ㅎㅎ 도움이 되셨으면 좋겠습니다

      앞으로 자주 이런글이 나올 예정이니 관심 가져주세요
      제너시스템즈도 UX를 고민중이랍니다^^;

책속에 숨어있는 유저인터페이스 비밀

통신서비스를 말한다 2010/07/08 10:00

유저인터페이스 관련 이야기 1탄

작년 말부터 유저인터페이스에 대한 이야기들이 여기 저기서 참 많이 들립니다.
애플 아이폰이 국내에 출시되면서부터라고 생각됩니다. 그 이야기들을 가만히 들어보면 사람들마다
제각기 이해하고 있는 바를 자신의 관점에서 풀어 이야기하는 것 같습니다.


그러면 유저인터페이스란 무엇일까요?
유저인터페이스에 대해 위키피디아에는 어떻게 정의되어 있는지 알아보겠습니다.

A user interface is the system by which people (users) interact with a machine.
The user interface includes hardware (physical) and software (logical) components. 
User interfaces exist for various systems, and provide a means of: Input, allowing the users
to manipulate a system, and/or
 Output, allowing the system to indicate the effects of the users' manipulation.

읽어보니 그리 대단한 이야기는 없습니다.
즉, 유저인터페이스를 입력과 출력이 있는 시스템으로 보고 있는 겁니다.
사용자가 사용목적을 달성하기 위해, 시스템의 입력장치를 통해 조작을 하고, 
사용자의 조작 의도를 이해하고 사용자가 사용목적을 손쉽게 달성할 수 있도록 지원하는 것입니다.
사용자와 대화(Interaction)를 한다는 것입니다.
이렇게 정의만 보면 참 단순하기조차 한 유저인터페이스 때문에 왜 그리 난리일까요?  
애플 아이폰이 성공적으로 시장에 진입하고 사용자 경험들이 긍정적으로 나오면서
아이폰 성공의 원인 중 하나로 유저인터페이스가 이야기되면서 관심이 증폭된 게 아닌가 합니다.


그러나 찬찬히 살펴보면 아이폰의 유저인터페이스는 비교적 단순합니다.
길을 찾을 때 도로교지판이 잘 구성되어 있으면 목적지를 쉽게 찾아 갈 수 있는 것처럼,
아이폰도 그런 접근 방법을 도입했습니다.

싸인포스트(Signpost)라는 UI 패턴을 일관되게 사용한 것입니다.
아이폰을 사용해보신 분들을 아시겠지만, 지금의 페이지와 다음 페이지를 연결하는 것은
버튼이라는 인터페이스이며 그 버튼 안에 목적지를 담아 낸 것입니다.
그래서 그 목적지를 따라 가기만 하니까 쉬워 보이는 겁니다.
분기하는 것도 별로 없고 목적지에 도달하는 횟수를 늘리더라도 그냥 따라오라는 방식이 성공한 것입니다.

사실 그런 방식은 우리가 인터넷을 사용하면서 아주 익숙한 것입니다.
즉, 하이퍼링크라는 것이 유사한 역할을 합니다.
하이퍼링크에 대한 경험과 일상 생활의 도로표지판에 대한 경험을 녹여낸 것입니다.

겉으로는 쉬워 보이지만 아주 독특한 접근법인 것입니다. 


애플은 사용자의 행위를 많은 관찰하여 자신들의 통찰력을 녹여낸 것입니다.
물론 시각적으로도 사용자들의 대기 시간을 Transient Effect로 잡아두었다는 것도 중요하고
In-page Interaction이라는 인터페이스 패턴을 사용한 것도 중요한 요소 중 하나입니다.

추가적으로 애플이 혁신을 가져온 것은 웹이라는 보편적인 기술을
휴대폰의 폼팩터에 녹여냈다는 것입니다.
브라우저 기반으로 시스템을 끌고 간 것입니다.

기술적으로 정확한 설명은 아니지만 개념적으로 브라우저 기반이라는 겁니다.
여기에 녹아 있는 통찰력은 사뭇 다른 것이기도 합니다.

그런데 많은 사람들은 유저인터페이스를 너무 단순하게만 봅니다.
그러다 보니 유저인터페이스를 단순하게 표면적인 것으로 착각하는 사람들도 있기도 합니다.
하지만 유저인터페이스라는 시스템은 매우 구조적인 것입니다. 

우리가 항상 접하는 책을 예로 들어
유저인터페이스에 대해 더 이야기해보겠습니다.


책이란 물리적인 대상은 그 내용과 형태는 무수히 다르지만 몇 가지 공통적인 요소를 가지고 있습니다.
즉, 책이란 유저인터페이스 시스템은 필수적으로 가지고 있어야 할 요소가 있다는 뜻입니다.

책은 어떤 요소로 구성되어 있을까요? 책이란 어떤 메시지를 전하고 싶은 거니까, 
이야기가 가장 중요합니다. 그리고 잘 알다시피, 책이란 필사본으로부터 시작해서
목판인쇄, 금속인쇄 그리고 DTP에 이르기까지 기술의 발달과 더불어 다양한 형태의 도서가 나타납니다.

특히 요즘 아동용 도서를 보면 입체적인 도서도 나타나고 재질의 발달에 따라
방수가 되는 도서도 나타나는 등 기술의 발달을 반영하고 있습니다.
물론 전자책도 나타나고 있습니다. 이 부분은 나중에 다시 이야기 드리도록 하겠습니다.

우리가 책을 처음 접하게 되면 먼저 표지를 봅니다.
앞 표지와 뒷 표지를 보고 첫인상을 갖게 됩니다. 표지는 비주얼 디자인 요소와 책의 성격을
한 눈에 보여주는 정보전달 요소가 함께 하는 부분입니다.
또한 플랩이라는 요소를 통해 책이 전하고자 하는 메시지를 읽고, 저자에 대한 정보도 읽습니다.
본격적으로 읽기 위해 책을 열어보면, 전형적인 패턴을 만납니다. 


ISBN 등 도서의 정보를 나타낸 부분, 제목, 저자, 출판사, 목차, 소개글 등이 있고, 챕터별로 본문이 시작됩니다.
본문에는 각주나 미주 등의 요소가 있고, 본문이 끝나면 색인이나, 부록 등의 요소를 발견하실 겁니다.

본문도 어떤 책들은 텍스트만 있는가 하면 도해나 사진 등도 포함되는 경우도 있습니다.
텍스트만 있는 경우라도 서체나 자간, 행간 등 독자를 배려한 책이 있는 가하면 그런 배려가 부족한 책들도 많습니다.

페이지 레이아웃도 아주 신경 써서 만들 것이 있는가 하면 그렇지 못한 것들도 많습니다.
내용은 좋지만 이런 부분이 부족한 책들은 읽기가 어렵습니다.

책은 읽기 편해야 읽히는 법입니다.
이렇게 단순히 책을 예로 들어도 우리는 어떤 구조적인 패턴에 아주 익숙해져 있으며,
특정 요소가 없으면 이상하다고 느낄 수 있습니다.
사실 유저인터페이스라는 시스템도 책이란 시스템과 별반 다를 것이 없습니다.

그러면 책이란 예를 통해 유저인터페이스에 대해 이야기 한 것을
다시 다이어그램을 통해 정리해보면서 이번 글을 마무리해봅니다.



글쓴이 : 제너시스템즈 마케팅기획본부 조준성 팀장

곧 다가올 변화를 예의주시하고 있습니다. 웹과 모바일, Communication과 Collaboration에서 생기는 변화는 사용자들에게 전에 보지 못했던 새로운 경험과 가치를 제공하고 있습니다. 제너시스템즈 역시 그 경험을 일궈내는데 주도적으로 참여하고자 합니다. 그리고 제가 이 변화의 현장에서 함께 고민할 수 있다는 데 자부심을 느낍니다.


저작자 표시

"xenerdo의 운영정책에 의해 포스팅 주제와 맞지 않는 댓글과 트랙백은 삭제될 수 있습니다."
Posted by 제너시스템즈

트랙백 주소 : http://xenerdo.com/trackback/369 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://strong-coi.tistory.com BlogIcon 독코독담 2010/07/08 23:25  댓글주소  수정/삭제  댓글쓰기

    햐... 좋은 인사이트네요!
    물리적으로 할 수 없는 부분들을 기계가 해주니, 사람이 물리적으로 하는 것과 가장 동일하게 구현하려고 노력해야 좋은 유저인터페이스가 나오는듯 합니다 ^^
    프로그래밍도 인문학인듯 ㅎㅎ