태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'가이드라인'에 해당되는 글 15건

  1. 2015.05.14 신입 UI 디자이너를 위한 'UI 가이드라인 바로 배우기' 지침서 (17) by 정 유리
  2. 2015.01.15 [HCI KOREA 2015 후기 1/2] 성공적인 스마트TV 표준 가이드라인 만들기 발표 후기 by 김 동후
  3. 2014.12.23 WebTV Design Guide by 이 재용
  4. 2014.12.04 [독후감]모바일 우선주의 by 이 재용
  5. 2014.10.23 마음을 생각하는 디자인 - 심리학으로 바라보는 UI 가이드라인 by 정 유리
  6. 2014.10.21 [독후감] 마음을 생각하는 디자인 by 이 재용
  7. 2013.04.16 UI 패턴과 원칙을 다룬 도서 모음 20+ by 위승용 (uxdragon)
  8. 2012.12.26 UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 (14) by yesong
  9. 2012.02.17 안드로이드 디자인 : Android 4.0 ICS 디자인 가이드 (1) by kyuheeee
  10. 2011.08.25 왜 어떤 가이드라인은 실패하는가? - 말보다 행동이 중요하다 by 이 재용
2015.05.14 07:50

신입 UI 디자이너를 위한 'UI 가이드라인 바로 배우기' 지침서

얼마 전 동료로부터 다음과 같은 질문을 받았습니다. 

"유리 주임님은 디자인을 전공하지 않으셨는데, 처음으로 프레임워크 스케치를 할 때 어떤 느낌이었어요?"

저의 대답은 "흥미로워 보였지만 너무 막막했어요." 였습니다. 그리고 어떻게 해결해 나갔는지를 이야기 하면서 UI 가이드라인을 공부하게 된 이유와 그 과정에서 겪은 시행착오가 생각났습니다. 이를 통해 얻은 교훈을 정리해 보고, 신입 디자이너들 중에서도 비슷한 어려움을 겪었거나 겪고 있는 분들에게 도움이 될까 하여 이 글을 쓰게 되었습니다. 

이 글에서는 각종 UI 가이드라인 링크 모음을 공유하고 그에 앞서, 가이드라인을 효과적으로 읽기 위한 올바른 방향(당시에 제가 알았더라면 정말 좋았을 것 같은)에 대해 정리해 보려고 합니다. 개인적인 경험을 바탕으로 쓴 것이니 가볍게 읽어보시길 바랍니다. ^^


필자는 심리학을 공부하다가 디자인에 입문하게 되었는데, 처음 'UI 디자인 가이드라인'이라는 것을 전해 들었을 땐 그것이 왜 중요하고 어떻게 쓸모가 있는 것인지 감을 잡을 수 없었습니다. UI를 하고자 한다면 UI 가이드라인을 공부하는 것이 많은 도움이 될 것이라는 조언을 들었기 때문에, 항상 마음 한 구석에 'UI 가이드라인을 공부해야 한다는 생각'을 가지고 있었습니다.


그러다가 가이드라인을 공부하기 위한 몇 가지 시도들을 했었는데요,

첫 번째로 pxd 블로그에서 '가이드라인'을 검색하여 관련 글을 모두 읽는 것부터 시작했습니다. 이 때는 내용의 20~30% 정도 겨우 이해하는 수준이었는데, 정말 재미없는 전공 필수과목처럼 느껴졌습니다. 굉장히 잘 정리된 글임에도 불구하고 당시 UI 가이드라인에 대한 배경 지식이 부족했고, 언제 어떻게 활용해야 하는지, 그래서 왜 필요한지를 깨닫지 못한 상태였기 때문입니다. 하지만 나중에 가이드라인을 알게된 후 아래 글들을 다시 읽었을 때 느꼈던 감탄은 잊을 수 없습니다.



이후 중요성을 깨닫고 Windows, Apple의 가이드라인을 하나 하나 읽어보자는 (많은 신입 UI 디자이너들이 그러하듯이) 계획을 세웠습니다. 하지만 적지 않은 양에 놀라고, 도대체 어디서부터 어떻게 봐야할 지 모르겠더군요. UI적으로 너무나 당연한 규칙이나 원리들을 굳이 어렵게 정리한 백과사전 같았습니다. 이 때는 읽었다기보다는 그냥 봤다고 하는 것이 맞을 것 같네요. 


아래 링크는 당시에 읽었던 책입니다. Microsoft와 Apple의 책은 오래된 것임에도 불구하고 이미 그 때 부터 사용자를 위한 UI 지침이 매우 탄탄했었다는 점을 알고 겸손하게 공부해야겠다고 생각했던 기억이 납니다.ㅎ 꼭 이 책이 아니여도 웹에 공유된 문서(글 아래 링크가 있습니다)와 책들이 많으니 참고하면 좋겠습니다.



그러던 중 UI 설계서를 영문으로 작성하면서 UI 영어 표현에 고민이 많았던 때가 있었습니다. 조언을 통해 UI 가이드라인을 레퍼런스로 활용했고, 자주 사용하는 동사나 표현 및 구절을 찾아보면서 자연스럽게 가이드라인을 상세히 읽게 되었습니다. 이쯤 되어서야 가이드라인이 어떤 목차를 가지고, 어떤 이야기를 하고 싶어 하고, 어떤 내용을 담는지 생각하게 된 것 같습니다. 동시에 UI 설계를 하면서 참고할 만한 내용이 정말 많다는 점을 깨달을 수 있었습니다.


얼마 후 한 프로젝트에서 실제 가이드라인을 작성하게 되었고, 이를 바탕으로 HCI 학회에서 사례 발표를 하게 되었는데, 이때의 경험이 가장 큰 도움이 되었습니다. 결국 프로젝트를 통해 가이드라인을 작성해 보는 것이 가이드라인을 이해하는데에 가장 빠르고 정확한 방법인 것 같습니다. 프로젝트 중의 고민하는 시간 양과 심도있는 이해를 위한 노력을 무시할 수 없더군요. 하지만 그렇지 않은 경우에는 어떻게 하면 좋을까요? 



UI 가이드라인 효과적으로 읽기


UI 가이드라인을 더욱 효과적으로 읽기 위한 방법을 세 가지로 정리해 보았습니다. 


첫 번째. 큰 줄기를 이해하며 다가가기

많은 내용을 담고 있는 가이드라인 각각의 세세한 규정을 읽어보기 전에 큰 골격을 이해하는 게 우선되어야 한다고 생각합니다. 가이드라인의 목적, 용도, 시대적/역사적 배경 등에 대한 기본적인 이해가 필요합니다. 또한 여러 유관 부서 사이의 관계와 가이드라인의 역할에 대해서도 알고 있는 게 좋습니다. 가이드라인이 누구를 대상으로 쓰여졌는지를 알고, 가이드라인을 사용자 입장에서 볼 필요가 있습니다. 이렇게 머리 속에 어느 정도 가이드라인의 역할과 관계도의 그림이 그려지고 나면, 업무 흐름의 큰 줄기를 이해하면서 자연스럽게 가이드라인의 중요성을 깨달을 수 있을 것입니다.



두 번째. 내용을 면밀히 살펴가며 읽기

이제 자세한 내용을 살펴 볼 차례입니다. 우선 목차를 통해 정리된 기준을 살펴보고 어떤 내용이 있을지 미리 예상해 보는 게 좋습니다. 각각의 OS, 플랫폼이 무엇을 중요하게 생각하느냐에 따라 목차와 내용 구성이 달라지기 때문입니다. 

상세 규정을 읽어볼 때는 해당 내용이 어떤 근거로 작성된 것인지 항상 염두에 두며 읽을 필요가 있습니다. 규정은 심리학적 측면을 근거로 할 수도 있고 트렌드, 제품 특징, 브랜드 이미지, OS 일관성 등을 이유로 할 수도 있습니다. 이를 이해하면, 해당 가이드라인을 지켰을 때 결과적으로 제품/서비스에 어떤 영향을 미칠 수 있는지를 함께 생각해 볼 수 있을 것입니다.

또한 정책의 표현 방식에도 관심을 기울일 필요가 있습니다. 같은 내용이더라도 Do/Don't를 명확하게 정리하기도 하고, 유려한 표현을 빌려 읽는 사람이 제품의 감성까지 느끼도록 하기도 합니다. 개인적으로는 Apple의 가이드라인을 보면서 매번 감탄을 합니다. 아이폰이 많은 사람들을 놀라게 했던 것 처럼, Apple은 UI 가이드라인에서도 정체성을 드러내려는 것 같다는 생각이 듭니다. 그만큼 가이드라인이 제품의 성격을 잘 담아내고 계승할 수 있도록 만드는 도구로 중요한 역할을 한다고 볼 수 있습니다.



세 번째. 여러 가이드라인을 비교하며 읽어보기 & 활용하기

내용을 읽어보는 것에서 멈추지 않고 디바이스 별, OS 별 여러 가이드라인을 비교하며 읽어보는 것을 권장하고 싶습니다. 내용의 차이를 비교하며 각각의 제품/서비스가 어떤 전략을 가지고 있는지를 살펴보거나, 가이드라인의 작성 방식이나 표현적 차이를 비교하며 그들만의 색깔을 느껴보는 것도 꽤 재미있습니다. 현재 진행중인 프로젝트가 있다면 관련 가이드라인을 통해 아이디어를 얻기에도 아주 좋은 도구입니다. 예를 들어 지난 원형 UI 디자인 가이드라인 포스팅을 작성할 때에는 원형 디스플레이를 가진 Smart Watch UI 가이드라인을 보며 영감을 얻기도 했습니다. 

내부 혹은 외부 관계자와의 커뮤니케이션 과정에서 디자인을 설득하기 위해 가이드라인이 활용될 수도 있습니다. 가이드라인 각각의 근거를 이해하고 나면, 디자인 타당성을 높이기 위한 방법으로도 유용한 도구가 됩니다. 표준 UI가 가진 권위와 절대적인 가치를 활용하는 것은 디자이너의 몫입니다.



UI 가이드라인이 아직도 낯설고 어렵다면, 위의 내용을 참고하며 읽어보시면 좋겠습니다. 덧붙여 지금까지 정리해 둔 현재 공개된 여러 OS 및 제조사의 UI 가이드라인 링크를 공유합니다.



UI 가이드라인 모음


Mobile & Desktop


TV


Wearable


Other

  • iPod nano 6th generation User Guide (UI 가이드는 아니지만 작은 화면의 인터페이스 특성을 중심으로 참고해볼 만 합니다.)
  • Google Cast 
  • Designing Interface (Designing Interface책이 없다면 이 웹사이트를 참고하세요. First Edition이지만 책의 거의 모든 내용이 정리되어 있습니다.)


[참고##가이드라인##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 17
Ad Test...
2015.01.15 01:00

[HCI KOREA 2015 후기 1/2] 성공적인 스마트TV 표준 가이드라인 만들기 발표 후기


2014년 12월11일, HCI KOREA 2015에서 '스마트TV 표준 가이드라인에 대한 사례 발표'를 진행하였습니다. 현장의 분위기와 발표 내용을 간략하게 요약하여 공유합니다.

성공적인 스마트TV 표준 가이드라인 만들기

UX디자이너에게 표준을 지키는 일은 중요합니다. 더불어 표준을 만드는 일도 중요합니다. 이번 학회에서 나눌 주제는 'IT 솔루션의 표준을 만드는 일' 즉 표준 가이드라인(General Guideline)작성에 관한 내용이었습니다. IT 솔루션을 개발하고 디자인하는 곳이라면 어디서든 표준 가이드라인을 만듭니다. 스마트TV도 예외는 아닙니다. 특히 스마트TV OS개발의 경우 기획, 개발, 디자인 등 다양한 부서 간 협업을 통해 서비스가 만들어집니다. 때문에 서비스의 일관성을 유지시켜 주는 표준 가이드라인의 역할이 중요합니다. 이번 발표에서는 '성공적인 스마트TV 표준 가이드라인을 제작하려면 어떻게 해야 할까?' 라는 주제를 가지고 pxd에서 고민했던 내용들을 공유하였습니다. pxd가 생각하는 표준 가이드라인은 무엇인지, 어떤 유형의 가이드라인이 있는지, 어떤 방식으로 작성이 되는지, 어떻게 하면 성공적인 스마트TV 가이드라인을 만들 수 있는지 등 스마트TV 표준 가이드라인 작성 전반에 관한 이야기를 공유하였습니다. 발표는 크게 4가지 내용으로 구성하였습니다. 표준 가이드라인의 정의 및 유형 / 가이드라인 제작 현황과 문제 / 스마트TV에서의 가이드라인 / 성공적인 가이드라인 작성 노하우로 구성되어 있으며, 발표 진행은 정유리 주임과 김동후 선임 연구원이 전반부와 후반부로 나누어 진행하였습니다.


1. 표준 가이드라인의 정의 및 유형

표준 가이드라인은 '서비스 개발의 표준을 정의하여 개발자들에게 일련의 권장사항 규칙을 제공하는 소프트웨어 가이드 문서(wikipedia)'입니다. 가이드라인에는 Design principle, look&Feel, Interaction, Navigation, Component 등에 대한 내용들이 들어 있습니다. 좋은 가이드라인은 응용 프로그램의 직관성, 학습성, 일관성을 구축하여 사용자의 경험을 향상시킵니다. 구체적으로 설명하면, 서비스 일관성을 위한 공통의 원칙 제시, 브랜드 철학 공표 및 계승, 커뮤니케이션에 필요한 판단 기준 제시, 결과물 검증에 기준이 되는 도구로의 활용 등의 역할을 합니다. 결과적으로는 최종 서비스 사용자의 경험에 중요한 영향을 끼치게 됩니다.


2. 가이드라인 제작 현황과 문제

그동안 pxd에서는 여러 분야에서 표준 가이드라인 작업을 경험해 보았습니다. 그 경험을 토대로 현재의 제작 현황에 대해서 분석해 보았습니다. 크게, 제작 시스템과 환경적인 문제로 나눌 수 있습니다. 시스템적인 측면에서 가이드라인 제작의 이상적인 구조는, 절대적인 권위를 가진 가이드라인 문서가 존재하고 그것이 각 개발 부서에 전달되어 공통된 룰을 따르도록 하는 형태라고 생각합니다. 하지만 (필자가 경험한) 대부분의 가이드라인 제작 시스템은 개발에 관여하는 유관 부서마다 독립적으로 원칙을 규정하고 그 규정들을 짜집기 하는 형태로 이루어집니다. 환경적인 측면을 보면, 개발 실무진에서 가이드라인에 대한 중요성을 간과하고 실무 경험이 없는 사람들이 가이드라인을 제작하여 완성도가 떨어지는 경우가 있고 '가이드라인 사용자'를 배려하지 않고 내용에만 치중하여 사용성이 떨어지는 가이드라인이 제작되기도 합니다. 이러한 경우 가이드라인의 사용성이 떨어지고 권위와 신뢰도가 떨어지기 때문에 가이드라인이 무용지물이 되는 경우가 많습니다.

3. 스마트TV에서의 가이드라인

스마트TV는 UI설계 시 고려해야 할 점이 매우 많은 디바이스입니다. 하드웨어 특성상 불특정 다수를 만족시킬 수 있어야 하며 시청 거리가 고려 되어야 하고 간접 조작 방식(리모컨)에 대한 고려도 필요합니다. 즉, 사용자 경험에 대한 폭이 매우 넓은 디바이스라는 것입니다. 따라서 더 넓은 범위에서 표준을 정의해야 합니다. 첫 섹션에서는 인터랙티브TV의 초창기 모델인 Web TV의 가이드라인부터 현재 제공되고 있는 가이드라인의 사례를 살펴 보았습니다. 사례 분석을 통해 표준 가이드라인의 방향성을 생각해볼 수 있습니다. 첫째, 사용자의 행동 패턴을 중심으로 작성되어야 한다. 둘째, 브랜드의 철학을 담아야 한다. 셋째, 가이드 사용자를 위해 쉽게 탐색할 수 있는 구조로 제작해야 한다는 것입니다.


4. 성공적인 가이드라인 작성 노하우

참고로 말씀드리면, 이번 발표는 대단한 이론을 들고 나온 게 아닙니다. 그동안 실무에서 진행한 다양한 분야의 작업 경험을 바탕으로 '실무 관점의 제작 방향'을 정리한 것입니다.
이 사례 발표의 핵심 내용입니다. 발표자들이 생각하는 'TV 표준 가이드라인 작성 시 고려해야 할 점 3가지는 다음과 같습니다. 바로 Context, Reader, End User입니다. Context는 표준 가이드라인이 작성되는 맥락에 대한 이해가 필요하다는 것입니다. 프로젝트 배경에 대한 이해, 정책 결정 과정에 대한 히스토리 이해, 디바이스 이용 환경에 대한 이해를 말합니다. Reader는 가이드라인 사용자에 대한 배려를 말합니다. 누가 가이드라인을 보고 활용하는지 이해를 해야 하며, 적절한 레벨(너무 추상적이거나 너무 구체적이지 않은 중간 레벨)로 작성되어야 한다는 것입니다. End User는 최종 사용자인 서비스 사용자에 대한 이해입니다. 결국 표준 가이드라인은 서비스 사용자의 행복을 위한 '개발 매뉴얼'입니다. 때문에 End User에 대한 이해를 바탕으로 작성이 되어야 합니다. 사용자 중심의 정책, 인지 심리학적인 이해가 필수적입니다.
상세한 내용은 블로그 하단에 있는 슬라이드를 확인하시기 바랍니다.

학회 발표를 마치며

(발표자 정유리 주임과 김동후 선임의 소감)
프로젝트를 통해 얻은 노하우를 나만의 언어로 가공하여 사람들에게 발표할 수 있었다는 것, 연구 기간 동안 스마트TV에 대해 진지한 고민을 해볼 수 있었다는 것, 많은 관계자들 앞에서 발표를 해보았다는 것 등 많은 것들을 경험할 수 있는 시간이었습니다. 발표 준비 및 발표를 통해 스스로의 역량을 점검해 볼 수 있었고, 성장을 위한 청사진을 그려 볼 수 있는 기회가 되었습니다.


발표 슬라이드


[참고##HCI학회##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2014.12.23 01:00

WebTV Design Guide


WebTV라고 하면 어떤 분들은 과거가 아련히 떠오를지 모르겠다. 하지만 대부분은 '그게 뭐지?' 라며 생소해 하실 것 같다.

TV로 TV 프로그램만 시청할 것이 아니라, 인터넷도 봤으면 좋겠다고 생각한 Perlman 등이 1995년 설립한 회사인데, 이후 마이크로소프트에 매각되어 msn-TV가 되었다가, 2013년 9월 30일 종료된 서비스 회사이다. (위키백과 참고)
기본적으로 작고 검은 상자(셋탑박스)가 있고, 이것을 브라운관 TV에 연결하면 TV에서 인터넷, 메일 등을 볼 수 있는 서비스이다. 초기에는 컴퓨터는 없지만 인터넷을 하고 싶은 계층을 목표로 만들었다.
흥미로운 건, 이 회사 때문에 Interactive TV라는 한바탕 붐이 일었고, 국내에도 이러한 기술을 제공하려는 회사가 10여개 이상 만들어졌다가 망해갔다. 사실 그 전에도 Teletext라는 제한된 '정보' 서비스가 TV 화면에도 나오긴 했지만 매우 제한적이었다면, 간단한 셋탑 박스를 연결해 기존의 TV를 인터랙티브하게 만든다는 아이디어는 많은 사람들에게 희망과 낙담을 안겼다.

그리고 그 때부터 시작한 TV에서의 '인터랙티브' 바람은 때로는 "Digital TV"라는 이름으로, 때로는 "IPTV"라는 이름으로, 또 때로는 "스마트 TV"라는 이름으로 우리에게 찾아왔다. 다들 나타나게된 배경은 서로 매우 다르지만 결과적으로 소비자에게 호소하려는 부분은 비슷한 점이 있다. 그 중 현재 의미있게 살아 남은 부분은 IPTV와 디지털 셋탑의 VOD 서비스 정도가 아닐까 생각한다.

이야기가 잠깐 옆으로 샜는데, 하여간 이 WebTV는 초기 TV 화면에서 어떻게 정보가 보여질 것인가에 대한 많은 연구를 한 것으로 TV UI 역사에 큰 기여를 했고, TV UI 디자이너라는 새로운 직업을 만들어 냈다. 1996년까지 거의 매주 8명 정도의 사용자에 대한 사용성 평가를 진행하는 등, TV UI 에 대해 거의 최초로 매우 깊이 있게 연구를 한 집단이다.
Design brief: WebTV Networks By Elissa Darnell, Interactions March-April 2000

특히 기존 TV UI는 모두 제조회사 내에서 디자인과 구현이 이루어지기 때문에 외부로 가이드를 공유할 필요가 없었는데, WebTV의 경우, 외부에서 만든 콘텐트(즉 웹페이지)가 자신의 WebTV에서도 잘 보이도록 만들어야 하는 문제가 있었기 때문에, 끊임없이 TV UI에 관해 연구하고, 이를 외부에 공유하여, 마침내 최초의 TV UI/GUI Design Guide를 만들어 배포하게 된다.

이것이 이 글을 쓴 이유다. '최초의 TV Screen Design Guide'는 어떤 내용을 담고 있을까?

WebTV의 초기 화면
WebTV는 홈페이지를 통해서, 자신들의 연구 성과를 가이드라인 형태로 발표했다. 
(원래 주소는 webtv.net인데, 이미 없어진 회사라 아카이브에서 연결 가능. 이것은 1999년 7월 수정된 것이다.)

특히 그 중에서 디자인 가이드 
http://web.archive.org/web/19990508121855/http://developer.webtv.net/design/designguide/Default.htm
를 살펴 보면,

화면 크기 (Screen Dimensions)에서는 544 x 372 크기로 하길 권하고, 최소 16 포인트 이상의 글자를 쓰기를 권장한다. CRT가 색을 내는 특성상 완전히 하얀 색 배경은 문제가 있을 수 있고, 붉은 색은 매우 쉽게 번지며, 한 픽셀 굵기의 수평 라인은 Interace라는 건너뛰기 주사 방식에 의해 떨릴 수 있다. 

100만 정도의 가구가 구입을 했고, 그들은 한 달에 40시간 이상 사용을 했다. 그들의 예상대로 고객 대부분은 이 제품을 구입하기 이전에는 '인터넷'을 사용해 본 적이 없는 고객들이었다. 이들은 자신들의 사용자에 대해 매우 잘 알았기 때문에, TV 앞에서 정보를 구하는 사용자의 특성과 TV(대부분 브라운관 CRT) 디스플레이라는 특성에 대한 깊은 이해를 통해 Interactive TV 사용자 경험 연구의 초석을 다졌고, 전세계 TV UI 디자이너에게 영향을 끼쳤다.

오늘날 많은 피엑스디 UX 디자이너들이 TV (혹은 스마트 TV)의 화면과 경험을 설계하고 디자인하는데, 우리가 갖고 있는 많은 이해와 지식의 출발이 되는 WebTV에 대해 모르고 있는 것이 안타까와서, 피엑스디의 디자이너들에게 알려주기 위하여 이 글을 작성하였다.

참고
1997년의 Nielsen Norman Group TV 사용성에 관한 자료
WebTV Usability Review (1997) Jakob Nielsen
TV Meets the Web (1997) Jakob Nielsen
[참고##UI 역사##] [참고##가이드라인##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2014.12.04 01:00

[독후감]모바일 우선주의

모바일 우선주의
Mobile First
루크 로블르스키 Luke Wroblewski

UI 디자인계의 스타인 루크 로블르스키가 쓴 이 책은, 기존의 PC용 웹사이트 중심에서 모바일 중심으로 서비스를 설계해야 하는 이유와 모바일로 넘어왔을 때 어떤 점에 유의해야 하는지 사례를 들어 설명하고 있다.

이 책은 2011년에 영문판이 나왔기 때문에 2014년인 현재에 '왜 우리가 모바일을 우선해야 하는가?'라는 부분은 다소 지루하게 다가올 수 있다. 또한 '모바일 우선'이 되었을 때 달라져야하는 디자인 원칙들의 경우에도 피엑스디처럼 모바일 관련 작업이 많은 회사들의 디자이너에게는 새로운 내용이 별로 없다. 하지만 아래와 같은 입장에서라면 이 책은 매우 흥미롭고 다시 읽어 봐야할 책이라 생각한다.

스타트업 관계자들
모바일 서비스를 준비하는 스타트업 관계자들은 지금이라도 이 책을 꼭 읽어 보길 바란다. 자신의 회사에 UI 디자이너가 있건 없건, 자기가 경영자이건 개발자이건 이 책을 반드시 읽어 볼 필요가 있다. 스타트업에 계시는 분들이 나를 만나면 하는 질문들이 다 들어 있기 때문이다.

예를 들어, 애플은 터치 대상을 44 x 44 포인트 (픽셀이 아니다)로 만들 것을 권장하고, 마이크로소프트는 대략 9mm(최소 7 mm )가 되어야 한다고 한다. MIT의 컴퓨터 촉각 기술 연구소는 10-14 mm가 될 것을 권장하고 있다. (p76) 

그러나 더 중요한 것은 이런 숫자들이 아니다. 대개 스타트업의 관계자들은 터치대상이 얼마나 커야할지를 고민하지만, 진짜 고려해야할 사항은 다음과 같다.

'터치 대상과 터치 영역의 크기가 꼭 같을 필요는 없다!'

당연한 말이지만 개발경험이 적으면 이 생각을 하기 쉽지 않다. 버튼이 대기업과 연구소가 권장하는 크기일 필요는 없다는 것이다. 버튼의 크기는 터치 영역의 크기에서 50% 이하로 내려가지만 않으면 된다.

이 외에도 굉장히 많은 팁들이 이 책에 담겨져 있다.

초보 UI 디자이너들
이제 막 공부를 시작했다면 여기 있는 이야기들이 모두 새로울 것이므로(늘 써오고 봐왔던 것이라도 직접 고민하여 만드는 시각에서 보면 새롭다) 재미있을 것이고, 조금 익숙해진 디자이너라면 많이 새로울 것은 없지만, 생각을 정리하는 일관된 원리를 습득한다는 측면에서 보면 재미있을 것 같다. 이미 모바일쪽에서 관습화된 것은 왜 이런 관습이 생겼는지 고민해 볼 수 있고, 그런 과정과 원리를 이해하면 새로운 문제에 부딪쳤을 때 해답을 찾기 쉬울 것이다.

예를 들어, 라벨-플레이스 홀더 문제를 보자(p101). 
여러 블로그 글에서, 라벨을 플레이스 홀더로 대체하는 것의 긍정적인 면과 부정적인 면을 반복하여 다루었으므로 초보 UI 디자이너라도 이 문제는 매우 익숙할 것이다. 플레이스 홀더를 사용하면 공간을 줄이고 더 단순하며 아름다운 화면을 만들 수 있는 장점이 있는 반면, 일부 사용자들에게 '이미 입력되어 있는 듯한' 착각을 불러 일으킨다는 치명적인 점이 약점이 생긴다. 

이런 점을 두루 알고 있는 UI 디자이너라면, (이 문제에 어느 정도 리소스를 투입할 수 있을 때) 37시그널즈의 베이스캠프(그림 6.3)처럼 표준적인 방법이 아니라 자체 기술을 이용하여 더 나은 방법을 찾을 수 있다. 즉 입력전/입력 후 두 가지로 나뉘어진 것을, 입력전 - 포커스 입력전 - 입력후 세 가지로 나누어 문제를 해결하는 방법같은 것들 말이다. (이 방법이 완벽하진 않지만 그래도 개선이라고 생각한다.)

특히 같은 저자의 웹 폼 디자인은 반드시 읽어봐야할 책이다. (http://story.pxd.co.kr/675#1)

UI 전문가들
대다수 모바일 UI 전문가들은 책에서 다루고 있는 내용이 대부분 꽤 익숙할 것이다. 이미 자신들도 많이 고민했던 문제이거나 해법도 대략 알고 있는 문제일 것이다. 다만 내 입장에서 한 가지 느낀 점이 있다면 2003-4년부터 모바일 프로젝트를 진행하면서 모바일의 작은 화면이 제약이라고만 생각했지 기회라고 생각하지 않았다는 것이다.

이제와서 생각해 보면, 저자의 말대로 우리는 PC의 화면이 너무 넓어서 쓸데없는 것들을 채워 넣지는 않았나 반성해 보게 된다. 모바일이 나왔을 때, 진짜 UI 전문가라면 '그래 이거야. 마침내 사용자가 자신의 태스크에 집중할 수 있는 환경이 나타났군' 이라고 생각해야 하는데, 기존 매체에 대한 고정관념에 사로 잡혀 화면이 작다는 것은 제약이라고 생각했던 것 같다. 앞으로 또 다른 매체가 나타나고 다른 사람들이 입을 모아 '제약'이라고 말하는 것들을 기회로 바꿔 볼 생각이다.

[참고##가이드라인##] 

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2014.10.23 01:00

마음을 생각하는 디자인 - 심리학으로 바라보는 UI 가이드라인

앞서 게재된 이재용님의 글(http://story.pxd.co.kr/949)에서 UI 가이드라인을 적용할 때의 고려사항 몇 가지를 짚었습니다. 그 중 '가이드라인이 나온 인지적/심리적 배경을 이해한다.' 라는 내용은, 가이드라인이 나오게 된 근본적인 이유를 인간의 심리적 측면에서 이해해야 함을 말하고 있습니다.
이 글에서는 이와 관련해 책에 언급된 내용 몇 가지와 제가 느낀점들을 정리해 보고자 합니다.
'마음을 생각하는 디자인'에서 더 다양한 내용을 다루고 있으니 더 많은 예시는 책을 읽어보시면 되겠습니다.

UI 디자인을 하면서 들었던 조언 중 하나는, 잘 만들어진 여러 UI 가이드라인 문서를 통해 인터페이스 기본 원칙, 컴포넌트의 종류와 패턴 등에 대한 기본기를 다지라는 말이었습니다.
업무상 UI 가이드라인을 작성하고 있는 요즘은 그 중요성을 더 크게 느끼고 있으며, 이재용님의 글을 읽으면서 가이드라인이 가지는 한계점이나 이를 잘 적용하기 위한 방법에 대해서도 공감가는 부분이 매우 많았습니다.

한편, 정작 UI 가이드라인을 작성하면서는 무의식적으로 '이런 원칙은 원래부터 써왔던 것이니까 언급해야 한다.', '당연히 이렇게 디자인하는 것이 더 좋으니까 다들 이렇게 쓰는 것일거다.' 라고 생각했던 일들이 떠올랐습니다. 그 가이드라인이 누구를 위한 것인지 망각하고, 가이드라인이라는 문서에만 매몰된 상태로 내용을 작성하고 있었던 것이죠. 그것이 오랫동안 지켜져 온 법칙이였더라도, ‘왜 사용자를 위한 인터페이스 디자인 원칙이 그래야만 하는지’에 대해서 더 많은 고민을 해야 했다는 생각이 들었습니다.

심리학에서는 지각 심리학, 인지 심리학, 신경 생리학적 이론 등을 바탕으로 이유를 설명합니다.
즉, 인간 행동의 이유를 인체 생리 구조로부터 접근하여, 표면적으로 드러난 부분보다는 실제 인간의 뇌와 신경계에서 어떤 처리 과정이 일어나는지로 이해하려 한다고 볼 수 있습니다.


1. 인간 지각과정의 편향 가능성을 예측하기

(참고 : Chapter 1. 우리는 기대하는 대로 지각한다.)

책의 첫 번째 챕터에서는 인간의 지각이 다양한 요인에 영향받을 수 있음을 설명합니다.
실제 인간의 지각 과정은 자극이 전기 신호로 바뀌어 이를 인지하는 경험에 이르기까지 여러 단계로 진행됩니다. 처리가 아주 빠르고 의식하지 못 하는 뇌의 영역에서 진행되기 때문에 실제로 각 단계를 밟는다는 경험을 하기는 어렵습니다.

(그림: E. Bruce Goldstein. Sensationand Perception. 8th edition, 2009)
인간에게 사물은 모두 위와 같은 과정을 통해 인지되고 있습니다. 우리가 디자인 한 인터페이스 상의 여러 자극들 또한 사용자는 위와 같은 과정으로 지각하게 됩니다.
하지만 인간은 인지적으로 보다 복잡한 존재라서, 우리가 디자인한 바 대로 사용자가 경험할 수 있도록 하려면, 또는 사용자가 기대하는 바를 잘 녹여서 디자인 하고 싶다면 이런 과정에 대한 이해와 함께 지각의 편향 가능성에 대해서도 이해하고 있어야 합니다. 어떤 요인에 의해 지각 과정상에서 편향이 일어날 수 있는지를 예측하고, 그로 인해 사용자가 어떤 경험을 하게 될지 예상해 본 후 언급이 필요한 규칙은 UI 가이드라인에서 규정해 주어야 합니다.
책에서는 다양한 요인에 의해 영향을 받을 수 있는 인간의 지각에 대해 설명하고 있습니다. (1p~12p)

1) 지각은 경험에 따라 편향된다
사용자는 종종 유심히 살펴보지 않고 버튼이나 링크를 누르곤 합니다. 화면에 나타난 내용에 대한 사용자들의 지각은 실제로 화면에 제시된 내용보다는 과거의 경험으로부터 유발된 기대에 따라 더 많은 영향을 받게 됩니다. 또한, 만약 우리가 무언가를 찾고자 하는데 그 대상이 평소와 다른 위치에 있거나 평소와 다르게 보인다면 이를 놓칠 가능성이 있습니다. 왜냐하면, 그동안의 경험으로 인해 기대되는 장소에서 기대되는 모양을 찾도록 우리의 지각이 조율되기 때문입니다.

2) 지각은 맥락에 따라 편향된다
시지각은 상향식 처리과정(bottom-up processing) 뿐만 아니라 하향식 처리과정(top-down processing)도 개입됩니다. 예를 들어, 특정 알파벳이 어떤 단어 안에 들어 있는지에 따라 우리가 해당 알파벳을 어떻게 지각할지에 영향을 받을 수 있습니다. 맥락은 주변 사물이나 현재 발생하는 사건, 과거의 기억 재활성화까지도 포함합니다.
-상향식 처리(bottom-up processing): 눈에 보이는 자극을 우선으로 지각하는 처리 과정
-하향식 처리(top-down processing): 지식, 경험, 목표 등을 바탕으로 자극을 지각하는 처리과정
-위키피디아 : Top-down and bottom-up design > Neuroscience and psychology

3) 지각은 목표에 따라 편향된다
미래에 대한 목표에 부합하지 않는 사물들은 지각에 도달하기 전에 차단되곤 하는데, 이런 것들은 의식의 영역까지 도달하지 못합니다. 목표와 전략은 우리가 어디를 볼지에 영향을 주고, 특정한 자극에 더 민감하게 지각하도록 만들어 주기 때문입니다.

지각 과정에서 인간의 의식 구조가 다양한 방식으로 편향될 수 있으므로 디자이너가 사용자의 경험과 사용 맥락, 사용목표를 잘 이해하고 디자인해야 합니다. 기본적인 이야기지만 가장 잊기 쉬운 이야기기도 합니다.

UI 가이드라인에서는 경험, 맥락, 목표 등을 고려하여 인터페이스를 디자인하도록 가이드를 제공합니다. 예를 들어 TV UI 가이드라인 서론에서는 TV를 보는 기본 환경이나 사용자 유형을 설명하는데 이것은 사용자가 어떤 환경, 어떤 맥락에서 TV 화면을 지각하게 되는지 이해하고 그 결과를 예측할 수 있도록 도와줍니다. TV는 다른 디바이스에 비해 큰 디스플레이를 가지기 때문에 먼 거리에서 시청하는 환경적 특성을 가진다거나, 남녀노소 관계없이 다양한 사람들과 함께 시청하는 모습이 일반적이고, TV를 통해 가장 우선으로 얻고자 하는 가치는 컨텐츠를 통한 즐거움이 될 수 있다는 점들이 있습니다. 이런 특성 때문에 인터페이스를 지각하는 방식이 달라지거나 사용 경험에 차이를 가질 수 있음을 이해하고, 그 배경에는 위와 같은 인간의 지각 원리가 있다는 점까지 함께 고려해 본다면 TV UI 가이드라인을 작성하거나 읽을 때 그 이해의 폭을 높일 수 있을 것입니다.


2. 주변시와 안구운동을 이해하여 사용자의 주의를 끌기

(참고 : Chapter 6. 우리의 주변시는 빈약하다)
 

개인적으로 흥미롭게 생각하는 부분은 우리의 시각 구조와 이와 연관된 신경체계의 구성인데요. 책에서는 이와 관련된 챕터에서 ‘흐린 색상의 정적인 물체가 주변시에 있을 때 왜 사람들은 이를 잘 인식하지 못할까’ 와 같은 질문을 통해 왜 우리는 시야에 들어오는 모든 자극을 동등하게 처리하지 않는가에 대해 설명하고 있습니다. 그리고 그런 시각체계의 특성을 이해하고 디자인을 해야 한다고 말합니다.

중심와와 주변시 – 73p

(그림: E. Bruce Goldstein. Sensationand Perception. 8th edition, 2009)
인간의 두 눈은 중심와(Fovea)와 주변시(Peripheral area)로 나뉘어져 있는데, 중심와는 전체 망막(Retina)의 약 0.01%정도만 차지하지만, 뇌의 시각 피질(Visual cortex)중 약 8-10% 정도는 중심와로부터 받은 정보를 처리하는 일에 쓰입니다. 중심와의 추상체는 시각 데이터를 처리하고 전송하는 시작 단계인 신경절 세포(ganglia neuron cells)와 1:1로 맵핑 되어 있습니다. 반대로 주변시에서는 1:다수와 연결됩니다. 이 때문에 주변시의 정보는 정보 전달 시 데이터가 압축 및 손실되며 중심와의 정보는 압축되지 않고 그대로 전송됩니다.

중심와에는 추상체만 존재하기 때문에 빛을 잘 탐지하지 못하는 대신 세밀한 것을 잘 볼 수 있으며 색상 구분력도 뛰어납니다. 반면에 주변시에는 추상체보다 간상체가 더 많아서 빛의 밝기에 민감하고 색상 구분에는 취약합니다. 또 주변시는 움직임 감지에도 탁월한데, 이는 인류가 진화하는 데 있어 식량을 찾아내고 맹수를 피하는 능력이 얼마나 뛰어난가를 기준으로 자연선택 되어 왔기 때문입니다. 만약 주변시의 특정 지점에 흥미로운 무언가가 존재할 것이라고 기대할만한 어떠한 이유도 없고, 실제로 그 지점에서 우리의 주의를 끌만한 아무런 일도 일어나지 않는 상황이라면 결국 중심와가 그곳으로 아예 이동하지 않아서 거기에 무엇이 있는지 전혀 알아차리지 못할 수도 있습니다.

추가로 다른 책에서 이야기하는 안구의 도약운동에 대해 알아보겠습니다. 중심와에 맺히는 상이 이와 같은 안구의 도약운동으로 선택되는데, 이 때 어떤 자극이 선택적 주의를 받을 수 있는가에 대해 설명하고 있습니다.

선택적 주의를 이끄는 도약운동(Saccade)E. Bruce Goldstein. Sensation and Perception. 8th edition, 2009

(그림: E. Bruce Goldstein. Sensationand Perception. 8th edition, 2009)

우리 시선에서 선택적인 주의를 받는 장면은 안구의 도약운동(Saccade)을 통해 정보를 받아들인 것입니다. 이 도약운동 시 초점이 멈추는 곳을 응시(Fixation)라 부르는 데, 이는 우리가 가진 목적, 지식, 장면의 특성 등 여러 요인에 따라 고정될 수 있습니다. 특히 도약운동 시 하나의 응시점(Fixation)과 다른 응시점(Fixation) 사이에는 Suppression이 일어나기 때문에 움직이는 사이에 있는 장면은 정보처리가 불가능하다는 특성이 있습니다.

선택적인 주의를 받는 장면을 결정하는 요인은 세 가지가 있습니다.
1) Stimulus salience : 색상, 대조, 방향 등이 현저히 눈에 띌 때 눈 운동을 이끌 수 있습니다. 밝기 차이, 색 대비가 크거나 지배적인 방향성을 가졌을 경우를 말합니다.
2) Knowledge about the scenes : 우리가 가진 배경지식이 현재 나타나는 장면을 해석하고 이해하는 데 영향을 줍니다.
3) Nature of the observer's task : 내가 지금 하려는 과제가 무엇인지에 따라 눈 운동이 달라질 수 있습니다.

가이드라인에서도 위와 같은 시각 원리를 고려한 정책들을 찾아볼 수 있습니다.
UI의 Interaction을 정의해 주는 부분에서 예를 찾아보면, 사용자에게 경고나 알림을 제공하는 Notification rule에서는 사용자의 주의를 끌고 싶다면 충분히 주의를 끌 수 있는 요소를 사용하라고 합니다. 충분한 주의를 끌지 못하면 선택적 주의나 도약운동을 유도할 수 없고, 결국 사용자의 주변시에서 알림이 무시될 수도 있기 때문입니다. 빨간색과 같은 색상을 쓰도록 하는 이유도 주변시가 색상 구분에 취약하기 때문에 충분히 지각할 수 있도록 하는 것이고요. 움직임에 민감한 주변시를 이용한다면 화면의 좌우 모서리에서 움직임을 가진 알림을 제공하도록 하기도 합니다.
Fixation의 결정 요인 중 Stimulus salience의 원리를 통해서도 이 원칙을 이해할 수 있습니다. 우리 시선에서 응시점을 가지려면, 자극이 현저히 눈에 띄어야만 합니다. 그래서 화면 안에 너무 많은 강조를 주어 응시점을 어디에 둬야 할지 모르게 해서도 안 되고, 반대로 강조된 부분이 없어서 모든 내용을 다 봐야만 하도록 해서도 안 되는 것입니다.
주의란 결국, 인간은 제한된 정신적 자원을 가지기 때문에 목표에 부합하는 정보만을 효율적으로 받아들이도록 하는 현상이기 때문입니다. 만약 모든 감각정보를 다 받아들인다면 뇌는 과부하에 걸려 버릴지도 모릅니다.


글을 마치며

이 글에서 설명하고자 하는 디자인 과정은 아래와 같습니다.


UI 가이드라인을 다루는 많은 분들이 있지만, UX 디자이너에게는 UI 가이드라인을 학습하거나 직접 작성하기 전에, 심리학적 측면에서 사용자를 고려해 보고 가이드라인의 정책과 규정에 대한 이해의 폭을 넓혀 보려는 시도가 필요할 것 같습니다. 또한, 가이드라인이 ‘왜’ 이렇게 되어야만 하는지에 의문을 지속해서 품는 과정이 필요하며 그랬을 때 더 나은 결과물이 나올 것이라 생각합니다.

[참고##가이드라인##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 0
Ad Test...
2014.10.21 01:00

[독후감] 마음을 생각하는 디자인

마음을 생각하는 디자인
UI 디자인 규칙을 이해하기 위한 핵심 가이드
Designing with the mind in mind
Simple guide to understanding user interface design rules
제프 존슨 Jeff Johnson

UI를 공부하다보면, 여러 가지 지켜야 할 규칙들을 접하게 되고, 그렇게 만들어진 규칙들을 모아 보고 싶은 생각이 든다. 그리고 이렇게 모인 규칙은 대개 '가이드라인'이라는 이름으로 디자이너들 사이에 공유된다. 처음에는 경험의 법칙에 가까워서 정확한 이유는 모르겠지만 여러번 반복하여 실험해 보니까 이렇게 하는 것이 좋더라였는데, 시간이 흐르면서 이유도 알게 되고 학자들마다 반복하여 정의하는 것들도 생기게 되었다.

애플의 기념비적인 휴먼 인터페이스 가이드라인을 시작으로 많은 회사들이 자기 회사의 가이드라인을 만들었고, 한국의 통신사와 제조 회사들도 한때 유행처럼 가이드라인을 만들었다. 그러나,

사용자 인터페이스 가이드라인을 적용하는 일은 요리책을 따라 하는 것과는 다르게 그리 직관적이지 않습니다. 디자인 규칙들은 무엇을 해야 하는가를 이야기하기보다는 달성되어야 하는 목표에 대해서 언급하는 경우가 잦습니다. 가이드라인은 또한 응용 가능성을 높이기 위해 상당히 일반화되어 있는 편인데, 이는 곧 가이드라인을 특정한 상황에 적용하고자 할 때 다양한 해석의 여지가 주어진다는 의미이기도 합니다. p.ix
대개 가이드라인은 목표를 높게 잡으면 뜬구름을 잡게 된다. (우리 회사의 UI는 쓰기 쉽고 사용하기 즐거워야 한다 류. 이런 당연한 말이 대체 어떤 가이드가 되는지...) 구체적이면 디자인의 창의성을 억누르고 옥죄는 반면, 추상적이면 아무런 쓸모가 없는 경우가 많았다. 특히 이런 가이드라인들은 어김없이 서로 모순적인 내용이 반드시 들어 있는데, '합리적 인간'이라면 이런 모순적인 내용을 한 책에 담으면서 아무런 설명도 하지 않는다는 점이 이상하게만 느껴졌다.

따라서 가이드라인을 적용하는데 있어서 가장 중요한 것은 그 가이드라인이 왜 나왔는지 이해하고, 선별하여 적용하는 것이다. 가이드라인을 더 잘 이해하는 몇 가지 방법을 소개하면,

1. 우선 그 가이드라인이 나온 시대적/역사적 배경을 이해해야 한다.
2. 그 가이드라인이 나온 인지적 / 심리적 배경을 이해한다. 
3. 그 가이드라인이 다른 어떤 가이드라인과 충돌하는지 비교하고 찾아본다(반드시 충돌하는 것이 있다)
4. 그 가이드라인이 지켜지지 않아야 하는 상황을 생각해 보고 토론해 본다.

이 책은 2번에 관한 것이다. 왜 이런 가이드라인이 나왔는지 근본적인 이유를 설명하는데, 이는 처음 HCI 분야에 경험적 가이드라인(Rule of Thumb, Heuristic)이 나온 후, 인지심리학이나 신경학, 특히 뇌과학 등이 눈부시게 발전했기 때문에 가능한 부분이다.

예를 들어 왜 우리는 '일관성'을 지켜야 하는가? 이에 대한 설명은 '1장 우리는 기대한 대로 지각한다'에 잘 설명되어 있다. 그리고 이 장을 읽으면 더 이상 '일관성'은 초보 UI 디자이너들이 이해하듯이, 이것과 저것의 모양과 배치를 통일하는 것이 아니라는 사실을 알게 된다. 일관성은 생각하는 것 보다 훨씬 깊숙히 사용자가 이루려는 '목표'에 연결되어 있다.

가이드라인을 알고 있는 사람들이라면 그 이해를 깊이 있게 만들어 주고, UI에 처음 접근하는 사람들이라면 인지적 /심리적 배경과 가이드라인을 함께 이해하는 좋은 기회를 얻을 것이다. 이미 이런 쪽으로 많이 공부한 사람은 다소 지루하게 느껴질 수도 있는데, 그렇더라도 '서문'은 반드시 읽어 보길 권한다.

(번역도 상당히 잘된 편이다. 번역자 강규영씨의 블로그)

[참고##가이드라인##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2013.04.16 00:07

UI 패턴과 원칙을 다룬 도서 모음 20+

UI 기획을 하는데 있어서 UI 패턴과 원칙을 이해하는 것은 건축가가 구조를 이해하는 것과 같이 기본적이면서도 중요합니다. 또한 패턴과 원칙을 통해 일반적인 디자인 문제를 다루는 광범위한 해결방안으로 적용할 수 있습니다. UI 패턴과 원칙을 다룬(일부를 다룬 책도 포함) 도서 모음을 정리해 보았습니다. 본 도서는 pxd 라이브러리 에 구비되어 있으며, 제 유저스토리북에 모아두었습니다. :)

이 외에도 UI 패턴과 원칙을 다룬 도서가 있다면 공유 부탁드립니다. 업데이트 하도록 하겠습니다.


관련 글

 UI 패턴과 원칙을 다룬 도서 모음 20+ (현재 글)

▷ UI 패턴을 다룬 웹사이트 모음



UI 패턴과 원칙을 다룬 국내 도서 모음 (무작위순)

1. 웹 폼 디자인
루크 로블르스키 저 | 민은식, 김성은 역 | 인사이트 | 2009년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6028170



2. 리치 인터페이스 디자인
빌 스콧, 테레사 닐 저 | 이은아, 김기형, 구신애, 윤지혜 역 | 인사이트 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6255460



3. 소셜 인터페이스 디자인
크리스천 그림리시, 에린 멀론 저 | 윤지혜, 남보현, 신나리 역 | 인사이트 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6764990



4. 검색 패턴
제프 칼렌더, 피터 모빌 저 | 김소영 역 | 한빛미디어 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6440010



5. 웹사이트 해부하기
로버트 후크만, 제라드 스풀 저 | 박지은, 정승녕 역 | 인사이트 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6792964



6. UX 디자인 7가지 비밀
박지수, 김현 저 | 안그라픽스 | 2013년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=7170392



7. Designing web navigation
제임스 콜백 저 | 김소영 역 | 한빛미디어 | 2008년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=4486815



8. 오래가는 UX 디자인
반준철 저 | 한빛미디어 | 2013년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=7131918



9. 퍼소나로 완성하는 인터랙션 디자인 About face 3
앨런 쿠퍼, 로버트 라이만, 데이비드 크로닌 저 | 김나영, 고태호, 유지선 역 | 에이콘출판사 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6401320



10. Designing interfaces
제니퍼 티드웰 저 | 김소영 역 | 한빛미디어 | 2007년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=2954032



11. 아이폰 앱 디자인 정석
조시 클라크 | 김은희, 신미원, 이청언 역 | 한빛미디어 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6831349



12. Human computer interaction 개론
김진우 저 | 안그라픽스 | 2012년 발행(개정판)
http://book.naver.com/bookdb/book_detail.nhn?bid=6863839



13. UI디자인을 잘 하기 위한 테크닉 80
노주환 저 | 비비컴 | 2002년 발행 (절판)
http://book.naver.com/bookdb/book_detail.nhn?bid=108792



14. 모바일 디자인 전략
조셉 카트먼, 리차드 팅 저 | 이재명, 이예나 역 | 위키북스 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6459751



15. 모바일 애플리케이션 UI 라이브러리
노주환 저 | 멘토르출판사 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6627677



16. The design of sites
더글러스 벤 듀인, 제임스 렌데이, 제이슨 홍 저 | 정유한, Yuna, 고태호 역 | 에이콘출판사 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6656725



17. 웹 스타일 가이드
사라 호튼, 패트릭 린치 저 | 김노경 역 | 인사이트 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6714944



18. 경험 디자인의 요소
제시 제임스 가렛 저 | 방수원 역 | 한솜미디어 | 2006년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=264361



19. 콘텐츠 UX 디자인
제니스 레디쉬 저 | 이지현, 이춘희 역 | 위키북스 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6771017



20. 모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실
수잔 웨인쉔크 저 | 이재명, 이예나 역 | 위키북스 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6827383


*이미지 출처 - 네이버 책 : http://book.naver.com/ 

[참고##패턴##]
[참고##가이드라인##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 0
Ad Test...
2012.12.26 07:30

UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄

그리 오래 전은 아니지만 UX라는 분야에 처음 입성했을 때, 머리 속에 가득 찬 아이디어를 우리가 흔히 부르는 Wireframe에 옮기는 데 애를 먹었던 기억이 있습니다. 그림은 대충 그려지는 데 정작 내가 그리고 있는 것이 무엇인지 '정의'를 내릴 수가 없었던 탓이지요. 이처럼 기획자라면 누구나 UI규격서를 설계해 본 적이 있을 것입니다. 이것은 UI기획자와 디자이너 간, 혹은 UI기획자와 개발자 간의 일종의 약속이자 물리적인 결과물입니다. 그렇기 때문에 모든 약속은 명확한 정의가 바탕이 되어야 합니다. 그래야 작업자 간의 원활한 커뮤니케이션을 이끌 수 있으니까요.

이번 포스팅에서는 원활한 커뮤니케이션을 위한 기본적인 조건인 UI컴포넌트 용어를 정리해보려고 합니다. 시리즈의 첫 번째로 가장 기본적인 전통 용어를 정리해보았습니다. (사전에 기재되었거나 각 제조사에서 공식적으로 쓰이고 있는 고유 단어를 기준으로 용어를 선별하였으며, 앨런 쿠퍼의 About Face 서적을 참고로 작성하였습니다.)





드롭다운 리스트 (Drop-down List)
객관식 문제에서 볼 수 있는 선택지와 유사한 개념입니다. 맨 처음 진입 시에는 프로그램에서 지정한 기본값이 보여지다가 화살표 버튼을 누르면 숨어 있던 다른 항목들이 나타납니다. 이 중 특정 항목을 선택하게 되면 기본값이 사용자가 선택한 항목으로 바뀌는데, 이로써 사용자는 자신이 원하는 항목이 선택된 것임을 인지할 수 있습니다. 반면 처음부터 펼쳐진 형태는(즉 드롭다운 하지 않는 형태는) 그냥 리스트 박스라고 부릅니다.



콤보 박스 (Combo Box)
드롭다운 리스트와 입력 필드 기능을 결합(그래서 콤보!)한 형태입니다. 사용자가 직접 정보를 입력하거나 나열된 항목들 중에서 하나의 항목을 선택하여 정보를 입력할 수 있습니다. 흔히 Office Tool에서 개체 혹은 텍스트 속성을 입력할 때 사용됩니다.



라디오 버튼 (Radio Button)
윈도우나 팝업의 선택 영역에서 어느 하나를 선택 또는 취소하기 위해 사용하는 버튼입니다. 일련의 선택 항목 중 단 하나의 항목만 선택할 수 있습니다.



체크 박스 (Check Box)
반면, 또 다른 선택 수단인 체크 박스는 동시에 여러 개를 선택할 때 사용됩니다. 틱 박스(Tick Box)라고도 불립니다. 또한 다중 선택 뿐만 아니라 On/Off 개념으로 사용되기도 하는데요. 라디오 버튼과 체크 박스 이 두 컴포넌트는 모바일 환경에서도 널리 사용되어 사용자에게 매우 친숙한 컨트롤입니다.



토글 (Toggle Button/Switch)
On/Off를 설정할 때 쓰이는 위와 같은 컨트롤을 토글 버튼(위) 혹은 토글 스위치(아래)라고 부릅니다. 토글 버튼의 경우 언뜻 보기에는 버트콘 같지만 선택 시에 음각(눌린) 상태로 변하는데 해당 항목이 실행되고 있음(On)을 의미하며, 다시 누를 시에는 볼록한 원래 상태(Off)로 되돌아옵니다. 토글 스위치는 모바일에서 주로 사용되며 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절합니다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 반드시 필요합니다.



버트콘 (Butcon) / 툴바 (Tool Bar)
버트콘이란 버튼과 아이콘의 조합으로서 앨런 쿠퍼가 그의 저서 About Face에서 이 용어를 정의하였습니다. 쉽게 말해 버튼 기능이 있는 아이콘입니다. 리본 메뉴, 툴바에 적용되면서 기존 문자 중심의 드롭다운 메뉴를 대체할 강력한 컴포넌트로 자리잡았습니다. 그리고 이러한 버트콘을 사용자의 기호 및 필요에 따라 바(Bar)형태로 모아놓은 것이 툴바입니다. MS에 의해 처음으로 소개된 개념으로 '도구 모음'이라고도 불립니다.



툴팁 (Tooltip)
사용자가 특정한 메뉴에 마우스 롤오버 시 약 1~2초 뒤에 해당 메뉴에 대한 설명이 말풍선 형태로 제공됩니다. 위에 정의한 버트콘은 사용자가 학습하기 전에는 식별이 어려울 수 있다는 치명적인 단점이 있는데, 툴팁은 이 점을 잘 보완할 수 있는 도구입니다.



스피너 (Spinner)
대표적인 숫자 입력 컨트롤입니다. 편집 필드와 우측 옆의 작고 납작한 두 개의 화살표으로 구성되어 있습니다. 현재 필드에 입력된 숫자값을 기준으로 위아래 화살표 버튼을 눌러 조절하거나 혹은 편집 필드에 직접 원하는 숫자값을 입력할 수 있습니다.



다이얼 (Dial)
일전에 pxd에서 주제로 다룬 '스큐어모피즘'의 예라고 볼 수 있는데요. 놉(Knob)이라고도 불리며, 실제 기계의 메타포를 적용시킨 사례입니다. 현실에서는 사용자가 손으로 직접 다이얼을 잡고 좌우측으로 돌려 값을 조절하는데, 컴퓨터에서는 마우스 드래그(Drag) 혹은 클릭(Click)동작으로 대신합니다. 주로 음향을 조절할 때 쓰이기 때문에  Garage band 같은 작곡 응용프로그램에서 많이 쓰입니다.



슬라이더 (Slider)
리얼메타포를 사용하고 있는 또 다른 경우입니다. 콤보 상자의 경우 사용자가 입력 가능한 범위를 모르는 상태에서 입력하는 상황에 처할 수 있는데 반해, 슬라이더는 입력값이 제한되어 있음을 시각적으로 인지할 수 있습니다. 다시 말해 사용자가 부적절한 값을 입력할 가능성이 없기 때문에 상당히 직관적인 컨트롤이라고 할 수 있습니다.



입력 필드 (Text Input Field)
사용자가 키보드로 직접 텍스트를 입력하는 곳으로서 편집 필드 또는 텍스트 상자 등으로도 불립니다. 특정 항목의 속성을 입력할 때 외에도 검색, 정보 입력 등 상황에 따라 각기 다른 목적으로 사용됩니다. 여러 줄을 입력할 수 있을 때는 입력 영역(Text Area)이라고도 부릅니다.



드롭다운 메뉴 (Drop-down Menu)
풀다운 메뉴(Pull-down Menu)라고도 하며, 가장 전형적이고 어디에서나 볼 수 있는 메뉴 스타일입니다. 메뉴의 제목이 표시되어 있는 곳을 선택하면 메뉴가 아래로 펼쳐집니다. 메뉴 내의 항목으로 마우스의 포인터를 옮기면 그에 따라 각 항목이 반전되고, 클릭하면 그 항목이 선택 및 실행됩니다. 약 3년 전부터는 드롭다운 메뉴의 변형인 메가 메뉴(2편에서 소개할 예정)가 널리 활용되고 있습니다.



리본 메뉴 (Ribbon Menu)
기존에 있는 텍스트 기반의 드롭다운 메뉴를 보완하기 위해 MS에서 툴바에 탭을 결합한 형태를 선보입니다. MS Office 2007부터 도입되었는데요. 위 화면에서 알 수 있듯이 눈에 익숙한 버트콘의 조합으로만 이루어져 있거나, 버트콘으로만 식별하기 어려운 메뉴의 경우 버튼에 icon과 메뉴명을 함께 표기하고 있습니다. 드롭다운 메뉴에만 익숙했던 사용자는 이러한 리본 메뉴를 처음 접할 시에 매우 당황하지만 지속적인 사용 과정을 거침으로써 반복적이고 자주 접근하는 메뉴를 자연스럽게 사용할 수 있게 됩니다. 이처럼 시각적인 요소를 보완하여 드롭다운 메뉴보다 직접적인 장점이 있지만 모든 메뉴를 풀어놓기 때문에 복잡해보이는 단점도 있습니다. 결국 한글 오피스에서는 드롭다운 메뉴와 리본 메뉴를 모두 제공하는 다소 부자연스러운 해결책을 내놓고 있는데, 이처럼 리본 메뉴는 앞으로도 개선될 여지가 있다고 봅니다.



트리 메뉴 (Tree Menu)
목록의 보기 방식 중 하나로서 계층 구조를 표시하는 데 유용합니다. 윈도우 탐색기에서 대표적으로 쓰이고 있습니다.



GNB (Global Navigation Bar)
웹페이지에 표시되는 하이퍼링크들의 집합 영역을 말합니다. 쉽게 말해 웹사이트에서 항상 표시되는 메뉴로서 탑 메뉴, 메인 메뉴라고도 불립니다. 주로 웹사이트의 상단 혹은 좌측에 고정으로 위치하며 바(Bar), 탭(Tab), 드롭다운 메뉴 등의 메뉴 형태로 제공됩니다.

LNB (Local Navigation Bar)
서브 메뉴라고 불리며 웹사이트의 좌측에 주로 위치합니다. 위치는 고정되어 제공되나 항목은 진입하는 메뉴에 따라 다르게 제공됩니다.




대화 상자 (Dialog Box)
사용자의 지시 사항이나 어떤 사항에 대한 결정을 묻기 위해 사용자가 하던 일을 잠시 멈추게 하는 창을 말합니다. 우리에게는 팝업(Pop-up)이라는 용어가 보다 익숙한데요, 대화 상자라고 부르는 이유는 말 그대로 컴퓨터와 사용자 사이에 대화를 제공하기 때문입니다. 대화 상자는 목적에 따라 다양한 형태로 호출됩니다. 크게 오류 등 공지가 필요한 경우, 사용자가 선택한 대상의 속성을 지정하는 경우, 작업의 진행 상황을 알리는 경우, 사용자가 선택한 사항을 재 확인하는 경우 등으로 나뉠 수 있습니다.



여기까지 기본적으로 알아야 할 컨트롤을 정리해보았습니다. 다음 포스팅에서는 앞서 정의한 컨트롤을 바탕으로 응용된 개념 및 새롭게 추가된 컨트롤에 대해 알아보도록 하겠습니다.

[참고: 안드로이드 디자인 가이드 http://klutzy.github.com/android-design-ko/]

[참고##가이드라인##]
[참고##UI 용어##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 14
Ad Test...
2012.02.17 13:36

안드로이드 디자인 : Android 4.0 ICS 디자인 가이드

구글이 안드로이드 아이스크림 샌드위치(Ice Cream Sandwich) 스타일 가이드인 <Android Design(안드로이드 디자인)>을 공개했습니다. 안드로이드 운영체제를 탑재한 스마트폰/태블릿 모두에 최적화된 애플리케이션과 사용자 인터페이스를 만드는 데 도움을 주는 가이드라고 소개하고 있습니다. 

안드로이드 디자인 가이드(영문) : http://developer.android.com/design/index.html  
안드로이드 디자인 가이드(한글 번역) :  http://klutzy.github.com/android-design-ko/

디자인 가이드는 다음과 같은 세 가지에 초점을 맞추고 있습니다.

- Style (devices and displays, themes, typography, color, writing style etc.)


- Patterns (navigation, selection, notifications, swipe views, compatibility etc.)


- Building Blocks (text fields, scrolling, buttons, dialogues, tabs, lists etc.)


디자인 가이드에서 제공하는 것들은 권장사항 입니다. 그러나 다양해지는 디스플레이 크기나 하드웨어 성능의 차이, 그리고 안드로이드의 일관된 사용자 경험을 고려할 때 기획자, 디자이너, 개발자가 한번 쯤은 꼼꼼히 읽고 숙지해야 할 것 같습니다. 
(또한, 안드로이드 디자인 가이드는 정기적으로 업데이트 될 것이라고 합니다.)


참고
2011/09/06 [Mobile] 안드로이드 위젯 기획시 고려사항
2011/07/15 사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사
2010/11/17 안드로이드 체크박스 디자인 fail
2010/10/29 미투데이의 Family UI 비교 – 웹, iOS 앱, 안드로이드 앱을 중심으로
2010/08/26 Android의 BACK 버튼과 HOME버튼을 이용한 내비게이션 룰
2010/06/28 안드로이드 UI/GUI 가이드라인
2010/03/27 안드로이드 시대에서 폰 제조사들의 차별화 전략?

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 1
Ad Test...
2011.08.25 16:58

왜 어떤 가이드라인은 실패하는가? - 말보다 행동이 중요하다

그리 쉽지는 않지만, UI 디자이너에게 표준을 지키는 일은 중요하다. 특히 많은 사람들이 이미 따르는 표준이라면 그 중요성은 배가된다. 이해를 돕기 위하여 4회에 걸쳐서 Mac OS 표준, Windows OS 표준, 그리고 ISO(International Standard Organization) 표준의 역사에 대해서 알아보기로 한다.

1. 사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사
2. 마침내 혼란을 극복한 Windows7 - Windows User Experience Interaction Guidelines의 역사
3. 그들만의 리그, 우울한 ISO UI 표준 - ISO 13407 & ISO 9241의 역사
4. 왜 어떤 가이드라인은 실패하는가? – 말보다 행동이 중요하다


4. 왜 어떤 가이드라인은 실패하는가?

수많은 플랫폼, 회사, 어플리케이션들이 가이드라인을 만든다. 오늘도 누군가, 어디선가 가이드라인을 만들고 있을 것이다. 피엑스디도 가이드라인에 대해 업무 요청이 자주 들어온다. 그 때마다 피엑스디에서 늘 하는 말이 있다.

왜 어떤 가이드라인은 실패하는가?

가이드라인을 만드는 사람은 이 질문에 명확히 답을 가져야 한다. 그래야 성공적인 가이드라인을 만들 수 있다. 가이드라인의 중요성은 누구나 공감하지만, 성공하는 가이드라인은, 필자의 짐작에 1%도 안 될 것 같기 때문에, 그 1%안에 들려면 왜 수많은 가이드라인들이 모두 실패하는지를 알아야 한다.

우선 가이드라인에 어떤 말들이 들어가는지를 살펴보자 (가이드라인 전체를 비교할 수 없으므로 Design Principle에 해당하는 몇몇 키워드만으로 논의를 대체하고자 한다)


Jakob Nielsen 10 Huristics (1990-1994년)
Visibility of system status / Match between system and the real world / User control and freedom / Consistency and standards / Error prevention / Recognition rather than recall / Flexibility and efficiency of use / Aesthetic and minimalist design / Help users recognize, diagnose, and recover from errors / Help and documentation

Apple Mac OS (1987-2006년)
Metaphors, Mental Model(Familiarity, Simplicity, Availability, Discoverability), Explicit and Implied Actions, Direct Manipulation, See and Point, User Control, Feedback and Communication, Consistency, WYSIWYG, Forgiveness, Perceived Stability, Aesthetic Integrity

Windows 2000 (1992-2007년)
User in Control, Directness, Consistency, Forgiveness, Feedback, Aesthetics, Simplicity

SKT NATE UI Requirement Ver 1.0 (2003-2004)
철학(Clear, Speedy, Attractive), 원칙(Visibility, Simplicity, Consistency, Familiarity, Efficiency, Prioritization, User in Control, Feedback, Error, Affordance, Persnoalization, Fun)

KTF 표준 UI 규격 v2.0 (2005)
철학(Fun UI, Easy UI, Happy UI), 원칙(Intuitiveness, Consistency, Efficiency, Attractiveness)

Google (연도미상-)
useful, fast, simple, engaging, innovative, universal, profitable, beautiful, trustworthy, and personable.

Facebook (2009년-)
Universal, Human, Clean, Consistent, Useful, Fast, Transparent

네이버 UX의 9가지 원칙 (2013, UX World 발표, 출처: UX 디자인 팀블로그)
1. 사용자와 비즈니스를 이해한 UX디자인
2. 주요 기능과 정보의 우선순위가 정리된 UX디자인 (Prioritization)
3. 네러티브가 잘 구성된 UX디자인 (Storytelling)
4. 인터랙션이 잘 설계된 UX디자인 (Interaction)
5. 사용자 무의식 반응을 리드하는 UX디자인 (Intuitive)
6. 정보인지를 빠르게 도와주는 UX디자인 (Clear)
7. 디바이스의 특징과 테크놀러지가 잘 활용된 UX디자인
8. 그래픽 디테일이 아름다운 UX디자인 (Beautiful)
9. 브랜드에 좋은 영향을 주는 UX디자인 (Brand)
위의 과정에서 소소한 혁신의 지속성을 가지는 디자인.

현대카드 (2014, UX World 발표)
현대카드의 UX 철학 : Remarkable but Extremely Kind
Clear, Useful, Interaction, Storytelling, Simple, Consistent, Brand Expression + More Creatitvity




Shneiderman's "Golden Rules"
usability.gov's "Research-Based Web Design & Usability Guidelines"
UserFocus 247 web usability guidelines
기타 많은 가이드라인들(A huge list of Style Guides and UI Guidelines하나더,또하나더)


보면 아시다시피, 제이콥 닐슨의 기념비적인 휴리스틱 10가지 원칙 중심으로, 사실 모두 비슷비슷한 원칙들의 순서 바꾸기에 불과하다. 물론 직접 작성한 사람들은 하나 하나 공들여 골랐을 것이고, 오랜 시간 고민하여 순서를 정했을 것이다. 애플이나 몇몇 회사의 경우 오랜 시간 동안 자신들이 중요하다고 생각하는 것을 다듬어왔음도 알 수 있다. 그러나 나머지 모든 회사들의 원칙들과 비교해 볼 때, 애플이 무언가 잘 하고 있다면, 그것은 디자인 원칙(철학)을 잘 다듬어왔기 때문에 잘하고 있다고 보기는 어렵다는 것을 쉽게 알 수 있다.

그럼에도 애플에서 나온 제품들은, 그리고 그 플랫폼 위에서 개발되어 나오는 제품들은 모두 이 뛰어난 철학들을 공유한 것처럼 보이고, 대부분의 회사들이나 플랫폼은 그렇지 않은 것처럼 보이는 이유는 무엇일까? 왜, 어떤 가이드라인은 성공하는 것처럼 보이고, 어떤 가이드라인은 실패하는 것처럼 보일까?

UIE의 Jared M. Spool은 올해(2011) 5월에 자신의 글에서 필자가 지적했던 것처럼 대부분의 가이드라인이 비슷비슷하다는 것을 지적하면서, 이와는 차별된 가이드라인으로 Windows 7 가이드라인을 예로 들었다. Windows 7 가이드라인에 대해서는 필자도 몇 차례 글을 통하여 훌륭하다고 지적한 바 있는데,

Windows 7 (2010년, 원문)
1. Reduce Concepts to Increase Confidence
2. Small Thinks Matter, Good and Bad
3. Delight
4. Solve Distractions, not Discoveratbility
5. Time Matters; Build for People on the Go
6. Value the Full Lifecycle of the Experience
7. Be Great at "Look" and "Do"

그러면서 Spool은 위대한 가이드라인이 되기 위한 6개의 원칙을 제시한다.
1. 연구로부터 바로 추출된 것인가?
2. 대부분의 경우에 ‘아니다’라는 판단을 내릴 수 있는 근거를 제시하는가?
3. 경쟁자로부터 차별화 시킬 수 있는 원칙인가?
4. 나중에 반대로도 할 수 있는 것인가?
5. 이번 프로젝트에 근거해 평가할 수 있는 것인가?
6. 계속 의미를 검증하고 있는가?

Spool은 일반 사람들이 갖고 있는 ‘원칙(혹은 철학)’에 대해 갖고 있는 고정관념 – 영구 불변의 변치 않는 원칙 – 과 비교했을 때 이런 위의 원칙들이 언듯 보기에 직관에 반하는 것처럼 보이지만 실제로 이러한 것들이 위대한 디자인 가이드라인을 만든다고 주장한다.

Spool의 말에 전적으로 동의한다. 특히 2004년에서 2006년에 걸쳐 진행된 한국의 경쟁 두 이동통신사(SKT와 KTF)의 UI 가이드라인을 보면서, 어쩜 두 회사가 만드는 과정에서부터 결과까지 쌍둥이처럼 똑같을까?하는 생각을 하였던 필자로서는 더욱 크게 동감할 수 밖에 없다. 두 회사의 철학은 거의 비슷했다. 사실 두 회사만 비슷한 것이 아니라, 세상 모든 나머지 가이드라인들과 비슷했다. 어느 회사인들 Fun 하지 않은 걸 원할 것이며, 누군들 쓰기 어려운 걸 원할 것인가? 이런 식의 하나마나한 말 잔치 철학들은, 가이드라인을 읽는 독자들이 ‘무시’하기 쉬웠다. 경쟁사와 구별할 수 있는 철학도 없었지만, 그렇다고 틀린 말도 없었다.

구글이나 페이스북처럼 그리고 많은 회사들의 경우 이런 비슷비슷한 원칙이 나오기 때문에 결국 철학을 무시하게 되니, 남는 건 뒷 부분의 픽셀 단위 가이드라인과 지정된 칼라 밖에 없다. 이렇게 남은 가이드라인은 개별 어플리케이션을 디자인하는 사람들의 창의력을 막고 천편일률의 통일성만 강조된 결과를 남긴다. 그나마 잘 지켜진다면 말이다. 절대 변할 수 없고, 절대 틀릴 수 없는 철학들은 결국 절대 사용될 수 없는 철학인 것이다.

하지만, 이런 철학으로도 잘 하는 예외적인 회사가 있으니, 반드시 또 이 철학이 틀렸다고 말할 수는 없다. 그렇다면 Spool의 지적은 맞긴 하지만 부족한 지적이다.

왜, 어떤 가이드라인은 성공하고 어떤 가이드라인은 실패하는 걸까?

필자는 그것이 ‘가이드라인’이 갖는 권위 – 절차적 정당성에 근거한 영향력에 달려 있다고 생각한다.

대개의 가이드라인은 이렇게 만들어진다.
우선 자신의 제품이 중구난방임을 깨달은 UI 전담팀의 누군가가, 외부의 가이드라인을 수집한다. 모든 가이드라인을 수집한 다음에 자기 마음에 드는 것을 고르고 순서를 바꾼다. 그런 다음 힘이 있는 임원을 설득한다. 운 좋게 임원이 설득되면, 찍어 누른다. 지금까지 잘 하고 있던 현업 부서는 반발한다. 임원의 권력의 크기에 따라, 따라하는 시늉을 하든지, 아니면 진짜로 조금 따라하든지 한다. 가이드라인의 힘이 커지게되면 제품은 천편일률이 되고 문제를 깨닫는다. 조금씩 예외가 많아지다가, 해당 임원이 교체되면서 가이드라인도 사라진다.

더욱이 한국의 가이드라인은 대개 이렇게 만들어진다. 전담팀 누군가가 스스로 만들면 권위가 생기지 않을 것이므로 대학교 교수님께 맡긴다. 그러면 대학교 석사 1-2년차들 (즉 방금 학부 졸업한 학생들)이 자료를 수집하여 초안을 만들고, 박사 과정이 다듬고, 교수님이 검증한다 (사실 직접 실무를 안 해 보긴 모든 구성원이 비슷하다). 이렇게 실무 경력 합계 0년이 만들어낸 가이드라인을, 학위는 없지만 실무에서 잔뼈가 굵은 사람들이 따라야한다. 당연히 반발하지만, 역시 위에서(중앙부서에서, 그룹 본부에서) 찍어 누른다. 그 결과는 비슷하다.

이렇게 만들어진 가이드라인의 품질이 좋을 리도 없지만, 설령 품질이 좋다고 하더라도 구성원들이 그것을 충분히 이해하고 따라하려는 노력을 하기에는 권위가 없다. 권력에 의해 강요한다면 결국 그것은 시늉을 낳게 되고, 기계적인 적용 방법을 찾게 되고, 창의력은 점점 사라지게 되는 것이다.

그렇다면 성공하는, 즉 영향력있는 가이드라인은 어떻게 만들어야할까?

첫 번째는 구성원들의 합의에 의해 만들어야 한다는 점이다.
Nokia가 어떻게 가이드라인을 만들었는지 보자.

표준 문서를 만드는 순간 창의성은 사라진다. 그 사실을 알기 때문에 우리는 가능하면 최대한 표준 문서 만들기를 꺼렸다. 문서 대신, 단지 그런 방향은 아니라고 관리자들이 구두로 말하다 보니, 그것을 관리자 개인의 성향으로 모는 일도 생겼다. 마침내 같은 기본적인 질문을 반복해서 대답하고 있다고 느끼게 되자, 두 명의 시니어 디자이너가 원칙을 모아 명확하게 정리하기 시작했다. (Mobile Usability, 150p, 2003년 영문판 번역)

처음부터 문서를 만드는 것이 아니라, 디자인을 하는 사람들이 계속되는 협업과 토론을 통해 철학을 형성, 공유하고, 새로 들어온 신입들에게 같은 질문에 대한 같은 대답을 반복하다가 효율을 높이기 위해 표준 문서를 만들었다는 내용이다.

철학은 외부에서 가져올 수 없다.
위의 구글 디자인 원칙들은 허접하지만, 구글 철학을 한 번 보면, 몇 몇 개의 것들은 절대 다른 회사가 갖고 있지 못 하는 구글만의 문화와 철학이 느껴져서, 그것에 따르면 오히려 디자인 원칙들보다 더 제품의 전략과 인터페이스를 설계하는데 도움이 되지 않을까 생각한다. 창업자를 중심으로 창업 과정의 사람들이 함께 공유하고, 또 실천한 문화와 철학을 정리한 것이기에, 누구도 쉽게 적용할 수 있다. 또 어느 회사에게 맞는 것이 아니라, 구글만이 할 수 있는 것들이 듬뿍 담겨있다.

두 번째는 실패 사례로부터 출발하는 경우이다.
윈도즈 7의 원칙들을 살펴보면, 그간 무의미하고 추상적인 원칙들이 아무런 도움을 주지 않는다는 것과, 비스타의 처참한 실패로부터 배운 것들을 잘 정리하고 있다. 오랫동안 윈도우 사용자들을 리서치하고, 그에 따라 자신들에게 꼭 필요한 원칙들을 모으고, 첫 번째로 윈도우 7의 디자인을 하는데 적용을 한 것이다.
기존의 원칙들의 정신을 살린 것이라 하더라도, 자신들의 실패를 극복하기 위해 좀 더 정밀하게 좁혀졌고, 명확하게 설명이 되기 때문에 다른 사람들이 읽었을 때 무엇을 해야할지, 무엇을 하지 말아야할지가 분명하다. 따라서 이렇게 만들어진 원칙들은 윈도우 7만의 특징을 잘 설명하고 있다.

세 번째는 성공 사례로부터 출발하는 경우이다.
사람들은 리더의 말이 아니라 행동을 따라 배운다. 아이들은 부모의 말보다는 행동을 따라하고, 팀원은 팀장의 행동을 판단 기준으로 삼으며, 협력 파트너들은 그 회사의 가이드라인이 아니라 출시된 제품을 따라 만든다.

아무리 가이드라인에 ‘Simple’이라고 적어도, 나오는 제품들이 모두 복잡하다면 그건 아무런 의미없는 내용이 되고 마는 것이다. 경영자가 아무리 디자인이 중요하다, 소프트웨어가 중요하다고 떠들어도, 코스트(제조원가)에 밀려 디자인이 희생되고, 승진에서 재무 출신이 임원이 되면 그 회사는 디자인이나 소프트웨어를 중요하게 생각하지 않는 것이나 마찬가지다.

따라서 새로운 조직에서 가이드라인을 만들려고 한다면, 반드시 새로운 프로젝트(결과물)와 함께 만들어야 한다. 그 과정에서 서로 토론하고, 문화를 형성하고, 결과물에 적용하고 그 결과물을 성공시켜야 한다. 결과물이 성공하면, 사내외의 다른 사람들이 따라 하려할 것이고, 사람들이 따라하는 부분을 가이드라인으로 만들면 된다. 그것이 진정한 영향력이다.

정리하면,
1. 직접 쓸 것. 함께 쓸 것. 문화와 철학을 만들 것. (남의 도움은 받을 수 있으나, 남이 만들어 줄 수 없다)
2. 학부 막 졸업한 석사과정에게 맡기지 말 것. 출시된 상품의 화면 설계서를 백 번 이상 그려 본 사람에게 맡길 것.(자기 손으로 같은 버튼을 수백번 그렸다 지웠다 해 본 사람이 아니면 원칙을 만들 수 없다)
3. 성공 사례를 먼저 만들고 전파할 것. 성공으로부터 영향력을 만들 것. (권력에 의해 배포된 가이드라인은 권력과 함께 사라진다)

이것 저것 생각하기 싫다면? 피엑스디에 맡기면 된다. :)

[참고##가이드라인##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...