✏️ PM도 알고 있으면 좋은 폰트 ‘Roboto’ B2B SaaS 프로덕트 개발을 메인으로 하다보니 대시보드 디자인/설계에 굉장히 집중하는 편이다. 특히 폰트 부분에 있어서 많은 고민이 필요했는데 한국어, 일본어, 영어가 조화를 이뤄야하고 숫자 기반의 데이터를 표시하는데 있어서 무엇보다 폰트가 가장 중요한 역할을 한다는 것을 누구보다도 잘 알고 있다고 생각한다. 나는 폰트 전문가가 아니기에 최대한 디자이너의 의견을 존중하였고 나의 피드백은 단 하나였는데 높은 가독성으로 대시보드 상에서 수많은 정보가 잘 전달될 수 있는 폰트였으면 좋겠다고 전했고 그 당시 디자이너는 Roboto를 제안해왔다. 실제로 프로토타입에 Roboto를 적용해보니 노트산스 베이스의 한국어, 일본어와도 조화가 좋았고 좁은 글자 폭과 가독성이 좋아서인지 대시보드에 담긴 많은 정보들이 조화를 잘 이루면서 읽혔던 것이다. 그때 기분은 유레카를 외칠 정도로 이거다! 싶었다. 그때부터 App Ape는 기본적으로 Roboto를 메인 폰트로 사용하고 있는데 이렇게 정리된 글이 있어서인지 반가움 마음에 단숨에 읽었다. 대시보드 디자인 폰트를 결정하는데 고민하고 있는 분들이라면 적극적으로 추천하고 싶은 폰트이다. 📝 이하 아티클 메모 1.구글 폰트 중 가장 인기 많은 폰트는 무엇일까요? 바로 안드로이드 유저에게 친숙한 그 폰트, 로보토(Roboto)입니다. 2. Roboto는 기계적인 골격, 기하학적인 형태가 특징이지만 부드러운 커브로 인해 휴머니스트 산세리프나 세리프 폰트같이 자연스러운 글 읽기의 리듬을 느낄 수 있다고 합니다. 3. 리디자인 후 전체적으로 글자 폭이 살짝 넓어졌고, 모서리가 좀 더 둥글어졌습니다. 이로 인해 가독성이 많이 개선되어, 높은 가독성으로 많은 정보를 전달할 수 있는 폰트라는 평을 듣게 됩니다. 4. Roboto는 다양한 구글의 서비스에서 주로 밀도 높은 정보를 전달해야 하는 본문의 폰트로 사용되고 있습니다. 물론 뛰어난 가독성 덕분이지요. 그리고 타이틀이나 주목이 필요한 곳(메뉴, 헤딩 등)에는 Google Sans가 사용되었는데, 이러한 변화는 2018년 안드로이드 9.0 Pie부터 나타나기 시작했습니다. 5. Roboto의 장점인 좁은 글자 폭과 우수한 가독성은 작은 화면에서 더욱 돋보입니다. 구글 검색 결과를 보여주고 있는 화면에서는 Roboto를 사용해 같은 공간에 좀 더 많은 텍스트양을 소화할 수 있으며 가독성 또한 아주 좋습니다. 6. 타이틀에서 Roboto를 사용하면 확실히 좁은 폭과 기하학적인 특징이 더욱 도드라집니다. 그리고 타이틀에 쓸 때는 Bold보다는 주로 얇은 Regular나 Thin을 선호하는 것을 볼 수 있습니다. 7. 좋은 폰트는 좋은 프로덕트를 만드는데 중요한 요소이고, 실제로 많은 디자이너들이 각자의 서비스에 어울리는 폰트를 고르거나 제작하려고 많은 시간과 노력을 들입니다.

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

Brunch Story

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

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2021년 9월 27일 오전 12:32

댓글 0

    함께 읽은 게시물

    Airflow 3.0 주요 기능 소개

    ... 더 보기

    👋 서비스가 AI를 활용해 사용자 경험을 구축하는 방법

    기업들은 어떻게 AI를 활용해 사용자 경험을 변화시키고 있을까요? 네이버, 배달의민족, 구글, 에어비앤비, 토스의 사례 살펴보기!

    네이버부터 에어비앤비까지, AI를 활용한 UX

    Brunch Story

    네이버부터 에어비앤비까지, AI를 활용한 UX

    < '다들 하니까'의 함정: 우리는 왜 내 판단보다 다수의 판단을 믿을까

    1. 사람들은 현재를, 지금까지 벌어진 일을 보여주는 지난 경험에 대한 솔직한 평가가 아니라 미래를 예측하는 유용한 지침이라고 생각하는 경향이 있다.

    ... 더 보기

    《성공과 성장이 다르고, 확장과 성장도 달랐다》

    ... 더 보기

    기업을 선택하는 기준

    

    ... 더 보기

    수습을 마치다. -2-

    ... 더 보기