UI 설계 개요 및 절차 정리 🚀
1. UI 설계란?
- UI 설계란 사용자의 요구사항을 기반으로 UI를 구체적으로 설계하는 과정
- UI 설계를 문서화한 것을 UI 설계서라고 함
- UI 설계의 목표:
- 사용자의 요구사항을 시각적으로 표현하고 검증
- UI를 개발하기 전에 구조와 흐름을 정리
- 개발자, 기획자, 디자이너 간의 원활한 협업을 위해 작성
2. UI 설계서 작성 절차
| 단계 | 설명 |
|---|
| 1. 표지 작성 | 문서 식별을 위해 프로젝트명, 시스템명 등을 기재 |
| 2. 개정 이력 관리 | 문서 수정 사항을 버전별로 기록 |
| 3. 요구사항 정의서 작성 | 사용자의 요구사항을 정리하고 반영 가능 여부 검토 |
| 4. 시스템 구조 설계 | UI 요구사항 및 프로토타입 기반으로 전체 시스템 구조 설계 |
| 5. 사이트 맵 작성 | 웹사이트/앱의 메뉴 및 페이지 구조를 테이블 형태로 정리 |
| 6. 프로세스 정의서 작성 | 사용자의 작업 흐름 및 진행 절차를 정리 |
| 7. 화면 설계서 작성 | 각 페이지의 UI 화면을 설계 |
3. UI 흐름 설계
- UI 흐름 설계는 업무 진행 과정 및 수행 절차를 반영하여 화면의 흐름을 설계
- UI 흐름 설계 시 주요 요소:
- 기능적 요구사항 정의: 화면에서 제공할 기능을 결정
- 입력 요소 확인: 텍스트 박스, 드롭다운, 체크박스 등 UI 입력 요소 결정
- 유스 케이스 설계: 사용자의 행동 흐름을 다이어그램 형태로 표현
- 기능 및 양식 정의: 화면에서 사용할 버튼, 입력 필드, 선택 요소 등의 규칙 정리
4. UI 상세 설계
- UI 상세 설계란 UI 흐름 설계를 기반으로 실제 화면을 더욱 구체적으로 설계하는 과정
- 세부적인 기능, 레이아웃, 입력 요소, 인터랙션 적용
- UI 상세 설계 시 시나리오 문서 작성이 필수
✅ 시나리오 문서란?
- UI 기능 구조, 인터랙션 흐름, 예외 처리 등 다양한 상황을 순차적으로 기술한 문서
- 사용자가 목표를 달성하기 위한 과정을 묘사한 문서
- 시나리오 문서의 6가지 요건
- 완전성: 누락 없이 상세하게 기술
- 일관성: UI 스타일과 사용자 요구사항이 일치해야 함
- 이해성: 누구나 쉽게 이해할 수 있어야 함
- 가독성: 전문 용어 최소화, 표준 템플릿 활용
- 수정 용이성: 향후 개선 및 수정이 용이해야 함
- 추적 용이성: 변경 이력을 쉽게 확인 가능해야 함
5. UI 상세 설계 절차
| 단계 | 설명 |
|---|
| 1. 메뉴 구성 확인 | 최종 요구사항을 검토하고 UI 설계 확정 |
| 2. UI 설계서 표지 및 개정 이력 작성 | 문서의 프로젝트명, 개정 이력 등을 정리 |
| 3. UI 구조 설계 | 프로토타입 및 요구사항을 바탕으로 UI 구조 설계 |
| 4. 메뉴 구조 설계 | 사이트/앱의 메뉴 계층을 설계 |
| 5. 화면 설계 | 프로토타입을 기반으로 각 페이지를 설계 |
6. UI 설계 핵심 개념 요약
| 개념 | 설명 |
|---|
| UI 설계서 | UI 설계 내용을 문서화하여 개발자, 디자이너, 기획자가 공유하는 문서 |
| UI 흐름 설계 | 화면 이동 및 업무 흐름을 정의 |
| UI 상세 설계 | UI 흐름 설계를 바탕으로 실제 화면을 상세하게 설계 |
| 시나리오 문서 | UI 기능, 인터랙션, 예외 처리 등을 설명한 문서 |
📌 결론 및 시험 대비 TIP
- UI 설계는 사용자의 요구사항을 기반으로 문서화한 것
- UI 설계서 작성 시 표지, 개정 이력, 요구사항 정의서, 사이트맵, 화면 설계 등이 포함됨
- UI 흐름 설계 → UI 상세 설계로 진행되며 시나리오 문서를 필수로 작성해야 함
- 시험에서는 UI 설계 절차와 시나리오 문서 요건(완전성, 일관성 등)이 출제될 가능성이 높음
이 내용을 확실하게 숙지하면 UI 설계 개념을 완벽히 이해할 수 있을 것입니다! 🚀
