디자인관련

[스크랩]  MonaC님의 블로그에서...

http://hanb.co.kr/look.php?isbn=978-89-7914-503-8&tab=review

이 책은 UI 설계에 대한 본격적인 책입니다.

다양한 UI 구성 요소들에 대한 분석을 전재로 하고 있습니다. 예를 들어, 어떤 종류의 정보를 표시하는 데

리스트박스가 좋은지, 텍스트 박스가 좋은지, 그리드가 좋은지, 드랍다운 리스트가 좋은지 등을 설명하고 있습니다.

이 설명 역시 지엽적일 수 있습니다. 페이지 레이아웃, 다양한 화면 구성 요소들(개발자라면 UI Components라는 표현이 더 익숙하겠죠?),

데이터를 보여주는 방법들을 설명합니다.

이 책의 가장 큰 단점은 여러분이 이미 다 알고 있는 것들이라는 겁니다. 이 책에서 설명하는 것은 "단 한 가지"도 새로운 것이

없다는 것입니다.

그런데, 여러분이 모두 잘 알고 있다고 말하는 UI들, 또는 자주 보게 되는 패턴들에 대해 통일된 용어가 없습니다.

이 책의 장점은 작업하면서 자주 보게 되는 UI나 패턴들에 대한 명확하고, 체계적인 정리에 있습니다.

따라서, 디자이너, UI기획을 하시는 분들에게 유용하며, 본의 아니게 UI 설계를 함께하는 개발자나 디자이너에게 유용합니다.


이 책을 통해 얻을 수 있는 한 가지 장점은 UI 분야에서 쓰이는 패턴 언어의 획득입니다. 국내에서 UI 기획자나 디자이너들은

패턴 언어에 익숙하지 않습니다. 저마다 쓰는 표현이 다릅니다.

예를 들어, 본문 중에 흥미있는 키워드들은 링크를 갖고 있습니다. 사용자가 예상하지 못한 곳에 링크를 두어,

사용자의 호기심을 끄는 방법입니다. 온라인 백과 사전에서는 이런 방법이 흔히 쓰입니다.

국내에서는 이를 어떤 용어로 표현할까요?? 제가 아는 걸로는 "본문 링크" 정도지만, 회사마다 쓰이는 용어가 다를겁니다.

원어로는 "intriguing branches"라고 합니다. 사용자의 관심을 다른 곳(branches)으로 이끄는 방법이라는 의미입니다.

intrigue라는 표현 자체가 "어떤 것에 대한 흥미를 이끌어내다"라는 뜻입니다.

일종의 통일된 용어, 패턴 언어를 습득한다면, 다른 사람에게 "이 화면에는 XXX를 이용하는 것이 좋겠어요"라고 얘기하는 것으로

충분합니다. 대화가 간결해지고, 커뮤니케이션 비용도 낮출 수 있습니다. 이것이 패턴 언어의 힘입니다.

자신이 아무리 많은 지식을 알고 있다고 해도 이를 다른 사람에게 전달할 수 없다면 의미가 없습니다.

많은 사람들이 패턴 언어를 익히기 위해 노력하는 것도 이 때문입니다. 패턴 언어는 건축학에서 시작해서, 컴퓨터 공학에

전파되었고, 이제는 UI를 비롯한 다른 많은 분야에 패턴 언어가 전파되고 있습니다.


위 예에서 한 가지 알 수 있는 이 책의 단점은 또 있습니다.

번역에 급급하여 용어 선택에 대한 진지한 고민이 없습니다. 원어 표현을 그대로 한글로 적어두는 것도 좋습니다.

"intriguing branches"를 "인트리깅 브랜치"로 적어두는 것도 좋습니다.

그러나, 페이지의 남는 공간에 한글 용어에 대한 고민이 있었으면 더 좋았을거라는 생각이 듭니다.

물론, 겉멋만 잔뜩 들어서 영어를 요란하게 섞어쓰는 UI 기획자들을 알고 있습니다만,

그래도 "키워드 링크, 본문 링크" 등의 표현이 있다라든가 하는 말도 있었으면 더 좋았을 겁니다.

현업에서의 괴리감을 느끼는 부분입니다.


또 하나, 이 책에 나오는 패턴들을 모두 외워두고, 소프트웨어나 웹 사이트의 화면 설계를 보면서

각각의 패턴들을 지적해보면 좋겠습니다. 저 같은 개발자는 이런 용어들을 토대로 떠들면서

실력없는 UI 기획자를 깔아뭉개는 용도로 사용하겠습니다.(덕분에 대부분의 패턴 용어들이 쏙쏙 외워지더군요)

UI 기획자가 화면과 자신이 원하는 것을 한참 설명하고 나면,

"아, 그러니까 이 부분은 extras on demand를 하자는 것이고, 이쪽의 네비게이션은 sequence map,

콘텐트 페이지의 네비게이션은 bread crumbs을 쓰고, 탭 패널 네비게이션에서는 color-coded sections를 하자는 거군요!"

라고 답해드리겠습니다.


UI에서 디자인 패턴을 사용하기 위한 시도는 꽤 있습니다. 그 중에는 YUI(Yahoo! UI Library)가 있습니다.
(http://developer.yahoo.com/yui/)

color-coded sections는 색상을 이용해서 섹션이나 페이지를 구분하는 방법으로 아마존(http://www.amazon.com)이

이를 처음 시도하면서 당시에 많이 언급되었습니다.

Tab View 패턴은 애플(http://www.apple.com)에서 시도하면서 많이 알려졌습니다.

물론, Tab View와 Tab Panel은 전혀 다릅니다. 다른 UI 패턴입니다. 


이 책은 breadcrumb을 "브레드크럽"으로 옮겼습니다. 오역(?)입니다. "브레드크럼"이 맞습니다.

Tomb에서 "mb"에서 b는 묵음이 됩니다. 그래서 "툼"입니다. Tomb Raider

영어 단어는 자음이 2개가 붙어있는 경우 뒤의 자음이 묵음이 됩니다.

자음이 3개가 되면 가운데 자음이 묵음이 됩니다. 예를 들어, COSTCO 같은 경우 STC에서 T가 묵음이 되어 "코스코"로

발음합니다. 한국에 사는 외국인은 "코스트코"로 발음해도 알아듣습니다.(한국에 온지 얼마 안된 분들은 빼고)


이 책은 UI 전반에 대한 것으로 반드시 웹에 대한 것만 다루지 않는다는 것도 알았으면 합니다.


일단 응용프로그램의 UI 설계와 웹 사이트 UI 설계는 공통된 부분도 있지만 다른 부분도 있습니다.

웹의 근본인 하이퍼링크가 설계를 어렵게 하는 주범이기 때문입니다. 정보 구조(information architecture) 설계가

어려운 것도 이 때문입니다. 기존의 수직적인 설계는 하이퍼링크에 의해 단번에 무너질 수 있고, 그로인해

사용자의 머리속에 만들어지는 인지 과정, 정보 구조가 실제 설계자가 원했던 또는 인지하길 원했던 정보 구조와는

판이하게 다른 것일 수도 있습니다.


이 책은 다음과 같은 분들에게 추천합니다.

1. UI 분야의 패턴 언어 습득을 통해 패턴 언어를 구사하길 원하시는 분.

  부수적으로 당신은 보다 더 스마트해 보일 수 있습니다.

2. 디자인팀이나 UI 기획자가 무시하지 못하는 개발자가 되기.

  부수적으로 디자이너를 울릴 수 있습니다.(악마!!)

3. 응용프로그램이나 웹 사이트를 개발하면서 UI 문제로 늘 고민하는 디자이너/개발자.

4. 일반 산업용 제품 개발을 하지만, 접목시킬 아이디어가 없을까 궁금해하는 분.


그러나, 아트를 하는 분들에겐 아무 도움이 되지 않습니다.(뼈있는 한 마디!)