UI 흐름 설계
- 업무의 흐름이나 업무 수행과 관련된 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동
UI 설계서 구성
- UI 설계서 표지 : 프로젝트명 또는 시스템 명
- UI 설계서 개정 이력 : 설계서 버전 이력
- UI 요구사항 정의 : UI 요구사항들을 재확인하고 정리
- 시스템 구조
: UI 프로토타입 재확인 / UI 요구사항들과 UI 프로토타입에 기초해 UI 시스템 구조 설계- 사이트 맵(Site Map)
UI 시스템 구조의 내용을 사이트 맵의 형태로 작성
사이트 맵 상세 내용을 표 형태로 작성- 프로세스 정의
사용자 관점에서 요구되는 프로세스들을 진행되는 순서에 맞추어 정리- 화면 설계
UI 프로토타입과 UI 프로세서 정의를 참고해 각 페이지별로 필요한 화면 설계
각 화면별로 구분되도록 각 화면별 고유 ID를 부여 별도의 표지 페이지 작성
각 화면별로 필요한 화면 내용 설계UI 흐름 설계 수행 절차
- UI 설계안의 적정성 확인,
화면에 표현되어야 할 기능 및 비기능적 요구사항 검토,
화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인
UI 유스케이스 설계
기능 및 양식 확인
UI 유스케이스 설계
- 기능에 관한 사용 사례를 바탕으로 PPT 또는 한글 프로그램을 사용하여 UI 유스케이스 설계를 수행한다.
유스케이스 설계
- UI 요구사항을 바탕으로 액터별 시나리오 구상
-> 각각의 액터가 어떤 행위를 하는지 작성함.- UI 요구사항을 바탕으로 액터 세분화
-> 액터의 상호작용을 생각하고 비슷한 행위를 하는 액터를 그룹으로 지정하여 부모 액터 정의UI 유스케이스 설계
- 각 입력 요소들의 형태와 입력 방법 구상
- 각 화면 요소들의 배치 구상
- 각 요소들 설계
유스케이스
- 시스템이 액터에게 제공해야하는 기능으로,
시스템 요구사항이자, 사용자 입장에서 바라본 시스템의 기능이다.
UI 상세설계
- UI 상세설계 프로세스
-> UI 설계 시안을 토대로, 실제 설계 및 구현을 위해서 모든 화면에 대한 UI 상세설계 단계를 진행
-> UI 상세설계 프로세스는
1) UI 요구사항 최종 확인
2) UI 구조 설계
3) 사용자 기반 메뉴 구조 설계
4) 화면 설계
5) 하위 시스템 단위의 내, 외부 상세 화면과 폼 설계
순으로 되어있다.
- UI 검토 및 보완
- UI 검토 수행
사용성의 반복적인 검토를 통해 완성도가 높은 UI 상세설계 수행이 가능하므로, UI 검토를 2~3번 수행
UI 스토리보드 활용을 통해, 페이퍼 프로토타입의 평가는 짧은 단위로 개발 및 평가를 반복하여 확인
- UI 검토 보완
UI 검토 수행을 통한 사용자 평가 결과를 토대로 설계를 보완
- 사용성 검토 및 검증 수행
고수준의 프로토타입을 활용하여 내부 개발자 및 전문가들의 UI 사용성 평가를 통해 개선 사항을 지속적으로 반영UI 시나리오 문서의 작성 요건
- 완전성
UI 시나리오는 누락이 없어야 하고, 최대한 빠짐없이 가능한 한 상세하게 기술
시스템의 기능보다, 사용자의 테스크에 초점을 맞추어 기술- 일관성
서비스에 대한 목표, 시스템 및 사용자의 요구사항이 일관성이 있어야 하고, 모든 문서의 UI 스타일을 일관적으로 구성- 이해성
처음 접하는 사람도 이해하기 쉽도록 구성하고 설명해야 하고, 이해하지 못하는 추상적인 표현이나 이해하기 어려운 용어는 사용하지 않아야 함.- 가독성
문서를 쉽게 읽을 수 있어야 하고, 표준화된 템플릿을 작성하여 적용
버전의 넘버링은 v1.0 , v2.0 과 같이 일관성 있게 하고, 시각적인 효과를 위한 하이라이팅은 일관성 있게 사용- 추적 용이성
쉽게 추적이 가능해야 하고, 변경 사항들이 언제, 어디서, 어떤 부분들이, 왜 발생하였는지 추적이 쉬워야 함.- 수정 용이성
쉽게 변경이 가능해야 하고, 수정 또는 개선 사항을 시나리오에 반영하는 데 있어 쉽게 적용할 수 있어야 함.
동일한 수정 사항을 위해 여러 문서를 편집하지 않도록 함.
UI 설계 도구
- 사용자와 시스템 사이에 의사소통할 수 있도록
일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구UI 개발 단계별 활용 가능한 설계 도구
- 일반적인 UI 개발 프로세스는
분석 - 설계 - 구현의 절차를 거쳐 요구사항에 부합하는 화면의 구현으로 이루어짐.- UI 설계 도구는 분석, 설계 및 구현 부분을 지원한다.
UI 설계 도구의 유형
- UI 구현 절차에 따라,
기획단계에서
화면 UI 설계 및 인터렉션 적용에 적합한 도구와
설계 작업 이후
이미 설계된 이미지의 인터랙션 적용에 적합한 도구로 구분 가능화면 설계 도구
- 파워 목업(Power Mockup)
-> 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴
-> 미리 제작해놓은 레이아웃, 컴포넌트, 네비게이션 등 다양한 목업을 드래그해서 사용할 수 있음.발사믹 목업
- 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구
- 디테일한 화면 구성보다는 간단한 스케치에 활용
카카오 오븐
- 카카오에서 제작한 온라인 프로토타이핑 도구
- 직관적인 인터페이스가 장점으로,
처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고,
온라인으로 제작한 화면을 QR코드 및 단축 URL을 통해 공유프로토타이핑 도구
- UX핀 ( UXPin )
웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업을 동시에할 수 있는 도구
구글 글라스에 포함한 다양한 디바이스 환경에 맞추어 설계가 가능하며, 다양한 목업 지원 가능- 액슈어( AXURE )
UI 설계보다는 스토리보드에 포함되는 정책, 플로 차트, 디스크립션까지 모두 작성 가능한 도구- 네이버 프로토나우(ProtoNOW)
네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로 차트 등의 기능 지원 가능 도구UI 디자인 도구
- 스케치(Sketch)
다양한 목업 & 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구- 어도비 익스피어런스 디자인 CC( Adobe XD )
UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스를 제공하는 도구
포토샵 일러스트와 연동 지원UI 디자인 산출물로 작업하는 프로토타이핑 도구
- 인비전
포토샵, 스케치 등으로 디자이너가 작업한 작업 결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터렉션 적용이 가능한 도구- 픽사에이트
2015년 구글이 인수한 프로토타이핑 툴로, 현재 아마존, 애플, 페이스북, 구글 등 다양한 회사에서 사용
모바일 앱 프로토타이핑에 최적화되어 있고, 디테일한 인터렉션을 설정할 수 있는 도구- 프레이머
커피 스크립트(Coffee Script)라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 도구
코드 기반으로 작동되어 실제 작업물과 흡사하게 작동
