UI 디자인 가이드 이해

UI 디자인 가이드에 대한 이해

1. UI 디자인 가이드의 필요성

UI 디자인 시, UI에 적용되는 프로젝트 및 서비스를 정확하게 이해해야 사용자의 요구에 부합하고 만족도 높은 결과물을 만들어 낼 수 있다. 이때, 디자이너가 설계한 이미지와 구 성을 개발자가 이해할 수 있는 형태의 문서로 개발자에게 전달해야 일관성 있고 사용자 만족도가 높은 최종 결과물이 나올 수 있으므로, 상세하고 일관된 UI 디자인 가이드가 필 요하다.

 

2. UI 디자인 가이드의 개요

1) 정의

UI 디자인 가이드란, 디자이너가 프로젝트 및 서비스에 맞추어 확정한 디자인 내용을 개발자에게 이관하기 위하여 컬러, 폰트, 이미지, 좌표, 크기 등의 디자인 리소스를 문 서화하여 제공하는 문서이다. 대부분 그래픽 디자인과 관련된 사항을 정의하므로 GUI 디자인 가이드, GUI 가이드라인이라고도 부른다.

 

(2) 구성 요소

UI 디자인 가이드(이하, 문서 또는 가이드 문서)는 일관성 있는 화면 디자인을 위하여 목표 시스템의 공통 규칙, 폰트, 컬러 등의 리소스 요소와, 서비스 목적에 따른 여러유형의 레이아웃(예: 단순 정보 전달, 검색 레이아웃) 등을 사전에 설계해 둠으로써 반 복적으로 활용 가능한 내용들로 구성된다.

 

(가) 일반사항

문서명, 담당자(부서, 이름) 등 가이드 문서의 일반 사항을 작성함으로써 가이드 문 서를 참조하는 사용자가 해당 문서의 기본 정보를 확인 가능하도록 한다.

(나) 문서 이력

버전 정보, 수정 일시, 수정 페이지 번호, 담당자, 수정 내용, 비고 등을 작성하여 가이드 문서에 대한 개정 이력(history)을 확인 가능하도록 한다.

(다) 주요 디자인 요소

1) 화면 설정

구현 환경(PC, 모바일, 태블릿)에 따른 해상도, 지원하는 브라우저 버전, 화면 정렬, 스크롤 바, 프레임 사용 여부 등 기본적인 화면 설정 내용을 전달한다.

2) 공통 규칙

전체적인 디자인의 느낌과 레이아웃의 일관성을 부여하기 위하여 폰트, 컬러 등 의 공통적인 리소스 정보를 전달한다.

3) 구성 항목

<표 1-1> UI 디자인 가이드 구성 항목

4）레이아웃

레이아웃의 전체적인 구조는 header, container, footer로 구성되며, 콘텐츠의 구 성은 필요에 따라 고정/가변 형태로 나누어 구성되고, 사용자에게 서비스가 직 관적으로 가시화될 수 있도록 페이지 구성 후 콘텐츠를 제공한다.

5) 네이밍

다양한 사람과 진행하는 개발 작업을 효율적으로 수행하기 위하여 사전에 정의 해 둔 공통 규칙에 따라 이미지 파일명, CSS명 등의 이름을 정한다.

 

구현 환경 기반 UI 구현 프로세스 검토

1. 구현 환경별 특성

UI 디자인 가이드는 구현 환경별 플랫폼의 특성을 고려하여 제작해야 한다. 대표적으로 웹(Web) 환경의 경우 브라우저 기반에서 운용되며 서버와 HTTP 프로토콜을 통한 통신을 수행하는 특성을, 앱(App) 환경의 경우 스마트기기에서 운용되는 소프트웨어로서 스토어 에서 업데이트를 수행하는 특성을 고려하여 가이드를 제작한다

2. UI 구현 프로세스 검토

(1) 웹(Web) 환경 UI 구현 프로세스

웹 환경에서 UI 구현 시 프로세스는, 시스템에 대한 방향성 수립 후 디자인 기획을 수 행하고 나서, HTML, CSS 등을 통해서 퍼블리싱을 수행한 후 다양한 언어를 이용하여 개발한다.

(2) 앱(App) 환경 UI 구현 프로세스

앱 환경에서 UI 구현 시 프로세스는, 서비스에 대한 방향성을 수립하여 서비스 기획을 수행하고 나서, 플랫폼(안드로이드, iOS 등)을 고려하여 개발한다.

 

(가) 안드로이드 환경 UI 구현 시 고려 사항 안드로이드 환경 내에서 적용되는 머티리얼 디자인(Material Design)은 질감이 느껴 지는 표면(Tactile Surfaces)과 직관적인 디자인 특성을 고려해야 한다.

<표 1-2> 안드로이드 환경 UI 구현 시 대표적인 고려 사항

(나) iOS 환경 UI 구현 시 고려 사항

iOS 환경에서의 HIG(Human Interface Guideline)은 앱 기능에 어울리는 디자인을 위 하여 미적인 통일성, 일관성 있는 디자인, 메타포 적용을 통해 사용자에게 친숙한 인터페이스를 제공하는 등 사용자 친화적인 디자인 특성을 고려하도록 요구한다.

<표 1-3> 표준 제스처(Standard Gestures)

제스처(Gestures)는 게임이 아닐 경우를 제외하고는 항상 표준 제스처를 사용해야 혼동하지 않는다.

- drag and drop에서 드래그 동작 시 목적지가 될 수 있는 것과 아닌 것을 구분해 야 하며, 화면 내의 이동은 구분하고 가능하면 이동 중 프리뷰를 보여 준다.

- 피드백을 통해 유용한 피드백을 제공하며, 불필요한 알림은 제공하지 않는다.