[Chapter 6] 화면 설계

사용자 인터페이스

사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어

CLI (Command Line Interface)	명령과 출력이 텍스트 형태로 이뤄지는 인터페이스
GUI (Graphic User Interface)	아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
NUI (Natural User Interface)	사용자의 말이나 행동으로 기기를 조작하는 인터페이스

 

사용자 인터페이스의 기본 원칙

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

 

사용자 인터페이스의 설계 지침

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

 

UI 설계 도구

와이어프레임 ( Wireframe )	- 기획 단계의 초기에 제작하는 것. - 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계 - 각 페이지의 영역 구분 콘텐츠, 텍스트 배치 등을 화면 단위로 설계한다.
목업 ( Mockup )	- 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형 - 시각적으로만 구성 요소를 배치하는 것. 실제로 구현되지는 않는다.
스토리보드 ( Story Borad )	- 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서 - 상단이나 우측에는 제목, 작성자 등 입력 - 좌측에는 UI화면, 우측에는 디스크립션(Description)을 기입
프로토타입 ( Prototype )	- 와이어프레임이나 스토리보드 등에 인터랙션을 적용함 - 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형 - 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플 - 페이퍼 프로토타입 : 아날로그적인 방법. 스케치, 그림, 글 등을 이용하여 손으로 직접 작성하는 방법 - 디지털 프로토타입 : 파워포인트, 아크로벳, 비지오, 옴니그래플 등과 같은 프로그램을 사용하여 작성하는 방법
유스케이스 ( Use Case )	- 사용자 측면에서의 요구사항 - 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술 - 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화 할 수 있다.

 

UI 스타일 가이트 작성

개발자나 디자이너들이 UI를 작성할 때 기준이 되는 규칙들.
구동환경, 레이아웃, 네비게이션 등을 정의

구동 환경 정의	OS, 웹 브라우저, 모니터 해상도, 프레임 세트 등을 사용 환경에 적합하도록 규정하는 단계
레이아웃 정의	- 화면 구조를 정의. 각 영역의 메뉴를 구성하는 단계 - 영역에는 Top, Left, Content, Folder Area가 있다. * 상단메뉴( Top ) : 필수영역, 시스템 전체 페이지 동일 적용 * 좌측메뉴( Left ) : 선택영역, 시스템별 서브 페이지 선택적용 * 내용구성( Content ) : 필수영역, 전체 콘셉 메인 콘텐츠표시 * 하단메뉴( Folder ) : 선택영역, 회사 상황에 따라 표시 여부
네비게이션 정의	- 네비게이션 메뉴 타입을 선택 적용하는 단계 - 사용자가 원하는 정보를 빠르게 찾을 수 있도록 안내함 - 메뉴, 버튼, 링크 등으로 구성
기능 정의	시스템에 적용할 업무 과정에서 일어나는 모든 활동이나 필요한 데이터 간의 관계 등을 논리적인 모델로 상세화하는 단계
구성 요소 정의	화면에 표시할 그리드나 버튼 등을 정의하는 단계

 

UI 요구사항 확인

새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계

• UI 요구사항 확인 순서

목표정의	- 사용자들을 대상으로 인터뷰를 진행한 후, 사용자들의 의견이 수렴된 비즈니스 요구사항을 정의 - [ 인터뷰 진행 시 주의사항 ] * 인터뷰는 가능하면 개별적으로 진행한다. * 인터뷰는 한 시간을 넘지 않도록 한다. * 반드시 사용자 리서치를 시작 하기 전에 해야 한다.
활동 사항 정의	조사한 요구사항을 토대로 앞으로 해야 할 활동사항을 정의
UI 요구사항 작성	- 여러 경로를 통해 수집된 사용자들의 요구사항을 검토분석 - UI 개발 목적에 맞게 작성 - 반드시 실사용자 중심으로 작성되어야 한다. - [ 작성 순서 ] * 요구사항 요소 확인 * 정황 시나리오 작성 * 요구사항 작성

 

UI 흐름 설계

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

• UI 흐름 설계 순서

기능 작성	화면에 표현할 기능을 작성하는 단계
입력 요소 확인	화면에 표현되어야 할 기능을 확인 후 화면에 입력할 요소를 확인하는 단계
유스케이스 설계	- UI 요구사항을 기반으로 UI 유스케이스를 설계하는 단계 - 유스케이스는 화면에 표현할 입력 요소들의 형태나 입력 방법, 배치 등을 고려해서 설계한다.
기능 및 양식 확인	- 분석한 기능을 토대로 텍스트 박스, 콤보 박스, 라이오 박스, 체크 박스 등을 확인하고 규칙을 정의 * 텍스트 박스 ( Text box ) : 입력이 가능함을 표시 * 콤보 박스( Combo box ) : 목록에서 항목을 선택 입력 가능 * 라디오 박스( Radio box ) : 여러개 값 중 하나만 선택가능 * 체크 박스( Check box ) : 여러개 값 중 하나 이상 선택가능

 

UI 상세 설계

실제 설계 및 구현을 위해 모든 화면에 대해 자세하게 설계를 진행하는 단계

• UI 상세 설계 순서

요구사항 확인	UI 상세 설계를 위한 요구사항을 최종적으로 확인하는 단계
UI설계서 표지 및 개정 이력 작성	- UI 설계서 표지는 다른 문서와 혼동되지 않도록 프로젝트명이나 시스템명을 포함시켜 작성 - UI 설계서 개정 이력은 UI 설계서가 수정될 때마다 어떤 부분이 수정되었는지를 정리해 놓은 문서
UI 구조 설계	UI 요구사항과 UI 프로토타입에 기초하여 UI 구조를 설계하는 단계
메뉴 구조 설계	사이트 맵 구조를 통해 사용자 기반 메뉴 구조를 설계 하는 단계
화면 설계	UI 프로토타입과 UI 프로세스를 참고하여 필요한 화면을 페이지별로 설계하는 단계