UI 설계 도구
| 와이어프레임 (Wireframe) |
기획 단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계한다. 와이어프레임을 제작할 때는 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계한다. |
| 목업 (Mockup) |
디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모델이다. 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않는다. |
| 스토리보드 (Story Board) |
와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서이다. 스토리보드의 상단이나 우측에는 제목, 작성자 등을 입력하고 좌측에는 UI 화면, 우측에는 디스크립션을 기입한다. |
| 프로토타입 (Prototype) |
와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형이다. 프로토타입은 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘풀이다. -페이퍼 프로토타입 : 아날로그적인 방법으로 스케치, 그림, 글 등을 이용해 손으로 직접 작성하는 방법 -디지털 프로토토입 : 파워포인트 아크로뱃, 비지오, 옴니그래플 등과 같은 프로그램을 사용해 작성하는 방법 |
| 유스케이스 (Use Case) |
사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한다. 사용자의 요구사항을 빠르게 파악함으로써 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화할 수 있다. |
'정보처리기사 실기' 카테고리의 다른 글
| UI 흐름 설계 순서 (0) | 2021.05.24 |
|---|---|
| UI 요구사항 확인 순서 (0) | 2021.05.24 |
| UI 스타일 가이드 작성 (0) | 2021.05.24 |
| UI 설계 지침 (0) | 2021.05.24 |
| 사용자 인터페이스(UI) (0) | 2021.05.24 |