Terms | Style Guide란? 스타일 가이드 만드는 법

안녕하세요, 노니입니다.

UX/UI를 공부하시는 분들이라면

'스타일 가이드'를 들어봤거나

비핸스 같은 포트폴리오 플랫폼에서

아래 같은 화면을 많이 접하셨을 텐데요.

 

 

어떻게 생겼는지는 알고 있지만,

스타일 가이드를 만드는 목적이나

만드는 방법에 대해서

잘 모르신다면

이 포스팅에서 알려드리겠습니다.

 

 

 

스타일 가이드란?

 

A style guide or manual of style is a set of standards for the writing, formatting and design of documents.
It is often called a style sheet, although that term also has other meanings.
인용 출처: 위키피디아 

 

스타일 가이드 혹은 스타일 매뉴얼은
서류의 작법, 형식과 디자인 규격을 말한다.

스타일 시트라고 불리기도 한다. 

 

A brand style guide is a holistic set of standards that defines your company's branding.
인용 출처: content marketing institute

 

브랜드 스타일 가이드는

회사의 브랜딩을 정의하는
일련의 기준들을 정리한 것이다.

 

즉, 네이버가 네이버 답게 보이도록,

카카오가 카카오 답게 보이도록 하는

규칙들을 정리한 것입니다.

 

 

스타일 가이드의 목적은?

 

스타일 가이드를 제작하면

여러 관계자가 협업을 하는 과정에서

브랜드나 기업의 룩(look)이 일관적이고

같은 메세지를 전달할 수 있게 됩니다.

 

사용자의 입장에서 어떠한 프로덕트를 인식하는데

 심리스(seamless)한 경험을 할 수 있게

조력하는 역할을 하는 것이죠.

 

예를 들어 디자이너 A가

네이버의 메인 화면을 디자인할 때,

개발자 B가 이를 구현할 때 화면이 상이하다면

프로덕트는 같은 목소리를 낼 수 없습니다.

 

또한, 개발자가 프로덕트를

운영하거나 개발할 때마다

매번 디자이너에게 스타일 자문을 구해야 한다면

업무 효율이 떨어지게 됩니다.

 

따라서, 1) 브랜드의 일관성을 높이기 위해

2) 업무 효율/커뮤니케이션을 극대화하기 위해

 

우리 브랜드를 대변하는 프로덕트에는

"이것만은 꼭 지켜주세요~ 이 부분은 이렇게 바꿔도 됩니다~ "

라고 미리 규정해 놓는 것이죠. 

 

 

업무의 효율성을 높이는 스타일 가이드는 어떻게 만드는 걸까요? 

 

 

1. 로고 타입에 대한 가이드라인을 정합니다.

 

브랜드/프로덕트/기업의 로고가

어떠한 색상, 타입 페이스, 사이즈, 패딩 값 등을 가지고 있는지

 등을 알려주는 것이 좋습니다.

 

스카이프 로고 타입 스타일가이드, 이미지 출처 https://www.business2community.com/branding/simple-brand-style-guide-3-examples-easy-use-brand-style-guides-01636647

 

스포티파이 로고 심볼 및 로고타입 스타일 가이드, 이미지 출처 https://blog.hubspot.com/marketing/examples-brand-style-guides

 

2. 컬러 팔레트

 

로고타입, 심벌 등에 어떤 컬러를 써야 하고,

어떤 컬러는 사용하면 안 되는지를 정의합니다.

색상의 믹스매치를 정의하는 것도 중요합니다.

 

 

3. 타이포그래피 및 폰트를 서술합니다.

 

줄 간격, 볼드 등 유의해야 하는

타이포그래피 스타일이 있다면 포함합니다.

 

4. UI 요소 (버튼, 그리드, 알림 등)를 정의합니다.

 

웹과 앱이 모두 존재한다면, 이를 모두 서술해야 합니다.

공통적으로 쓰이는 것 끼리는 묶어서,

예외사항은 따로 기술합니다.

버튼의 기본 상태, 호버, 활성화, 비활성화 상태를 정의하는 경우가 많습니다.

이외에 화면에서 따라야 하는 그리드나 알림 버튼, 아이콘을 사용함에 

유의할 점이 있다면 포함합니다.

 

5. 일러스트레이션 등

 

일러스트는 제작 목적에 따라 완벽하게 같은 모양으로 나올 수는 없지만

역시나 프로덕트의 일관성을 유지하는 정도에서

제작돼야 합니다. 그렇기 위해 꼭 필요한 조건들을 기술합니다.

색상의 조합은 어때야 하는지, 일러스트의 선(line) 두께는 어때야 하는지 등이

포함될 수 있습니다.

 

 

 

개인적으로 국내 기업 중에서는 스포카의 

'디자인 가이드라인' 이 좋은 사례라고 생각합니다.

한 번 체크아웃해 보시고, 스터디해보시길 추천드려요!

 

bi.spoqa.com/

Spoqa Design Guidelines