UI 설계하기

UI 상세설계

UI 요구사항과 UI 표준 및 지침에 따라, 사용자의 편의성을 고려한 메뉴 구조를 설계할 수 있다.

UI 요구사항과 UI 표준 및 지침에 따라, 하위 시스템 단위의 내·외부 화면과 폼을 설계할 수 있다.

필요 지식

1. UI 시나리오 작성 원칙

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

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

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

1-3. “대표 화면의 레이아웃과 그 화면들 속의 기능”을 정의한다.

이때의 대표 화면은 시나리오에 포함되는 서로 다른 형태를 가진 독립적인 화면들을 가리킨다.

1-4. 인터랙션의 흐름을 정의하며, 화면 내와 화면 간 인터랙션의 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등을 명시한다.

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

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

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

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

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

프로토타입 제작 구분

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

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

2-1. 완전성(Complete)

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

2-2. 일관성(Consistent)

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

2-3. 이해성(Understandable)

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

2-4. 가독성(Readable)

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

2-5. 수정 용이성(Modifiable)

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

2-6. 추적 용이성(Traceable)

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

2-7. 모범적인 UI 시나리오 문서의 효과

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