UI 흐름 설계는 업무의 흐름이나 업무 수행과 관련된 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동이다.
1. UI 설계서 구성
-
UI 설계서 표지
-
UI 설계서 개정 이력
-
UI 요구사항 정의
-
시스템 구조
-
사이트 맵
-
프로세스 정의
-
화면 설계
2. UI 흐름 설계 수행 절차
(1) UI 설계안의 적정성 확인
-
실행 차를 줄이기 위한 UI 설계 원리
- 사용 의도 파악
- 행위 순서 규정
- 행위 순서대로 실행
-
평가 차를 줄이기 위한 UI 설계 원리
- 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도(적절한 포인터 형태)
- 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
- 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도
(2) 화면과 폼의 흐름 설계
-
화면에 표현되어야 할 기능 및 비기능적 요구사항 검토
-
화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인
(전체 시스템 요구사항에 대한 유스케이스 분석을 통해 UI에 대한 요구사항을 도출해내는 단계) -
유스케이스 설계
(도출된 UI 요구사항에 따라 UI에 포커싱된 유스케이스를 설계하는 단계) -
기능 및 양식 확인
(Input Box, Combo Box, Radio Box, Check Box 등을 확인하고 규칙을 정의)
3. UI 상세 설계
UI 설계 시안을 토대로 실제 설계 및 구현을 위해 모든 화면에 대한 UI 상세 설계 단계를 진행한다.
3-1. UI 상세 설계 프로세스
(1) UI 요구사항 최종 확인
(2) UI 구조 설계
(3) 사용자 기반 메뉴 구조 설계
- 사이트맵 구조 설계
(4) 화면 설계
- 화면별로 필요한 화면 내용 설계
(5) 하위 시스템 단위의 내외부 상세 화면과 폼 설계
3-2. UI 검토 및 보완
-
UI 검토 수행
-
UI 검토 보완
-
사용성 검토 및 검증 수행
3-3. UI 시나리오 문서의 작성 요건
-
완전성: 누락 없이 상세하게 기술, 사용자의 태스크에 초점을 맞춰 기술
-
일관성: 요구사항과 문서의 UI 스타일을 일관적으로 구성
-
이해성: 이해하기 쉽도록 설명
-
가독성: 쉽게 읽을 수 있어야 하고, 표준화된 템플릿을 작성하여 적용
-
추적 용이성: 쉽게 추적 가능하고, 변경 사항들이 언제 어디서 어떤 부분이 왜 발생했는지 추적이 쉬워야 함
-
수정 용이성: 수정 또는 개선 사항을 쉽게 적용할 수 있어야 함
4. UI 설계 도구
사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구
- UI 설계 도구는 분석, 설계 및 구현 부분을 지원한다.
4-1. 화면 설계 도구
- 파워 목업: 파워포인트에 추가 메뉴를 설치해 목업 기능을 지원하는 툴
- 발사믹 목업: 스케치한 느낌으로 빠르게 서비스 콘셉트를 전달하는 목업 도구
- 카카오 오븐: 카카오에서 제작한 온라인 프로토타이핑 도구
4-2. 프로토타이핑 도구
- UX핀: 웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구
- 액슈어: UI 설계보다는 스토리보드에 포함되는 정책, 플로우 차트, 디스크립션까지 모두 작성 가능한 도구
- 네이버 프로토나우: 네이버에서 만든 프로토타이핑 툴
4-3. UI 디자인 도구
- 스케치: 다양한 목업 & 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구
- Adobe XD: UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스를 제공하는 도구
4-4. UI 디자인 산출물로 작업하는 프로토타이핑 도구
- 인비전: 포토샵, 스케치 등으로 작업한 결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용이 가능한 도구
- 픽사에이트: 구글이 인수한 프로토타이핑 툴, 모바일 앱 프로토타이핑에 최적화
- 프레이머: 커피 스크립트 언어를 사용하는 코드 기반의 프로토타이핑 도구
