프로덕트 디자이너의 폰트 이야기: 3부. 우버vs리프트
글로벌 모빌리티 서비스의 폰트
만약 택시 앱이나 배달 앱 같은 모빌리티(mobility) 기반 서비스들이 없었으면 지금 우리의 삶은 어땠을까요? 정말 많은 부분이 불편했을 거라고 생각이 듭니다. 스마트폰을 사용하기 시작하면서 모빌리티 서비스는 우리 일상에 천천히 스며들었습니다. 그러면서 카카오 택시, 배민 등의 모빌리티 기반 서비스는 눈부신 성장을 이루어 냈지요. 우리나라뿐만 아니라 해외에서도 다양한 기업들이 서로 경쟁하며 커가고 있었습니다. 이들 중에 폰트를 직접 만들어서 쓸 만큼 브랜딩과 서비스에 진심인 회사들이 있습니다. 오늘은 그들의 폰트를 브랜드, 프로덕트와 엮어보며 그 매력을 파헤쳐 보는 시간을 갖도록 하겠습니다.
우버 무브(Uber Move)
Uber Move 출처. MCKL Type(mckltype.com)Safety, accessibility and global ambitions
바로 2018년 리브랜딩 당시 우버의 새로운 ideal 입니다. 당시 우버는 라이딩 쉐어 뿐만 아니라 다양한 서비스(자전거, 배달 등)로 세계 곳곳에서 자신들의 영역을 넓혀나가고 있었습니다. 하지만 이전의 브랜딩으로는 우버가 제공하는 다양한 서비스를 대변하기 어렵고, 넓어진 타겟 고객을 포용하기에는 무리가 있었습니다. 또한 기존 로고와 앱 아이콘에도 몇 가지 문제점이 있었다고 합니다.
좌. 이전 우버 로고와 심볼, 앱아이콘 / 우. 우버 카 (출처. usatoday)1. 다양한 우버의 서비스를 대변하기는 어렵다. 글로벌 시장으로 스케일하기에는 문제가 있다.
이전 우버는 "실리콘밸리의 엘리트를 위한 블랙 카 서비스(an on-demand black car service for Silicon Valley’s elite)"를 연상시킨다는 의견이 있었습니다. 하지만 우버는 인도 델리의 툭툭, 자전거 등 다양한 모빌리티 기반의 서비스를 제공하는 다국적 회사로 성장해 버렸습니다. 그러한 우버를 다시 담을 새로운 브랜딩이 필요했습니다. 또한 이전 우버는 "타 서비스와의 경쟁적인 마인드셋만 가지고 있었다"고도 합니다(by Forest Young, creative director at Wolff Olins). '우버가 얼마나 잘난 서비스인지' 그것만을 보여준다는 말이죠. 하지만 이는 그 당시 모빌리티 업계에 팽배한 브랜딩 전략이기도 했습니다. 새로운 우버는 그러한 마인드셋을 탈피하기로 했습니다.
2. 많은사람이 우버 워드마크를 제대로 읽지 못했다. (탑승자, 드라이버 모두)
이전의 우버 로고는 모두 대문자. 글자 폭이 너무 넓고, 각져있어서 작은 화면이나 원거리에서 Uber로 읽히지 않았습니다. 그리고 앱 아이콘도 논란이 많았습니다. 이게 우버 앱이 맞는지 헷갈린다는 이유였지요.
우버의 리브랜딩은 Wolff Olins라는 에이전시에서, 폰트는 MCKL type foundry에서 작업을 진행했습니다. 특이하게도 새로운 브랜딩의 출발점은 우버 로고의 초안이었습니다. 그들은 기존의 대문자로 구성되어있던 UBER 워드마크를 Uber로 바꿨습니다. 각기 다른 대소문자의 모양과 사이즈가 워드마크를 읽기 쉽게 만들기 때문이었습니다. 특히 첫 번째(U)와 마지막 글자(r)의 차이로 인해 뇌가 더 빠르게 전체 글자를 스캔할 수 있다고 합니다. 그들은 워드마크의 대소문자 수정 이후 곡선 처리된 기하학적인 획의 형태*로 Uber 워드마크 초안을 만들었습니다. 그 초안을 기반으로 새로운 폰트 '우버 무브(Uber Move)'를 개발하는 동시에, 브랜딩 작업을 시작했습니다.
곡선 처리된 기하학적인 획의 형태*: 친근해 보이기 위해 geometric 형태의 획에 곡선 처리를 했다고 합니다. 구글, 에어비앤비 같은 글로벌 회사들의 예시를 참고한 듯합니다.
Move forward, Uber Move
우버 무브는 20세기 초기의 산세리프 양식(Futura, Neuzeit Grotesk)과 교통 폰트(typefaces of transportation)의 특징이 반영된 폰트입니다. 이 폰트를 만들 당시 MCKL은 the U.S. Highway Gothic, DIN*같은 역사적인 교통 폰트를 심도 있게 연구했다고 말합니다. 거기서 발견한 교통 폰트의 특징을 현대적인 감각으로 투영해 우버 무브를 만들게 된 것이죠. 이러한 제작과정은 모빌리티 기업의 아이덴티티를 더욱 견고히 하려는 우버의 의도가 담겼다고 생각합니다. 폰트의 이름 "Uber Move"에서도 모빌리티 기업의 정체성을 드러내며, 앞으로 나아가려는 우버의 의지도 엿볼 수 있습니다.
*the U.S. Highway Gothic, DIN은 교통 표지판에 쓰였던 폰트입니다. 사람들이 차를 타고 빠른 속도로 지나갈 때 읽기 수월하게 디자인되었다고 합니다.
4개의 웨이트와 2개의 optical size로 패밀리가 구성되었습니다. 타이틀용인 Display는 자간이 더 타이트하게 트래킹되고, 기하학적인 구조를 가지고 있습니다. 본문용인 Text는 좀 더 넓게 자간이 세팅되었고, 자폭이 타이틀용인 Display보다 살짝 좁습니다.
모바일에서의 우버 무브
우선 군더더기 없이 간결한 디자인으로 화면이 구성되어 있습니다. 텍스트는 우버 무브로만 세팅되어 있습니다. 화면의 목적을 바로 알 수 있도록 타이틀-본문 간 강약 조절이 명확합니다. 타이틀은 자간이 타이트하게 트래킹되는 Display를, 본문은 좀 더 여유가 있는 Text를 사용했습니다.
a. 아이콘과 함께 쓰이는 텍스트는 Medium을 사용했습니다. 아이콘이 볼드하기 때문에 균형을 맞추려 Medium을 쓴 거로 생각합니다.
b. 섹션을 구성할 때 중요한 텍스트는 검은색으로, 부연 설명은 회색으로 표시했습니다. 크기나 웨이트에 차이를 두기 보다는 텍스트 색에 차이를 둬서 hirachy를 표현했습니다. 많은 타이포그래피 스타일을 만드는 것 보다는, 최소한의 스타일로 효율적으로 운용하려 했다고 생각합니다.
좌. 우버, 우버이츠 앱 아이콘(출처. Skift Table) / 우. 우버 리브랜딩(출처. Wolff Olins)브랜딩에서의 우버 무브
우버 무브의 진가는 브랜딩에서 빛을 발합니다. U를 모티브로 대담하게 화면분할을 했습니다. 그리고 타이포그래피와 화살표로 움직이는, 앞으로 나아가는 우버를 보여줍니다. 브랜딩의 목적부터 폰트, 표현하고자 하는 것이 결과물에 일관적으로 표현되었다고 생각합니다. 리브랜딩을 기점으로 우버는 성장은 물론 라이딩 쉐어뿐만 아니라 자전거, 스쿠터 같은 여러 운송 수단을 포괄하는 기업의 이미지로 변신했습니다. 그리고 재미있는 사실은 이전의 안 좋은 이미지도 탈피했다고 합니다(by Engaget*). 우버는 자율주행차 사고, 낮은 드라이버 페이 등 여러 안 좋은 사건들이 있었습니다. 이에 따라 우버를 바라보는 대중의 시선이 곱지 않았었지요. 하지만 리브랜딩 덕분에 어느 정도 개선이 되었다고 합니다. 자신들의 정체성을 구축해가는 동시에 대중 친화적인 브랜드를 만들려는 노력이 결실을 맺은 거라 생각합니다. 그리고 완성도 높은 브랜딩 덕에 우버가 힘있게 앞으로 나아갈(move forward) 수 있지 않았나 생각합니다.
*Engaget: 테크 프로덕트 리뷰와 최신의 기술의 뉴스를 전하는 웹 블로그 이자 팟캐스트.
리프트 프로(Lyft pro)
출처. Danielle Diessner(http://iamdaniellediessner.com)Don’t call it a rebrand. It’s a refresh.
우버의 경쟁사 리프트도 질 수 없지요. 그들도 2018년에 인하우스에서 리브랜딩을 진행했습니다. 하지만 우버처럼 대대적인 공사(?)는 하지 않았습니다. 리프트의 핑크 로고를 베이스로 디자인 시스템을 재정비하며 브랜딩을 확장했지요. 리프트 스스로 "우리를 표현할 신선한, 새로운 방법을 찾았다", 이것은 리브랜딩이 아닌 "리프레쉬(refresh)"라며 2018년의 리브랜딩을 표현했습니다.
좌. "glowstache" version 2 (출처. WIRED) / 우. 2012년 Lyft 캠페인 "glowstache" (출처. Inc)강렬한 브랜드 컬러 리프트 핑크를 보면, 그들의 타겟고객을 짐작할 수 있습니다. 우버와는 확연히 다른 젊은 층의 고객(예를 들면 young party goer)이었지요. 리프트 핑크와 로고는 캠페인과 소셜미디어를 통해 이미 대중들에게 각인된 지 오래였습니다. 여기서 리프트는 기존의 브랜드 자산을 활용해 더욱 친근하며 힙한 이미지로 젊은 층에 한 발짝 더 다가가기로 합니다.
리프트는 “diverse, inclusive and safe community”의 롤모델이 되고 싶습니다. by CEO Logan Green
출처. AdweekFun, irreverent and provocative
리프트는 늘 트렌디 하고 싶었습니다. "Fun, irreverent and provocative", 리프트가 지향하는 모습이었죠. 그들은 우선 새로운 컬러팔레트를 추가했습니다. 리프트가 지향하는 다양성과 포용의 모습을 잘 보여주고 있지요(각 컬러는 우리가 사는 세계의 사람과 장소에서 추출했다고 합니다). 그리고 그들은 새로운 브랜드에 걸맞게, '대담하고 자신감 넘치는 톤앤매너'로 아이콘을 새로 제작했습니다. 리프트도 아이콘 작업을 할 때 역사적인 교통 표지판의 아이콘에서 영감을 받았다고 합니다. 우버가 교통 폰트를 우버 무브에 투영한 것과 비슷하지요. 아무튼 이 아이콘은 기존 리프트의 친근한 이미지를 잘 전달하며, 리프트의 새 폰트 리프트 프로(Lyft Pro)와도 잘 어울리도록 제작이 되었습니다.
리프트의 secondary 컬러 팔레트(출처. Danielle Diessner http://iamdaniellediessner.com)
출처. 2018 Lyft rebrand video(https://www.melodytai.design/lyft-sizzle-video)
Lyft Pro(출처. Danielle Diessner http://iamdaniellediessner.com)A new way of speaking, Lyft Pro
리프트는 새 브랜드를 위한 폰트, 리프트 프로(Lyft Pro)도 만들었습니다. 이는 소피아 프로(Sofia Pro)를 커스텀한 폰트입니다. 소피아 프로는 Olivier Gouvat이 디자인한 geometric 산세리프 폰트로 이탤릭 포함 16개의 스타일로 구성되어 있습니다. 라운드 처리된 커브와 열린 획이 우아하고, 친근하며, 트렌디한 폰트입니다. 또한 x-height가 높아서 작은 사이즈 폰트의 가독성도 좋고, 특히 모바일 화면에서 사용하기 좋다고 합니다. 리프트는 소피아 프로를 4개의 웨이트로 구성해 자신들의 브랜드에 맞게 커스텀했습니다. 이후 리프트 프로는 프로덕트와 마케팅 등 모든 브랜드 커뮤니케이션에 등장하기 시작했습니다.
리프트 프로, 이렇게 쓰이고 있습니다.
리프트 역시 모든 화면의 타입을 본인들이 만든 폰트로 구성하고 있습니다. 우버와는 다르게 홈화면이 맵으로 시작합니다(우버도 이전에는 맵으로 시작했는데, 업데이트 후 화면구성이 바뀌었습니다). 그리고 화면 좌측 상단의 햄버거 버튼을 누르면 메뉴가 나옵니다.
a. 앱을 켜면 제일 눈에 띄는 부분이 보라색 CTA 버튼이었습니다. 우선 컬러가 눈에 확 들어옵니다. 버튼 안의 텍스트 사이즈도 꽤 큽니다. 그리고 보라색이 텍스트 버튼 컬러로도 쓰이기도 했습니다. 리프트 핑크를 버튼에 쓰기 부담스러워 보라색을 주로 쓴 것이 아닐까 예상해 봅니다(실제로 리프트 핑크는 앱에서 가끔 포인트 컬러 정도로 쓰입니다).
b, 타이틀은 우버와 대조적으로 작은 사이즈로 화면 상단 중앙에 자리 잡고 있습니다.
c. 아이콘과 함께 쓰이는 텍스트의 웨이트가 상대적으로 얇습니다. 하지만 둘이 아주 조화로워 보입니다.
d. Profile 화면을 보면 굵기로 폰트 간 차이를 확연히 주고 있습니다. 폰트 간 강약 조절이 콘텐츠 간의 hirachy를 제대로 표시했다고 생각합니다.
e. Profile 화면에서 연한 쿨톤의 회색이 쓰이고 있습니다. 리프트 앱의 컬러들이 쿨톤이 많은데(특히 CTA 버튼 컬러) 이와 잘 어울립니다. 우버의 백그라운드 그레이 컬러와는 톤 차이가 있으니 비교해 보셔도 재미있을 것입니다.
2018 Lyft rebrand (출처. Danielle Diessner, Adweek)
출처. Automotive News, Digital trends, Alson Joseph리프트가 세상과 소통하는 방법
우버와 자꾸 비교해서 미안하지만, 둘의 톤앤매너는 얼핏 보아도 다릅니다. 컬러풀한 세트에서 다양한 사람들이 fun하고 캐주얼한 무드로 움직이고 있습니다. 앱에서도 여러 가지 포인트 컬러를 쓰고 있지요. 또한 옥외광고에서는 3D 그래픽으로도 메시지를 전달하고 있습니다. 정해지지 않은 틀에서 창의적으로 변화하는 모습이 리프트답고, 리프트가 지향하는 것을 잘 전달한다고 생각합니다. 리프트 팀은 이번 브랜딩은 "회사가 성장할 때 브랜드를 어떻게 시장에 전달하는지 정제하는 방법"이라고 정의했습니다. 하지만 그들은 이게 끝이 아니라고 말합니다. 계속 진화할 것이며, 브랜드를 세상과 싱크해 트렌디하게 유지할 거라 말합니다. 앞으로 리프트가 보여줄 새로운 시도가 무척 기대됩니다.
비슷한 일을 하지만 눈에 띄게 다른 톤앤매너를 가지고 있는 두 서비스를 살펴보았습니다. 두 기업의 사례는 브랜드를 디자인이 어떻게 이끌어나가는지, 또 폰트가 어떤 역할을 하는지 보여주는 좋은 사례라고 생각합니다. 이런 브랜드 경쟁이 과열되면 좋지 않겠지만, 대중들과 저(;;)의 눈 호강을 위해 계속되었으면 합니다. 오늘은 주로 브랜드에 관해 이야기를 했지만, 브랜드와 폰트는 떼려야 뗄 수 없는 관계입니다. 브랜드가 발전해 나가는 과정을 보며 그 시스템과 폰트의 변화를 지켜보는 것도 큰 재미라고 생각합니다. 오늘의 이야기는 여기까지입니다. 읽어주셔서 감사합니다 :D
참고
MCKL - Uber Move(https://mckltype.com/custom-typeface/uber-move/)
Uber has a new brand. Again (https://www.fastcompany.com/90235065/uber-has-a-new-brand-again)
Uber hopes a new font will symbolize its turnaround(https://www.engadget.com/2018-09-12-uber-new-typeface.html)
Danielle Diessner(http://iamdaniellediessner.com/new-page)
Lyft's Poppy, Colorful New Look, Signature Font and Icons Are Meant to Energize the Growing Brand(https://www.adweek.com/brand-marketing/lyfts-poppy-colorful-new-look-signature-font-and-icons-are-meant-to-energize-the-growing-brand/)
Brand Profile LYFT, your friend with a car(https://creativesupply.com/en/resources/lyft-your-friend-with-a-car/)
Sofia Pro(https://www.myfonts.com/fonts/mostardesign/sofia-pro/)
melodytai(https://www.melodytai.design/lyft-sizzle-video)
이 아티클은 위시켓 요즘 IT와 함께 연재하고 있습니다.
시리즈
프로덕트 디자이너의 폰트 이야기: 3부. 우버vs리프트(현재글)
