← 돌아가기Brand Identity
표지「Brand Guidelines.」 Version 1.0, 2025년 1월 16일. 이 가이드가 시각 디자인과 말투와 사용자 상호작용을 함께 다룬다고 첫 문단이 밝히고, 가치 셋을 Ownership · Trust · Simplicity 로 못박는다. 원문 마지막 문장은 마침표가 둘이다.
0 1 Brand Guidelines
목차일곱 장으로 갈라 둔 목차다. 소개 · 로고 · 컬러 · 타이포 · 애플리케이션 아이콘 · 이미저리 · 무드보드 순이고, 절 번호가 곧 슬라이드 번호다. 원문에서 「1.2 - Brand Vision」과 「1.2 - Tagline」이 같은 번호를 달고 있다.
0 2 Index Content
1장 표지 - 브랜드 소개장이 바뀔 때마다 번호와 제목만 있는 표지를 끼운다. 내용이 없는 장이 아니라, 읽는 사람이 어디까지 왔는지 알게 하는 자리다.
1 0 Brand Introduction
미션「Our mission is to build the most efficient, trust-enhanced marketplace for trading gaming assets.」 파란 사선 그래픽 위에 한 문장만 세웠다. 배경 사진은 Unsplash 출처를 각주로 밝힌다.
1 1 Brand Introduction
비전「Enabling a future where gamers truly own the value they create.」 미션이 무엇을 만드는지를 말한다면 비전은 그 결과로 누가 무엇을 갖는지를 말한다. 두 문장을 붙여 두지 않고 장을 나눈 이유가 그것이다.
1 2 Brand Vision
태그라인「Own Your Game」. 앞의 두 문장을 세 낱말로 줄인 자리다. 레이어 이름은 「1.2 - Brand Vision」인데 화면 제목은 Brand Tagline 이고 절 번호도 1.3 이라, 이름이 앞 장에서 복제된 채 안 고쳐졌다.
1 2 Brand Vision
톤말투를 다섯 낱말로 정한다 - Simple, Efficient, Calm, Grounded, Empowering. 절 번호와 쪽 번호(1.3 · 06)가 앞의 태그라인 장과 똑같아, 원문에서 둘 중 하나는 밀려 있어야 했다.
1 3 Brand Tone
2장 표지 - 로고여기서부터 여섯 장이 로고다. 규칙을 적기 전에 로고가 무엇을 뜻하는지부터 세우는 순서를 취한다.
2 0 Brand Logo
메인 로고파란 판 하나에 세로 락업을 크게 세웠다. 본문이 「clear space, 일정한 비율, 승인된 배경」 셋을 조건으로 걸고 왜곡·색 변경·효과를 금지한다. 뒤에 오는 규정들이 전부 이 세 조건의 세부다.
2 1 Lockup Logo
심볼 작도심볼을 「관문(gateway)」으로 설명한다. 각진 정밀함과 열린 가운데가 명료함과 신뢰와 전진을 뜻한다는 것인데, 뒤의 격자 작도가 그 주장이 눈대중이 아니라는 근거다.
2 2 Construction Logo Mark
가로 락업 작도가로 락업을 격자에 올린 장이다. 다만 본문이 세로 락업 설명(「stacked layout」, 「vertical alignment 가 필요할 때」)이라 제목과 어긋난다 - 다음 장에서 옮겨 온 문단으로 보인다.
2 3 Construction Horizontal Logo
세로 락업 작도세로 락업의 격자다. 「격자는 도구가 아니라 토대」라고 적어 두었는데, 이 문장이 이 가이드 전체의 태도를 요약한다 - 규칙을 취향이 아니라 구조로 세운다.
2 4 Construction Vertical Logo
로고 사용 규정넉 칸 중 위 둘이 허용(「Default Version」·「Symbol Only」)이고 아래 둘이 「Do Not Use」다. 늘린 판과 효과를 얹은 판을 실제로 그려 놓아, 금지가 문장이 아니라 그림으로 남는다.
2 5 Logo Usage Guidelines
로고 색 사용 규정바탕 밝기로만 판정하게 규칙을 줄였다. 기본은 파란 바탕에 흰 로고, 어두운 바탕이면 흰 로고, 밝은 바탕이면 검정 로고. 색 이름을 외우지 않아도 되는 규칙이라 실제로 지켜진다.
2 6 Logo Color Usage Guidelines
3장 표지 - 컬러컬러 장이 여덟 쪽으로 가장 길다. 팔레트를 정하는 데서 끝내지 않고 그 색 위에 로고를 어떻게 얹는지까지 이어지기 때문이다.
3 0 Brand Colors
주 색Ice White · Pure Blue · Midnight · Hot Red-Pink 넉 장. 색마다 HEX·RGB·HSL 과 한 줄 설명을 붙였다. 원문에서 Pure Blue 는 #0018FF 인데 RGB 가 24 | 255 | 100 으로 적혀 있어 두 값이 서로 다른 색을 가리킨다.
3 1 Primary Colors
보조 색Neo Violet · Glow Green · Blaze Orange · Neon Yellow · Soft Lilac · Lime Cream · Soft Coral · Pastel Yellow 여덟 장이다. 위 줄은 진하고 아래 줄은 옅은 짝이라, 같은 결의 색을 강조와 배경 두 세기로 갖는다. 상호작용 상태와 배경과 인포그래픽에 쓴다고 범위를 밝혀 두었다. 여기서도 Blaze Orange 가 #FF5C00 인데 RGB 는 105 | 5 | 255 로 파란 쪽 값이 적혀 있다.
3 2 Secondary Colors
무채색Cloud · Smoke · Steel · Space · Graphite · Arsenic · Phantom · Black 여덟 단계다. 주 색·보조 색과 달리 HSL 대신 CMYK 를 적었는데, 이 층이 인쇄까지 내려가는 층이기 때문이다.
3 3 Grayscale Colors
주 색 위의 심볼심볼만 떼어 주 색 넉 장 위에 얹었다. 규칙은 앞 장과 같지만 여기서는 말이 아니라 실제 조합을 그려 놓아 대비가 모자란 짝이 바로 보인다.
3 4 Primary Colors Logo Mark
주 색 위의 가로 락업가로 락업이 대부분의 자리에서 기본값이라고 못박고, 주 색을 바탕으로 쓸 때는 흰 로고나 검정 로고만 얹으라고 한정한다.
3 5 Primary Colors Horizontal Logo
주 색 위의 세로 락업세로 락업이 갈 자리를 디지털 인터페이스와 소셜 게시물과 가운데 정렬 레이아웃으로 좁혔다. 가로판과 겨루지 않게 쓰임을 갈라 둔 것이다.
3 6 Primary Colors Vertical Logo
사진 위의 로고색이 아니라 사진 위에 얹을 때의 규정이다. 복잡하거나 대비가 낮은 자리를 피하고, 필요하면 옅은 오버레이를 깔라고 적었다. 절 번호가 3.7 이어야 하는데 화면에는 3.6 으로 찍혀 앞 장과 겹친다.
3 7 Primary Colors Logo On Backgrounds
4장 표지 - 타이포그래피서체 장이다. 한 벌로 끝내지 않고 디스플레이·웹·본문 세 갈래로 나눠 각각 쓸 자리를 정한다.
4 0 Primary Typography
디스플레이 서체Gosha Sans. 동유럽과 레트로퓨처의 인상을 가져왔다고 밝히고, 헤드라인과 히어로와 브랜드 선언문에만 쓴다고 자리를 한정한다. 「Own Your Game」을 견본 문장으로 세웠다.
4 1 Primary Typography
웹 서체Space Grotesk. 웹 UI 와 내비게이션과 시스템 문구에 쓴다. 구글 폰트에서 받을 수 있는 것을 따로 정해 둔 것은, 라이선스가 걸리는 자리에서 대체 서체를 그때그때 고르지 않게 하려는 것이다.
4 2 Google Typography
본문 서체Geist. 본문과 UI 요소를 맡고 가변 굵기라 제목·라벨·본문을 한 벌로 덮는다. 레이어 이름의 「Secodary」는 원문 오타이고, 절 번호와 쪽 번호가 앞의 웹 서체 장과 똑같이 4.2 · 24 다.
4 2 Secodary Typography
서체를 쓴 화면규격이 아니라 실제 화면으로 보여 준다. 히어로의 「Own Your Game」, 비전 문장, 「Join Here」 버튼, 제품 절과 뉴스레터가 한 판에 선다. 다만 본문은 UI 서체를 Manrope 라고 적어, 본문 서체를 Geist 로 정한 앞 장과 어긋난다.
4 3 Typography In Use
아이콘과 글자아이콘을 따로 다루지 않고 글자와 짝지어 다룬다. Dashboard · Products · Customers · Analytics · Widgets · Reports 사이드바와 체크아웃 버튼이 예시다. 아이콘의 굵기가 옆 글자와 맞아야 한다는 것이 이 장의 요지다.
4 4 Icons And Typography
5장 표지 - 애플리케이션 아이콘아이콘이 실제로 놓이는 자리를 플랫폼별로 다섯 쪽에 걸쳐 다룬다. 규격을 적는 대신 그 플랫폼의 화면을 그대로 그려 놓는 방식이다.
5 0 Applications Icon
브라우저 아이콘탭에 놓인 파비콘을 macOS 크롬 창째로 그렸다. 「digital front door」라는 표현대로, 작은 크기에서 무너지지 않는지가 유일한 판정 기준이다.
5 1 Browser Icon
macOS 아이콘Finder 와 Dock 과 알림에 놓인 모습을 한 화면에 세웠다. 애플 휴먼 인터페이스 가이드라인을 따르되 브랜드의 기하와 색은 지킨다고 밝힌다.
5 2 Macos Icon
iOS 아이콘앱스토어 목록과 홈 화면과 푸시 배너를 함께 그렸다. 평점 4.8, 리뷰 15만이라는 숫자는 실제 값이 아니라 화면을 채운 자리표시다.
5 3 Ios Icon
X 프로필 아이콘X 프로필을 밝은 판과 어두운 판으로 나란히 세웠다. 계정은 @overtake_world 이고 소개 문장이 미션을 줄인 판이다. 위치 「Spain」과 링크 「radesk.com」은 템플릿에 남은 값이다.
5 4 Twitter X Icon
인스타그램 아이콘원형으로 잘리는 자리라 가운데 정렬과 크기를 따로 잡아야 한다고 적었다. 정사각 아이콘을 그대로 넣으면 각진 심볼의 모서리가 잘린다.
5 5 Instagram Icon
6장 표지 - 이미저리규정이 끝나고 표현이 시작되는 자리다. 앞 장들이 지키라고 적은 것이라면 여기부터 다섯 장은 그 안에서 무엇을 할 수 있는지를 보여 준다.
6 0 Imagery Logo
포스터A4 포스터를 여러 장 겹쳐 쌓았다. 이름을 「Ove / rTa / ke」로 잘라 판마다 다르게 앉히고 파랑과 빨강과 검정을 섞었다. 로고를 온전히 보여 주는 규정 장들과 정반대로, 잘려도 읽히는지를 시험하는 자리다.
6 1 Imagery Logo
문구류책자와 명함과 봉투와 펜을 어두운 바닥에 놓고 찍었다. 표지 셋이 파랑·검정·빨강이라 앞서 정한 주 색이 실물에서 어떻게 겨루는지가 여기서 보인다.
6 2 Imagery Logo
의류와 모자후드와 캡에 얹은 판이다. 후드는 심볼 뒤로 분홍 방사선을 깔았고 캡은 워드마크 가운데 글자를 심볼로 바꿔 넣었다. 자수와 프린트는 획이 뭉치므로 한 색 심볼을 정해 둔 앞의 규정이 여기서 쓰인다.
6 3 Imagery Logo
가방과 키링에코백과 키링이다. 가방에는 「TAKE」를 세로로 세 번 쌓아 아래로 갈수록 잘리게 두어, 반복 자체를 무늬로 썼다.
6 4 Imagery Logo
7장 표지 - 무드보드마지막 장이다. 규정을 다 적은 뒤 그 규정이 어디서 왔는지를 뒤에 붙였다. 절 번호가 7.0 이어야 하는데 화면에는 6.0 으로 남아 있다.
7 0 Moodboard
빛의 결어둠 위로 세로 광선이 올라오고 그 위에 「Own Your Game」이 놓인다. 파랑을 색이 아니라 빛으로 다루는 결이다.
7 1 Moodboard
압출한 글자OVERTAKE 를 두껍게 밀어낸 파란 3D 글자로 세우고 화면 밖으로 넘치게 잘랐다. 로고의 각진 면과 같은 어법이지만 부피를 준 판이라, 심볼의 기하가 입체로 가도 버티는지를 본다.
7 2 Moodboard
선언 문구「EMPOWERING TRUST THROUGH STABILITY, TRANSPARENCY, AND INNOVATION.」을 화면 가득 세우고 그 위에 유리 방울을 얹어 글자를 일그러뜨렸다. 태그라인이 세 낱말로 말하는 것을 길게 편 판이다.
7 3 Moodboard
흐린 심볼과 로고세로 줄무늬로 흩뜨린 심볼을 왼쪽에 두고 오른쪽에 또렷한 로고를 붙였다. 무드보드가 로고로 되돌아오며 끝나는 자리다. 쪽 번호가 42 여야 하는데 원문에는 「4.2」로 찍혀 있다.
7 4 Moodboard
다른 표지 - Brand Identity같은 날짜·같은 본문·같은 그래픽인데 제목만 「Brand Identity.」인 표지다. 확정본은 「Brand Guidelines.」로 갔고, 정체성을 적은 문서인지 규정을 적은 문서인지를 이름으로 가른 흔적이다.
Brand Identity Cover
브랜드 자산 배포 화면가이드가 아니라 제품 웹의 한 화면이다. 「Brand Asset」 아래 로고를 PNG 와 SVG 로 내려받게 해 두었다. 규정을 문서로만 두지 않고 파일이 나가는 자리까지 만든 것이라, 이 캔버스에서 유일하게 살아 움직이는 장이다.
Brand Asset Page
100%