UI 상세설계

UI 시나리오 작성 원칙

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

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

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

3. “대표 화면의 레이아웃과 그 화면들 속의 기능”을 정의한다. 이때의 대표 화면은 시나리오에 포함되는 서로 다른 형태를 가진 독립적인 화면들을 가리 킨다.

4. 인터랙션의 흐름을 정의하며, 화면 내와 화면 간 인터랙션의 순서(Sequence), 분기 (Branch), 조건(Condition), 루프(Loop) 등을 명시한다. 이때의 인터랙션은 페이퍼 프로토타입에서 발견된 문제점을 모두 개선하여 적용한 최종 인터랙션이어야 한다.

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

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

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

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