UI 설계 도구

와이어프레임 예시

 

1) 와이어프레임

 

- 페이지에 대한 개략적인 레이아웃이나 뼈대를 설계하는 도구

- 기획 단계의 초기에 제작

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

 

 

 

 

2) 목업

 

- 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형

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

 

 

 

 

3) 스토리보드

 

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

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

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

 

 

 

 

4) 프로토타입

 

- 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형

- 페이퍼 프로토타입  : 스케치, 그림, 글 등 손으로 작성하는 아날로그 방법

- 디지털 프로토타입  : 파워포인트, 아크로뱃, 비지오, 옴니그래플 등 프로그램을 사용하는 방법

 

 

 

 

5) 유스케이스

 

- 사용자의 요구사항을 기능 단위로 표현하는 것

- 요구사항을 빠르게 파악하기위한 용도

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