(질문의 배경)

기존에 많이 보급된 게임 방식에 약간의 아이템을 넣어서 게임 어플을 개발하고 싶다. 디자인 개발업체에서 UI(User Interface)에 대해서 고민해야 한다고 하는데 UI는 도대체 무엇인가?

(☞개요)

이 질문에 답변은 사실 디자인의 핵심 연구영역(Design R&D)에 대한 패러다임의 변화부터 설명하는 것이 답변의 시작이라고 생각한다. 디자인도 고정되어져 있는 것이 아니라 디자인의 대상의 혁신과 진화에 따라서 디자인의 핵심 연구영역(Design R&D)도 달라지고 있다. 과거 IT 기술의 출발에서부터 미래까지 한분에 알 수 있듯이 최근 IT 기술과 함께 인터렉션 디자인(Interaction Design)에 대한 연구가 전 세계적으로 진행 중에 있다. 과거 'Wood Box'나 'Plastic Box'의 하드웨어 위주의 사용성이나 편리성은 현재 'White Box'에서도 중요하지만 하드웨어가 아니라 소프트웨어의 영역에 대한 디자인의 가치가 높아지고 있다. 따라서 하드웨어와 소프트웨어의 융합형 디자인을 총체적으로 수행하기 위해서 UI 디자인은 가장 중요한 영역이 되었다. 특히 UI 디자인은 기기나 제품의 시스템에 있어서도 화면 디자인은 올바른 사용방식과 운용 그리고 IT 시대의 디자인 컨텐츠의 중심어라고 할 수 있다.

(☞도널드 노먼 교수(Prof. Don Norman)의 인지심리학)

이러한 UI 디자인과 관련해서 세계적인 학자는 도널드 노먼 교수(Prof. Don Norman)로 우리나라에서는 감성디자인(Emotional Design)과 디자인과 인간심리(The Design of Everyday Things)로 유명하다. 그는 멘탈 모델로 디자인에서 "인지(cognition)", "논증, 추론(reasoning)", "의사결정(decision-making)＂이 중요한 역할을 한다고 주장하고 있으며 현재 디자이너들은 사용자가 복잡한 것을 이해하기 쉽게 하는 기표를 디자인해야 한다고 강조하고 있다.

(☞UI 디자인의 요소-어포던스(affordane))

어포던스는 의미적으로 ‘행위유발체’라는 원어적인 뜻처럼 사용자가 조작이전에 이미 기기나 제품의 작동결과가 무엇인지를 단번에 예측할 수 있다. 인지심리학적으로는 이렇게 조작하면 어떻게 될 것이라는 기대감과 함께 일반인들은 형태 조형의 단서나 실마리를 의미한다. 즉, 사물이나 소프트웨어의 아이콘들은 그 형태나 모양이 사용자가 원하는 작동의 기대치를 확인할 수 있도록 디자인은 기본적인 정보를 제공해야 한다는 것이다. 어포던스에는 총 4가지가 있는데 공간적인 위치에 관한 어포던스, 조작하는 방법에 관한 어포던스, 목적기능 어포던스, 반응적 측면의 어포던스가 있다.

(☞UI 디자인의 요소-매핑(mapping))

원래의 어원적인 뜻은 ‘관계’를 의미하는데 여기서는 사용자의 조작과 그 결과에 대한 시스템적인 반응을 의미한다. 따라서 사용자가 자연스럽게 매핑(natural mapping)을 유도하여 잘못이나 실수 그리고 오동작이 없도락 해야 한다는 것이다. 즉, 어포던스와 마찬가지로 매핑은 한 가지 조작이 어떤 결과를 초래할지에 대해 미리 예측할 수 있는지에 대한 여부를 의미한다. 매핑에는 형태적 유추(morphological analogy)와 공간적 유추(spatial analogy)가 있다. 그러나 IT제품에서의 UI 디자인에서의 매핑은 형태적 매핑, 공간적 매핑, 색채매핑, 관습적 혹은 문화적 매핑으로 분류된다.

(☞UI 디자인의 요소-가시성(visibility), 제약(contraints))

제품이나 기기의 조작방법이나 사용방법에 대한 시각적인 개념용어로 여기서는 제품이나 시스템, 화면 등의 상태를 사용자가 얼마나 쉽고 빠르게 시각적으로 이해할 수 있는 것을 의미한다. 가시성에는 제품(시스템)의 조작 방법에 대한 가시성, 조작 결과 제품에서 나타나는 반응(feedback)에 대한 가시성, 제품의 현 상태에 대한 가시성으로 분류된다.

사용자들이 자주 실수하거나 오동작을 할 경우 예측할 수 없는 문제가 발생할 수 있는 것들을 미리 설계상에서 제약을 통해서 미리 예방하고 방지하는 것이다. 즉, 오조작의 가능성을 방지함으로써 제품이나 기기가 오동작이 발생하여 문제를 일으키기 이전에 제약을 통해서 올바른 사용 방법을 취하도록 유도하는 것을 의미한다. 제약에는 네 가지 방법으로 물리적 제약(physical constraints), 의미적 제약(semantic constraints), 문화적 제약(cultural constraints), 논리적제약(logical constraints)이 있다.

Tip

1. 만져볼 수 있는 인터페이스(Tangible User Interfaces: TUI)는 물리적 객체, 도구, 표면, 고유영역 등을 사용하는 인터페이스로 메타 데스크(Meta Desk)시스템을 사용하기 위해 개발됨. 메타데스크 시스템은 아직 2차원적인 평면을 기점으로 하고 있음. 만약 모든 사물들이 만져볼 수 있는 TUI를 개발한다면 이는 기존의 GUI를 대체하는 획기적인 디지털 미디어의 산업혁명을 예고하고 있음. 현재 제스쳐 인터페이스(Gesture interface)로 발전하고 있음.
2. ‘Mobile Patterns’이라는 사이트는 스마트폰과 관련 웹이나 어플의 화면설계을 위한 디자인 소스를 제공해주는 사이트로 UI 컨텐츠의 패턴별로 분류하여 한눈에 비교분석할 수 있는 사이트로 관련 소스가 풍부함. (http://www.mobile-patterns.com/)

<참고자료·문헌>

1. http://www.dubberly.com/articles/learning-curves-for-design.html

휴 듀벌리(Hugh Dubberly)의 디자인을 위한 학습곡선(Learning Curves for Design,

2008년)은 디자인의 대상이 어떻게 진화하고 혁신하는 것에 따른 디자인의 핵심

연구개발.

2. http://www.interaction-design.org/encyclopedia/mental_models_glossary.html

인터렉션 디자인을 설명하기 위한 멘탈모델에 대한 학문적인 설명을 소개하고 있음. 도널드 노먼 교수(Don Norman) 인지심리학적 개념도 잘 설명해 주고 있음.

3. http://www.kimdirector.co.kr/bbs/view.php?id=DesignInspiration&no=42

위에 사이트에 소개하고 있는 모바일 UI 디자인 컨셉트들은 매우 뛰어난 디자인들이며, UI 디자인을 위한 영감을 얻을 때 많은 도움과 가치가 있음.

<전문용어>

가시성(visibility), 어포던스(affordane), 매핑(mapping), 감성디자인(Emotional Design), 인간심리(The Design of Everyday Things)