ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 모바일에서 폰트가 얼마나 중요한데
    하루 하루 2025. 5. 5. 20:50

    📱모바일에서 폰트는 왜 이렇게 중요할까?

    직업상 저는 폰트에 예민한 편입니다. 인쇄물보다 디지털 화면, 특히 모바일에서 콘텐츠가 구현되는 일이 압도적으로 많아지면서, 폰트가 모바일 화면에서 어떻게 보이는지가 정말 중요해졌습니다.


    👀 모바일 글자는 더 잘 보여야 한다

    요즘 스마트폰은 화면도 선명하고 해상도도 높지만, 여전히 ‘픽셀(pixel)’이라는 단위를 기반으로 텍스트가 표현됩니다. 이 픽셀(px)은 화면을 구성하는 아주 작은 점으로, 화면에서 보이는 모든 것은 이 점들의 조합으로 이루어집니다.

    예를 들어 "16px"이라는 글씨 크기는, 세로로 16개의 픽셀 높이를 가진다는 뜻입니다. 그런데 화면이 작고 해상도가 높아질수록 이 작은 글씨들은 더 또렷하게, 혹은 오히려 더 흐릿하게 보일 수도 있습니다.

    그래서 모바일 환경에서는 글자의 구조, 두께, 크기, 여백이 더 정교하게 설계되어야 하죠.


    📌 모바일에서 폰트 고를 때 꼭 따지는 두 가지

    1. 산세리프(Sans-serif) 폰트여야 한다

    모바일 화면에서 ‘명조체’처럼 글자 끝이 뾰족한 세리프(serif) 계열 폰트를 보면, 눈이 시릴 때가 있습니다. 왜냐하면 작은 픽셀로는 이 섬세한 끝 처리를 정확히 보여주기 어렵기 때문입니다.

     

    그에 비해 산세리프, 즉 끝이 단순하고 직선적인 고딕체는 모바일에서 깨끗하게 표현됩니다. 그래서 대부분의 모바일 UI/UX 디자이너들은 산세리프 폰트를 기본으로 사용합니다.

     

     

     

    세리프는 명조, 산세리프는 고딕이라고 이해하면 쉽다.

     

    2. 옵티컬 스케일(Optical Scale)이 적용된 폰트여야 한다

    일반 폰트는 크기를 줄이면 획도 얇아지는데, 모바일 화면에서는 획이 너무 얇으면 가독성이 뚝 떨어집니다. 이 문제를 해결해주는 것이 옵티컬 스케일 폰트입니다.

     

    이 폰트는 글자 크기에 맞춰 적절한 두께와 균형을 따로 디자인해둔 것으로, 작은 글자는 더 두껍게, 큰 글자는 더 얇고 세련되게 표현되어 눈에 잘 들어옵니다. 디자이너 입장에서는 손이 많이 가는 작업이지만, 읽는 사람에게는 훨씬 편안한 가독성을 제공합니다.

     

     

     

    일반적으로 폰트 사이즈에 비례해서 획의 굵기가 변하지만, optical scale / size를 적용하면 폰트 크기에 최적 가독성인 획 굵기로 표현된다.

     


    📐 px? pt? 폰트 크기는 어떻게 정해질까?

    많은 분들이 궁금해하는 개념, "px"는 앞서 말했듯 화면상의 점(픽셀) 입니다. 웹과 모바일에서는 이 픽셀 단위로 글자 크기, 간격, 버튼 크기까지 모두 설계됩니다.

    하지만 px 단위만으로 UI를 정리하다 보면 복잡해지기 때문에, 요즘은 디자이너들이 그리드 시스템이나 8 Point System을 활용합니다.

    • 그리드 시스템:
      콘텐츠 배치와 정렬을 돕는 보이지 않는 선망. 마치 노트의 줄처럼 UI 요소들을 질서 있게 배치할 수 있게 도와줍니다.
    • 8 Point System:
      여백, 마진, 패딩, 버튼, 이미지 등 모든 UI 구성 요소의 간격을 8의 배수로 맞추는 디자인 규칙입니다. 예: 8px, 16px, 24px, 32px…
      이 시스템은 일관성과 정돈감을 주어 사용자 경험을 향상시킵니다.

    이러한 시스템을 이해하면 "폰트 크기는 왜 이렇게 정했지?"라는 의문이 자연스럽게 해소됩니다.

     

     

     

    8이란 숫자를 기준으로 정한 이유는 구획하기 좋기 때문이다. 24pt를 예를 들면 2, 3, 4, 6, 8, 12로 나눌 수 있다.

     


    📚 사용자들은 글을 읽지 않는다?

    실제로 모바일 사용자는 긴 글을 처음부터 끝까지 정독하지 않는 경향이 강합니다. 어느 연구에 따르면, 사용자 중 79%는 콘텐츠를 스캔만하고, 단 16%만이 '읽는다고' 합니다.

     

     

    그래서 콘텐츠의 성격에 따라 폰트 전략도 달라져야 합니다.


    ✍️ 콘텐츠 유형별 폰트 전략

    콘텐츠 유형권장 폰트특징 및 주의점
    블로그 / 웹소설 등 장문 Noto Sans, Roboto, Open Sans 16px 이상, 줄 간격 1.5배, 산세리프 필수
    이커머스 상품 설명 Helvetica, Lato, Apple SD Gothic Neo 중요한 정보는 Bold / 색상 강조, 섹션 나눔
    UI 버튼, 메뉴 시스템 기본 폰트 (SF, Noto) 14px~16px, 8 point system으로 정렬
     

    근데 한글 모바일 폰트는 산돌에서 만든 모바일용 폰트가 최적이죠. 모바일용으로 혼을 갈아넣어서 만들었으니까요. 그러니까 아이폰과 안드로이드 두 진영 모두 한글 폰트는 산돌과 협력했지요.


     

     

     

     

     

    《글자 풍경》 유지원 저: 폰트와 글자 디자인에 대해 아름답게 풀어낸 책입니다. 폰트에 관심이 있다면 꼭 추천드리고 싶어요.

    댓글

Designed by Tistory.