Adobe Brand System

디자인 시스템

intro

잘하려고 어깨에 힘을 줄수록, 시작만 거창해졌기에 인트로는 짧게 시작하려고 한다.

이제 약 3년 정도 디자인으로 먹고살기 시작하면서, 아 이제 진짜 제대로 공부 좀 해야겠다는 생각이 들었다. 그냥 뭐든 꾸준히 연재해보려 한다. 철저히 내 기준에서 좋아 보이는 것들, 진짜 같은 것들 그냥 마구마구 정리해보고 써보아야지. 많이 도움이 되었으면 좋겠다. 특히 나에게 - 제발

Brand system

몇 달 전 CA에서 주최한 에어비앤비 디자인 시스템 강연을 들으며, 그냥 문득 아 나 이런 거 하고 싶구나?라는 생각이 들었고, 촌스럽게 가슴도 두근거리기까지 하길래 디자인 시스템 관련하여 조금씩 찾아보기 시작했다. (한참 지났지만, 이것도 언젠가 정리해서 올려야지)

그러다 우연히 Adobe 브랜드 시스템 관련하여, 담당 Designer가 정리해놓은 여러 글을 발견했고, 내용이 흥미로워 요약 편집해서 정리해보려고 한다. 그럼 시- 작!

Adobe brand system

Adobe는 소프트웨어 개발 회사로서 일반인들에게도 잘 알려진 포토샵, 일러스트, 아크로벳 등과 같은 프로그램을 만드는 회사이다. 이 회사는 2012년, Adobe CC라는 클라우드 서비스 형태로 제품을 제공할 것이라고 발표했고, 브랜드 시스템을 구축하였다.

시간이 어느 정도 흘렀지만 Adobe가 왜 브랜드 시스템을 구축하려고 했는지, 어떻게 일관성 있고, 확장성 있는 브랜딩 시스템을 구축하려 했는지, 1. 브랜드 시스템 구축이 필요하게 된 배경과 2. 구축 시 고려한 요소를 중점적으로 본다면 굉장히 흥미롭게 다가올 것이라 생각한다.

* 더 자세하게 혹은 참고한 원본을 보고 싶으시면 아래 링크로 들어가서 읽어보면 좋을 듯 하다.

(사실 이게 더 좋을 수도)

출처: https://blog.prototypr.io/designing-adobes-evolving-brand-system-6 d243992 cedd

1. background

: 왜 Adobe에서 브랜드 시스템 구축이 필요하게 되었나?

1) 버전별로 각각 따로 설치해야 했던 설치방식
사용자들은 CC가 출현하기 전까지 CS3, CS5처럼 매번 다른 버전이 나올 때마다 다른 소프트웨어를 설치해야 했다.( 그렇기 때문에 한 컴퓨터에 두 개 이상의 버전을 가지고 있는 사용자들도 있었다.)

Adobe는 이런 버전들 사이의 뚜렷한 구분을 위해 18개월~2년 주기로 매번 로고에 변화를 주어야 했다.

버전별로 계속 변경되야 했던 로고 history

2) 계속적인 로고의 변화 : 브랜드 시스템 구축의 어려움

계속해서 로고가 변화하게 되면, 뚜렷한 브랜드를 구축하기 어려워진다.

첫째, 끊임없이 변화하기 때문에 사용자들은 무엇이 최신의 것인지 구분하기 어렵고

둘째, 최신 버전이 나오면 그 전 버전들은 모두 구식의 것이 되기 때문에 로고가 가진 생명력이 너무나 짧다.

특히나 Adobe는 수백 가지의 제품 및 서비스를 제공한다. 이러한 수백가지의 제품들의 로고는 제품의 설치 특수성 때문에 매번 모든 걸 갈아엎어야 하는 상황에 어려움이 따랐다. 즉, 브랜드 시스템 구축이 필요했다.

3) 설치 방식의 변화 : 브랜드 구축의 적합한 환경이 마련됨

2012년 크리에이티브 클라우드가 출시됨에 따라 Adobe는 클라우드를 통해 소프트웨어를 제공하게 되었다. 사용자가 클라우드를 통해 가지고 있는 소프트웨어를 업데이트하는 방식으로 변화하였기 때문에, 더 이상 제품 로고를 버전별로 변경할 필요가 없어지게 되었다. 즉, Adobe만의 고유한 스타일을 정의 내리고, 확장성 있는 브랜드 시스템 구축을 할 수 있게 환경이 만들어진 것이다.

2. Adobe style을 위해 정의된 몇 가지 규칙

: beautiful(아름다운), ownable(소유 가능한), scalable(확장 가능한)이라는 키워드를 바탕으로 Adobe만의 규칙 정의

1. 데스크톱, 모바일 및 웹 제품은 타일 위에 테두리가 있다.

2. 데스크톱 제품은 정사각형 모양 / 모바일 제품은 둥근 모서리를 사용하여 구분을 준다.

3. 2가지 타입의 로고 스타일을 가지고 있다.

    ① * 두문자로 된 니모닉 버전

    ② 비유적인 마크

4. ② 비유적 마크는 평평하고 단단한 모양으로 얇은 악센트 줄이 있으며, 명암대비가 가벼운 색상을 사용한다

* 두문자로 된 니모닉 버전
Adobe 브랜딩의 한 부분으로, 제품 이름을 라틴어 알파벳 2글자로 나타내는 시스템
2글자만 허용되므로, 제품 이름에 영향을 줄 수 있고, 50개 이상의 제품에 적용할 때 쉽게 희석되어 기억하기 어렵다는 문제가 있음

3. Adobe Color system 

: 효율적이고, 확장 가능하게 적용하기 위한 컬러 시스템

1) AS-IS : 불규칙하게 분포되어있던 이전 컬러 시스템

어느 정도 스타일에 대한 규칙이 정리된 후, 끊임없이 증가하는 제품 수에 따라 확장 가능한 컬러 시스템이 필요했다. 이전에는 명도와 채도에 집중하여 확장하였기 때문에, Adobe 서비스들이 전 범위의 컬러(hue range)로 무작위하게 분포되어 있었다. 이러한 불규칙성은 지속적으로 출시되어질 제품의 특성상 효율적이지 않았다.

컬러 시스템 구축 AS-IS / TO - BE

2) TO-BE : 컬러(hue)를 기반의 컬러 매트릭스 형성, 규칙성 부여

hue의 치수를 5의 간격으로 일정하게 추출하여 컬러 매트릭스가 만들어졌다.

(원본 문장: I created an optimized color matrix with a hue stop every 5 degrees.)

이 컬러에는 총 3가지의 컬러가 따라오며, 각 서비스 제품에 적용되는 규칙을 부여된다.

1. bright and saturated color : 니모닉 텍스트, 아이콘에 적용

2. dark color : 뒷 배경 타일에 적용

3. light color : 아이콘 스트로크에 적용

아래 이미지를 참고해서 보면, 기준되는 컬러를 나열 후 3가지 컬러를 추가하여 만든 "컬러 매트릭스 시스템"을 볼 수 있다. 이렇게 컬러 시스템을 형성하게 되면 새로운 서비스 및 제품이 만들어졌을 때 비워져 있는 부분에 컬러 체계를 따르면 되어, 확장성 있는 컬러 체계를 만들 수 있다.

color matrix system

4. epilogue

: 미래 성장을 위한 시스템 형성

*이 부분은 Designer Sonja Hernandez의 글 마지막 부분을 그대로 번역 게재하여 마무리하고자 한다.

광범위한 분야의 제품을 제공하면서 Adobe의 제품 라인은 항상 진화하고 있으며, 브랜딩도 마찬가지이다. 브랜딩의 시각적인 변화가 처음에는 어려울 수 있고, 낯설 수 있지만 성장하는 제품 포트폴리오의 자연스러운 부분이다. 브랜드 시스템에서 수년간 일하면서 디자인 진화가 불가피하다는 것을 알게 되고, 시간이 지남에 따라 작은 조정을 할 수 있게 되고, 여기저기서 분재 나무를 트리밍 하고, 미래를 바라보며 시스템이 어떻게 성장하는지 결정할 수 있다.