★ 005 화면 설계[UI 설계 도구]

1. UI 설계도구

- 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계 할 때 사용하는 도구. UI설계 도구로 작성된 결과물은 사용자의 요구사항이 구현되었을때, 화면은 어떻게 구성되고, 어떤 방식으로 수행되는지 등을 기획단계에서 미리 보여주기 위한 용도로 사용.

 

2. 와이어프레임(Wireframe)

- 기획 단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI요소 등 뼈대를 설계하는 단계.

- 와이어 프레임을 제작 할때는 각 페이지의 영역구분/콘텐츠/텍스트 배치 등을 화면 단위로 설계

- 개발자나 디자이너 등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위한 용도로 와이어 프레임을 사용.

ex) 손그림/ppt/키노트/스케치/일러스트/포토샵 등

 

3. 목업(MockUp)

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

- 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않음.

ex) 파워 목업/발사믹 목업 등

 

4. 스토리보드(Story Board)

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

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

- 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 정보가 있음.

- 상단이나 우측에 제목, 작성자 등을, 좌측에는 UI화면, 우측에는 디스크립션(Description)을 기입.

- 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외 처리 등을 작성하는 부분으로 명확하고 세부적으로 작성해야함.

ex) ppt, 키노트, 스케치, Axure 등

 

5. 프로토타입(Prototype)

- 와이어프레임이나 스토리 보드 등에 인터랙션을 적용하여 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형.

- 사용성 테스트나 작업자간 서비스 이해를 위해 작성하는 샘플

- 작성 방법에 따라 페이퍼 프로토타입과 디지털 프로토타입으로 나뉨.

ex) html/css, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

 

6. 유스케이스(Use Case)

- 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행 할 내용을 기술.

- 사용자의 요구사항을 빠르게 파악함으로서 프로젝트의 초기 시스템의 기능적적 요구를 결정하고 그 결과를 문서화함.

- 유스케이스는 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것으로, 일반적으로 다이어그램 형식으로 묘사.

- 다이어그램 완성되면, 각각의 유스케이스에 대해 유스케이스 명세서를 작성.