Airbnb Cereal을 UI에 직접 써봤다
목차

1. 고려사항과 파트너쉽
2. Choosing Your Family
3. 브랜드와 UI의 연결
4. 단어작업
5. UI Testing
6. 제품 통합
7. Going Live

2018년 5월 15일, 에어비앤비는 제품과 브랜드에 에어비앤비 시리얼이라는 이름의 새로운 typeface 를 만들다.  에어비앤비 시리얼은 세계적인 폰트 제작사 '달튼 매그(Dalton maag)'와 에어비앤비 마케팅, 경험디자인 팀과 함께 협력하여 만들었다.  

인쇄상의 결정들은 보통 브랜드 차원에서 결정된다. - 브랜드가 가고자하는 방향에 대한 시각, 느낌, 정확한 표현을 고려해서

하지만 UI에서는 어떤가?  UI의 90%는 텍스트라는 건 자주 언급되고, 이건 에어비앤비도 마찬가지다. 그래서 서체를 변형하는 것은 우리 UI 디자인에서 중요한 변화를 가져왔다.

디자인 언어 시스템 팀의 리더로써, 회사에서 서체를 리브랜드하거나 변경할때 뒤에서 무슨 변화가 나타날지 궁금해했다. 어떤 과정으로 얼마나 걸릴까? 어떻게 좋은 UI 서체를 찾고, 실제 그 UI를 어떻게 바꿀까?

서체 디자인은 다른 디자인 프로젝트와 같다. 우리의 비즈니스니즈는 브랜드 차별화, 브랜드 및 제품의 확장 능력, UI에 텍스트 가독성이 포함되었다. 수년 동안의 리서치, 사용자 테스트, 관찰을 통해 우리는 특히 작은 사이즈에서 이전 서체가 읽기 어려웠다는 것을 발견했다.

화면에서 최적화된 시스템 서체를 간단하게 살펴 봤는데, 우리의 매체와 플랫폼에서 독특하고 일관된 목소리를 제공할 수 있는 선택지가 없다는 것을 발견했다. 그래서 우린 18개월 동안, 우리의 파트너 Dalton Maag과 서체 프로젝트를 시작했다.

브랜드와 제품 리더와 긴밀하게 협력하고 의견을 받으며 발견, 아이데이션, 개선의 각 단계를 밟아갔다. 기능과 브랜드 표현의 균형이 필요하다는 것은 초기에 분명하게 나타났고, 이것은 프로세스내내 우리의 결정에 영향을 미쳤다.
 

타이포그래피는 아무것도 없는 곳에서 만들어지지 않고 언어의 문화와 전통에 뿌리를 두고 있다. 허공에서 발명된 것이 아니라, 전통이 존재하며 이어진 것이다. 오늘날 우리가 볼 수 있는 모든 타이포그래피는 무버블 타입과 구텐베르크 (*역자주 : 독일의 활판 인쇄술 발명자)에서 시작된 혈통의 산물이다.

브랜드와 제품 리더들과 함께, 우리가 가고자하는 방향을 대표하는 키워드(인간적인 human,친근한 friendly,환영하는welcoming,창의적인 전문성 creative professionalism)를 결정했다. 이건 우리 취향에 맞는 모던 neo-grotesk(*역자주  :  최초의 산세 리프 서체를 설명하는 데 사용되는 용어) 로 우리를 이끌었다.

예를 들어 몇몇 특징들은 우리의 브랜드 심볼인 Bélo의 손으로 그린 것 같이 이어지는 선에서 영감을 받았다. 'a'와 'b' 둘다 이런 방법으로 그렸고, 'a'의 오목한 부분의 고리가 Bélo로 연결된다. 한 선으로 그린 그림은 꽤 인간적이지만 다른 성격들의 단순한 특징과도 균형을 이룬다.

마케팅과 제품 UI는 일반적으로 다른 목적으로 타이포그래피를 사용했다. 마케팅에서는 브랜드 표현을 더 강화하는 목표를 가지고 있지만, UI는 자주 변화하는 환경에서 작동하면서 브랜드와 연결해주는 것을 목표로한다.

UI 타이포그래피를 사용하면 내용, 화면크기, 품질이 동적이고 텍스트 크기, copy length, 형식, 장치 해상도가 모두 다르다. UI는 공동체가 제공된 정보를 기반으로 읽고, 이해하거나 행동하는 것을 필요로 할 때 브랜드와 이어주면서 복잡하거나 중요한 순간을 지원해야 한다.

간단히 UI 서체는 대부분의 상황에서 합리적으로 잘 작동해야한다. 그걸 확인하기 위한 유일한 방법은 실제 환경에서 사용하거나 시뮬레이션하는 것이다.

아이데이션 단계 이후, 우리는 Dalton Maag의 폰트를 반복해서 받기 시작했다. 각 문자는 만들고 수정하는 시간이 걸리기때문에 초기에 제한된 세트로 작업해야 한다.

서체의 특성이 UI에 맞는지 알아보기 위해, 우리는 UI를 사용하여 설계해야 했다.

20자로 작업하면서, 작업이 어려워졌는데, 왜냐하면 우리가 실수로 외부에서 서체를 사용할 때 (Sketch 같은) 디자인 프로그램에서 폰트가 완전히 바뀌기 때문이다. 복사본을 테스트하는 것도 현실적이지는 않았다. 제한된 문자 복사 생성기를 찾을 수 없어서 우리는 단어를 만드는 자체 도구를 만들었다.

자연스러운 문장 구조와 비슷하게 하기 위해 그 도구는 주어,동사,형용사를 포함해야만 했다. 규칙적인 표현을 가지는 영어사전과 유닉스의 AWK 프로그래밍을 가지고 사용 가능한 문자들만 포함하는 단어 세트를 만들었다. 나중에 보여줄 가치가 없는 단어를 수동으로 제거하고 에어비앤비와 엘리스같은 몇몇 이름과 장소를 추가했다.

처음엔 주어-동사-형용사-동사 처럼 간단한 구조로 시작했다. 그게 구식같이 느껴졌고, 그래서 Hemingway, Carroll, Twain 등 유명한 작가를 찾아보며 틀에서 벗어나는데 도움을 받았다. 그것들을 투박하게나마 따라함으로써 문장이 더 흥미로워졌다.

이 모델은 제목, 단락, 짧은 이야기를 만들어내는 간단한 Node.js 프로그램을 사용하여 설정되었다.

그리고난 후 클라우드에 업로드되어 JSON을 통해 다른 컨텐츠 세트로 전환되었으며, 사이트에서 렌더링되었다.
 

커스텀 컨텐츠 생성기로 무장하면 실제 디자인에서 서체를 테스트하는 것은 훨씬 더 쉬워진다.  UI에서 테스트를 하는 동안 우리는 모든 사이즈에서의 가독성과, 계층 구조를 위한 무게의 균형, non-distracting texture에 집중했다. - 모든 건 우리가 실용적인 서체를 만들 수 있다고 믿었다.

X-height와 넓이 : 라틴에 기반을 둔 언어는, 대부분의 택스트는 소문자로 쓰였고, 대부분의 글자가 어센더ascend가 없다.(f 같은 경우는 있지만) 대문자 또는 어센더가 있는 문자와 비교하여 소문자의 높이를 비례해서 키우면 더 읽기 쉽게 만들 수 있다. fox를 예를들면 'f'와 작은 크기에서 더 크게 보이는 'ox' 사이에 급격한 높이 차이가 줄어든다.

무게와 굵기 Weight and strokes: UI 활자는 꽤 작고, 화면 해상도가 개선되었지만 인쇄 단어만큼 선명하지는 않다. 만약 글자의 굵기가 UI에서 너무 얇으면, 거의 보이지 않을 것이다.

독자들에게 더 좋고, 더 단순한 조화를 주기 위해 시리얼의 표현적인 형태를 줄였다.

What testing taught us: 6개월 동안, 우린 수백가지의 화면을 만들고, 스타일과 무게에 대해 30회 반복하며 테스트했다. 이러한 서체의 테스트는 UI안에서의 가치로써 서체를 판단할 수 있기 때문에 아주 유용하다. 많은 서체의 특징 - 특히 texture - 은 그걸 텍스트가 많은 UI에서 보기 전까지는 평가하기가 어렵다는 것이다.

일단 전반적인 스타일과 세부사항을 파악하고, Dalton Maag와 계속 긴밀하게 작업하면서 추가로 6개월 동안 다듬고 테스트했다.

글꼴 파일을 완성하기 시작하자 새로운 서체를 제품에 통합하는 데 어려움을 겪었다. 우리는 약 10 년 동안있던 수천 가지의 UI 뷰를 가진 제품에 걸쳐 크기, 행간, 간격을 설정해야했다.

우리의 디자인 언어 시스템은 모든 플랫폼에서 제품 타이포그래피를 관리하고, 모든 UI 구성요소, 코드, 디자인은 시스템의 특정 타이포그래피 스타일을 참고한다.

예를들어, 만약 엔지니어가 “TextTitle3”를 참조했다면, 크기는 24, 행간 32, 간격은 2로 설정될 것이다. 그래서 그 정의가 바뀌면, 구성요소가 자동으로 새로운 설정이 적용된다.

그러나 같은 측정 항목을 공유하는 두 개의 폰트는 없기 때문에, 우리는 기존 제품을 크게 바꾸지 않고 새로운 서체 조판을 개발해야 했다.

제품의 새로운 서체의 테스트를 하기 위해, 웹 사이트와 모바일 어플에 글꼴과 설정을 볼 수 있는 설정을 구축했다. QA 파트너는 4 가지 플랫폼 모두에서 11,000 개 이상의 스크린 샷과 다양한 장치, 유형 및 크기를 캡처했다. UI 시스템 팀과 함께 모든 화면과 기록된 버그를 검사했다.

출시 전 마지막 단계에서는 코드 변경과 글꼴 자체가 제품에 지장을 주지 않도록 a / b 실험을 기반으로 한 business 측정 법을 실행했다.

2백만 명이 넘는 제품 사용자를 대상으로 실험을 실시했지만 business 측정 법에 심각한 문제나 부정적인 영향을 미치지는 않았다.
 

창조하고, 개선하고, 테스트하고, 통합시킨지 18개월 후, 우리 브랜드와 제품에 Airbnb Cereal을 적용하여 출시했다. 과정은 맞춤 서체를 만드는데 안팎으로 도전과 성공에 대해 많은것을 가르쳐주었다.그리고 이 출시는 우리가 지속적으로 반복하고 기능을 추가하려고 하는 출발점이다.

글로벌 기업으로서, 모든 언어에 걸쳐 우리의 서체를 지속적으로 발전시킴으로써 다양한 커뮤니티를 보다 잘 표현 할 수 있게되어 기쁘다. 빠르고 빛나는 시도는 아니었지만 세계적인 집단에게 우리 제품과 브랜드의 경험을 개선할 수 있는 독특한 것을 만들었다는 것에 보람을 느꼈다. 우린 Airbnb Cereal이 시간이 지나면서 어떻게 성장해갈지를 지켜보며 기대할 것이다.

우리가 만든 에어비앤비 시리얼을 위한 인터렉티브 샘플 사이트를 확인해보자. 또한 타입 테스터도 포함되어 있어서  airbnb.design/cereal 에서 사용해 볼 수 있다.