화면 설계

< UI >

사용자와 시스템 간 상호작용이 원활하게 이뤄지도록 도와주는 장치

● 구분

- CLI : 명령과 출력이 텍스트 형태

- GUI : 아이콘이나 메뉴를 마우스로 선택

- NUI : 사용자의 말이나 행동으로 기기 조작

● 기본 원칙

- 직관성 : 누구나 쉽게 이해하고 사용

- 유효성 : 사용자의 목적을 정확/완벽하게 달성

- 학습성 : 누구나 쉽게 배우고 익힘

- 유연성 : 요구사항 최대한 수용, 실수 최소화

● UI 설계 도구

- 와이어프레임 : 개략적 레이아웃, 뼈대

- 목업 : 실제 화면과 유사하게

- 스토리보드 : 페이지 간 이동 흐름 추가

- 프로토타입 : 인터랙션 적용, 실제 구현된 것처럼 테스트 가능

- 유스케이스 : 사용자 측면의 요구사항

● UI 표준 : 모든 UI에 공통적으로 적용될 내용

● UI 지침 : UI 개발 과정에서 꼭 지켜야 할 공통 조건

● 웹 3요소 : 웹 표준, 웹 접근성, 웹 호환성

● UI 스타일 가이드 작성 : 구동 환경 - 레이아웃 - 네비게이션 - 기능 - 구성 요소

● UI 요구사항 확인 순서

1. 목표 정의 : 인터뷰는 개별적, 한 시간 안넘게, 사용자 리서치 시작 전 수행

2. 활동 사항 정의   3. UI 요구사항 작성

● 정황 시나리오 작성 : 사용자의 요구사항을 도출하기 위해 작성

 

< 프로토타입 >

사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적 형태 모형

● 페이퍼 프로토타입

- 장점 : 비용 저렴, 즉시 변경 가능, 고객의 기대 없음

- 단점 : 테스트 부적당, 공유 어려움

● 디지털 프로토타입

- 장점 : 수정 쉬움, 재사용 가능

- 단점 : 프로토타입을 작성할 프로그램의 사용법을 알아야 함

● 프로토타입 리더 : 이슈를 종류별로 취합하고 해결 방법 제시

 

< UI 흐름 설계 >

● 순서 : 기능 작성 - 입력 요소 확인 - 유스케이스 설계 - 기능/양식 확인

 

< UI 상세 설계 >

● 설계 순서 : 요구사항 확인 - UI 설계서 표지/개정 이력 작성 - UI 구조 설계 - 메뉴 설계 - 화면 설계

● 사이트 맵 : 화면의 정보를 한눈에 파악하기 위한 시각적인 콘텐츠 모형