UI 설계

1. UI 설계서 구성

구성	설 명
UI 설계서 표지	프로젝트명 또는 시스템명
UI 설계서 개정 이력	UI 설계서 처음 작성 시 -> 첫 번째 항목으로 '초안 작성'을 포함, 초기 버전(version) 1.0으로 설정 변경 또는 보완이 충분히 이루어져 완성이 되었다고 판단할 경우 -> 버전을 x.0으로 바꾸어 설정
UI 요구사항 정의	UI 요구사항들을 재확인하고 정리
시스템 구조	UI 프로토타입을 재확인 UI 요구사항들과 UI 프로토타입에 기초해 UI 시스템 구조를 설계
사이트 맵(Site Map)	UI 시스템 구조의 내용을 사이트 맵의 형태로 작성 사이트 맵 상세 내용(Site Map Detail)을 표 형태로 작성
프로세스(Process) 정의	사용자 관점에서 요구되는 프로세스들을 진행되는 순서에 맞추어 정리
화면 설계	UI 프로토타입과 UI 프로세스정의를 참고해 각 페이지별로 필요한 화면을 설계 각 화면별로 구분되도록 각 화면별 고유 ID를 부여, 별도의 표지 페이지 작성 각 화면별로 필요한 화면 내용을 설계

2. 화면 설계의 기본 구성 요소

1. 윈도우(Window)

2. 메뉴(Menu)

3. 아이콘(Icon)

4. 포인터(Pointer)

3. 유용성 개념 및 적용 원리 파악

1) 유용성

: 사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도

2) 유용한 시스템을 설계할 때의 고려사항

: 사용자가 시스템의 구조, 기능, 가치 등에 대해 가지고 있는 마음 속 모형인 사용자 모형과 시스템 설계자가 만들려고 하

는 개발자 모형 사이의 차이를 최소화하려는 노력이 필요

3) 사용자 모형과 개발자 모형 간의 차이 발생

- 시스템에서의 실행 차 : 실행 가능한 기능과 사용자의 원래 목적이 서로 상이할 때 발생.

- 시스템에서의 평가 차 : 시스템의 실행 결과와 사용자의 원래 목적이 서로 상이할 때 발생.

4. 실행 차를 줄이기 위한 UI 설계 원리

(1) 사용 의도 파악

(2) 행위 순서 규명

- 사용자 행위의 순서를 세분화시킨 뒤 순서대로 명확하게 제시하여 선택할 수 있도록 해야 함

- 하나의 작업을 수행하기 위해 단계 수를 최소화시키고.

- 행위의 순서를 사용자에게 친숙하도록 설계해야 함

(3) 행위의 순서대로 실행

- 프로세스의 흐름을 UI를 통해 직관적으로 알 수 있게 제공

- 과도한 상호 작용 지양

- 적절한 피드백과 취소 기능, 적절한 디폴트 키을 설정

5. 평가 차를 줄이기 위한 UI 설계 원리

(1) 수행한 키 조작의 결과를 사용자가 빠르게 자각하도록 유도

- 사용자가 수행한 행위에 대해 아무런 변화된 결과가 제동되지 않는다면 사용자는 자신이 제대로 조작하였는지 의심

하게 되므로, 이러한 평가 차가 발생하지 않도록 설계해야 함

- 가능한 한 빠른 처리를 통해 즉각적으로 반응되도록 해야 하며, 사용자가 수행한 행위로 인해 현재 시스템의 변화

가 이루어졌음을 가능한 한 직관적으로 피드백 해 주어야 함

(2) 키 조작으로 변환된 시스템의 상태를 사용자가 쉽게 인지하도록 유도

사용자가 수행한 행위로 인해 변환된 시스템의 상태를 사용자가 직관적으로 인지할 수 있도록 시스템을 설계

이를 위해 시스템의 상태 정보를 가능한 한 단순하게, 그리고 이해하기 쉽게 제시해야 함

(3) 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도

사용자가 가진 원래 의도가 시스템을 통해 충족되었는지 또는 충족될 수 있는지를 사용자가 쉽게 파악할 수 있도록 설계

이를 위해 미리보기 기능처럼 예상 결과를 사전에 제공해 주는 것이 바람직

6. 스토리보드 작성 기법

: 스토리 보드는 디자이너와 개발자가 최종적으로 참고하는 산출 문서이며, 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록되어 있는 문서

1. 메뉴 구성도 만들기(스토리보드 1단계)

: 전체적인 메뉴 구성도이며, 어떤 것을 보여주고 결정된 사항을 표현하기 위한 메뉴의 순서와 구성 단계, 용어를 정의

2. 스타일 환경(스토리보드 2단계)

: 레이아웃이나 글자 모양, 크기, 색상, 그래픽에서의 일관성을 유지

3. 설계하기(스토리보드 3단계)

: 화면에 보여지는 시각적인 디자인 콘셉트를 잡음

UI 상세설계

1. UI 시나리오 작성 원칙

1) UI의 전체적인 기능과 작동 방식을 개발자가 한눈에 쉽게 이해 가능하도록 구체적으로 작성하여야 함

2) 모든 기능을 공통 적용이 가능한 UI 요소와 인터렉션을 일반적인 규칙으로 정의

3) "대표 화면의 레이아웃과 그 화면들 속의 기능"을 정의

4) 인터렉션의 흐름을 정의하며, 화면 내와 화면 간 인터렉션 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등을 명시

(5) 예와 사항에 대비한 케이스를 정의

(6) UI 시나리오 규칙을 지정

2. UI 시나리오 문서 작성의 요건

1) 완전성(Complete)

(1) (누락 없이) 완전해야 함

(2) 최대한 빠짐없이 가능한 한 상세하게 기술

(3) 시스템 기능보다 사용자의 태스크에 초점을 맞춰 기술

2) 일관성(Consistent)

(1) 일관성이 있어야 함(서비스에 대한 목표, 시스템 및 사용자의 요구사항).

(2) 모든 문서의 UI 스타일(Flow 또는 Layout)을 일관적으로 구성

3) 이해성(Understandable)

(1) 처음 접하는 사람도 이해하기 쉽도록 구성하고 설명

(2) 이해하지 못하는 추상적인 표현이나 어려운 용어를 사용하지 않음

4) 가독성(Readable)

(1) 문서를 쉽게 읽을 수 있어야 함

(2) 표준화된 템플릿을 작성하여 적용(회사의 고유한 양식)

(3) 버전의 넘버링은 v1.0, v2.0 등과 같이 일관성 있게 함

(4) 줄의 간격은 충분하게 유지하며, 단락에 대한 구분과 들여쓰기의 기준을 마련하여 읽기에 쉽고 편해야 함

(5) 여백과 빈 페이지는 적절하게 활용하여 여백의 미를 살리도록 함

(6) 시각적인 효과를 위한 하이라이팅은 일관성 있게 활용하도록 함

(7) 편집기의 상호 참조(Cross-referencing) 가능을 활용(하이퍼링크 등).

5) 수정 용이성(Modifiable)

(1) 쉽게 변경이 가능해야 함

(2) 수정 또는 개선 사항을 시나리오에 반영함에 있어 쉽게 적용할 수 있어야 함

(3) 동일한 수정 사항을 위해 여러 문서를 편집하지 않도록 함

6) 추적 용이성(Traceable)

(1) 쉽게 추적이 가능해야 함

(2) 변경 사항들이 언제, 어디서, 어떤 부분들이, 왜 발생하였는지 추적이 쉬워야 함

7) 모범적인 UI 시나리오 문서의 효과

(1) 요구사항 오류가 감소

(2) 의사소통 오류가 감소

(3) 개발 과정에서의 재작업이 감소하고, 혼선이 최소화

(4) 불필요한 기능을 최소화

(5) 시나리오 작성과 소프트웨어 개발 비용을 절감

(6) 개발 속도를 향상

(7) 유관 부서 만족도를 제고

UI 상세설계하기

1. UI 요구사항과 UI 표준 및 지침에 따라, 사용자의 편의성을 고려한 매뉴 구조를 설계

1. UI 상세설계를 위해 요구사항을 최종 확인

2. UI 설게서 표지 및 개정 이력을 작성

3. UI 구조를 설계

4. 사용자 기반 메뉴 구조를 설계

5. 화면을 설계

2. UI 요구사항과 UI 표준 및 지침에 따라, 하위 시스템 단위의 내외부 화면과 폼을 설계

1. 실행 차를 줄이기 위한 UI 설계 원리를 검토

(1) 사용 의도를 파악

(가) 구축할 시스템의 UI 설계서를 통해 각 화면 설계 결과에서 불필요한 부가 기능이 있는지 조사

(나) 구축할 시스템의 UI 설계서를 통해 각 화면 설계 결과에서 중복되는 기능이 있는지 조사

(2) 행위 순서를 검토

(가) 구축할 시스템의 UI 설계서를 통해 사용자가 시스템의 각 기능을 사용하기 위해 어떤 사전 행위들이 수행되어야

하는지 나열하고 조사

(나) 구축할 시스템의 UI 설계서를 통해 각 기능들의 상대적으로 중요도를 상, 중, 하로 나눈 후 적절성을 비교

2. 평가 차를 줄이기 위한 UI 설계 원리를 검토

(1) 수행한 키 조작의 결과를 사용자가 빠르게 자각이 가능한지 측정

(가) 구축할 시스템의 UI 설계서 각 화면 설계 결과에서 각 메뉴/아이콘/윈도우가 활성화될 경우 적절한 포인터의 형태

를 해아려 결정

(나) 구축할 시스템의 UI 설계서 각 화면 설계 결과에서 각 기능이 수행되는 동안 적절한 포인터의 형태를 해아려 결정

(2) 키 조작으로 변환된 시스템의 상태를 사용자가 쉽게 인지 가능한지 검토

: 구축할 시스템에서 다수의 사용자가 동시 접속함에 따라 하나의 처리 업무를 여러 사용자가 동시 접근할 경우 처리

방법을 정리

(3) 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악 가능한지 검토

: 구출할 시스템에서 이미 처리 중인 업무를 사용자가 다시 처리하고자 할 경우 시스템은 결과를 어떻게 알려주어야 하

는지 파악

3. UI 검토를 수행하고 보완

1. UI 검토를 수행

(1) UI 상세 설계를 위한 단계에서 UI 검토를 2-3번 확인

(2) UI 스토리보드 활용을 통해 페이퍼 프로토타입의 평가는 짧은 단위로 개발 및 평가를 반복하여 확인

2. UI 검토를 보완

(1) 대표 화면이나 인터페이스 위젯(아이콘, 팝업, 체크 박스 등), 물리적인 버튼을 사용하여 인터렉션에 대해 흐름이 눈

에 보이도록 스토리보드를 제작

(2) 사용자가 페이퍼 프로토타입을 실제 상황처럼 시뮬레이션하여 사용하면, 컴퓨터의 역할을 하는 사람은 인터랙션을

시뮬레이션하여 시연

(가) 컴퓨터 역할을 하기 위해 페이퍼를 조작하는 사람 1 ~ 2명 : 인터페이스에 대한 이해도가 가장 높은 사람으로 추천

(나) 전체적인 평가를 위한 평자 진행자(Facilitator) 1명 : 평가 진행자가 사용자에게 수행할 과업(Task)을 제시하고 응

답을 받는 실험을 진행

(다) 관찰자(Observer) 1명 이상 : 사용자의 말과 행동을 관찰하고, 사용자의 어려움이나 설계의 문제점을 관찰 후 기록

(3) 위의 사용자 평가 결과를 토대로 설계를 보완

3. UI 사연을 통한 사용성에 대한 검토 및 검증을 수행

: 소프트웨어의 개발이 시작되면, 각 스크린의 레이아웃과 인터렉션의 대부분이 적용된 고수준(High-Fidelity)의 프로토

타입을 활용하여 내부 개발자 및 전문가의 평가를 거침으로써 개선 사항을 지속적으로 반영하려는 목적으로 UI 사용

성을 평가를 작성