📌 화면 설계 - UI 상세 설계

 

목차

 

UI 시나리오 문서 개요

📌 UI 상세 설계는 UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행 하는 단계로, UI 상세 설계를 할 때는 시나리오를 작성해야 한다.

 

• UI 시나리오 문서는 사용자 인터페이스의 기능 구조, 대표 화면, 화면 간 인터랙션의 흐름, 다양한 상황에서의 예외 처리 등을 문서로 정리한 것이다.
• UI 시나리오 문서에는 사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 묘사되어 있다.
• UI 설계자 또는 인터렉션 디자이너가 UI 시나리오 문서를 작성하면 그래픽 디자이너가 시나리오를 바탕으로 디자인을 하고 개발자가 UI를 구현하고, 구현된 제품의 검증은 품질 관리자가 진행한다.

 

💡 인터렉션 디자이너 ? 제품, 시스템, 서비스에 대한 사용자의 행동과 그에 반응하는 절차를 디자인하는 사람을 의미한다.

 

 

UI 시나리오 문서 작성 원칙

• 개발자가 전체적인 UI의 기능과 작동 방식을 한눈에 이해할 수 있도록 구제적으로 작성한다. 보통 계층(Tree) 구조 또는 플로차트(Flow Chart) 표기법으로 작성한다.
• 모든 기능에 공통적으로 적용될 UI 요소와 인터렉션을 일반 규칙으로 정의한다.
• 대표 화면의 레이아웃과 그 화면에 속할 기능을 정의한다.
• 인터렉션의 흐름을 정의하며, 화면 간 인터랙션의 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등을 명시한다.
• 예외 상황에 대비한 다양한 케이스를 정의한다.
• UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오를 정의한다.
• UI 시나리오 규칙을 지정한다.

 

UI 시나리오 문서 작성을 위한 일반 규칙

📌 UI 시나리오 문서를 작성하면서 적용할 일반적인 규칙은 다음과 같다.

 

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

 

💡 소프트 키 ? 상황에 맞는 기능이나 사용자가 프로그래밍 할 수 있는 기능이 있는 장치의 키이지만 일반적으로 중 이상의 기능이 있음을 의미한다. 다시 프로그래밍 할 수 없어 하드 키로 간주되는 휴대폰의 키보드 문자 및 숫자 키와 달리 소프트 키는 기능을 변경할 수 있다. 소프트 키의 한 예는 키보드 기능 또는 응용 프로그램 및 상황에 따라 다른 특수 기능을 가진 키이다.

 

UI 시나리오 문서 작성을 위한 일반 규칙

📌 UI 요소의 종류

• 체크박스 (Check Box) : 여러 개의 선택 상황에서 1개 이상의 값을 선택할 수 있는 버튼이다.
• 라디오 버튼 (Radio Button) : 여러 항목 중 하나만 선택할 수 있는 버튼이다.
• 토글 버튼 (Toggle Button) : 하나의 버튼으로 2가지의 상태를 선택할 수 있는 버튼이다.
• 텍스트 박스 (Text Box) : 사용자가 데이터를 입력하고 수정할 수 있는 상자이다.
• 콤보상자 (Combo Box) : 이미 지정된 목록 상자에 내용을 표시하여 선택하거나 새로 입력할 수 있는 상자이다.
• 목록 상자 (List Box) : 콘보상자와 같이 목록을 표시하지만 새로운 내용을 입력할 수 없는 상자이다.

 

UI 시나리오 문서의 요건

 

완전성 (Complete)	- 누락되지 않도록 최대한 상세하게 기술해야 한다. - 해당 시스템의 기능보다는 사용자의 태스크에 초점을 맞춰 기술한다.
일관성 (Consistent)	서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성을 유지해야 한다.
이해성 (Understandable)	- 누구나 쉽게 이해할 수 있도록 설명한다. - 불분명하거나 추상적인 표현은 피한다.
가독성 (Readable)	- 표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록 해야 한다. - v1.0, v2.0 등과 같이 문서 인덱스에 대한 규칙이나 목차를 제공한다. - 읽기 쉽도록 줄 간격, 단락, 들여쓰기 등의 기준을 마련한다. - 시각적인 효과를 위해 여백이나 빈 페이지, 하이라이팅을 일관성 있게 지정한다. - 하이퍼링크 등을 지정하여 문서들이 서로 참조될 수 있도록 지정한다.
수정 용이성 (Modifiable)	시나리오의 수정이나 개선이 쉬워야 한다.
추적 용이성 (Traceable)	변경 사항은 언제, 어떤 부분이 왜 발생했는지 쉽게 추적할 수 있어야 한다.

 

💡 템플릿 ? 형판, 형틀이라는 뜻으로 화면의 기본 레이아웃 형태를 의미한다.

💡 하이라이팅 ? 수정하고 발전시켜서 더 나은 대안으로 만들어가는 기법이다.

 

 

UI 시나리오 문서로 인한 기대 효과

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