작성한 질문수 2

2

안녕하세요. 좋은 질문 감사드립니다.

제 경험상 UI디자인에서 폰트 사이즈 및 여백에 대한 기준에 대해서 정확한 정답이라는 것이 있지는 않았던 것 같아요. 다만, 제가 폰트 및 여백을 어떻게 설정해야 할까 고민을 할 때에 몇가지 참고하는 것들은 있어서 공유드립니다.

1. 리서치

제가 피그마 UI디자인 강의에서 여러차례 강조하는 것 중 하나는 앱을 따라해보는 부분이에요. 이걸 하는 이유 중 하나는 업계의 앱들 또는 웹사이트들이 어떻게 레이아웃을 잡고 폰트 및 폰트 스타일을 구성하는지 등 다양한 영역에서 스터디를 해볼 수 있기 때문이에요. 저는 이것을 통해서 어떻게 여백을 다루고 폰트를 다루는지 감을 잡았던 것 같습니다. 예를 들어, 저는 경험과 리서치를 통해 폰트사이즈가 14 이하인 경우는 Body font로 사용하지 않게 되었습니다.

참고로 웹 및 모바일 웹에서 UI의 폰트 관련 리서치를 할 때에 도움이 되는 툴이 있어 공유드립니다.

• 영문 폰트 및 폰트 스타일 알아내는 구글 크롬 익스텐션 "WhatFont" : https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
• 한글 폰트 및 폰트 스타일을 알아내는 방법 관련 글 추천: https://www.leafcats.com/89

2. 사용자 테스트

사용자 테스트를 통해 내가 디자인한 것이 사람들에게 잘 읽히고 (가독성) 정보 습득이 잘 되는지 피드백을 받아볼 수 있습니다. 저같은 경우 실무에서 사용자를 리크루팅하기도 해서 정보 습득하는데 어려움이 없는지 테스트를 했었는데 도움이 많이 되었습니다. 특히 가독성과 같은 영역은 상식적인 부분이기 때문에 꼭 내 제품을 사용하는 사용자가 아니라서 함께 일하는 팀원이나 주변 지인에게 부탁을 해도 좋은 피드백을 얻을 수 있는 것 같아요. 참고로, 내가 디자인하는 제품이 타겟으로 하는 사용자의 연령대와 같은 부분도 함께 고려하면 좋을 수 있습니다. 예를 들어, 나이가 많은 분들 같은 경우에는 특정 폰트 사이즈 미만은 잘 읽히지 않을 수 있어요.

3. 참고하면 좋은 Material Design 가이드

구글에서 만든 Material Design 가이드에는 Typography(글)와 Spacing(여백)에 대해서 어떻게 하는 것이 좋다라고 가이드를 주는 내용이 있어요. 이 부분도 함께 보시면 좋을 것 같아요. 영문 글이라서 Chrome의 Translate 기능을 사용하시면 (완벽하지는 않지만) 한글 버전으로 읽어보실 수 있습니다.

• Typography: https://material.io/design/typography/understanding-typography.html
• Spacing: https://material.io/design/layout/spacing-methods.html

다시 한번 좋은 질문 주셔서 감사드리고, 추가적으로 궁금한 점이 있다면 언제든 말씀주시기 바랍니다.