UI 상세 설계 (1과목)

UI 시나리오 문서 개요

• UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계
• 상세설계를 할 때는 반드시 시나리오를 작성해야 한다.
• UI 시나리오 문서는 인터페이스의 기능 구조, 대표 화면, 화면 간 인터랙션의 흐름, 다양한 상황에서의 예외 처리 등을 문서로 정리한 것이다.
• UI 시나리오 문서에는 사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 표시되어 있다.

UI 시나리오 문서 작성 원칙

• 개발자가 전체적인 UI의 기능과 작동 방식을 한눈에 이해할 수 있도록 구체적으로 작성
• 보통 계층(Tree)구조나 플로차트(Flow Chart) 표기법으로 작성한다.
• 인터렉션의 흐름을 정의하며, 화면 간 인터랙션의 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등을 명시한다.
• UI 시나리오 규칙을 지정한다.
• UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오를 정의한다.

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

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

UI 시나리오 문서의 요건

• 완전성 : 누락되지 않도록 상세히 기술해야한다, 시스템의 기능보다는 사용자의 태스크에 초점을 맞춰 기술한다.
• 일관성 : 서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성을 유지해야 한다.
• 이해성 : 누구나 쉽게 이해할 수 있도록 설명한다, 불분명하거나 추상적인 표현은 피한다.
• 가독성 : 표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록 해야 한다.
• 수정 용이성 : 수정이나 개선이 쉬워야 한다.
• 추적 용이성 : 변경 사항은 언제, 어떤 부분이 왜 발생 했는지 쉽게 추적할 수 있어야 한다.

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

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