[정보처리기사 실기] 2장 화면 설계 _ UI 설계

UI 설계

- UI 요구사항을 바탕으로 UI 설계 원칙과 지침에 맞게 UI 설계를 구체화하는 것

- 상세 설계 전 대표적인 화면들 설계하는 흐름설계

 

1) UI 설계 원칙

원칙	내용
직관성	누구나 쉽게 이해하고 사용할 수 있어야 함
유효성	사용자 목적을 정확하고 완벽하게 달성해야 함
학습성	누구나 쉽게 익히고 배울 수 있어야 함
유연성	사용자 요구사항 최대한 수용하고 실수 최소화

---

2) UI 설계 지침

원칙	내용
사용자 중심	사용자가 쉽게 이해, 편리하게 사용할 수 있는 환경 제공하며 실사용자에 대한 이해가 바탕 되어야 함
일관성	버튼, 조작 방법 등 일관성 있게 제공해 사용자가 기억, 습득할 수 있게 해야 함
단순성	조작 방법 단순화시켜 인지적 부담 감소시켜야 함
결과 예측 가능	작동시킬 기능만 보고도 결과 예측할 수 있게 설계해야 함
가시성	메인 화면에 주요 기능 노출시켜 최대한 조작 쉽도록 설계해야 함
표준화	기능 구조, 디자인을 표준화해 한 번 학습 후 쉽게 사용할 수 있도록 해야 함
접근성	사용자 연령, 성별, 인종 등 다양한 계층이 사용할 수 있도록 해야 함
명확성	사용자가 개념적으로 쉽게 인지할 수 잇도록 설계해야 함
오류 발생 해결	오류 발생하면 사용자가 쉽게 인지할 수 있도록 설계해야 함

---

UI 흐름 설계

업무 진행과정이나 수행 절차에 따른 흐름 파악해 화면과 폼 설계하는 단계

 

UI 흐름 설계 순서

1. 화면에 표현할 기능 작성

2. 화면 입력 요소 확인

3. UI 유스케이스 설계

4. 기능 및 양식 확인 : 텍스트박스, 체크박스 등 UI 요소 확인

---

UI 요소

• 라디오 버튼 : 여러 선택 사항 중 1개만 선택
• 체크박스 : 여러 선택 사항 중 1개 이상 선택
• 토글버튼 : 2개 옵션 중 하나만 선택 (on / off)
• 콤보상자 : 미리 정의된 옵션 목록에서 선택, 새로운 내용 입력 가능
• 목록상자 : 미리 정의된 옵션 목록에서 선택, 새로운 내용 입력 불가능

---

UI 설계서

UI 설계 산출물로 디자이너, 기획자, 개발자 간 원활한 의사소통 제공

 

UI 설계서 구성요소

UI 설계서 표지 작성	다른 문서와 혼동되지 않도록 프로젝트명, 시스템명 포함 작성
UI 설계서 개정 이력 작성	UI 설계서가 수정 시 어떤 부분 어떻게 수정되었는지 정리
UI 요구사항 정의서 작성	사용자 요구사항 확인하고 정리
시스템 구조 작성	UI 요구사항과 UI 프로토타입에 기초해 전체 시스템 구조 설계
사이트 맵 작성	사이트에 표시할 콘텐츠를 메뉴별 구분 설계
프로세스 정의서 작성	사용자가 요구하는 프로세스들 작업 진행 순서에 맞춰 정리
화면 설계	필요한 화면 페이지 별 설계

---

UI 상세 설계

- UI 설계서 바탕으로 실제 설계 및 구현 위해 모든 화면에 대한 자세한 설계 진행하는 단계

- 반드시 시나리오 작성해야 함

- UI 시나리오는 사용자가 최종 목표 달성하기 위한 방법 순차적 묘사

---

UI 시나리오 포함 내용

• 사용자 인터페이스 기능 구조
• 대표 화면
• 화면 간 인터랙션 (실시간 동작) 흐름
• 다양한 상황에서 예외 처리

---

UI 시나리오 문서 요건

완전성 (Complete)	누락되지 않도록 상세히 기술해야 함 시스템 기능보다 타스크 (Task)에 초점 둠
일관성 (Consistent)	서비스 목표, 시스템, 사용자 요구사항, UI 스타일 등 일관성 유지해야 함
이해성 (Understandable)	누구나 쉽게 이해할 수 있도록 설명해야 함
가독성 (Readable)	표준화된 템플릿 등 활용해 쉽게 읽을 수 있도록 해야 함
수정 용이성 (Modifiable)	시나리오 수정, 개선 쉬워야 함
추적 용이성 (Traceable)	변경사항은 언제, 어떤 부분이 왜 발생했는지 쉽게 추적할 수 있어야 함

---

UI 설계 도구

- 사용자 요구사항에 맞게 UI 화면 구조, 배치 등 설계 시 사용하는 도구

- UI 설계 도구로 작성된 결과물을 기획 단계에서 미리 보기 용도로 사용

와이어 프레임	- 페이지 개략적 레이아웃, UI 요소 등 뼈대 설계 - 툴 : 손그림, 파워포인트, 키노트, 스케치 등
목업	- 와이어프레임보다 더 실제 화면과 유사하게 만든 정적 형태 모형 - 툴 : 파워 목업, 발사믹 목업 등
스토리보드	- 디자이너와 개발자가 참고하는 작업지침서 - 화면 자측 : UI / 화면 우측 : 디스크립션 기입 - 툴 : 파워 목업, 발사믹 목업 등
프로토타입	- 테스트 가능한 동적 형태 모형 - 유형 : 페이터 프로토타입, 디지털 프로토타입 - 툴 : HTML / CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등
유스케이스	- 사용자 측면 요구사항 구조적으로 표현 - 유스케이스 다이어그램 완성 후 유스케이스 명세서 작성