UI 설계하기

UI 상세설계

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

1. UI 시나리오 작성 원칙

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

• UI의 전체적인 기능과 작동 방식을 개발자가 한눈에 쉽게 이해 가능하도록 구체적으로 작성하여야 한다.
• 모든 기능은 공통 적용이 가능한 UI 요소와 인터랙션을 일반적인 규칙으로 정의한다.
• “대표 화면의 레이아웃과 그 화면들 속의 기능”을 정의한다. 이때의 대표 화면은 시나리오에 포함되는 서로 다른 형태를 가진 독립적인 화면들을 가리킨다.
• 인터랙션의 흐름을 정의하며, 화면 내와 화면 간 인터랙션의 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등을 명시한다.

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

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

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

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

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

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

(1)완전성(Complete)

• (누락 없이) 완전해야 한다.
• 최대한 빠짐없이 가능한 한 상세하게 기술한다.
• 시스템 기능보다 사용자의 태스크에 초점을 맞춰 기술한다.

(2)일관성(Consistent)

• 일관성이 있어야 한다(서비스에 대한 목표, 시스템 및 사용자의 요구사항).
• 모든 문서의 UI 스타일(Flow 또는 Layout)을 일관적으로 구성한다.

(3)이해성(Understandable)

• 처음 접하는 사람도 이해하기 쉽도록 구성하고 설명한다.
• 이해하지 못하는 추상적인 표현이나 이해하기 어려운 용어는 사용하지 않는다.

(4)가독성(Readable)

• 문서를 쉽게 읽을 수 있어야 한다(문서 템플릿과 타이포그래피).
• 표준화된 템플릿을 작성하여 적용한다(회사의 고유한 문서 양식).
• 버전의 넘버링은 v1.0, v2.0 등과 같이 일관성 있게 한다. 문서의 인덱스에 대한 규 칙 적용, 목차 제공이 중요하다.
• 줄의 간격은 충분하게 유지하며, 단락에 대한 구분과 들여쓰기의 기준을 마련하여 읽기에 쉽고 편해야 한다.
• 여백과 빈 페이지는 적절하게 활용하여 여백의 미를 살리도록 한다.
• 시각적인 효과를 위한 하이라이팅은 일관성 있게 활용하도록 한다.
• 편집기의 상호 참조(Cross-referencing) 기능을 활용한다(하이퍼링크 등).

(5)수정 용이성(Modifiable)

• 쉽게 변경이 가능해야 한다.
• 수정 또는 개선 사항을 시나리오에 반영함에 있어 쉽게 적용할 수 있어야 한다.
• 동일한 수정 사항을 위해 여러 문서를 편집하지 않도록 한다.

(6)추적 용이성(Traceable)

• 쉽게 추적이 가능해야 한다.
• 변경 사항들이 언제, 어디서, 어떤 부분들이, 왜 발생하였는지 추적이 쉬워야 한다.

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

• 요구사항 오류가 감소한다.
• 의사소통 오류가 감소한다.
• 개발 과정에서의 재작업이 감소하고, 혼선이 최소화된다.
• 불필요한 기능을 최소화한다.
• 시나리오 작성과 소프트웨어 개발 비용을 절감한다.
• 개발 속도를 향상시킨다.
• 유관 부서 만족도를 제고한다.