프로덕트 디자이너의 폰트 이야기: 5부. 여행 플랫폼
에어비앤비, 스카이스캐너, 부킹닷컴의 폰트
여행산업은 팬데믹 이전까지 IT 기술과 맞물려 계속 성장을 해오던 산업이었습니다. 하지만 코로나 시국으로 인해 하늘길이 막히게 되었고, 당연하게도 여행산업은 현재 침체되어 있지요. 하루라도 빨리 일상으로 돌아가고 싶고 여행하고 싶은 마음이 간절합니다. 오늘은 그 마음을 담아 여행 플랫폼의 폰트에 대해 이야기해보려 합니다. 놀라운 사실은 오늘 소개해 드리는 3개의 프로덕트 모두 폰트를 직접 제작해 쓰고 있었습니다. 모두 브랜드와 프로덕트에 진심이기 때문이지요. 얼핏 보면 이들의 폰트가 비슷해 보입니다. 그렇지만 각자의 개성이 있고 브랜드, 프로덕트와 연결되며 서비스의 아이덴티티를 확고히 표현하고 있습니다. 오늘은 이들이 그려내는 여행 플랫폼의 트렌드와 그 안에서 폰트의 역할을 중점적으로 알아보는 시간을 갖도록 하겠습니다.
에어비앤비(Airbnb)
에어비앤비는 명실상부 세계 최대, 대체 불가능한 숙박 공유 플랫폼이 아닐까 싶습니다. 그리고 깔끔하며 다채로운 디자인으로 유저들의 마음을 사로잡는 서비스이기도 합니다. 2018년에 만들어진 에어비앤비 디자인 시스템은 UX Planet 선정 “내 디자인 작업에 훔칠만한 Top 12 Design system”에 들기도 했습니다. 이들이 만든 폰트도 독특한 형태와 트렌디한 감각으로 많은 사랑을 받고 있습니다. 당연하게도 이 폰트는 에어비앤비의 온-오프라인 경험을 연결하며, 모든 커뮤니케이션을 담당하고 있습니다. 그래서인지 에어비앤비는 타 여행 플랫폼보다 좀 더 트렌디하고 친근하게 유저에게 다가가고 있습니다. 앱은 물론 슈퍼볼 광고까지 에어비앤비의 모든 커뮤니케이션에 사용되는 에어비앤비 시리얼(Airbnb Cereal)을 지금 만나보세요!
에어비앤비 시리얼(Airbnb Cereal)
출처. Introducing Airbnb Cereal(https://airbnb.design/introducing-airbnb-cereal/)"에어비앤비 디자인은 극도로 타이포그래픽하고, 사람들은 우리 브랜드를 다양한 미디어(플랫폼, 에어비앤비 매거진, 지하철 광고 등)에서 접한다. 우리는 다르게 보여야 했다"
에어비앤비의 크리에이티브 디렉터 Derek Chan이 말한 에어비앤비 시리얼의 제작 배경입니다. 당시 에어비앤비는 온-오프라인 경험을 통합할 새로운 폰트가 필요했습니다. 또한 가독성, 비즈니스 확장 등의 이슈로 폰트 제작이 절실했다고 합니다. 그래서 그들은 '에어비앤비를 반영한 온-오프라인용 폰트'를 제작하기로 결심하고, 이를 타입 파운드리(type foundry) Dalton Maag에 의뢰했습니다. Playful하고 open하고 심플한(!) 그리고 약간의 특이점(quirk)을 넣은 폰트를 만들어 달라고 말이죠.
우선 폰트의 가독성을 개선하기 위해 세밀하게 굵기를 조정하고 x-height를 키웠습니다. 그리고 에어비앤비만의 독특함을 살리기 위해 미적인 부분에도 많은 신경을 썼지요. 그리고 놀라운 점은 이 프로젝트에 다양한 인하우스의 이해관계자들이 참여했다고 합니다. 디자인 시스템팀, 마케팅팀, 사진가, 영상 제작자, 카피 라이터 등 다양한 전문가들이 인하우스의 콘텐츠로 폰트를 테스트할 수 있도록 도와주었습니다. 각 분야의 협업 때문이었을까요? 에어비앤비 시리얼은 독특하고 높은 완성도로 많은 사랑을 받고 있습니다. 이제는 폰트와 브랜드 컬러만으로도 에어비앤비를 보여줄 수 있게 되었지요. 에어비앤비는 추후 다양한 언어의 폰트를 만들 계획이라고 합니다. 한국어 버전도 과연 나올까요? 나오기를 기대해 봅니다.
Airbnb Cereal, 어떻게 사용되고 있을까?
앱의 타이포그래피를 뜯어보니 "에어비앤비의 디자인은 극도로 타이포그래픽하다"라는 말을 바로 이해할 수 있었습니다. 일단은 앱에 글 자체가 많습니다. 우선 Explore나 호스팅 랜딩 페이지는 유저에게 feature를 소개해 다음 액션으로 유도하는 역할을 하고 있습니다. Feature를 소개하면서 글이 많아지게 됐고, 이 소개가 큰 글씨의 타이포그래피로 디자인되어 있습니다. 그래서 눈에 확 띕니다. 그리고 글씨가 사진에 얹어져 있어도 가독성 이슈 없이 잘 전달되고 있습니다. 또한 높은 퀄리티의 사진은 타이포그래피와 feature를 함께 설명하고 있으며, 여행에 대한 설렘을 유발하고 있습니다. 또 한 가지 주목할 점은 에어비앤비 호스팅 서비스는 브랜드 컬러(와인색)가 다른 것을 확인할 수 있는데요. 아마 호스팅 서비스가 서브 브랜드이기 때문에, 메인 서비스와는 다른 컬러를 쓰기 때문이라고 생각합니다.
에어비앤비의 핵심 기능(숙박 예약)의 플로우 입니다. 화면을 모아보니 글이 정말 많기는 합니다. 오늘의 서비스 스카이스캐너, 부킹닷컴도 앱에 글이 많고, 다른 숙박 예약 플랫폼도 전반적으로 그렇습니다. 스크린이 작은 앱에서 필수 불가결한 정보를 전달하기 위해서라 생각합니다. 하지만 에어비앤비를 실제로 사용해 보면 정보를 모두 확인하기에 무리가 없습니다. 상세 페이지의 스크롤은 꽤나 깁니다. 자칫하면 혼란스럽거나 정보를 끝까지 읽기 힘들 수도 있지요. 하지만 폰트의 크기, 굵기 차이, 디바이더 등으로 명확하게 정보가 그룹핑이 되어있습니다. 그리고 다양한 포맷으로 정보를 전달하고 있습니다. 물론 디자인의 일관성은 지킨 채 말입니다. 적절한 아이콘, 그래픽의 사용으로 정보를 직관적으로 전달하며 페이지가 지루해 보이지 않게 합니다.
한 줄 정리: 탐색은 감성적으로, 정보전달은 명확하고 직관적이게
에어비앤비의 브랜드 파워가 에어비앤비의 감성적인 탐색 과정에서 나왔다고 해도 과언이 아닐 것입니다. 탐색의 과정에서 감성적이지만 그렇다고 부담스럽지 않게 그들의 서비스를 탐색하도록 유저를 이끌고 있습니다. 그리고 정보를 전달하는 상세 페이지같이 이성적으로 풀어내야 하는 곳은 아주 명확하게 정보를 전달하고 있습니다. 자칫하면 한쪽으로 치우칠 수 있지만 에어비앤비는 그 적절한 톤을 찾은 것 같습니다. 에어비앤비만의 독특함이 담겨있고 가독성이 좋은 폰트의 공이 컸다고 생각합니다. 앞으로 어떻게 변화할 것인지 궁금하고 기대됩니다.
스카이스캐너(Skyscanner)
항공권 예매하실 때 어디서 검색하시나요? 저는 주로 이 서비스 ‘스카이스캐너’에서 많이 찾아보는 편 입니다. 스카이스캐너는 흩어져 있는 전 세계의 항공권과 호텔, 렌터카를 검색해 볼 수 있는 서비스입니다. 같은 항공권이더라도 각기 다른 예약 사이트에서 제공하는 가격을 비교해 볼 수 있고, 이를 통해 유저는 현명한 소비를 할 수 있지요. 그리고 스카이스캐너는 다른 메타서치 엔진에 비해 밀레니얼들이 굉장히 많이 이용하는 서비스라고 합니다. 2019년 그들도 대대적인 리브랜딩을 했습니다. 리뉴얼 된 심볼, 브랜드 컬러 등이 발표되었고, 그때 새 폰트 스카이스캐너 릴레이티브(Skyscanner Relative)도 소개되었습니다.
스카이스캐너 릴레이티브(Skyscanner Relative)
출처. Skyscanner-brand(https://www.skyscanner.net/about-us/brand)2019년 스카이스캐너는 심볼, 로고, 컬러 등을 확 바꾼 새로운 브랜딩을 발표했습니다. 우선 눈에 띄게 심볼이 변화했습니다. 그리고 이들은 심볼의 변화가 스카이스캐너 브랜드의 진화를 위한 아주 중요한 스텝이었다고 설명했습니다. 일출의 낙천주의와 지속가능한 여행의 시대에서 스카이스캐너의 포지션을 심볼을 통해 표현했다고 합니다. 다른 디자인 요소들도 "Bold, Joyful, Helpful, Straightforward"이라는 새로운 브랜드 지향점에 맞춰 리뉴얼 되었습니다. 그러면서 태어난 폰트가 스카이스캐너 릴레이티브지요. 이 폰트는 사실 영국의 타입 파운드리인 Colophon-foundry가 만든 폰트 Relative를 커스텀한 폰트입니다. 얼핏 보면 여타 산세리프 폰트와 크게 다르지는 않습니다. 하지만 폰트의 몇몇 독특한 디테일은 명확하게 브랜드의 키워드를 담고 있습니다. 여기에 더해 다른 디자인 요소들과 함께 어우러져 스카이스캐너의 새로운 브랜드를 전달하고 있습니다.
Skyscanner Relative, 어떻게 사용되고 있을까?
에어비앤비와 다르게 스카이스캐너는 유저가 앱에서 바로 목적을 달성할 수 있도록 플로우가 설계돼 있는 듯합니다. 우선 홈 화면에는 콘텐츠가 2개 밖에 없었습니다. 그래서 바로 앱의 검색(Search) 화면으로 넘어갔습니다. 검색화면의 상단 타이틀은 유저가 이 화면에서 할 수 있는 액션을 말해주고 있습니다. 그리고 3가지 검색 옵션이 아이콘과 함께 바로 보입니다. 그리고 Explore 카드들만 있어, 화면에서 할 수 있는 액션이 별로 없습니다. 오히려 이런 점이 유저의 방문 목적을 방해하지 않아 편의성을 높인다고 생각합니다. 모든 텍스트는 스카이스캐너 폰트를 사용하고 있습니다. 그리고 버튼 영역에는 메인 컬러(blue) 대신 서브 컬러(green)가 사용되었습니다. 특이한 점은 Trips 화면의 타이틀 색이 혼자 보라색입니다. 나머지 타이틀(검색, 프로필)은 모두 검은색 입니다. 의도된 것일까요? 조금 의아합니다.
항공권 검색에서 결과 확인으로 이어지는 플로우는 굉장히 편했습니다. 타이틀에서 화면의 목적을 확인하고 제시한 액션을 자연스레 따라가면 되었지요. 검색 결과에는 중요한 텍스트가 하이라이트 되어 있어, 크기가 작아도 인지하기 쉬웠습니다. 하지만 다음 스텝에서 나오는 정보가 많아서 조금 혼란스러웠습니다. 마음에 드는 항공권을 선택하면 나오는 정보 확인 페이지였는데, 한눈에 보아도 작은 텍스트들이 빼곡히 있습니다. 컬러 아이콘이 눈길을 끌기는 하지만 텍스트가 조금 더 크거나 요약이 되었으면 더 좋았을 거로 생각합니다. 지금의 작은 텍스트들은 회색으로 설정되어 있어 더욱 주목도가 떨어져 아쉬웠습니다.
한 줄 정리: 심플하지만 유저의 job을 명확하게 돕는... 그러나 조금 정돈이 되었으면?
스카이스캐너 앱은 굉장히 심플한 플로우를 가지고 있습니다. 그래서 유저의 job을 더욱 명확히 돕고 있는 거로 생각합니다. 하지만 정보 명시, 타이틀 등 몇 가지 아쉬운 점들이 있었지만, 그 문제들이 정돈된다면 유저의 편의는 더욱 증가할 것입니다. 그리고 개인적인 바람으로는 홈 화면의 콘텐츠가 조금 더 풍성하면 좋을 것 같습니다. 보통 홈 화면은 업데이트되는 정보를 소개하고, 각 기능으로 연결하기 위한 라운지처럼 사용됩니다. 그렇지만 스카이스캐너의 홈 화면은 너무 심심해서 아쉬웠습니다. 지금은 테스트 중인 거라 믿고 다음에 어떻게 변화할지 기대해 보겠습니다.
부킹닷컴(Booking.com)
호텔 예약하실 때 어디서 하시나요? "부킹닷컴(Booking.com)"이라는 사이트를 보신 적이 있으신가요? 부킹닷컴은 1996년 네덜란드에서 시작한, 전 세계인이 사용하는 숙박 예약 플랫폼입니다. 이들의 규모는 말로만 들어도 어마어마합니다. 부킹닷컴은 현재 41개 언어로 169개의 국가에서 숙박 예약 서비스를 제공하고 있습니다. 게다가 부킹닷컴이 속한 부킹홀딩스(Booking Holdings)는 글로벌 OTA(Online Travel Agencies)시장 1위에 빛나는 OTA 공룡 기업이기도 합니다. 그들도 물론 그들의 서비스를 표현하는 폰트 부킹산스(Booking Sans)를 가지고 있습니다. 흥미로운 사실은 앞서 소개해 드렸던 스카이스캐너 릴레이티브와 부킹산스가 같은 타이포그래피 회사에서 태어났다는 것입니다. 그렇다면 과연 이 폰트는 어떤 모습을 하고 있을까요?
부킹 산스(Booking Sans)
출처. Colophon-Foundry(https://www.colophon-foundry.org/custom/booking/)부킹산스는 디자인 에이전시 Wieden+Kennedy Amsterdam과 Colophon-foundry가 만든 폰트입니다. Colophon-foundry는 위에서도 언급했지만, 스카이스캐너 폰트도 만든 회사입니다. 그리고 버거킹, 던킨, 테스코 등 세계 유수의 회사들과 작업한 실력 있는 회사이지요. 이번에 그들은 전 세계적으로 유명한 숙박 예약 서비스 부킹닷컴을 위해 지구 전체의 시장을 포용할 수 있는 폰트를 만들고자 했습니다. 그들은 지구의 기울기 23.4°를 폰트에 적용하자고 제안했습니다. 유럽을 넘어 세계 전체, 궁극적으로 지구 전체를 바라보는 부킹닷컴의 비전을 지구의 기울기(23.4°)로 표현하고자 한 것이지요. 이 각도는 폰트의 자연적인 커브나 엣지에 적용되었습니다. 또한 그들은 부드러운 분위기를 내기 위해 폰트의 곡선을 섬세하게 만들고, 90도로 꺾이는 코너도 부드럽게 만들었습니다. 물론 크고 작은 인쇄물과 디지털 앱을 고려하여, 가독성에 신경도 많이 썼다고 합니다.
Booking Sans, 어떻게 사용되고 있을까?
앱에 들어가면 특별한 타이틀 없이 검색창을 바로 보여주고 있습니다. 그리고 노란색으로 검색창이 하이라이트 되어있어 주목도를 높입니다. 그 때문에 불필요한 액션없이 유저는 바로 원하는 숙소, 렌터카, 택시 등을 검색할 수 있습니다. 하지만 다음 검색 결과 페이지에서 저는 표시되는 정보의 양에 살짝 압도되었습니다. 썸네일이 좌측에 좁고 길게 배치되어 있고, 나머지 우측 공간의 50% 이상을 숙박시설의 정보를 표기하는 데 쓰고 있었습니다. 개인적으로 조금 빡빡해 보입니다. 그러나 정보표기 방식이 조금만 개선되면 다음 페이지로 전환하는 데 큰 도움을 줄 거로 생각합니다. 처음에는 레이아웃이 왜 이렇게 구성되었나 의아했습니다. 하지만 부킹닷컴은 주로 호텔을 예약할 때 쓰는 앱입니다. 그래서 길고 좁은 썸네일이 호텔과 같은 빌딩의 외관 사진을 넣기에 적절했던 것이지요. 그리고 우측에서 최대한 많은 양의 정보를 노출시켜 유저들이 원하는 호텔을 빨리 찾도록 UI를 설계한 거라 생각합니다. 이는 에어비앤비와 대조됩니다. 에어비앤비는 주로 개인의 집을 렌탈합니다. 따라서 건물 외관보다는 개성 있게 꾸며진 방의 사진이 유저에게 더 매력적일 것입니다. 그래서인지 에어비앤비는 가로가 긴 썸네일을 사용하고 있습니다.
상세 페이지에 진입해보고 한 번 더 놀랐습니다(저 혹시 A/B 테스트 걸린 걸까요?). 가장 먼저 보이는 메인 이미지가 5개로 나뉘어 있었습니다. 물론 익숙한 구성이 아닙니다. 화면이 산만해 보이지만 유저가 원하는 이미지에 도달하는 스텝을 줄이기 위해 이렇게 공간을 나눈 게 아닐까 싶습니다. 그리고 페이지가 굉장히 formal 하다는 인상을 받았습니다. 잘 정돈된 서브 컬러, 군더더기 없는 디자인으로 많은 양의 정보를 중립적으로 전달하고 있기 때문이라 생각합니다. 또한 그 정보들은 그룹핑이 잘 되어있고, 볼드한 텍스트로 hirachy를 잘 구분하고 있습니다. 부킹산스로 모든 텍스트가 디자인되어 있는데, 가독성 이슈 없이 모두 잘 읽힙니다. 잘 처리된 곡선 덕분에 폰트가 기능적이지만 그렇다고 또 너무 딱딱하지는 않습니다. "Functional and welcoming"이 폰트에 잘 녹아든 예시라고 생각합니다.
한 줄 요약: 이유가 다 있을거에요
스카이스캐너와 마찬가지로 부킹닷컴도 유저의 job을 명확하게 도와주도록 UX가 설계된 것을 알 수 있었습니다. 사용하기 편했고 모든 정보를 소화하는데도 무리가 없었지요. 그런데 부킹닷컴에는 익숙하지 않았던 몇 가지(검색 결과 리스트, 분할된 메인 이미지)가 있었습니다. 하지만 저는 오히려 익숙하지 않았기 때문에 그들의 고민을 엿 볼 수 있어서 좋았습니다. 부킹닷컴은 업계 1위를 달리는 기업이기 때문에 그들의 고민과 인사이트가 담겨있었을 테지요! 그리고 신뢰감을 주는 블루 컬러, 깔끔한 디자인과 가독성 좋은 텍스트 이 3가지가 잘 어우러져 업계를 선도하는 프로덕트의 정석을 보여주고 있습니다. 마치 오랫동안 자리를 지켜온 '수학의 정석'처럼 말이지요.
오늘은 3가지 서비스와 그들의 폰트를 알아보는 시간을 가졌습니다. 앞서 말씀드렸지만, 3가지 폰트가 어찌 보면 비슷해 보일 수도 있습니다. 이는 여행 기업이 지향하는 공통된 서비스 철학(즐거움, 친절함 등)이 폰트에 압축되었기 때문이라고 생각합니다. 하지만 폰트가 브랜드와 융화되며 각자의 특징이 스포트라이트 되며, 그들만의 브랜드와 프로덕트를 구축해 나가고 있었습니다. 팬데믹이 끝난 후에 어떻게 변화할지 모르겠지만 여행 업계가 다시 부상하길 바라고, 이후의 디자인도 매우 기대가 됩니다. 더불어 여행도 다시 자유롭게 갈 수 있었으면 좋겠습니다. 오늘의 이야기는 여기까지입니다. 읽어주셔서 감사합니다. 다음 폰트를 기대해 주세요!
참고
에어비앤비 디자인(https://airbnb.design/introducing-airbnb-cereal/)
스카이스캐너 about us(https://www.skyscanner.net/about-us/brand)
Koto studio - Skyscanner Project(https://koto.studio/project/skyscanner/)
Skyscanner rebrand is sunny with a chance of Speedos(https://www.creativebloq.com/news/new-skyscanner-logo)
Colophon Foundry - Booking Sans(https://www.colophon-foundry.org/custom/booking/)
Booking.com’s New Typeface Implements the Planet’s Axial Tilt (https://www.brandingmag.com/2015/09/07/booking-coms-new-typeface-implements-planets-axial-tilt/)
이 아티클은 위시켓 요즘 IT와 함께 연재하고 있습니다.
시리즈
프로덕트 디자이너의 폰트 이야기: 3부. 우버vs리프트
프로덕트 디자이너의 폰트 이야기: 4부. 블로그 플랫폼
프로덕트 디자이너의 폰트 이야기: 5부. 여행 플랫폼(현재글)
