12. UI 설계 도구

[ SECTION 12. UI 설계 도구 ]

➡ 사용자의 요구사항에 맞게 UI의 화면구조, 화면배치를 설계할 때 사용하는 도구

종류: 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등

 

Ⅰ. 와이어프레임(Wireframe)

• 기획 단계의 초기에 제작
• 페이지에 대한(화면단위로) 대략적인 레이아웃, UI요소의 뼈대를 설계
• 개발자나 디자이너가 레이아웃을 협의, 진행상황을 공유하기 위해서 사용
• ex) 손그림, 파워포인트, 포토샵

Ⅱ. 목업(Mockup)

• 디자인, 사용방법 설명, 평가를 위해 와이어프레임보다 실제화면에 가깝게 만든 정적인 형태의 모형
• ex) 하워 목업, 발사믹 목업

Ⅲ. 스토리보드(Story Board)

• 와이어프레임+콘텐츠 설명, 페이지간 이동 흐름
• 설명을 세부적으로 적어둬야 참고할 때 좋음
• 화면 단위로 전개될 가상 경로를 예상해 기획
• 화면 설계도이며 구체적인 작업 지침서 역할
• ex) 파워포인트, 키노트, 스케치, Axure

Ⅳ. 프로토타입(Prototype)

• 기존의 설계(와이어프레임, 스토리보드)+인터렉션
• 인터렉션: UI를 통해 시스템을 사용하는 일련의 상호작용
• 실제 구현된 것처럼 테스트가 가능한 동적인 형태
• ex) HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐

Ⅴ. 유스케이스(Use Case)

• 사용자의 요구사항(자연어)을 다이어그램 형식(구조적)으로 완성, 각각의 다이어그램에 대한 유스케이스 명세서 작성

[ pg.72- 오답노트 ]

1. 목업은 와이어프레임의 내용에 디스크립션을 추가한 문서이다. (X)  -> 스토리보드
2. 유스케이스는 와이어프레임에 인터랙션을 적용한 모형이다. (X)  -> 프로토타입