📝 화면 설계 #2 - UI 설계서와 UI 유용성, UI 시나리오

 

👊 용어정리

프로토타입 :
새로운 소프트웨어의 설계 또는 성능, 구현 및 운용가능성을 평가하거나 요구사항을 좀 더 잘 이해하기 위해 전체적인 기능을 간략한 형태로 구현한 시제품

인터랙션 :
사용자와 시스템을 연결하는 것이 UI라면, 인터랙션은 UI를 통해 시스템을 사용하는 일련의 상호작용을 말한다.

감성공학 :
개인의 경험을 통해 얻어지는 복합적인 감성을 과학적 측면으로 측정하고 분석하여 제품설계에 최대한 반영하는 공학기술
생체측정기술, 오감센서 및 감성처리기술, 감성디자인기술, 마이크로가공기술, 인간에 대한 적합성을 판단하고 새로운 감성을 창출하기 위한 기술

 

---

👍 UI 설계서

 

UI 설계서란 사용자의 요구사항을 바탕으로 UI설계를 구체화하여 작성하는 문서로, 상세 설계 전에 대표적인 화면 설계를 담당한다.

UI 설계서를 알면 UI 요구사항과 UI 표준 및 지침에 따라 다음을 할 수 있다.

• 화면과 폼의 흐름을 설계하고, 제약사항을 화면과 폼 흐름 설계에 반영할 수 있다.
• 사용자의 편의성을 고려한 메뉴 구조를 설계할 수 있다.
• 하위 시스템 단위의 내/외부 화면과 폼을 설계할 수 있다.

UI 설계서는 기획자, 개발자, 디자이너 등과의 원활한 의사소통을 가능하게 한다.

UI 설계서는 표지, 개정이력, UI 요구사항 정의, 시스템 구조, 프로세스 정의, 화면 설계 등으로 구성되며, 작성 순서는 다음과 같다.

---

👊 표지 작성

프로젝트 명 또는 시스템 명 포함하기

 

👊 개정이력 작성

UI설계서를 처음 작성할 때는 "초안작성"을 포함시키고, 그에 해당하는 초기버전을 1.0으로 설정하기

변경 또는 보완이 충분히 이루어진 경우 X.0으로 설정

 

👊 UI 요구사항 정의서 작성

사용자의 UI 요구사항들을 재확인하고 정리하기

 

👊 시스템 구조(시스템 아키텍처, 앱에서는 "Information Architecture")

UI 요구사항들을 기초로 하여 UI 시스템 구조 설계하기

 

👊 사이트 맵(웹페이지)

UI 시스템 구조의 내용을 사이트 맵의 형태로 작성하여 전체 구조를 하나의 페이지로 볼 수 있게 하기

상세 내용은 표 형태로 작성하기

 

👊 프로세스 정의

사용자 관점의 요구 프로세스들을 진행되는 순서에 맞추어 정리하기

ex 먼저 로그인을 해야 다른 정보들을 조회할 수 있도록 하기

 

👊 화면 설계

프로세스 정의를 참고하여 각 페이지별로 필요한 화면을 와이어프레임(직접 그리기), 프로토타입(시제품) 기법 등을 활용하여 설계하기

 

---

👍 UI 유용성이란?

 

UI 유용성이란, 사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도

사용자가 생각하는 사용자 모형과 시스템 설계자가 만들려고 하는 개발자 모형간의 차이를 최소화하도록 노력해야 한다.

모형간 차이는 실행차와 평가차로 구분된다.

실행 차 : 사용자가 원하는 목적과 실행 기능이 달라서 발생 => 유저가 원하는 기능을 바로 이용할 수 있도록 해야 함
ex 중요도가 높은 기능은 그 기능을 실행하기까지 거쳐야 하는 단계를 줄이기, 폼 양식에 적절한 요소 배치하기

평가 차 : 사용자가 원하는 목적과 실행 결과가 달라서 발생 => 유저가 결과를 빠르게 볼 수 있도록 해야 함
ex 사용자가 호텔을 예약하면 바로 예약 완료라고 알려주기

 

---

👍 UI 시나리오란?

 

사용자가 해당 웹/앱 서비스를 이용하면서 경험하게 될 이야기를 미리 그려 봄으로써 서비스 전체의 윤곽을 표현한 것으로, 사용시 모든 단계마다 일어나는 사용자와 서비스의 상호작용을 기술한다.

 

UI 시나리오의 작성 원칙은 다음과 같다.

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

 

UI 시나리오 문서의 요건은 다음과 같다.

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