brunch

You can make anything
by writing

C.S.Lewis

by 권우리 Sep 12. 2021

프로덕트 디자이너의 폰트 이야기: 1부. Roboto

안드로이드, 구글의 상징 Roboto(로보토)

과거의 폰트는 책과 같은 인쇄물을 위해 디자인이 되었습니다. 하지만 미디어의 변화에 따라 우리가 선호하는 폰트들도 그 흐름을 함께 하고 있었습니다. 프로덕트 디자이너인 저는 실제 디지털 프로덕트에서 사용되는 폰트들에 대해 호기심이 생겼고, 유저와 디자이너의 경계에서 한 폰트가 프로덕트에서 어떻게 사용되고 있는지를 중점적으로 다뤄보고 싶었습니다. 그래서 '프로덕트 디자이너가 전하는 폰트 이야기'를 기획하게 되었고, 다양한 프로덕트의 폰트에 관한 이야기를 전달하려 합니다.

첫 번째 폰트. Roboto

구글 폰트 중 가장 인기 많은 폰트는 무엇일까요? 바로 안드로이드 유저에게 친숙한 그 폰트, 로보토(Roboto)입니다. 구글의 디자이너 Christian Robertson이 디자인 한 로보토는 2011년에 안드로이드 4.0 "Ice Cream Sandwich"의 시스템 폰트로 소개되었고, 2014년 한 번의 리디자인 과정을 거쳐 지금까지 사용되고 있습니다. 유튜브, 구글맵, 구글 플러스 등 다른 구글 서비스에서 많이 이용되고 있으며, 당당히 가장 인기 있는 구글 폰트의 자리도 차지하고 있지요.

*2014년 리디자인 발표 당시에 Roboto Slab과 Condensed 두 패밀리가 함께 릴리즈 되었습니다. 그리고 다음 해에 Roboto Mono가 릴리즈 되었습니다.

Roboto는 기계적인 골격, 기하학적인 형태가 특징이지만 다른 그로테스크 계열의 폰트와 비교했을 때, 글자 폭이 획일화 되어 있지 않습니다. 또한 부드러운 커브로 인해 휴머니스트 산세리프나 세리프 폰트같이 자연스러운 글 읽기의 리듬을 느낄 수 있다고 합니다. 가독성이 좋아 본문 폰트로 많이 쓰이며, 기본 Roboto 이외에도 4가지 패밀리와 다양한 스타일 덕분에 어디에도 활용하기 좋은 폰트입니다.

그렇지만 처음부터 반응이 좋았던 것은 아닙니다

출처. http://typographica.org/on-typography/roboto-typeface-is-a-four-headed-frankenstein/

Roboto가 처음 배포되었던 2011년 당시의 반응은 좋지 않았습니다. 초반의 Roboto는 폰트 자체의 뚜렷한 아이덴티티가 없었고, 몇몇 타이포그래퍼들은 Helvetica, Myriad, Universe, FF DIN, Ronnia를 섞어놓은 frankenfont(a four-headed Frankenstein)라고 비판했었습니다. 하지만 2014년 리디자인된 버전이 발표됐고, 그때부터 비로소 진가를 인정받게 됩니다.

출처. The new Roboto(https://developers.googleblog.com/2014/07/the-new-roboto.html)

리디자인 후 전체적으로 글자 폭이 살짝 넓어졌고, 모서리가 좀 더 둥글어졌습니다. 이로 인해 가독성이 많이 개선되어, 높은 가독성으로 많은 정보를 전달할 수 있는 폰트라는 평을 듣게 됩니다(원래 Roboto는 글자 폭이 좁아 다른 폰트들보다 더 많은 글자가 디스플레이 가능하다는 장점이 있었습니다). 또한 다른 폰트와 비슷하다는 이유로 비판받았던 몇 개의 획이 수정되어, 비로소 Roboto만의 아이덴티티를 가지게 되었습니다. Roboto는 곧 안드로이드 OS와 구글 소프트웨어의 하나의 캐릭터로 자리 잡게 되지요. 같이 발표된 Material Design은 다양한 스타일과 사이즈에 맞는 최적의 행간(line-height)을 제공해 Roboto가 어떻게 구글 디자인 시스템에서 적용되고 있는지 잘 보여줍니다.

Roboto, 어떻게 쓰이고 있나요?

구글과 Roboto

당연하게도 Roboto는 다양한 구글의 서비스에서 주로 밀도 높은 정보를 전달해야 하는 본문의 폰트로 사용되고 있습니다. 물론 뛰어난 가독성 덕분이지요. 그리고 타이틀이나 주목이 필요한 곳(메뉴, 헤딩 등)에는 Google Sans*가 사용되었는데, 이러한 변화는 2018년 안드로이드 9.0 Pie부터 나타나기 시작했습니다. 이때부터 구글이 브랜딩의 목적으로 만든 Google Sans를 적극적으로 활용하기 시작해, 텍스트 UI의 상당 부분이 Roboto에서 Google Sans로 대체되었습니다. 구글이 앞으로 모든 텍스트를 Google Sans로 조금씩 대체해 나갈 거라 예상하는 의견도 있지만, 가독성을 고려하면 아직은 Roboto가 최선이기 때문에 이는 더 지켜봐야 알 수 있을 거라 생각합니다.

*Google Sans: Product Sans를 구글의 아이덴티티에 맞게 수정한 폰트입니다.

작은 디스플레이에서 더욱 빛납니다

Roboto의 장점인 좁은 글자 폭과 우수한 가독성은 작은 화면에서 더욱 돋보입니다.

a. 구글 검색 결과를 보여주고 있는 화면입니다. Roboto를 사용해 같은 공간에 좀 더 많은 텍스트양을 소화할 수 있으며 가독성 또한 아주 좋습니다.

b. Google Sans와 함께 사용되고 있습니다. Roboto가 사용된 부분은 타이틀보다 덜 중요하지만, 여전히 유저들의 판단에 영향을 미치는 정보를 전달하고 있습니다. 이 역시 폰트의 가독성 덕분에 글자 색이 회색이어도 정보를 전달하는 데 무리가 없어 보입니다.

c. 폰트 특유의 기하학적인 형태 때문에 기하학적인 아이콘과도 잘 어울린다고 생각합니다.

Roboto가 타이틀로 쓰였을 때

주로 본문 폰트로만 사용되던 Roboto가 타이틀로 사용된 경우입니다. 본문에서 쓰였을 때는 다른 폰트들과 큰 차이점이 없어 보였는데, 타이틀에서 확실히 좁은 폭과 기하학적인 특징이 더욱 도드라집니다. 그리고 타이틀에 쓸 때는 Bold보다는 주로 얇은 Regular나 Thin을 선호하는 것을 볼 수 있습니다. Material Design에서는 Roboto Regular를, Blogger에서는 Light를 타이틀에 사용하고 있습니다. 안드로이드 기기에서는 Roboto Light를 화면 중앙에 배치한 모습이 인상적입니다.

좌.Material Design / 우.Blogger메인화면

이렇게도 쓰입니다

출처. OMELET 웹사이트(https://www.omelet.com)

그럼 구글이 아닌 서비스에서 Roboto는 어떤 모습을 하고 있는지 살펴보았는데, 의외로(?) 트렌디해 보이네요. OMELET이라는 미국의 크리에이티브 스튜디오입니다. 화면을 스크롤 하면 타이틀에 적용된 애니메이션이 나타나는 시도가 신선합니다. 타이틀은 Roboto, 서브 폰트로는 Roboto Slab을 사용하고 있습니다.

좌. Greenlist(https://greenlistapp.com) / 우. MDS Coating(https://www.mdscoating.com)

Roboto는 폰트 자체에 도드라지는 캐릭터가 없어 다양한 종류의 타이틀 폰트들과 잘 어울리는데, 타이틀 폰트가 어떤 것이냐에 따라 Roboto가 주는 인상은 또 새롭습니다. 위의 예시들처럼 볼드한 세리프나 산세리프 폰트와도 잘 어울리고 여기에 더해 트렌디한 느낌까지 주고 있습니다.

출처. Liquid(https://www.shopify.ca/partners/shopify-cheat-sheet)

Liquid(Liquid는 Shopify의 오픈소스 템플릿 언어)를 쓰는 사람들이 쉽게 관련 정보를 찾을 수 있도록 만든 페이지입니다. 로고를 제외한 사이트 전체에 Roboto를 사용했는데, 진한 남색의 텍스트와 파스텔 톤의 조화가 신선합니다. 물론 Roboto는 여기서도 뛰어난 가독성으로 제 역할을 다하고 있습니다.

위의 예시 외에도 Roboto는 다양한 방면에서 사용되고 있습니다. 2017년에는 뉴욕 지하철 B라인에서 사용되었고, 이후에 Unreal Engine 4라는 게임과 Kodi라는 미디어 플레이어 소프트웨어에서 기본 폰트로 사용되었습니다. 닌텐도 스위치 비디오 게임 콘솔에서도 또한 사용된 것으로 보아 Roboto 특유의 기하학적인 캐릭터가 게임과 같은 장르에도 잘 어울리는 것을 알 수 있습니다.

Roboto, 어떤 폰트와 어울릴까요?

출처. 구글 폰트 페어링 Roboto(https://fonts.google.com/specimen/Roboto#pairings)

구글에서는 Roboto-Open Sans와 Roboto-Lato의 페어링을 제안합니다. Open Sans와 Lato 모두 휴머니스트 산세리프 계열의 서체인데, Roboto가 휴머니스트 산세리프의 특징(부드러운 커브, 획일화되지 않은 글자 폭)을 가지고 있어 괜찮은 조합을 보여줍니다. 피그마에서도 Roboto와 어울리는 8가지 폰트 페어링을 제공합니다. 물론 정답은 없으니 여러 가지 예시를 탐색해보시고, 나만의 찰떡 조합을 찾으시길 바랍니다!

좋은 폰트는 좋은 프로덕트를 만드는데 중요한 요소이고, 실제로 많은 디자이너들이 각자의 서비스에 어울리는 폰트를 고르거나 제작하려고 많은 시간과 노력을 들입니다. 오늘은 이러한 구글의 노력을 Roboto의 발전 과정을 통해 살펴봤고, 그 노력의 산물이 어떻게 활용 되고 있는지를 전달 드릴 수 있었던 시간이었습니다. 부족하지만 읽어주셔서 감사합니다. 다음 폰트도 기대해 주세요. :D

참고

Google fonts- Roboto

Download: New Roboto for Android L and Material Design

The fall and rise of Roboto, Android’s default font

Roboto Is Was a Four-headed Frankenfont

Fonts in Use

Typewolf

이 아티클은 위시켓 요즘 IT와 함께 연재하고 있습니다.