[1과목-2장-012] UI 설계 도구

사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구

- 용도: 요구사항이 실제 구현되었을 때 화면은 어떻게 구성되는지, 어떤 방식으로 수행되는지 등을 기획단계에서 미리 보여주기 위함

 

* 종류

1) 와이어프레임

: 기획 단계의 초기에 제작

: 페이지에 대한 개략적인 레이아웃 or UI 요소 등에 대한 뼈대를 설계하는 단계

- 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계

- 개발자, 디자이너 등이 레이아웃 협의 or 현재 진행 상태 등을 공유하기 위해 사용

- 툴: 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

 

2) 목업(Mockup)

: 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형

- 실제로 구현 X

- 툴: 파워 목업, 발사믹 목업 등

 

3) 스토리보드

: 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서

- 디자이너, 개발자가 최종적으로 참고하는 작업 지침서

- 상단, 우측) 제목, 작성자 등을 입력

- 좌측) UI 화면

- 우측) 디스크립션 기입

** 디스크립션: 화면에 대한 설명, 전반적 로직, 분기처리, 예외처리 등을 작성하는 부분

- 툴: 파워포인트, 키노트, 스케치, Axure 등

 

4) 프로토타입

: 와이어프레임 or 스토리보드 등에 인터렉션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형

- 서비스 이해를 위해 작성하는 샘플

- 작성 방법에 따라) 페이퍼 프로토타입 / 디지털 프로토타입

- 툴: HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

 

** 인터렉션: UI를 통해 시스템을 사용하는 일련의 상호 작용

 

5) 유스케이스

: 사용자 특면에서의 요구사항

: 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술

- 요구사항을 빠르게 파악함 > 프로젝트 초기에 시스템의 기능적인 요구를 결정, 그 결정을 문서화 가능

- 다이어그램 형식으로 묘사

- 유스케이스 다이어그램 완성 시, 각각 유스케이스에 대해 유스케이스 명세서 작성