1-9. UI 설계

CHAPTER 4. 화면 설계Section 1. UI 설계

1. UI (User Interface) 개념

⑴ UI 개념

- 컴퓨터, 웹 사이트, 시스템 등의 정보기기와 사용자가 서로 상호작용을 할 수 있도록 연결해주는 매개체
- 디스플레이 화면, 아이콘, 검색창, 키보드, 문자, 색상, 폰트 등의 여러 요소들이 포함
- UI의 핵심은 특별한 설명이 없이, 사용자 누구나 알아보기 쉽고, 편리하게 이용할 수 있도록 만든 보편적이고 직관적인 디자인 이어야 함

⑵ UX (User eXperience) 개념

- 사용자가 컴퓨터, 웹 사이트, 시스템 등 정보기기의 UI를 직/간접적으로 이용하여 경험한 모든 것
- 모바일 화면에 대한 사용자의 경험, 포장박스를 개봉할 때의 느낌, 디바이스 인터페이스를 사용하며 느끼는 만족감이나 불편함 등 사용할 때의 모든 행동, 느낌, 감정 등이 UX에 포함
- 사용자들의 경험을 분석하여 사용자의 불만족을 최소화하고, 보다 편리하게 이용할 수 있도록 디자인
- UI를 기반으로 사용자들의 공감과 만족을 이끌어내는 역할이 UX

⑶ UI 유형

■ CLI (Command Line Interface)
- 사용자가 컴퓨터 자판을 이용해 명령을 입력하여 컴퓨터를 조작하는 시스템
■ GUI (Graphical User Interface)
- 그래픽과 텍스트로 이루어져 있어, 사용자의 입력이나 출력이 마우스 등을 통해 이루어짐
■ AUI (Auditory User Interface)
- 보다 나은 사용자 경험을 제공하기 위해 만들어진 임베디드 사운드
■ NUI (Natural User Interface)
- 특별한 하드웨어 없이 인간의 자연스러운 움직임을 인식하여 정보를 제공

2. UI 설계

⑴ UI 요구사항 구분

① 기능적 요구사항
Ÿ 시스템이 제공해야 하는 기능에 대한 요구사항
Ÿ 입력, 출력, 데이터, 연산에 관한 요구사항
② 비기능적 요구사항
Ÿ 사용성, 효율성, 신뢰성, 유지 보수성, 재사용성 등 품질에 관한 요구사항
Ÿ 플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항
Ÿ 비용, 일정 등 프로젝트 계획에 관한 요구사항

⑵ UI 설계 절차

① UI 개발목표 및 범위 수립
- 해당 프로젝트의 UI 부분의 목표와 범위에 대한 계획을 수립하는 단계
- 프로젝트 계획 전반에 UI 계획을 반영한다.
- 이해 당사자의 UI 요구 사항을 조사하고, 정의한다.
- UI 트렌드 및 해당 서비스의 사용자를 분석한다.
② UI 전략 수립
- 서비스를 사용할 사용자 조사 및 시장 조사를 통해 UI, UX 전략을 수립하는 단계
- 기술적 관점에서도 전략을 수립한다.
③ 사용자 요구사항 분석
- 사용자 조사 결과를 기반으로 사용자 요구사항을 추출하고 선별하여 요구사항을 분석하는 단계
- 프로토타입(Prototype)을 제작
④ UI 상세 설계
- UI 기능에 대한 구조와 화면 간의 상호 흐름, 예외 처리 등의 UI 전반에 걸친 설계를 하는 단계
⑤ 구현
- HTML5, CSS3, JavaScript 등의 언어들로 구현하는 단계
⑥ 테스트
- 소프트웨어의 사용성을 검증하는 단계

⑶ UI 설계 원칙

■ 직관성
- 누구나 쉽게 이해하고 사용할 수 있어야 한다.
■ 유효성
- 사용자의 목적을 정확하게 달성해야 한다.
■ 학습성
- 누구나 쉽게 배우고 익힐 수 있어야 한다.
■ 유연성
- 사용자의 요구사항을 최대한 수용하며, 오류를 최소화해야 한다.

⑷ UI 설계 도구

① 와이어프레임(Wireframe)
■ 와이어프레임의 개념
- 선(Wire)으로 틀(Frame)을 잡는다는 뜻
- 화면 단위의 레이아웃을 설계하는 작업
- 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사
- 와이어프레임에는 내용, 구조, 흐름, 기능 등이 포함
- 제작 방법에 제한은 없지만, 실무에서는 손그림이나 파워포인트로 작성

② 스토리보드
- 개발 후 완성된 콘텐츠의 최종 결과를 예상할 수 있는 기초 문서
- 디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서
- 정책, 프로세스 및 콘텐츠 구성, 와이어 프레임, 기능 정의 등 서비스 구축을 위한 대부분의 정보가 수록
- 스토리보드 작성 절차
표지
- 프로젝트명, 문서버전, 최종업데이트 일자, 작성자 등을 작성한다.

문서의 버전
- 변경된 문서버전, 변경일, 변경된 내용, 작성자 등이 포함된다.

Index 작성
- 스토리보드를 빠르게 찾아갈 수 있는 차례를 작성한다.

IA(Information Architecture) 작성
- 소프트웨어의 사이트 맵을 작성한다.
- 스토리보드 전반에서 사용될 공통 모듈을 작성한다.

공통모듈 작성
- 웹의 경우 기본 구성화면 (Header, Footer, GNB, LNB 등) 등의 내용을 공통
모듈 정의서로 작성한다.

화면설계와 description 작성
- 실제로 구현될 화면을 설계한다.
- 해당 화면에서 설명이 필요한 부분에 넘버링을 하고, 설명을 따로 적어둔다.

- 스토리보드 작성 예시

③ 프로토타입
- 프로토타입은 실제 서비스와 흡사한 모형을 만드는 작업
- 와이어프레임이나, 스토리보드에 인터랙션(동적효과)을 적용함으로써 실제 구현된 것처럼 시뮬레이션 할 수 있다.
- 실제 개발하는 것보다 단시간에 구현이 가능하기 때문에 사용자 경험에 대한 테스트를 진행할 수 있다.

④ 목업(Mockup)
- 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
- 시간적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않는다

⑤ 유스케이스(Use Case)
- 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한다

3. 감성공학

⑴ 감성공학의 개념

- 인간의 심상을 구체적인 물리적 설계 요소로 번역하여 이를 실현하는 기술
- 인간의 감성과 이미지를 물리적인 디자인 요소로 해석하여 구체적 제품으로 만들어내는 공학적 접근 방법
- 감성공학 = 이미지 파악(심리학) + 형상화(인간공학) + 구체적인 제품 생산(생산공학)
- 요소화 → 형상화 → 구현 → 생산

⑵ 제품과 관련된 인간의 감성

■ 감각적 감성
- 제품에 관하여 사용자가 느끼는 감성, 제품의 외관, 색상, 디자인에 관련된 것
■ 기능적 감성
- 제품의 성능과 사용시 편리함에 대한 것
■ 문화적 감성
- 개인이 속한 사회나 문화에 관련된 것

⑶ 감성공학의 접근 방법

■ 1류 접근 방법
- 의미 미분법
- 인간의 감성을 표현하는 어휘를 이용하여 제품에 대한 이미지를 조사하고, 그 분석을 통해 제품 디자인 요소
연계
■ 2류 접근 방법
- 문화적 감성의 일부를 반영한 개념
- 1류와 기본틀은 같으나, 감성어휘 수집의 전 단계에서 평가자들의 생활 양식을 고려하는 것이 추가
- 제품에 대한 소비자군의 소속지역, 생활양식, 의식문화가 많은 영향을 미칠 때 사용하는 접근 방법
- 1류와 함께 감성의 심리적 특성을 강조한 접근 방법
■ 3류 접근 방법
- 특정 시제품을 사용하여 감각 척도를 계측하고, 정량화된 값을 환산
- 대상 제품의 물리적 특성에 대한 객관적 지표 연관분석을 통해 제품 설계에 응용
- 인간 감각계측과 이의 활용이 강조된 접근 방법

4. UI 설계 지침

⑴ 한국 HCI 연구회 설계 지침

■ 가시성의 원칙 (Visibility)
- 소프트웨어의 기능을 노출 시켜 최대한 조작이 쉽도록 한다.
■ 조작 결과 예측의 원칙 (Natural Mapping)
- 사용자가 소프트웨어를 조작하여 작동시킨 결과를 조작 부위만 보고도 예측 가능하게 설계 한다.
■ 일관성의 원칙 (Consistency)
- 소프트웨어의 조작방식에 일관성을 제공하여 사용자가 쉽게 기억하고 빠르게 적응할 수 있게 한다.
■ 단순성의 원칙 (Simplicity)
- 소프트웨어의 기능구조를 단순화시켜 조작에 요구되는 노력을 최소화한다.
■ 지식 배분의 원칙 (Knowledge in World & Head)
- 학습하기 쉽고 기억하기 쉽게 설계해야 한다.
■ 조작오류의 원칙 (Design for Error)
- 사용간 발생한 오류를 쉽게 발견하고 수정 또한 쉽게 이루어져야 한다.
■ 제한사항 선택사용의 원칙 (Constraints)
- 소프트웨어를 조작할 때 선택의 여지를 줄여 조작 방법이 명확하도록 유도한다.
■ 표준화의 원칙 (Standardization)
- 소프트웨어의 기능 구조와 디자인을 한 번 학습한 이후 보다 효과적으로 서비스를 사용할 수 있어야 한다.
■ 행동 유도성의 원칙 (Affordance)
- 사용자가 디자인을 보고 기능 및 조작법을 유추할 수 있도록 해야 한다.
■ 접근성의 원칙 (Accessibility)
- 사용자의 성별, 연령등 다양한 계층의 사용자가 받아드릴 수 있는 사용자인터페이스를 구축해야 한다.

 

⑵ 전자정부 웹 사이트 UI·UX 설계 기준

- 사용자에게 필요한 정보와 기능을 제공한다.
- 작업에 소요되는 시간과 단계를 최소화 한다.
- 직관적이고 일관성 있게 만든다.
- 사용자가 원하는 방식으로 이용할 수 있게 만든다.
- 사용자가 실수하지 않게 만든다.
- 모든 유형의 사용자가 이용할 수 있게 만든다.
- 원하는 서비스와 정보를 쉽게 찾을 수 있게 만든다.