브랜드 스타일 가이드의 한계를 넘어서

이번 글에서는 '브랜드는 이래야 한다, 저렇게 보여줘야 한다'고 명령조로 말하는, 사실상 어느 곳에서나 존재하는 권위적인 브랜드 스타일 가이드를 따르는 모든 디자이너에 관한 내용입니다.

‘저거 말고, 이걸로 해’ 스타일 가이드, ‘여기 컬러와 폰트 리스트 있어요’ 스타일 가이드, 너무나도 유명한 ‘저것 중에 하나 가져도 되?’ 스타일 가이드. 따라야 할 규칙들이 너무 많은거 같나요? 네, 물론이죠. 하지만 저러한 제약으로부터 디자이너는 아이디어를 얻고 있습니다.

제한을 둔 창의적 활동은 디자이너에게 도전적이면서도 활용도 높은 가이드를 제공합니다. 정처 없이 탐험하고 다니는건 의미없는 짓일 뿐입니다. 광활한 대륙에서 엄청난 시간만 소비하면서 길을 잃을테니까요.

제한을 둔 창의적 활동은 디자이너에게 도전적이면서도 활용도 높은 가이드를 제공합니다.

제한을 두면 선택할 옵션의 양을 낮추게 되고 더욱 효과적으로 생각하고 결정을 내릴 수 있는 자세를 가지게 됩니다. 이제 올바른 브랜드 스타일 가이드를 만들 수 있는 키 포인트를 한번 살펴보겠습니다. 

가이드를 미리 만들라

클라이언트의 스타일 가이드를 프로젝트 시작하기 전에 바로 만드는 것이 중요합니다. 일단 프로젝트가 시작하게 되면 창의적 요소들은 멀어지기 시작하고, 아이디어에만 의지하게 됩니다. 나중에 스타일 가이드를 만들면 브랜드에 맞지 않은 콘셉트를 가지고 작업 중이었다는 것을 알게 되죠.

바로 이런 이유 때문에 브랜드 스타일 가이드가 궁극적으로 프로젝트의 시작점에 있어야 합니다. 회사의 문화와 조직 스타일, 그들의 브랜드를 이해해야 합니다. 스타일 가이드를 잘 준비해 놓으면 주변을 멤돌지 않고 클라이언트가 원하는 방향과 부합하는데로 정확히 디자인을 이끌어낼 수 있습니다. 정말 중요한 관리 툴임에 틀림없죠.

브랜드 스타일 가이드는 정말 중요한 관리 툴 입니다.

그래서 시작점의 첫 번째로 할 일: 브랜드 스타일 가이드를 준비하세요.

흡수하라

스타일 가이드가 좋은 참고서가 되도록 꼼꼼히 체크하고 표시해 놓으세요. 클라이언트의 브랜드 관련 파일과 자료는 모두 다운로드 받으세요. 이걸 초기에 개발자들과 공유해서 시작부터 폰트와 컬러를 밑바탕에 깔 수 있게 합니다. 가이드의 모든 정보를 흡수하고 스케치를 시작하세요. 

하지만 숨이 막힐 정도로 너무 규칙에 얽매이지 않도록 조심하세요. 작업할 때 이런 물음을 스스로 마음 속에 담아두면 좋습니다: “내 것 같은 느낌이 들게 하려면 얼마나 많은 다른 방법들로 이 요소들을 조합해 볼 수 있을까?"

브랜드를 깊이 이해하고 있다면 그 디자인이 성공할 확률은 95%입니다. 왜냐하면 잠재 의식에서 스타일 가이드의 규칙을 이미 고려하고 있기 때문입니다.

구멍을 찾아라

제아무리 철저한 스타일 가이드라 해도 아킬레스건은 가지고 있습니다. 스타일 가이드가 얼마나 정밀하든, 고객이 그걸 가지고 깐깐하게 굴든 간에, 그 누구도 알지 못하는 것이 하나 있습니다. 어느 누구도 생각치 못했던 몇몇 디테일을 말이죠. 

그 놓친 디테일들을 찾아 자신의 이점으로 돌리는 것은 여러분의 몫입니다.

예를 들면, 어느 날 고객이 예상대로 자세한 스타일 가이드를 보내왔습니다. 디자인 방향을 잡는데 한두 가지 옵션이 있었고, 그걸 가지고 최대한 노력해서 작업했습니다. 하지만 저 옵션들만 가지고 작업하다보니 다른 것들은 생각하질 못했습니다. 바로 그 브랜드는 100년의 오랜 역사와 경험을 가진 미디어 였습니다. 고객은 로고, 컬러, 폰트, 구두점과 간격까지 모두 고려해서 정의내렸던 겁니다. 

 그 때 우리는 반응형 웹사이트를 만들고 있었죠. 그래서 타이포그래피가 반응형에 맞춰 크기가 변할 필요가 있었고, 프린트 디자인에서 말할 수 있는 “접힌다“는 개념은 버려야 했습니다. 하지만 고객이 준 스타일 가이드는 프린트물 작업을 감안한 것이었지 디지털과는 거리가 멀었습니다. 

그래서 인터랙션 요소와 CSS 트랜지션을 많이 활용했고 고객의 브랜드를 디지털과 잘 부합하도록 안내했습니다. 애니메이션과 UX 요소를 더한 덕분에 브랜드의 기존 개성을 잘 살릴 수 있었죠. 중요한 점은 바로 스타일 가이드가 디테일까지 정의내려진 것이 아니라는 점입니다.

해당 브랜드만의 개성을 구축하라

디테일한 곳에 집중하면 디지털 공간에 있는 브랜드에 숨을 불어넣을 수 있습니다. 폰트, 컬러, 톤이 브랜드의 개성을 만드는데 도움을 줄 것입니다. 인터랙션 요소들과 애니메이션 동작으로 브랜드의 개성을 웹상에 옮겨놓을 수 있을 것이구요.

디테일한 곳에 집중하면 디지털 공간에 있는 브랜드에 숨을 불어넣을 수 있습니다.

우리가 두 고객의 브랜드를 위해 만들었던 애니메이션 접근방식이 어떻게 다른지 예를 들어 보겠습니다. 하나는 커팅-엣지 필름 스쿨이고, 다른 하나는 기자와 미디어 멤버들을 위한 언론인 사이트 입니다.

필름 스쿨의 경우는, 창의적이고 최신 기술에 능통한 학생들을 주요 목표로 반영해서 애니메이션을 만들었습니다. 플레이북에 CSS 트랜지션 적용시켜 현실감이 살도록 했지요. 큰 이미지 위에 마우스 커서를 올리면, 2-3가지 요소들이 움직입니다. 페이지를 내리면 트랜지션이 되면서 펼쳐집니다. 

언론인 사이트의 경우에는, 커다란 브러쉬촉의 인터랙션적인 제스처가 콘텐츠로부터 시선을 잡습니다. 이곳은 출판된 상품을 보거나 회사 관련 자료를 다운로드 받는 용도로 주로 쓰이므로 사용자들은 인터랙션 경험을 구지 하지 않으려고 합니다. 

고객을 당신 편으로 만들라 

디자인 작업을 하면서 많은 것들을 시도하게 됩니다. 얼만큼 부담을 밀어낼 수 있을지, 얼만큼 고객을 설득할 수 있을지 생각해 보세요. 앞서 나가는 디자인을 한다는 것은 고객과의 관계에 달려있습니다.

내 디자인 작업을 보호하고 올바른 방향으로 가도록 조언을 해주는 사람을 내 옆에 두는 것이야말로 정말 중요합니다. 바로 그 때문에 고객과 신뢰를 쌓아야 하는 것이죠. 

자신의 이점으로 이용하라

브랜드 스타일 가이드는 전문 디자이너가 되기 위한 지역입니다. 당신에게 수많은 “하라”, “하지 마라”는 말로 제한을 걸지만, 대다수의 성공한 디자이너는 그 제한을 자신의 이점으로 이용한다는 것을 잊지마세요.

원문: limits of brand style guides

Refresh Studio

해외 최신 웹/UX 디자인 글과 동향을 소개해 드립니다.