디자인 가이드라인이 중요한 이유 (구축, 기준, 예시 등 디자인 가이드라인의 모든 것)

안녕하세요 효니톰입니다.

오늘은 디자인 가이드라인과 예시에 대해 설명해드리겠습니다.

 

 

구글의 머티리얼 디자인 가이드라인 이후 각종 회사들 또한 고유 디자인 시스템을 구축 및 공유합니다.

그럼 이 가이드라인이란 무엇일까요?

 

서비스를 만들었을 때 정해진 틀이 없다면 여기저기에서 각종 요소를 추가하며 혼잡해질 것입니다.

가장 중요한 목적은 통일성, 일관성 있게 구축하도록 하는 것이라고 생각합니다.

 

가이드라인이 있어야 깔끔해지고 사용자에게 접근도 쉽습니다.

신입 디자인들이 보통 구글, 애플의 가이드라인을 하나하나 읽으며 공부하기도 하죠.

 

 

UI 디자인 가이드라인

UI 패턴과 컴포넌트를 공통으로 정의 및 규정해 UI를 표준화하고 화면 간 일관성을 확보하는 것입니다.

 

UX 디자인 가이드라인

서비스 측면에서는 사용자가 일관적이고 차별화된 경험을 하도록 하기 위한 것이 목적이며,

브랜드 측면에서는 브랜드 정체성과 컬러 등이 일관되도록 기능, 네이밍, 어투 등의 요소를 정의합니다.

 

 

[디자인 가이드라인의 기준]

디자인 가이드라인의 기준은 회사마다 다릅니다.

그중에서도 공통적인 부분이 있는 것 같습니다.

 

1. 명확한 정보 전달을 도와주는 디자인
2. 사용자를 이해한 디자인
3. 단순함을 유지하는 디자인
4. 일관성을 가진 디자인
5. 네러티브가 잘 구성된 디자인 (스토리텔링)
6. 인터렉션이 잘 설계된 디자인

 

 

여기에 비즈니스나 브랜드적인 항목을 추가하고 변경하기도 합니다.

 

 

[디자인 가이드라인 구축]

먼저 가장 중점을 두는 것은 색상, 공간, 타이포그래피입니다.

 

색상

1~3가지 메인 컬러를 정의하고 보조 컬러를 추가합니다.

보조 컬러는 자주 쓰이지 않으나 UI를 흥미롭게 만들고 제품 구별할 기회를 제공합니다.

색상 컬러는 개발자, 디자이너와 소통을 위해 RGB 등으로 지정합니다.

 

공간

크기와 간격을 일정하게 측정하는 것은 특징적 브랜드를 만드는데 큰 영향을 줍니다.

쉽게 이해 및 적용할 수 있는 의미 명명 규칙을 만들고 동일한 원칙에 따라 사용합니다.

 

타이포그래피

서체, 글꼴, 크기 등 또한 이미지가 크게 달라질 수 있어 일정하게 사용하는 것이 중요합니다.

줄 간격과 길이, 자간에도 신경을 써야 하고요.

타이포그래피가 올바르게 사용되도록 UI, UX 원칙과 접근성, 가이드라인을 준수해 활용할 수 있도록 합니다.

 

 

추천드리고 싶은 디자인 가이드를 만들어주는 툴이 있습니다.

https://zeroheight.com/

이 사이트에 파일을 넣으면 아이덴티티 컬러, 아이콘, 컴포넌트 등 공통적인 요소를 뽑아내고 구축해줍니다.

 

 

[디자인 가이드라인 예시]

유명한 디자인 가이드라인으로는 애플, 구글, 우버, 에어비앤비, 아우디, IBM 등이 있습니다.

 

 

애플의 Human guide line

Human Interface Guidelines - Design - Apple Developer

 

구글의 머티리얼 디자인

Material Design

 

우버의 Brand Guidelines

개발자 | Uber

 

에어비앤비의 Design Language System

Building a Visual Language

 

아우디의 디자인 가이드라인

Redefining Progress

 

IBM 디자인 가이드