5가지 디자인 요소로 보는 페이스북 아이덴티티의 발전

일관성 있는 브랜드 아이덴티티는 많은 기업이 원하는 요소 중 하나입니다. 다양한 디지털 매체에 알맞게 적용되는 브랜드 아이덴티티를 관리하는 일은 브랜드 인지도에 영향을 주는 중요한 요소입니다. 오늘은 페이스북에서 2008년부터 2014년까지 디자이너로 일한 벤 베리(Ben Berry)의 글을 번역, 정리하여 페이스북의 빠른 성장에 맞춰 브랜드의 시각 아이덴티티는 어떻게 발전했는지를 살펴봅니다.

2007년 페이스북

이미지 출처: Shareholic.com

2008년 페이스북 브랜드의 시각 아이덴티티는 초창기보다 많이 성장했습니다. 단순한 색상 구성과, 워드마크가 정립되었지만, 벤은 페이스북 아이덴티티 요소가 더 발전할 기회가 있다고 생각했고 페이스북에 합류합니다.

하지만 그가 생각했던 것보다 페이스북 아이덴티티를 다듬은 작업은 내부에서는 중요도가 높은 일로 여겨지지 않았습니다. 빠른 성장에 맞춰 다양한 서비스와 제품에 필요한 디자인을 디자이너가 그때그때 하나씩 만들었습니다. 이러한 방식은 작업 시간의 효율성을 떨어트리고 페이스북의 아이덴티티를 분산되어 보이게 했습니다. 2009년 동료 디자이너들과 페이스북 워드마크를 다듬어보는 해카톤을 진행했습니다. 이것을 계기로 벤은 페이스북 브랜드를 일관성 있게 아우르는 시스템에 대해 생각합니다.

1. 브랜드 아이덴티티 스펙트럼

2012년 완성한 브랜드 스펙트럼입니다. 이 시스템은 시각 디자인 요소가 사용되는 맥락과 대상을 기준으로 구분됩니다. 자유롭고 다양한 디자인이 허용되는 내부 커뮤니케이션 영역부터 실용적이고 단순하며 일관성이 요구되는 제품 커뮤니케이션 영역까지 크게 4가지로 구분됩니다.

a. 내부 커뮤니케이션 영역
해커의 방식(The Hacker way): 페이스북의 철학입니다. 안정되고 편안한 상태에 도달하여도 현상 유지에 만족하지 않고, 소셜 네트워크의 발전과 개선을 위해 끊임없이 노력하는 자세입니다. 무엇을 할 수 있는지 없는지에 대한 정해진 규정은 없습니다. 모든 가능성이 열려있고, 무엇이든 이야기하고 논쟁할 수 있습니다.

b. 개발자, 블로거, 광고주 커뮤니케이션 영역
페이스북의 철학과 비전을 가까이 두고, 내부 커뮤니케이션보다는 좀 더 통일성 있는 시각 디자인을 보여줍니다.

c. 제품 마케팅 커뮤니케이션 영역
외부에 디자인 업무를 요청할 때는 개인의 다양성, 인간적인 모습, 그리고 페이스북의 시각이 반영되어야 합니다.

d. 제품의 커뮤니케이션 영역
실용적이고 단순하며 간결해야 합니다. 모든 시각적 요소와 구조는 목적을 가지고 있어야 하며, 불필요한 시선을 유도하지 않아야 합니다.

2. 카메라 앱 워드마크, 페이스북 전용서체

새로 정립된 브랜드 아이덴티티 구조가 적용된 첫 사례는 카메라 앱의 워드마크 디자인입니다. 그는 픽셀클라우드(페이스북 내부 디자인 프로토타입 공유 프로그램)에 올라온 카메라 앱의 프로토타입을 보았습니다. 기존 카메라 앱은 페이스북 워드마크의 기초가 된 클라비카(Klavika) 서체를 그대로 사용했는데요. 클라비카가 좋은 서체이지만 딱딱하고 기계적인 느낌이 강하다고 생각했습니다. 앱 출시가 얼마 남지 않았지만 새로 정립한 브랜드 스펙트럼에 맞게 좀 더 인간적인 느낌이 나도록 워드마크를 다듬었습니다.

카메라 앱은 큰 성공을 거두지 못했지만, 벤이 작업한 워드마크는 내부적으로 좋은 평가를 받았습니다. 다른 몇몇 프로젝트에도 클라비카 서체를 다듬어 사용했는데요. 이러한 빈도가 많아지자 마침내 페이스북은 클라비카 서체 디자이너 에릭 올슨(Eric Olson)에게 페이스북 전용 서체개발을 의뢰합니다. 클라비카를 바탕으로 만든 페이스북 전용서체는 두 개의 자족을 포함하고, 75개 언어를 지원합니다.

3. 파비콘

브랜드 스펙트럼의 개념은 나머지 시각 디자인 요소에도 차례로 적용됩니다. 사용자가 가장 많이 접하는 페이스북의 시각 디자인 요소는 파비콘입니다. 2012년 당시 페이스북은 브랜드 디자인 소스를 외부에 효과적으로 제공하지 못했습니다. 그 결과 외부에서 다양한 버전의 파비콘이 만들어졌습니다. 2개의 색상으로 구성된 기존 파비콘은 외부에서 파비콘을 포함한 페이스북의 시각 디자인 요소를 변형하는 행동을 유도해 아이덴티티를 분산시켰습니다. 또한, 페이스북 내부에서도 통일된 파비콘을 사용하지 않았습니다.

개선 전 페이스북 내부에서 가장 많이 사용된 파비콘

개선 후 통일된 파비콘

2개의 색상과 하단 하이라이트 스타일링은 1개의 색상으로 단순화되어 다양한 환경에 사용성이 높게 다듬어졌습니다. 또한, 이렇게 통일된 파비콘의 핵심 형태가 변형되지 않도록, 다양한 사용자 환경에 적용할 수 있는 여러 버전으로 개발되었습니다.

여러 환경에 맞게 다양한 가장자리 형태로 제공되는 파비콘

iOS와 Android 환경에 맞게 다르게 스타일링되어 제공되는 파비콘

4. 하위 브랜드

페이스북의 하위 브랜드 디자인은 새로운 서비스나 제품에 맞춰 새로운 디자인을 만드는 방식이었습니다. 비효율적인 시간을 줄이고 통일성을 높이기 위해 브랜드 스펙트럼이 적용된 가이드라인과 템플레이트가 개발되었습니다. 

다양한 아이콘 예시 이미지- 새로운 하위 브랜드 아이콘은 기본적으로 1도 색상으로 활용되는 동시에, 여러 색상을 사용해 일러스트레이션 스타일의 아이콘으로도 만들어 질 수 있어야 합니다.

페이스북 브랜드 시스템의 접근 방식은 '규정'보단 '도구'가 되는 것이었습니다. 제약을 많이 만들기 보다, 충분한 예시와 함께 다양한 디자인 소스를 제공하는 것에 중점을 두었습니다. 단, 파비콘 심볼을 변형해 하위 브랜드 디자인에 적용하는 것은 금지되었습니다. 나머지는 다양한 환경에 적용 가능한 예시를 참고해 유연하게 만들 수 있게 되었습니다. 새로운 브랜드 디자인 가이드는 작업 시간의 비효율성 문제와 시각적 통일성의 문제를 해결했습니다.

하위 브랜드 가이드라인에 맞춰 제공되는 예시들

하위 브랜드가 가장 많이 사용되는 곳은 페이스북에서 운영하는 페이지입니다. 새로운 가이드라인에 맞춰 1도 색상으로 개선된 아이콘은 다양한 환경에 알맞게 적용됩니다.

5. 디자인 자료 시스템

브랜드 아이덴티티 가이드라인 시스템 구축에서 가장 중요한 작업은 가이드라인과 디자인 소스를 잘 정리해 필요한 상황에 쉽게 찾아 사용하도록 하는 것이었습니다. 벤은 페이스북 내부 위키에 디자인 자료 페이지를 만들어 디자인 소스를 공유했습니다. 외부에 공개되는 자료는 디자인 자료 센터 페이지를 만들어 공유합니다.

새로운 브랜드 아이덴티티 시스템을 따라 다양한 팀의 디자이너가 만든 디자인 결과물이 조화롭게 만들어지는 모습이 흥미롭다고 벤은 말합니다. 아래는 그가 2014년 페이스북을 떠난 이후에 만들어진 페이스북의 디자인입니다.

마치면서..

페이스북 아이덴티티의 발전, 여러분은 어떻게 보셨나요? 핵심 요소를 견고히 다지면서도 유연성 있게 가능성을 열어두는 페이스북의 사례는 기업의 브랜드 아이덴티티 디자인이 어떤 점을 고려하고, 발전해야 하는지 잘 보여준다고 생각합니다. 특히 브랜드 스펙트럼을 바탕으로 디자인이 개발된 점이 인상적입니다.

모아서 보면 페이스북 아이덴티티의 변화는 큽니다. 하지만 그 시작은 중요시하지 않던 워드마크를 꼼꼼히 다듬는 작은 개인 작업에서 시작되었습니다. 현재에 안주하지 않고 사용자 입장에서 끊임없이 개선하려는 디자이너의 태도가 이러한 큰 변화를 만들었다고 생각하는데요. 앞으로 더욱 빠르게 변할 디지털 환경에서 진화할 페이스북 아이덴티티를 기대합니다.  

출처: Office of Ben Berry

by 토종닭 발자국