topic★★★★★난이도 · 약 15분
UI 산출물 — 와이어프레임 · 목업 · 프로토타입
충실도(Fidelity)가 낮은 순으로 와이어프레임 → 스토리보드 → 목업 → 프로토타입.
#UI#산출물#프로토타입
왜 배우는가
각 산출물의 목적과 충실도를 짝짓는 단답형이 매회 고정 출제된다. 특히 '인터랙션이 가능한 시제품'이 프로토타입이라는 구분을 정확히 외워야 한다.
UI 설계 과정에서 만드는 산출물은 충실도(fidelity) 에 따라 단계적으로 발전한다. 충실도가 낮을수록 빠르고 저렴하게 만들 수 있고, 높을수록 실제 제품에 가까워진다.
| 산출물 | 영문 | 목적 | 충실도 | 대표 도구 |
|---|---|---|---|---|
| 와이어프레임 | Wireframe | 화면 레이아웃 · 구조 설계 | 낮음 | Balsamiq, Figma |
| 스토리보드 | Storyboard | 기획자·디자이너·개발자 간 의사소통 | 중간 | PPT, Figma |
| 목업 | Mock-up | 실제 화면과 유사한 정적 시안 | 중간~높음 | Sketch, Figma |
| 프로토타입 | Prototype | 인터랙션 가능한 시제품 | 높음 | Axure, ProtoPie, Figma |
핵심 구분: 프로토타입만이 인터랙션(동작) 이 가능하다. 목업은 '정적'이고 프로토타입은 '동적'이라는 점이 시험 포인트.
유스케이스(Use Case) 다이어그램도 UI 설계 단계의 산출물이다. 시스템과 사용자(액터)의 상호작용을 시나리오 단위로 표현한다. UML 다이어그램 중 동적 다이어그램에 속한다.
실무에서는 와이어프레임 → 목업 → 프로토타입 순으로 발전시키지만, 빠른 프로토타이핑(Rapid Prototyping) 기법에서는 초기부터 프로토타입을 먼저 만들어 피드백을 받는다. 이 경우 와이어프레임·목업 단계가 생략될 수 있다.
실기 드릴 4문항
edit실기 드릴 · 단답형
실제 인터랙션을 제한적으로 구현한 시제품 형태의 UI 산출물은?
edit실기 드릴 · 단답형
화면 단위 레이아웃과 구조를 빠르게 스케치하는, 충실도가 가장 낮은 UI 산출물은?
space_bar실기 드릴 · 빈칸 채우기
UI 산출물 중 ( ㉠ )은 실제 화면과 유사한 정적 시안이고, ( ㉡ )은 실제로 동작하는 시제품이다.
check_circle실기 드릴 · OX
스토리보드는 기획자·개발자·디자이너 간의 의사소통을 위한 UI 산출물이다.