글로벌 브랜드들의 브랜드 디자인 가이드 웹사이트
브랜드 디자인 가이드는 왜 필요할까??
작은 기업이든 큰 기업이든 브랜딩을 위해 로고를 디자인하고, 컬러, 폰트, 사진 등 다방면에서 정체성을 정립해 두었는데, 디자이너가 바뀌면서 이것들이 다르게 쓰이는 경우를 종종 볼 수 있습니다. 문제는 고객들이 이렇게 상황마다 달라지는 브랜드를 만나면 혼란스러워한다는 것이죠. 고객들이 생각했던 어떤 이미지가 있었는데, 오프라인에서 다르고 온라인에서 다르면 경험의 질이 떨어지고, 기억하기 어려워집니다.
그래서 브랜드 디자인을 마무리하면 가이드라인을 만들어 둡니다. 이렇게 써도 된다. 이렇게는 쓰면 안 된다. 하는 것들을 정리해서 만든 사람이 아니더라도 같은 브랜드 이미지를 전달할 수 있죠.
예전에는 이 브랜드 디자인 가이드를 PDF로 전달하는 경우가 많았습니다. 물론 아직도 많이 쓰고 있고요. 그런데 요즘에는 이것들도 웹으로 많이 옮겨 오는 듯합니다. 그래서 글로벌 브랜드 중에 웹사이트로 구현된 브랜드 디자인 가이드들을 찾아서 모아봤습니다. 다양한 브랜드만큼이다 가이드를 구성하는 메뉴도 다양했는데요. 하나씩 살펴볼게요.
1. Starbucks 스타벅스
스타벅스는 심플합니다. 웹사이트 UI도 우측에 메뉴를 한눈에 볼 수 있게 되어있고요. 가장 필요한 부분들로 적당히 정리가 잘 된 것으로 보입니다. 메뉴 중에 Case Studies라는 것이 있는데, 이것은 가이드라는 것이 있다고 해서 너무 매몰되면 안 되기 때문에, 이런 식으로 쓰였다는 것을 보여주고 있습니다.
가이드 항목
Logos
Color
Voice
Typoraphy
Illustration
Photography
https://creative.starbucks.com/
2. Uber 우버
우버 안에도 다양한 서비스 브랜드들이 있다 보니, 가장 앞에는 Brand Architeture 메뉴가 있어서 우버 하위에 어떻게 브랜드가 운영되는지 알 수 있습니다. 다른 부분은 스타벅스와 비슷한 편인데, Motion메뉴가 있어서 영상을 만들 때는 도형은 어떻게 나타나고, 타이틀 폰트, 영상 전환 등 어떤 텐션감으로 만들어야 하는지도 가이드를 만들어 두었네요.
가이드 항목
Brand Architecture
Logo
Color
Composition
Imagery (Icongraphy, Illustration, Photography)
Motion
Tone of voice
Typography
Downloads
3. Audi 아우디
아우디는 리스트업 해준 것 중에 가장 상세합니다. Basics 영역에는 위 스타벅스나 우버와 비슷한 편이지만, Guides 안에는 UI부터 애니메이션을 만들 때 오브젝트에 Curve 값까지 상세한 가이드를 주고 있습니다. UI 컴포넌트도 세부적으로 다 잡혀 있어서 디자인할 때 가이드만 맞추면 누구나 비슷한 느낌으로 디자인을 할 수 있을 듯합니다. 더군다나 Corporate Sound 에는 자동차가 문을 열고 닫는 소리, 배기통 사운드까지도 제공하고 있습니다.
가이드 항목
Fundamentals
- Brand Appearance
- Basic
Rings
Brand Claim
Colours
Typography
Layout Structure
Imagery
Illustration
Icon
Animation
Guides
User Interface
Communication Media
Corporate Branding
Corpotate Sound
Motion pictures
Audi Motosport
Dealer Facility
https://www.audi.com/ci/en/renewed-brand.html
4. Facebook Company 페이스북 컴퍼니
페이스북 컴퍼니 내의 다양한 브랜드의 가이드를 한 사이트에서 볼 수 있습니다. (Facebook Company, Facebook App, Messenger, Instagram, Whatsapp, Oculus, Workplace) 각 브랜드별로 내용이 조금씩 다르긴 한데, 아주 상세하다기보다는 로고를 쓰는 규정을 Do, Don't로 간략하게 정리해두었네요.
가이드 항목
Guidelines
Brand Permission
Do
Don't
5. Spotify 스포티파이
앱 서비스를 만드는 브랜드다 보니 아무래요 UI 가이드라인과 Brand 가이드라인이 섞여 있고, 개발자들이 사용하기 좋게 포커싱 되어 있는 느낌입니다.
가이드 항목
Attribution
Using our content
Browsing Spotify content
Linking to Spotify
Playing views
Showing entities
Using our logo
Using our colors
Logos and naming restrictions
Fonts
https://developer.spotify.com/documentation/general/design-and-branding/
6. Netflix 넷플릭스
아주 간단합니다. 로고와 심벌 가이드만 있네요.
가이드 항목
Logo
Symbol
7. Youtube 유튜브
넷플릭스와 비슷한 편인데, 조금 더 상세한 편입니다. 파트너 및 광고주, 엔터테인먼트 및 미디어, API 및 기기 파트너에게 글 위주의 가이드를 전달하는 것이 다른 브랜드들과 다르네요.
가이드 항목
Overview
Logos, Icons, and Colors
Partners and advertisers
Entertainment and Media
API and device partners
https://www.youtube.com/howyoutubeworks/resources/brand-resources
8. Dropbox 드롭박스
여기는 한국어 번역이 잘 된 사이트가 나오네요. 메뉴 구성도 한글로 노출이 되고요. 특이한 것은 스크린샷이라고 해서 자신의 브랜드를 소개할 때 스크린샷을 많이 쓰게 될 텐데, 그것들에 변형을 주지 말라는 것도 가이드에 넣어 두었네요.
가이드 항목
로고
앱 아이콘
스크린샷
용도
보도자료
개발자 가이드
https://www.dropbox.com/branding
웹으로 구성된 브랜드 디자인 가이드를 찾아봤습니다. 일단 좋은 점은 바로 파일을 다운로드할 수 있고, 사운드나 모션 같은 경우도 눈으로 보면서 어떤 느낌을 주고 싶은지 알 수 있었습니다. 또 폰트 같은 경우는 직접 써볼 수 있게 구현해둔 곳도 있었습니다.
그리고 무엇보다 버전 관리가 용이할 것 같네요. PDF로 전달을 해버리면 이전 버전을 그대로 쓰게 되는 경우가 생기겠지만, 웹이 구현을 해두면 웹에 파일이나 버전이 달라졌을 때 수정을 해두면 바로 적용이 될 수 있으니까요. 또 글로벌 브랜드이기 때문에 세계 어디서든 바로 접속할 수 있다는 게 장점인 것 같네요.
아마도 앞으로 더 많은 브랜드들이 웹으로 브랜드 디자인 가이드를 만들게 되지 않을까요??
브랜딩 관련 정보를 편하게 받아보고 싶으시다면 '브만남의 브랜딩 뉴스레터'를 구독해보세요
브랜드 만드는 남자 | 김주황
lllayer(레이어) CEO & Branding Director
www.lllayer.com
-
브랜드의 경험을 설계하고, 고객과의 접점을 디자인합니다.
-
zwang@lllayer.com
www.youtube.com/c/brandmakerman
www.instagram.com/brandmakerman
www.facebook.com/brandmakerman
