[CS BASIC] 사용자 인터페이스(UI, User Interface)의 설계

사용자 인터페이스(UI, User Interface)의 설계 단계

① 문제 정의 : 시스템의 목적과 해결해야할 문제를 정의한다.

② 사용자 모델 정의 : 사용자 특성을 결정하고, 소프트웨 작업 지식 정도에 따라 초보자, 중급자, 숙련자로 구분한다.

③ 작업 분석 : 사용자의 특징을 세분화하고 수행되어야 할 작업을 정의한다.

④ 컴퓨터 오브젝트 및 기능 정의 : 작업 분석을 통하여 어떤 사용자 인터페이스에 표현할지를 정의한다.

⑤ 사용자 인터페이스 정의 : 모니터, 마우스, 키보드, 터치스크린 등 물리적 입-출력 장치 등 상호작용을 위한 오브젝트를 통해 시스템 상태를 명확히 한다.

⑥ 디자인 평가 : 사용자 능력, 지식에 적합한가? 사용자가 사용하기 편리한가? 등의 평가를 의미하며, 사용성 공학을 통하여 사용성 평가를 할 수 있다. 평가 방법론으로 GOMS, Heuristics 등이 있다.

 

*GOMS : 인간이 어떤 행위를 할지 예측하여 그 문제를 해결하는 필요한 소요시간, 학습 시가 등을 평가하기 위한 기법

*Heuristics : 논리적 근거가 아닌 어림 짐작을 통하여 답을 도출해내는 방법

 

UI 상세 설계-시나리오 작성 원칙

• UI 전체적 기능, 작동 방식을 개발자가 쉽게 이애할 수 있도록 구체적으로 작성한다.
• 대표 화면 레이아웃 및 하위 기능을 정의하고 Tree 구조나 Flowchart 표기법을 이용한다.
• 공통 적용이 가능한 UI 요소와 상호작용(Interaction)을 일반적인 규칙으로 정의한다.
• 상호작용의 흐름 및 순서, 분기, 조건, 루프를 명시한다.
• 예외 상황에 관한 사례를 정의하고 UI 시나리오 규칙을 지정한다.
• 기능별 상세 기능 시나리오를 정의하되 UI 일반 규칙을 지킨다.

 

UI의 종류

① GUI(Graphical User Interface) : 마우스로 선택해 작업을 하는 그래픽 환경의 인터페이스

② CLI(Command Line Interface) : 텍스트 형태로 이루어진 인터페이스
③ NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
④ VUI(Voice User Interface) : 사람의 음성으로 기기를 조작하는 인터페이스
⑤ OUI(Organic User Interface) : 모든 사물과 사용자 간의 상호작용을 위한 인터페이스

 

UI 설계 도구

① 와이어 프레임(Wire Frame) : 화면 레이아웃을 선과 도형을 중심으로 대략적으로 작성

② 목업(Mockup) : 시각적인 디자인을 포함하는 것으로 제품의 컨셉을 나타내도록 작성

③ 프로토타입(Prototype) : 사용자가 상호 작용할 수 있는 형태로 구현된 레이아웃 모형

④ 스토리보드(Storyboard) : 정책, 프로세스, 와이어프레임이 모두 포함된 설계 문서

 

와이어 프레임 Wire Frame

• 기획 단계 초기에 작성하며 대략적인 레이아웃과 배치도 등을 그린 것이다.

fig1.0. 와이어 프레임 Wire Frame

 

목업 Mockup

• 제품의 컨셉이나 색깔을 잘 나타낼 수 있도록 디자인적 요소가 가미된 레이아웃 설계도
• 와이어 프레임보다 구체적인 레이아웃 배치와 색상 등이 정해진 설계도

fig1.1. 목업 Mockup

 

 

스토리보드 Storyboard

• UX/UI 구현을 위해 사용자의 작업, 인터페이스 간 상호 작용을 고려하여 시각화한 문서
• 개발자/디자이너와의 의사소통을 돕기 위한 도구이다.
• 완성해야 할 서비스와 예상되는 사용자 경험을 미리볼 수 있다.

 

fig1.2. 스토리보드

 

프로토타입 Prototype

• 도출된 요구사항을 토대로 시제품을 제작하여 만들고자 하는 제품과 비교하여 개발 중에 추가로 필요한 요구사항을 작성하기 위한 모형
• 단순 시각적인 디자인에 나아가 실제 사용자가 간단하게 조작해볼 수 있다는 점에서 상호작용이 가능하다는 특성이 있다.

 

fig1.3. 프로토타입 Prototype

 

감성공학

• 인간의 소망으로 이미지나 감성을 구체적인 제품 설계를 통해 실현하는 공학적 접근 방법
• 인간과 컴퓨터 간의 상호작용(HCI, Human Computer Interaction of Interface) 설계에 인간의 특성, 감성 등의 정량적인 측정과 평가를 통해 설계에 반영하는 기술
• 감각 및 생채 계측, 센서, 생체 제어 기술 등이 적용될 수 있다.
• 감성 공학의 궁극적인 목표는 인간이 쉽고 편리하고 쾌적하게 사용할 수 있는 소프트웨어를 만드는 것이다.

 

HCI(Human Computer Interaction of Interface)

• 인터페이스를 통한 인간과 컴퓨터의 상호작용
• 컴퓨터를 인간이 쉽게 사용할 수 있도록 하여 사용자 경험(UX)를 개선하는데 의의가 있다.