브랜드 가이드를 작업하며..
상상속에만 있었던 브랜드 디자인 가이드 작업을 실행하다..!
내가 회사에 입사 한 후, 브레인인라는 웹관리자의 UI 디자인을 맡으면서 상시업무로 무엇을 가져갈까 고민을 하던 중,
기존 디자이너가 저장해놓은 외장하드의 자료들을 보면서 느낀점은 브랜드의 정체성이 모호하다는 점이였다.
시그니쳐 컬러인 옥색 컬러의 컬러코드도 다 제각각이였다. 그래서 브랜드 디자인 가이드의 확립이 필요하다고 생각했다.
디자인팀이라고 해봤자 고작 3명이지만 우리들끼리의 법칙을 만들어 지켜나가 앞으로는 일관성 있고 명확한 브랜드 이미지를 확립해나가는 기초 재반다지기 단계라고 생각하고 디자인 가이드를 만들어보기로했다.
Why
일단 처음 생각할 것은 Why 였다.
먼저 내가 왜 디자인 가이드를 확립시키는지 이유를 명명해야 했다.
하여 내가 생각한 결론은, 디자인 가이드 확립은 브랜드 전체적인 통일성을 확립하고, 시스템 가이드를 통해 브랜드의 색깔을 보여주고 고객에게 브랜드의 정체성을 확립시켜준다. 그리고, 회사내에서도 규칙을 따라 모든 편집물이나 제품에 관련된 모든 작업물들을 편리하게 해주어 효율을 극대화 한다. 로고 및 폰트나 사용되는 컬러를 통일함으로서 혼란을 줄이고 더 나아가서는 브랜드 아이덴티티를 확립하여 고객들에게 긍정적인 이미지를 심어줄 수 있도록 점차 개선해나가야 할 필요성이 있다.
HOW
그 다음으로는 HOW이다. 브랜드 디자인 가이드를 어떻게 작업할지 명명해야 했다.
기존에 작업되어있는 디자인 가이드를 벤치마킹하여 최소 필요한 구성으로 목차를 잡고, 직원들이 가이드의 필요성을 느낄 수 있도록 최소한의 설명을 부여한다. 가장 중요한 건 브랜드 가이드의 명명이다. 로고 사용 법칙, 컬러 사용 법칙, 문구 정의, 문구 사용법 등을 확립하여 왜 이렇게 됐는지 타당한 이유로 설득시켜 브랜드 시스템 가이드를 활성화 시킨다.
INDEX
디자이너 13년 차의 경력이미지만 한번도 작업해본적 없기도 해서 처음부터 막혔다.
어떤 구성을 가져가야 할 지 계속 생각하면서, 우리 회사에 맞는 목차들로 구성을 해보았다.
Values - 가치 브랜드의 가치를 정의하며, 우리가 나아가고자 하는 기준을 제시한다.
Logo - 로고 Logotype, Symbol, Signature의 활용 지침을 제시하고 가치를 시각적으로 표시한다.
Colors - 컬러 전용 컬러를 확립해 브랜드 아이덴티티를 강하게 전달하고 일관성 있는 색상 사용을 지향한다.
Typography - 전용 서체의 기준을 명시함으로서 서체 활용을 통한 아이덴티티를 관리한다.
Photography - 브랜드에 걸맞는 이미지를 활용함으로써, 일관성있는 브랜드 아이덴티티를 확립한다.
Notation - 브랜드 표기 규정을 숙지하여 브랜드 아이덴티티의 일관성을 유지할 수 있도록 한다.
이제는 포토샵보다 편해진 XD 이제는 포토샵보다 편해진 XD
인간은 적응의 동물이 백 번 맞다. XD를 사용한지 얼마 됐다고 버릇처럼 포토샵을 켜고 초집중 모드로 포토샵으로 진행을 하다, (20%는 작업이 진행된 듯) 아트보드를 붙여넣고 있는데 순간 그 아트보드의 무게감으로 자리를 옮기는데 버퍼링이 걸려버리는 것이다. 복사해 붙여 넣고는 아차 싶었다. XD로 작업을 할 걸 그랬네.. 라고 생각하자마자 XD를 켜고 그냥 옮겼다. 화면 몇 개를 재작업 할 지 언정 XD가 쾌적하고 빠를 것 같았다. 해서 XD를 사용해 재작업을 들어갔다. 아직 기능을 전부 활용을 하지는 못하지만 그냥 텍스트를 입력하는 것만으로도 편안하고 쾌-적 해진것이 업무능률이 80% 향상되었다.
일단 진행시켜
1. 가치
브랜드 가치를 정의해주는데는 어렵지 않았다. 홈페이지에 있는 브랜드 정체성 및 메인 문구를 활용하여, 간단명료하게 정리했다.
- 글로벌 뇌파 특정 선도기업
- 인간중심의 인본주의 경영
- 인공지는 기반의 디지털 멘탈케어 솔루션
브랜드의 가치를 맨 처음으로 작성을 하며 회사가 지금 어떤 이미지를 가지고 있는지를, 우리가 지니고 있는 정체성과 나아갈 방향이 어느정도 큰 그림이 그려져 브랜드 가이드 작업을 시작하며 정체성을 파악하기 더할 나위 없이 좋았다. 비록 홈페이지에 떠다니는 문구를 주워담아 임의로 정리하긴 했지만 뭔가 군더더기 없이 깔끔하게 3가지로 정의를 내린 것에 만족스러웠다… (컨펌은?)
2. 로고
로고는 브랜드를 대표하는 핵심 요소이므로 왜곡 및 변형에 유의하고 규정을 숙지하여 사용하기 위해 규칙을 명명해주며, 영문은 iMedySync , 국문과 로고타입의 병기가 필요할 경우 ‘아이메디신'을 문단의 정렬 스타일에 맞춰 표기해준다.
Logo Type iMediSync 로고타입은 지정서체인 나눔스퀘어체를 바탕으로 글꼴, 자간 등이 조절된 로고타입니다. 별도의 심볼없이 사용하면 안되며, 임의의 형태로 변형하여 사용해서는 안된다.
Primary A
iMediSync의 중심이 되는 가로형 대표 로고이다. 기본형 로고는 대, 내외 다양한 커뮤니케이션에 최우선으로 사용되어야 하며 단독으로 표기하는 것을 원칙으로 하고 있다.
Primary B
iMediSync의 중심이 되는 세로형 대표 로고이다. 기본형 로고는 대, 내외 다양한 커뮤니케이션에 최우선으로 사용되어야 하며 단독으로 표기하는 것을 원칙으로 하고 있다.
그리고 브랜드 로고들을 하나씩 배치시켜 주고, 표기법을 설명해 주었다.
Symbol (Secondary) 로고에서 핵심적인 의미를 담고있는 심볼 모양을 활용하여 커뮤니케이션 할 수 있다.
Clear Space & Scale 로고 주변의 여백은 일관된 브랜드 아이덴티티와 명시성을 고려하여 타 요소들의 시각적 침해로부터 보호받는 공간이 보장되어야 한다.
Minimum Size 로고에 적용되는 매체의 특성을 고려하여 가독성 확보가 가능한 크기로 표현되어야 한다. 여기서는 로고를 웹에서 사용할때와 출력으로 사용할 때의 최소 사이즈를 지정해주었다.
Usage 그 외에 다양한 준수사항들을 간단하게 리스트업 하여, 명시해주었다.
비율 변경 금지 임의로 비율을 바꾸지 않는다.
재배치 금지 행을 바꾸거나 간격을 조절하지 않는다.
분리 금지 단어 단위로 분리해서 쓰지 않는다.
회전 금지 기울여 쓰지 않는다.
컬러/아웃라인 사용 금지 단어 단위로 분리해서 쓰지 않는다.
그래픽 효과 금지 로고타입에 그림자 효과, 그라데이션 효과, 엠보효과 등 그래픽적인 효과를 사용하지 않는다.
이미지 배경 금지 이미지나 복잡한 배경 위에 쓰지 않는다.
배경 색상 사용 제한 배경에 조화롭지 않은 색상, 식별이 어려운 색상을 쓰지 않는다.
텍스트에 삽입 금지 텍스트 속에 로고타입을 사용하지 않는다.
3. Color
지정된 색상과 사용규정을 숙지하여 브랜드 일관성을 유지합니다.
브랜드를 표현하는 주요 색상이다. 모든 색상은 0번이 주요색이다. 색상은 브랜드 아이덴티티를 전달하는 가장 핵심적인 요소로 색상값을 참고하여 매체에 적용하는 것을 권장합니다. 인쇄 등 오프라인 매체는 PMS, CMYK 값을 참고하며, 온라인 매체는 RGB, HEX값을 참고하여 제작한다. 인쇄 매체의 경우 정확한 색상 재현을 위해 Pantone색상 견본과 대조하여 시각적인 동일 여부를 판단해야 한다. 브랜드 간에는 색상을 혼용해서 사용하지 않는다.
4. Typography
전용 서체 활용을 통한 아이덴티티를 권장합니다.
브랜드 지정 서체는 밝고 현대적인 이미지를 가진 나눔스퀘어이다. 나눔스케워체는 자간을 0을 기준으로 약간의 시각적 보정은 허용하며 장평은 변형없이 사용해야 한다. Noto Sans는 영문서체 활용 시 사용되며 지정서체 외 다른 서체의 사용은 금지한다.
Weight 아이메디신의 폰트 굵기 안내 쉽고 명확하며, 간결한 메세지를 효과적으로 전달하기 위해 폰트의 크기와 두께를 적절히 선택하여 사용한다. 국문은 나눔스퀘어로, 제목용으로 Extra Bold 본문용으로는 Medium을 권장한다. 영문은 Noto Sans로 제목용은 Bold, 본문용으로는 Medium을 권장한다.
5. Photography
브랜드 이미지에 맞는 사진 활용을 지향합니다.
사진 내에 너무 많은 요소가 들어가지 않도록 배경과 중심이 되는 오브젝트 혹은 인물 위주의 사진을 활용한다. 글로벌한 외국사람이 나오는 이미지나 색감이 따뜻한 느낌을 주는 사진, 단순한 배경과 심플한 이미지 위주로 활용한다. 밝은 톤의 이미지 활용을 지향하나, 뇌이미지나 의학관련 이미지의 특성상 어두운 배경을 꼭 써야한다면 컬러가 3가지 이상 들어가지 않은 이미지로 활용하길 권장한다. 하나의 색감이 느껴지는 사진을 선호하며 강한 색조나 지나치게 보정된 이미지는 피해주시기 바란다. 하단의 예시 이미지들을 참고 부탁드리며 활용 가능한 이미지는 디자인팀에 문의바란다.
6. Nootation
브랜드 표기 규정을 숙지하여 브랜드 아이덴티티의 일관성을 유지합니다.
Illustration Colors
일러스트 색은 illustatuon Color에 지정되어있는 색상만 사용한다. 그 외의 브랜드 색상이나 인쇄용 색상은 사용하지 않는다. UI에 들어가는 일러스트에 유채색을 사용할 때는 민트색을 중심으로 쓰다가 보조색이 필요할 시에는 진한 민트색을 쓰도록 한다. 마케팅에서 지정된 민트색 이외의 색상군을 사용해야 할 때는 Open Color의 색상을 사용해도 괜찮지만 3가지 이상의 색이 넘지 않도록 하는 것이 좋다.
illustration Lines
선 두께는 일러스트의 크기에 상관없이 모두 2px로 통일한다. 선 모서리의 곡률은 비교적 자유롭게 쓸 수 있다. Stroke align이 중앙 정렬일 때 1-3px 사이로 메타포의 성격과 크기에 맞춰서 조정한다.
Strok width 2p
x Strok align Center
Corner radius 1-3px
Line cap
Round Line corner Round
Partnerships
iMediSync의 로고와 제휴사 및 기타 브랜드 로고의 병기 규정으로, 각기 브랜드 이미지가
저해되지 않도록 주의를 필요로 한다. 브랜드 로고 사이의 선은 상황에 따라서 표기하지 않을 수도 있습니다.
Usage Guidelines
브랜드 간의 위계가 맞지 않는 로고배치는 삼가합니다. 로고는 서로 동등한 비중의 크기로 적용하여야 합니다.
이상 위의 내용으로 정리를 해보았습니다.
브랜드 가이드는 만들기 나름이라, 위의 내용보다 더 새심하며 다양한 목차를 넣을 수도 있지만
지금의 기본적인 가이드 내용만 충실히 지켜도 브랜드의 방향성 및 통일성을 구축해 나가기에는 충분하다는 생각이 들었다.
회사의 구성원들에게 배포를 하며, 브랜딩과 밀접한 관련이 있는 부서들은 특히나 가이드를 필히 숙지하시어 규칙을 지켜달라고 부탁드렸다.
실은 내가 가는 회사마다 브랜드 가이드를 통해 중구난방적인 모습들을 통일시키고 싶었지만, 시도해보지는 못했다.
지금은 디자인이나 브랜딩이 기업의 이미지에 큰 영향력을 끼치고 있는 시대이다.
고객들이 느꼈을 때 전문성이 있는 브랜드라고 느끼려면 브랜드 가이드는 필수라고 생각한다.
그래서 이번 작업을 주체적으로 실행하므로써 나도 한 단계 성장했다는 느낌이 들어 너무 보람이 있었고,
앞으로도 UI/UX Design 업무를 맡으며 상시적으로 회사와 내가 함께 성장할 수 있는 프로젝트가 무엇인가 또 고민해보고 실행해야겠다.
회사 구성원분들도 많은 응원과 격려의 말을 함께 해주셔서 너무 감사한 마음이였다.
