스토리보드
IT 위키
더 많은 작업
- 상위 문서: UI 설계 도구
- Storyboard
- 화면 구성, 기능, 화면 흐름, 정책 등 서비스 구축에 필요한 정보를 화면 단위로 정리하여 디자이너와 개발자가 최종적으로 참고하는 작업 지침서
- 와이어프레임 위에 콘텐츠 구성, 기능 정의, 처리 규칙, 화면 흐름 등 상세 설명을 더한 문서이다.
- 기획자, 디자이너, 개발자, 고객 간 의사소통의 기준 문서로 쓰인다.
- 일반적으로 화면 영역(좌측)과 디스크립션 영역(우측)으로 나누고, 상단에 문서 정보를 기재하는 형식으로 작성한다.
| 구성 요소 | 내용 |
|---|---|
| 문서 정보 | 프로젝트명, 화면 ID, 화면명, 경로(메뉴 위치), 작성자, 작성일, 버전 |
| 화면 설명(UI 화면) | 와이어프레임 형태로 화면 레이아웃과 UI 요소 배치를 표현 |
| 기능 설명 | 버튼, 입력 항목, 목록 등 각 UI 요소가 수행하는 기능과 입력값 검증 규칙 |
| 흐름 | 화면 간 이동 경로, 이벤트 발생 시 이동하는 화면, 조건별 분기 |
| 디스크립션(Description) | 화면 번호에 대응하는 상세 설명, 정책, 예외·오류 처리, 메시지 문구 |
| 구분 | 와이어프레임 | 스토리보드 |
|---|---|---|
| 목적 | 화면의 구조와 요소 배치 확인 | 구현에 필요한 상세 정보 전달 |
| 작성 시점 | 기획 초기 | 와이어프레임 이후 |
| 포함 내용 | 레이아웃, UI 요소의 위치 | 레이아웃에 더해 기능 정의, 흐름, 정책, 디스크립션 |
| 활용 | 구조에 대한 초기 합의 | 디자인·개발의 최종 작업 지침 |
- 스토리보드는 와이어프레임을 포함하는 상위 산출물로 볼 수 있다.
- "디자이너와 개발자가 최종적으로 참고하는 작업 지침서"라는 설명으로 스토리보드를 고르게 하는 문제가 출제된다.
- 와이어프레임, 목업, 프로토타입과의 차이를 구분하는 문제가 함께 나온다.
- 스토리보드에 포함되는 정보(정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의)를 묻는다.