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설계서의 경우 UI의 흐름 설계와 UI 상세 설계에서 모두 작성해야 합니다. UI 흐름 설계의 기본적인 토대를 작성한다면 UI 상세 설계서에서는 흐름 설계에서 작성한 UI설계서를 다시 한번 확인하고 추가 또는 수정하여 완성합니다. 

 

---

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

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

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

UI 요소 

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

 

---

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

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