일관성 있는 브랜드 아이덴티티는 많은 기업이 원하는 요소 중 하나입니다. 다양한 디지털 매체에 알맞게 적용되는 브랜드 아이덴티티를 관리하는 일은 브랜드 인지도에 영향을 주는 중요한 요소입니다. 오늘은 페이스북에서 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 토종닭 발자국







Posted by slowalk

오늘도 우리는 웹서핑을 하며 슬라이드되는 배너를 돌려보고, 복잡한 메뉴 사이를 누비며, 간혹 뜨는 팝업을 끄고 있습니다. 이렇게 무심코 사용하는 웹사이트들이 불편하신 적은 없으신가요? 우리가 무심코 사용하고 있는 웹 UX/UI 패턴들. North가 제시하는 가이드라인을 보면서 어떤 것들이 문제가 있고 어떻게 해결할 수 있을지, 우리는 무엇을 고민해야 하는지 알아봅니다. 


North는  “모바일 우선주의, 인-브라우저, 시스템 기반의 디자인과 개발”을 모토로 하는 오픈 소스 커뮤니티입니다. 얼마 전 웹 UX가이드라인을 만들어 Outdated UX pattern. 즉 구식의(?) UX들에 대해 이야기 하고 있습니다. 



1.  슬라이드 배너(Carousel)





슬라이드 배너, 롤링 배너 등으로 불리는 캐러젤. 좌우 화살표와 하단의 동전 같은 페이지 표시를 가지고 있는 이 디자인은 왜 좋지 않을까요? Brad Frost는 “캐러젤은 회의에서 서로 비난하기 위해 존재한다”며, 이를 비판하고 있습니다. 


North는 캐러젤 대신에 “콘텐츠 우선순위”를 정하라고 제안합니다. 4~5개의 콘텐츠를 같은 자리에 배치하는 것은 콘텐츠의 우선순위 파악에 실패한 것이고, 우선순위를 정하지 못한다는 것은 콘텐츠 전략의 실패이기 때문이지요. 공간에 아무 콘텐츠나 배치하지 말고 우선순위를 정해 가장 중요한 하나만 보여주는 것이 좋겠습니다.



2. 커다란 배경 사진 




최근 유행하고 있는 디자인이네요. 멋진 사진을 웹사이트 배경에 넣은 디자이너는 무얼 잘 못 했을까요? 문제는 스크린 사이즈입니다. 모두가 다 커다란 모니터에서 좋은 사진을 감상하면 좋겠지만 1024px보다 작은 모니터를 쓰는 사람도 많습니다. 보이지도 않고, 실제로 중요하지도 않은 커다란 이미지는 페이지를 느려지게 할 뿐입니다.


해결책은 상황에 맞는 이미지 사이즈 조정입니다. 여기서 상황이란 사용자의 환경이겠죠. 다양한 스크린 사이즈에 대응하기 위해 최적화된 이미지만을 보여줄 수 있는 페이지를 만들어야 합니다. Interchange가 좋은 예시인데요. 스크린 사이즈에 따라, 사용자의 접속 환경에 따라 조정된 이미지를 보여줍니다. 



3. 복잡한 메가 메뉴




메뉴에 마우스를 대거나 클릭했을 때, 하위의 모든 메뉴가 펼쳐지는 메가 메뉴를 많이 보셨을 겁니다. 사이트 전체를 한 눈에 볼 수 있어 편리한 메가 메뉴는 어떤 단점이 있을까요? North는 메뉴의 단계별로 내려가고, 작은 사이트들의 모임처럼 보입니다. 이는 사용자가 정확히 원하는 위치를 찾는데 매우 복잡합니다. 


Jared Spool은 메가 메뉴에 대해 이렇게 말했습니다. “사용자는 찾고자 하는 정보에 대해 어떤 단어나 문장을 생각하고 있는데, 이것을 트리거 워드라고 한다. 메가 메뉴는 메뉴 전체가 닫힐 때, 모든 단어, 문장이 사라지므로 사용자는 앞으로의 일을 예측하기 어렵다.(중략)“


이런 복잡성을 해결하기 위해서는 다음과 같은 배려가 필요합니다. 먼저, 메뉴 구조를 단순화하고 특히 겹겹히 싸여있는 메뉴나 4개 이상 단계가 내려가지 않도록 합니다. 그리고 사용자의 사용 흐름을 자연스럽게 구성해야 합니다. 헷갈리거나 복잡한 메뉴는 사용자에게 사용을 포기하게 만듭니다. 그들이 원하는 방향으로 똑바로 나아가도록 유도해야 합니다.



4. 이미지 속의 글자




웹사이트 구축에 있어 너무도 당연한 내용이지만 마음처럼 지키기 어려운 내용입니다. 이미지 안의 글자들은 ‘alt’ 속성 없이는 스크린 리더에 읽히지 않습니다. 또한 반응형웹이 적용된 작은 스크린에서는 글씨가 아주 작아져 사람도 읽을 수 없는 경우가 있습니다.


웹폰트가 해결책이 될 것 같은데요. Typekit, fonts.com , Typography.com, Font squirrel Web font generator 등에서 웹폰트에 대한 정보를 얻을 수 있습니다. 위 서비스에는 많은 웹폰트가 있지만 모두 영어 알파벳이죠. 그렇다면 한글은 어떻게 할까요? Google webfont의 ‘나눔글꼴’과 유료로 서비스 되고 있는 Typolink라는 서비스가 있습니다.



5. 레이어 팝업 




레이어팝업, 모달창 등으로 불리우는 이 UI는 어떤 문제가 있을까요. 다른 창을 직접 띄우는 팝업에 비해 사용자 경험에 좋은 것처럼 보이지만, 내부적으로는 여러가지 문제가 있습니다. 카보드 사용성 문제, 커서의 위치 문제, 브라우저의 크기가 달라졌을 때, 창을 종료하고 싶을 때 등 여러가지 숨겨진 문제들이 있습니다.


레이어 팝업 대신 이런 방법을 쓰면 어떨까요. 팝업의 내용을 화면에 직접 위젯과 같은 형태로 넣는 방법을 쓸 수 있습니다. 또한 새로운 페이지로 이동시키는 방법도 있습니다. 다양한 브라우저 크기를 고려해서 여기처럼 재밌는 방법을 쓸 수 있습니다.



6. 무한 스크롤 




역시나 많이 사용되고 있는 무한 스크롤은 어떤 단점이 있을까요. North는 무한 스크롤되는 페이지를 사용자가 선택하고 쓸 수 있도록 고려해야 한다고 말합니다. 즉, 사용자에게 다음 페이지를 불러올지 결정할 수 있도록 해야 합니다. 페이지 하단으로 내려가면 자동으로 내용을 불러오기 보다는 http://www.inc.com/처럼 사용자가 원할 때, 보여줄 수 있어야 합니다.


North가 지적하는 문제들과 그에 맞는 해결책을 알아보았습니다. North는 오픈소스 커뮤니티일뿐 그들의 말이 정답은 아니겠지요. 하지만 우리가 무심코 보고, 쓰고, 때로는 만드는 웹 UI에 대해 조금 더 생각해 볼 수 있는 기회였습니다. 



참고 : 

North

Outdated UX Patterns and Alternatives

6 Epic Forces Battling Your Mega Menus

Fullscreen Overlay Styles & Effects



by 북극곰 발자국




Posted by slowalk