728x90
UI 설계서 구성
개념
- UI 설계서 표지, UI 설계서 개정 이력, UI 요구사항 정의, 시스템 구조, 사이트 맵, 프로세스 정의, 화면 설계
UI 설계안의 적정성 확인
- 실행차를 줄이기 위한 UI 설계 원리 : 사용 의도 파악, 행위 순서 규정, 행위 순서대로 실행
- 평가차를 줄이기 위한 UI 설계 원리 : 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도, 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도, 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도
화면과 폼의 흐름 설계
- 화면에 표현되어야 할 기능적 및 비기능적 요구사항 검토
- 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인
- UI 유스케이스 설계
- 기능 및 양식 확인
UI 상세설계 프로세스
- UI 요구사항 최종 확인
- UI 구조 설계
- 사용자 기반 메뉴 구조 설계
- 화면 설계
- 하위 시스템 단위의 내/외부 상세 화면과 폼 설계
UI 검토 및 보완
- UI 검토 수행, UI 검토 보완, 사용성 검토 및 검증 수행
UI 시나리오 문서의 작성 요건
완일이가 추수 - 완전성 / 일관성 / 이해성 / 가독성 / 추적 용이성 / 수정 용이성
UI 설계 도구 개념
- 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구
UI 개발 단계별 활용 가능한 설계 도구
| 프로세스 | 역할 | 도구 | |
| UI 디자이너 | 업무전문가 / 개발자 | ||
| 분석 | - UI 표준설계 | - 화면 프로토타이핑 - 화면 정의 - 보고서 정의 |
- UI 패턴 - UI 모델링 |
| 설계 | - 디자인 시안 제작 - 화면 템플릿 제작 |
- 화면 설계 - 보고서 설계 - 응용 아키텍처 구현 |
- UI 설계 |
| 구현 | - | - 화면 개발 | - 프로토타이핑 툴 |
화면 설계 도구
| 파워 목업 | - 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴 - 파워포인트에서 미리 제작해 놓은 레이아웃, 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용할 수 있음 |
| 발사믹 목업 | - 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구 - 디테일한 화면 구성보다는 간단한 스케치에 활용 |
| 카카오 오븐 | - 카카오에서 제작한 온라인 프로토타이핑 도구 - 직관적인 인터페이스가 장점으로 처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고, 온라인으로 제작한 화면을 QR코드 및 단축 URL을 통해 공유 |
프로토타이핑 도구
| UX핀 | - 웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구 - 구글 글라스에 포함한 다양한 디바이스 환경에 맞추어 설계가 가능하며, 다양한 목업 지원 기가능 |
| 액슈어 | - UI 설계보다는 스토리보드에 포함되는 정책, 플로 차트, 디스크립션까지 모두 작성 가능한 도구 |
| 프로토나우 | - 네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로 차트 등의 기능 지원 가능 도구 |
UI 디자인 도구
| 스케치 | - 다양한 목업 & 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구 |
| Adobe XD | - UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스를 제공하는 도구 - 포토샵, 일러스트와 연동 지원 |
| 인비전 | - 포토샵, 스케치 등으로 디자이너가 작업한 작업 결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용이 가능한 도구 |
| 픽사에이트 | - 2015년 구글이 인수한 프로토타이핑 툴로 현재 아마존, 애플, 페이스북, 구글 등 다양한 회사에서 사용 - 모바일 앱 프로토타이핑에 최적화되어 있고, 디테일한 인터랙션을 설정할 수 있는 도구 |
| 프레이머 | - 커피 스크립트라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 도구 - 코드 기반으로 작동되어 실제 작업물과 흡사하게 작동 |
728x90