UI 설계 도구
IT 위키
더 많은 작업
- 상위 문서: 사용자 인터페이스
- UI Design Tool
- 사용자의 요구사항에 맞게 UI의 화면 구조와 흐름, 동작을 미리 구현해 보는 데 사용하는 산출물과 도구
- UI 설계 초기에는 화면의 뼈대를 잡고, 단계가 진행될수록 시각 디자인과 상호작용을 구체화한다.
- 일반적으로 와이어프레임 → 스토리보드 → 목업·프로토타입 순으로 구체화되며, 유스케이스는 이들의 기능 요구사항 근거가 된다.
| 도구 | 정의 | 특징 |
|---|---|---|
| 와이어프레임(Wireframe) | 기획 초기 단계에 페이지의 개략적인 레이아웃과 UI 요소를 배치한 뼈대 설계 | 선과 박스 위주로 표현하며 색상·이미지는 최소화한다. |
| 스토리보드(Storyboard) | 디자이너와 개발자가 최종적으로 참고하는 작업 지침서 | 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축에 필요한 정보를 담는다. |
| 목업(Mockup) | 디자인, 사용 방법 설명, 평가 등을 위해 실제 화면과 유사하게 만든 정적인 형태의 모형 | 시각적으로만 구성하며 실제 기능은 동작하지 않는다. |
| 프로토타입(Prototype) | 와이어프레임이나 스토리보드에 인터랙션을 적용하여 실제 구현된 것처럼 테스트할 수 있는 동적인 형태의 모형 | 사용자 검증과 요구사항 확인에 쓰이며, 페이퍼 프로토타입과 디지털 프로토타입이 있다. |
| 유스케이스(Use Case) | 사용자 측면에서 시스템이 제공해야 할 기능을 기술한 것 | 액터와 기능 단위로 요구사항을 표현하며 다이어그램과 명세서로 작성한다. |
| 구분 | 와이어프레임 | 스토리보드 | 목업 | 프로토타입 |
|---|---|---|---|---|
| 충실도 | 낮음 | 중간(설명 중심) | 높음(시각) | 높음(시각·동작) |
| 형태 | 정적 | 정적(문서) | 정적 | 동적 |
| 인터랙션 | 없음 | 설명으로 기술 | 없음 | 있음 |
| 주 사용자 | 기획자 | 기획자·디자이너·개발자 | 디자이너·이해관계자 | 사용자·이해관계자·개발자 |
| 구분 | 페이퍼 프로토타입 | 디지털 프로토타입 |
|---|---|---|
| 방법 | 종이, 펜 등으로 손으로 직접 작성 | 전용 소프트웨어로 작성 |
| 장점 | 비용이 적고 즉시 변경할 수 있다. | 재사용이 쉽고 실제와 유사하게 테스트할 수 있다. |
| 단점 | 공유와 재사용이 어렵다. | 도구 숙련이 필요하다. |
| 적합한 경우 | 제작 기간이 짧거나 규모가 작은 경우 | 재사용성이 필요하거나 결과물의 완성도가 중요한 경우 |
- 프로토타입은 사용자 요구를 조기에 확인하는 데 유용하며, 개발 모델로서의 프로토타이핑 모델과 연계된다.
- 와이어프레임·목업: 전용 디자인 도구, 프레젠테이션 도구, 종이와 펜 등
- 프로토타입: Figma 등 화면 간 인터랙션을 설정할 수 있는 디자인·프로토타이핑 도구
- 유스케이스: UML 모델링 도구
- 도구 선택보다 산출물의 목적(구조 확인, 시각 확인, 동작 검증)에 맞는 충실도를 정하는 것이 중요하다.
- 설명을 주고 와이어프레임, 스토리보드, 목업, 프로토타입, 유스케이스 중 무엇인지 고르는 문제가 자주 출제된다.
- 목업은 정적이고 실제 동작하지 않으며, 프로토타입은 인터랙션이 적용된 동적 모형이라는 차이를 묻는다.
- 스토리보드가 디자이너·개발자가 최종적으로 참고하는 작업 지침서라는 점이 핵심 키워드이다.