UI 설계하기

UI 상세설계

• UI 요구사항과 UI 표준 및 지침에 따라, 사용자의 편의성을 고려한 메뉴 구조를 설계할 수 있다.
• UI 요구사항과 UI 표준 및 지침에 따라, 하위 시스템 단위의 내·외부 화면과 폼을 설계할 수 있다.

UI 시나리오 작성 원칙

UI 상세설계에 있어 시나리오 작성은 반드시 필요한 사항이다. 정보통신산업진흥원 부설SW공학센터의 “소프트웨어 개발 UI/UX 참조모델 가이드“(2014)에 따르면 시나리오 작성의 원칙은 다음과 같이 설명한다.

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

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

3. “대표 화면의 레이아웃과 그 화면들 속의 기능”을 정의한다.

이때의 대표 화면은 시나리오에 포함되는 서로 다른 형태를 가진 독립적인 화면들을 가리킨다.

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

이때의 인터랙션은 페이퍼 프로토타입에서 발견된 문제점을 모두 개선하여 적용한 최종인터랙션이어야 한다.

5. 예외 상황에 대비한 케이스를 정의한다.

대부분의 소프트웨어 개발자와 품질 관리자 들이 UI 시나리오 문서에서 가장 많은 불만을 드러내는 부분이 예외 케이스의 정리가 부실하다는 것이다.

6. UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오를 정의한다.

7. UI 시나리오 규칙을 지정한다

<표 2-1> 프로토타입 제작 구분

구분	설명
주요 키의 위치와 기능	화면상에 공통적으로 배치되는 주요 키의 위치와 기능을 설명한 것 으로 여러 화면 간의 일관성을 보장하기 위한 것이다
공통 UI 요소	체크 박스, 라디오 버튼, 스크롤바, 텍스트 입력 필드, 상하/좌우 휠, 모드 설정, 탭, 팝업 등의 각 UI 요소를 언제 사용하며 어떤 형태인 지 정의하고 사용자의 조작에 어떻게 반응하는지 그 흐름을 상세하 게 설명한 것이다.
기본 스크린 레이아웃 (Basic Screen Layouts)	여러 화면 내에 공통적으로 나타나는 Indicators, Titles, Ok/Back, Soft Key, Option, Functional Buttons 등의 위치와 속성을 정의한 것으로서 여러 기능들 간에 화면 레이아웃의 일관성을 보장하기 위한 것이다
기본 인터랙션 규칙 (Basic Interaction Rules)	터치 제스처 등의 공통적으로 사용되는 조작의 방법, 홈 키의 동작 방식과 같은 운항 규칙, 실행, 이전, 다음, 삭제, 이동 등의 화면 전 환 효과 등에 대해 기술한 것이다.
공통 단위 태스크 흐름 (Task Flows)	많은 기능들에 공통적으로 자주 나타나는 삭제, 검색, 매너 모드 상 태에서의 소리 재생 등의 인터랙션 흐름을 설명한 것이다.
케이스 문서	다양한 상황에서의 공통적인 시스템 동작에 대해 정의한 문서이다. (ex. 사운드, 조명, 이벤트 케이스 등)

출처 : 정보통신산업진흥원 부설 SW공학센터. 소프트웨어 개발 UI/UX 참조 모델 가이드 참조

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

정보통신산업진흥원 부설 SW공학센터의 “소프트웨어 개발 UI/UX 참조모델 가이드“(2014)에 따르면 시나리오 작성의 요건은 다음과 같이 설명한다.

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) 유관 부서 만족도를 제고한다.