UI 설계하기

UI 흐름 설계

UI 요구사항과 UI 표준 및 지침에 따라, 화면과 폼의 흐름을 설계하고, 제약사항을 화면과 폼 흐름 설계에 반영할 수 있다.

UI 설계서 구성에 따른 작성 방법

UI 설계서 구성은 UI 설계서 표지, UI 설계서 개정 이력, UI 요구사항 정의, 시스템 구조, 사이트 맵, 프로세스 정의, 화면 설계 등으로 이루어진다.

1. UI 설계서 표지

   UI 설계서에 포함될 프로젝트 명 또는 시스템 명을 포함시킨다.

2. UI 설계서 개정 이력

   UI 설계서 처음 작성 시에는 첫 번째 항목으로 ‘초안 작성’을 포함시키고 그에 해당 되는 초기 버전(version)을 1.0으로 설정한다. 변경 또는 보완이 충분히 이루어져 완성 이 되었다고 판단할 경우 버전을 x.0 으로 바꾸어 설정한다.

3. UI 요구사항 정의

   UI 요구사항들을 재확인하고 정리한다.

4. 시스템 구조
   • UI 프로토타입을 재확인한다.
   • UI 요구사항들과 UI 프로토타입에 기초해 UI 시스템 구조를 설계한다.
5. 사이트 맵(Site Map)
   • UI 시스템 구조의 내용을 사이트 맵의 형태로 작성한다.
   • 사이트 맵 상세 내용(Site Map Detail)을 표 형태로 작성한다.
6. 프로세스(Process) 정의

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

7. 화면 설계

   UI 프로토타입과 UI 프로세서 정의를 참고해 각 페이지별로 필요한 화면을 설계한다.

   • 각 화면별로 구분되도록 각 화면별 고유 ID를 부여하고 별도의 표지 페이지를 작성한다.
   • 각 화면별로 필요한 화면 내용을 설계한다.

UI 화면 설계의 기본 구성 요소

1. 윈도우(Window)
2. 메뉴(Menu)
3. 아이콘(Icon)
4. 포인터(Pointer)

유용성 개념 및 적용 원리 파악

1. 유용성 개념
   • 유용성

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

   • 유용한 시스템을 설계할 때 고려사항

     사용자가 시스템의 구조, 기능, 가치 등에 대해 가지고 있는 마음 속 모형인 사용자 모형과 시스템 설계자가 만들려고 하는 개발자 모형 사이의 차이를 최소화하려는 노 력이 필요하다.

   • 사용자 모형과 개발자 모형 간의 차이 발생
     • 시스템에서의 실행 차, 즉 실행 가능한 기능과 사용자의 원래 목적이 서로 상이하기 때문에 발생한다.
     • 평가 차, 즉 시스템의 실행 결과와 사용자의 원래 목적이 서로 상이하기 때문에 발 생한다.
2. 실행 차를 줄이기 위한 UI 설계 원리
   • 사용 의도 파악
     • 사용자의 원래 목적을 명확히 파악하여 불필요한 부가 기능 때문에 시스템 성능이 떨어지지 않도록 해야 한다.
     • 사용자가 보다 관심을 가지는 항목을 눈에 띄는 위치에 배치하고 적절한 시점에 해 당 기능이 제공되도록 하여야 한다.
   • 행위 순서 규정
     • 사용자 행위의 순서를 세분화시킨 뒤 순서대로 명확하게 제시하여 선택할 수 있도 록 해야 하고 또한 의도에 따라 행위의 순서를 사용자가 임의로 변경 가능하도록 해야 한다.
     • 하나의 작업을 수행하기 위한 단계 수를 최소화시키고, 동일한 결과를 여러 가지 다 른 방법으로도 달성 가능하도록 설계 시 고려해야 하며, 행위의 순서가 사용자의 기 존 경험에 비추어 가능한 한 친숙하도록 설계해야 한다.
   • 행위의 순서대로 실행
     • 프로세스의 흐름을 UI를 통해 직관적으로 알 수 있게 제공함으로써 사용자가 의도한 행위의 순서를 실제 실행으로 옮기는 데 어려움을 최소화해야 한다.
     • 과도한 상호 작용으로 인해 작업이 원활히 진행되지 못하는 상황이 발생되지 않도 록 고려해야 한다.
     • 사용자가 의도한 행위와 가장 잘 어울리는 입력 장치를 선택하고, 사용자의 행위에 대해 적절한 피드백과 취소 기능을 제공해 주며, 디폴트 값을 적절하게 설정함으로 써 불필요한 조작을 최소화하여 사용자가 의도한 행위를 효율적으로 실행할 수 있 도록 설계해야 한다.
3. 평가 차를 줄이기 위한 UI 설계 원리
   • 수행한 키 조작의 결과를 사용자가 빠르게 지각하도록 유도
     • 사용자가 수행한 행위에 대해 아무런 변화된 결과가 제공되지 않는다면 사용자는 자신이 제대로 조작하였는지 의심하게 되므로, 이러한 평가 차가 발생하지 않도록 설계해야 한다.
     • 가능한 한 빠른 처리를 통해 즉각적으로 반응되도록 해야 하며, 즉각적인 반응이 힘 들더라도 가능한 한 반응 속도를 높이도록 노력해야 한다. 또한 사용자가 수행한 행 위로 인해 현재 시스템의 변화가 이루어졌음을 가능한 한 직관적으로 피드백해 주 어야 한다.
   • 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도

     사용자가 수행한 행위로 인해 변화된 시스템의 상태를 사용자가 직관적으로 인지할 수 있도록 시스템을 설계해야 한다. 이를 위해 시스템의 상태 정보를 가능한 한 단순 하게, 그리고 이해하기 쉽게 제시해야 한다.

   • 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도 록 유도

     사용자가 가진 원래 의도가 시스템을 통해 충족되었는지 또는 충족될 수 있는지를 사 용자가 쉽게 파악할 수 있도록 설계해야 한다. 이를 위해 미리보기 기능처럼 예상 결 과를 사전에 제시할 수 있다면 제공해 주는 것이 대부분의 경우 바람직하다.

스토리보드 작성 기법

스토리보드는 디자이너와 개발자가 최종적으로 참고하는 산출 문서이며, 정책이나 프로세 스 및 콘텐츠의 구성, 와이어프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분의 정보가 수록되어 있는 문서이다.

1. 메뉴 구성도 만들기(스토리보드 1단계)

   전체적인 메뉴 구성도이며, 어떤 것을 보여주고 결정된 사항을 표현하기 위한 메뉴의 순서와 구성 단계, 용어를 정의한다.

2. 스타일 확정(스토리보드 2단계)

   레이아웃이나 글자 모양, 크기, 색상, 그래픽에서의 일관성을 유지해야 한다.

3. 설계하기(스토리보드 3단계)

   화면에 보여지는 시각적인 디자인 콘셉트를 잡는다.