UI 구성 요소 제작

UI 구성 요소 제작

• 프로젝트 분석·설계에 따른 사용자 환경을 디자인하고 구조화할 수 있다
• 사용성을 고려하여 시각적 특성에 맞게 콘텐츠를 구성할 수 있다.

UI 제작의 원칙

인터페이스(Interface)란 두 개체가 만나는 접점에서 상호 간의 소통을 위하여 만들어진 매 개체, 즉 소통하는 통로를 의미한다. 특히 사용자와 디지털 기기·디지털 시스템이 상호작 용할 수 있도록 하는 물리적·가상적 매개체를 사용자 인터페이스(UI, User Interface)라고 하는데, 사용자가 디지털 기기·시스템을 조작할 수 있게 하는 ‘입력장치’와 사용자가 입력한 것의 결과를 표시하는 ‘출력장치’로 구성된다. 사용자 인터페이스를 제작하기 위해 고려해야 하는 원칙은 다음과 같다.

 

 

1. 메타포(Metaphor)

메타포는 ‘은유’, ‘비유’를 뜻하는 말로, UI에서의 메타포란 휴지통이 ‘문서 삭제’, 폴더가 ‘문서보관’을 의미하는 것처럼 시스템에서 표현하고자 하는 대상을 사용자의 경 험과 지식에 비겨서 표현하는 유추적 모형을 의미한다. 따라서 UI 제작에 있어서 적절한 메타포를 적용하는 것은 사용자가 시스템이 어떻게 작동하는지 빠르게 파악하는데 도움이 된다.

2. 사용자 조정(User in Control)

사용자가 시스템을 따라가는 것이 아니라 사용자가 주도적으로 시스템을 조정하거나, 조 정하는 것처럼 느끼도록 구성한다.

3. 직접 조작(direct manipulation)

사용자가 시스템을 직접 제어하고 있다는 느낌을 주어야 한다. 예를 들어 모니터에서 파 일을 드래그할 때 그 이동 경로를 자연스럽게 보여 주거나, 화면의 버튼을 클릭할 때 버 튼이 눌린 형태로 변경되는 것이다.

4. 일관성(consistency)

UI의 레이아웃과 조작 방식은 웹 사이트의 메인 페이지와 서브 페이지 뿐만 아니라 유사 한 인터페이스에서 동일하고 일관성 있게 적용해야 한다. 일관성 있는 UI는 메인 페이지 에서 습득한 UI 조작 방식을 서브 페이지에 적용할 수 있으므로 사이트 이용 방법에 대한 학습 시간을 단축할 수 있으며, 사용할 때의 실수와 오동작을 최소화할 수 있다. UI의 일 관성은 사용자에게 신뢰감을 준다.

5. 피드백(feedback)

사용자가 시스템을 조작·제어했을 때 사용자 행위에 대한 결과나 시스템의 반응 등을 컬 러나 소리, 진동과 같은 시각·청각·촉각적 신호로 제공해야 한다. 시스템의 피드백을 통 해 사용자와 시스템의 상호 작용이 형성된다. 메뉴에 마우스를 올리면 색이 바뀌거나 시 스템 조작 과정에서 오류가 발생했을 때 경고음이 울리는 것 등을 예로 들 수 있다.

6. 심성모형(Mental Model)

심성모형이란 특정 시스템의 기능이나 구조, 가치에 대해 사용자가 머릿속에 가지고 있는 모형이자 지식구조로서, 사용자는 과거 경험이나 인지 능력 등을 바탕으로 특정 대상에 대한 심성모형을 가지게 된다. 특정 스마트폰의 통화 버튼이 왼쪽, 거절 버튼이 오른쪽에 위치해 있는 것을 경험한 사용자가 다른 스마트폰의 통화·거절 버튼 역시 동일한 위치에 있을 것이라고 생각하는 것이 그 예이다. 사용자는 처음 보는 시스템을 접했을 때 과거에 사용해보았던 시스템의 경험을 바탕으로 비교, 유추하여 사용하기 때문에 올바른 심성모형을 형을 토대로 UI를 구성하고, 제작해야 한다.

 

7. 내비게이션(Navigation)

내비게이션은 사이트나 시스템 내에서 사용자가 원하는 정보를 쉽게 찾고, 원하는 위치로 빠르게 이동할 수 있도록 도와줄 뿐만 아니라 사용자가 지나온 경로와 현재 위치, 향후 어디로 이동할 수 있는지를 알려준다. 내비게이션의 종류로는 글로벌 내비게이션(Global Navigation)과 로컬 내비게이션(Local Navigation), 검색창(Search), 웹사이트 내에서 페이지 의 경로를 알려주는 브레드 크럼(Bred Crumb) 등이 있다.

8. 외양

정보의 체계적 조직·구성 뿐 아니라 시각적으로도 아름다움을 전달할 수 있어야 한다. 독 단적이거나 과도한 그래픽 사용은 지양하고, 시각적 정보의 양을 알맞게 조절하도록 한다.