프로덕트 디자이너의 폰트 이야기: 7부. 명상 앱(Calm)

권우리

8분

2021.12.17.

5.3K

[프로덕트 디자이너의 폰트 이야기] 이전 글 보러 가기

프로덕트 디자이너의 폰트 이야기 4부. 언론, 블로그 플랫폼

프로덕트 디자이너의 폰트 이야기: 5부. 여행 플랫폼

프로덕트 디자이너의 폰트 이야기: 6부. 음악 스트리밍 플랫폼

2020년 작년, 코로나바이러스 때문에 일상의 많은 부분이 변했습니다. 특히 지속된 사회적 거리두기에 지쳐 '코로나 블루'를 호소하는 사람들이 많아졌습니다. 그 때문에 명상(meditation), 마음 챙김(mindfulness) 콘텐츠의 수요가 폭발적으로 증가하게 되었고, 오늘 소개할 서비스도 이때 더욱 빛을 발하게 되었다고 합니다. 조금 더 설명하자면 2019년 삼성전자와의 파트너십으로 인해 우리나라에 본격적으로 이 서비스가 소개되었습니다. 이미 2017년 애플의 '올해의 앱'에 선정된 바 있으며, 현재는 기업가치 약 2조에 달하는 유니콘 기업입니다.

이제 어떤 서비스인지 짐작이 가시나요? 오늘의 서비스는 바로 세계 1위의 명상 앱 캄(Calm)입니다. ‘세상을 더 행복하고 건강하게 만들자’라는 미션으로 시작한 이 앱은 5년 만에 경쟁 업체를 제치고, 건강 앱 부문의 1위를 차지하는 놀라운 성과를 거뒀습니다. 우리나라에서도 많은 유저를 확보해가며 점점 성장해가고 있습니다. 오늘은 폰트 이야기의 마지막 편으로 명상 앱 ‘캄(Calm)’의 폰트와 프로덕트 디자인에 대해 살펴보겠습니다.

캄의 차별화 전략

캄이 한참 성장할 당시에 헤드스페이스(Headspace)라는 앱이 먼저 디지털 명상, 마음 챙김 부문의 시장을 주도하고 있었습니다. 그들은 명상 연습과 가이드를 제공하는 데 집중했습니다. 하지만 캄은 헤드스페이스와의 차별화 전략을 펼쳤습니다. 캄은 수면 솔루션을 주력으로 시장에 접근했고, 결과적으로 헤드스페이스를 앞서갈 수 있게 되었습니다.

지금은 전 세계 1억 명이 다운로드한 앱으로 명상 앱 중에서 독보적인 위치를 차지하고 있습니다. 이 앱을 실행하면 명상에 집중할 수 있도록 만든 디자인과 앱의 메시지가 눈에 띕니다. 편안한 컬러와 이미지를 앱의 디자인에 활용해 일상에 지친 유저에게 휴식을 주고 있습니다. 그리고 메시지를 통해 유저들을 명상의 세계로 인도하는데, 여기서 그들의 폰트가 큰 역할을 하고 있었습니다. 캄이 사용하는 폰트는 ‘아베니르 넥스트(Avenir next)’입니다. 이 폰트는 편집, 광고, CI 등 이미 많은 곳에서 사용되던 폰트입니다. 그리고 이 폰트를 만든 아드리안 프루티거(Adrian Frutiger)는 실용적인 타이포그래피의 거장으로 디자인계에 잘 알려진 분입니다.

폰트의 거장, 아드리안 프루티거(Adrian Frutiger)

1928년에 스위스에서 태어난 아드리안 프루티거는 20세기의 중요한 타이포그래퍼 중 한 사람입니다. 그는 “폰트는 뒤로 물러나 그래픽을 해치지 않아야 한다. 그 기능만이 담겨 있어야 한다.”라는 말을 남겼을 정도로 사용자 중심적인 타이포그래피를 강조했습니다. 그가 디자인한 폰트 중 가장 많은 사랑을 받은 폰트는 1957년에 만든 유니버스(Univers)입니다.

유니버스는 최초의 '체계적 거대 폰트 패밀리'라는 수식어를 가지고 있습니다. 그는 폰트 패밀리에 체계적인 숫자 코딩 시스템*을 부여했고, 이는 다른 산세리프 폰트들이 패밀리를 구성할 때 채택하는 표준 시스템이 되었습니다. 프루티거는 유니버스 이외에도 1975년 파리의 샤를 드 공항의 사인 시스템을 위한 폰트 프루티거(Frutiger)를 디자인했고, 이와 관련하여 프루티거 넥스트(Frutiger Next), 프루티거 아라빅(Frutiger Arabic) 등의 패밀리를 개발했습니다. 그리고 1988년 오늘의 폰트인 아베니르(Avenir)를 완성했습니다. 아베니르는 프루티거가 가장 좋아하는 폰트라고 합니다. "나의 성격이 오롯이 반영된 폰트이고, 내가 이 폰트를 만들게 되어 자랑스럽다"라고 했을 정도로 큰 애정을 보였습니다.

*숫자 코딩 시스템: 폰트의 굵기, 폭, 이탤릭에 각기 숫자를 부여해 이를 두 자리 숫자의 조합으로 표현한 시스템입니다. 숫자 5를 기본으로 십의 자리가 폰트의 굵기를 나타내며, 그다음 일의 자리가 글자 폭과 이탤릭을 의미합니다. 예를 들어 유니버스 55는 가장 기본인 텍스트 서체 레귤러(regular), 56은 레귤러 이탤릭(regular italic)을 의미합니다.

아베니르(Avenir), 아베니르 넥스트(Avenir Next)

그렇다면 그가 좋아하던 아베니르는 어떤 폰트일까요? Avenir는 프랑스어로 '미래'를 의미합니다. 이름에서 짐작할 수 있겠지만 아베니르는 푸투라(Futura)를 재해석해 만든 폰트입니다. 프루티거는 당시 유행하던 기하학적 스타일에서 좀 더 휴머니스트 폰트의 해석을 더한 아베니르를 개발했습니다. 이를테면, t와 a의 끝맺음에 있는 곡선을 보면 전통적인 기하학 폰트의 스타일을 완전히 따르지 않았음을 알 수 있습니다. 또한 알파벳 o도 완벽한 원이 아닙니다. 이러한 특징들 덕분에 아베니르는 조화로운 동시에 감각적인 인상을 줍니다.

아베니르 넥스트는 아베니르가 개선된 버전의 폰트입니다. 2004년 프루티거는 라이노타입(Linotype)의 인하우스 디자이너 아키라 코바야시와 아베니르의 폰트 패밀리를 확장하는 작업을 했습니다. 그 결과 오늘의 폰트 아베니르 넥스트가 만들어진 것입니다. 아베니르 넥스트는 특유의 부드러운 인상과 뛰어난 가독성 덕분에 출시 후 디자이너들의 많은 사랑을 받았습니다. 이 폰트는 아이덴티티, 출판 등 다양한 프로젝트에서 사용되었습니다. 그리고 명상 앱 캄에서도 그들의 메시지와 서비스를 대변하는 폰트로 아베니르 넥스트를 사용하게 되었죠.

*추가 자료: 아베니르 넥스트는 많은 곳에 사용되고 있습니다. 왼쪽부터 디즈니 플러스, 빗모지(Bitmoji), 암스테르담 도시 브랜딩 등 UI, BX, 편집 다양한 분야에 사용되고 있습니다. 2016년에 스냅챗에서도 사용했습니다.

아베니르 넥스트(Avenir Next) 그리고 캄(Calm)

위 자료는 캄의 스플래시 스크린과 홈 화면 그리고 배경 선택(Scenes) 화면입니다. 스플래시 스크린의 메시지 "take a deep breath"는 앱 시작 전 유저를 한 템포 쉬게 하며 자연스럽게 캄의 세계로 이끌고 있습니다. 물론 폰트는 아베니르 넥스트이고, 굵지 않은 Regular가 사용되었습니다. 다른 화면에서도 이 폰트가 어떻게 적용되었는지 살펴볼까요? 강조를 해야 하는 몇몇 부분을 제외하고, 굵지 않은 두께로 적용이 되었습니다.

이러한 적용 방식이 아베니르 넥스트의 특징을 잘 살렸다고 생각됩니다. 폰트가 주는 부드러운 인상과 폰트의 자연스러운 리듬이 앱에서 잘 드러나며, 전체적인 톤 앤 매너와도 무리 없이 조화를 이루고 있습니다. 게다가 폰트의 높은 가독성 덕분에 폰트가 얇거나 작아도 인지하는 데 문제가 없습니다.

다음은 홈 화면의 카테고리 중 하나(Sleep)를 선택했을 때 나타나는 화면입니다. 앞서 말씀드렸듯이, 타이틀은 물론 전체적으로 얇은 굵기로 세팅되었습니다. 버튼과 작가의 이름, 지금 재생되고 있는 세션 정도에만 굵은 폰트가 사용되었습니다. 이 때문인지 콘텐츠의 위계와 강조가 명확하지는 않습니다. 하지만 저는 이게 단점이라고 생각하지 않습니다. 오히려 물 흐르듯이 자연스럽게 콘텐츠가 인지되는 것이 앱의 성격, 톤 앤 매너와 더 어울립니다.

화면의 그래픽 요소들도 아베니르 넥스트와 찰떡같은 조화를 이루고 있습니다. 아이콘은 폰트와 같이 얇은 굵기의 선으로 이루어져 있습니다. 이미지와 버튼, 하단 탭에 적용된 모서리 값(corner radius)은 부드러운 아베니르 넥스트의 곡선과 잘 어울립니다. 사실 앱에 보이는 모든 요소가 서로 어울리지 않는 것이 없습니다. 폰트, 그라데이션, 사진 이미지, 아이콘 등 모든 것이 캄의 톤 앤 매너에 맞게 가공되어 있습니다. 이는 디자인의 방향이 서비스에 맞게 설정되었고, 그것을 구축한 디자인 시스템이 잘 설계된 결과라고 생각합니다.

폰트로 전하는 메시지

실제로 캄의 감성적인 디자인은 많은 유저에게 호평을 얻고 있습니다. 그래서인지 앱스토어에서 다른 명상 앱을 살펴보면 캄과 비슷한 톤 앤 매너를 가진 명상 앱이 많습니다. 이는 디자인이 캄의 성공에 어느 정도 기여를 했다는 간접증거라고 생각합니다. 물론 캄의 디자인이 디지털화된 명상 서비스를 표현하는 보편적인 스타일이기 때문일 수도 있습니다. 하지만 그만큼 캄의 디자인이 서비스 철학과 비전을 시각적으로 잘 구현했고, 이런 구현 방식이 많은 경쟁자와 후발주자들에게 영향을 준 것입니다.

그럼 오늘의 폰트 아베니르 넥스트는 이 서비스에서 어떤 역할을 하고 있을까요? 잘 정돈된 디자인 요소들의 중심에서 앱의 메시지를 전달하는 메신저의 역할을 이 폰트가 수행하고 있습니다. 캄이 그들의 디자인, 아베니르 넥스트를 언제까지 고수할진 모르겠습니다. 언젠가는 변화하여 서비스를 오롯이 대변하는 커스텀 폰트를 만들 수도 있겠죠. 그렇지만 업계 1위인만큼 그들이 주도하는 명상, 마음 챙김 시장의 디자인 트렌드를 지켜보는 것도 재미있을 것 같습니다.

<참고 자료>

로그인하고 자유롭게 의견을 남겨주세요.