UI 설계 도구/산출물

1) 와이어프레임 (Wireframe)

• 개념: 페이지의 뼈대 레이아웃(구역 배치, 정보 구조)을 선·박스로 거칠게 표현.
• 목적: 정보 구조/흐름 합의, 빠른 아이디어 검증.
• 정교도: 저(흑백/로우파이).
• 언제: 초반 구상, IA(Information Architecture) 정리, 빠른 피드백 받을 때.

2) 목업 (Mockup)

• 개념: 시각 디자인이 적용된 정지 화면(색상, 타이포, 컴포넌트 스타일 포함).
• 목적: 최종 룩앤필(브랜딩/비주얼) 합의.
• 정교도: 중~고(하이파이), 인터랙션 없음.
• 언제: 브랜드/스타일 가이드 확정, 개발 전 UI 확정 직전.

3) 스토리보드 (Storyboard)

• 개념: 사용 시나리오 흐름을 프레임(화면) 단위로 나열, 해설/주석 포함.
• 목적: 사용자 목표 달성까지의 맥락/전후 관계 공유, 요구사항 누락 방지.
• 정교도: 가변(로~하이), 텍스트 설명이 핵심.
• 언제: 이해관계자와 여정 합의, 개발/QA에 맥락 전달.

4) 프로토타입 (Prototype)

• 개념: 실제처럼 클릭/전환되는 인터랙티브 시뮬레이션.
• 목적: 사용성 테스트(경로, 피드백, 마이크로 인터랙션), 이해관계자 설득.
• 정교도: 저(페이퍼/로파이) ~ 고(하이파이 마이크로애니메이션).
• 언제: 과제·리스크가 있는 흐름 검증, 개발 착수 전 의사결정.

5) 유스케이스 (Use Case)

• 개념: 액터(사용자/시스템)가 목표를 달성하기 위해 시스템과 상호작용하는 기능 단위 명세.
• 목적: 기능 범위/흐름(기본/대체/예외) 명확화, 요구→테스트 추적성 확보.
• 정교도: 텍스트 중심(반정형), 다이어그램/시나리오 병행.
• 언제: 요구사항 명세·우선순위화, 테스트 케이스 도출.