사람이 편하다고 느끼는 폰트 사이즈, 여백, 패딩 값 | 매거진에 참여하세요

디지털 환경에서 ‘편안한’ 사용 경험이란, 단순히 예쁜 디자인을 의미하지 않습니다.

사용자는 무의식적으로 정보를 빠르게 이해하고 조작할 수 있는 구조,

눈에 부담을 주지 않는 텍스트 크기와 간격, 조밀하거나 과도하지 않은 여백을 편안하다고 느낍니다.

이러한 기준은 감각적인 경험이지만,

가독성 연구, UX 리서치, 접근성 가이드라인(WCAG, HIG, Material Design 등)을 통해 객관적으로 정리할 수 있습니다.

폰트 사이즈 가이드

가독성과 인지 속도의 관계

미국의 Nielsen Norman Group과 MIT의 시지각 연구에 따르면,

텍스트의 크기와 줄 간격이 클수록 정보 인식 속도가 빨라지며 피로감이 낮아집니다.

그러나 너무 크거나 작으면 시선이 흐트러지거나 시야에서 벗어나 집중이 어렵다.

• 영문 기준 연구에서 평균 읽기 속도가 가장 높은 본문 폰트 크기는 16px (약 1rem)입니다.

• 한국어 기준에서는 한글 자모음 구조상 가로 폭이 좁아, 14~16px에서 가장 높은 가독성을 보인다.

플랫폼별 권장 크기

PC 기준 (화면 폭 1024px 이상)

모바일 기준 (화면 폭 320~430px)

참고 근거:

• Apple HIG – Typography Guidelines

• Material Design Typography Scale

여백(Margin) 및 패딩(Padding)

심리적 안정감을 주는 레이아웃

사람의 눈은 시각적 군집(visual grouping)을 인지하는 데 매우 민감하다.

요소 간 간격이 일정하지 않거나 너무 촘촘하면 혼란을 유발하며,

반대로 여백이 너무 크면 ‘비어 있는 느낌’을 주어 사용자로 하여금 정보가 부족하다고 착각하게 한다.

PC 기준 여백 / 패딩

모바일 기준 여백 / 패딩

참고 근거:

• Apple HIG – Layout and Spacing

• WCAG 2.1 – Minimum Touch Target Guidelines

유명 웹사이트 기준 비교

실제 사용자 수가 많고, UX가 뛰어나다고 평가받는 유명 서비스들의 폰트 및 레이아웃 수치를 분석하면 아래와 같습니다.

Google (Material Design 기반)

• - 본문 텍스트: 16px (Roboto / Noto Sans KR 기준)

• - 헤드라인 (H1): 32px / H2: 24px

• - 카드 내부 패딩: 상하 24px / 좌우 16px

• - 섹션 간 여백: 64px 기준

• - 버튼: 높이 48px, 패딩 12px 24px

Apple (Apple HIG 기준)

• - 본문 텍스트: 모바일 기준 17pt (iOS 기본 서체 기준, 약 16px)

• - 타이틀: 28~34px

• - 버튼: 높이 최소 44px / 패딩 10px 20px

• - 리스트 간 여백: 16~20pt

• Medium (읽기 중심 플랫폼)

• - 본문 폰트: 21px / 줄 간격: 1.5~1.6

• - 타이틀: 42px

• - 단락 간 여백: 24px

• - 본문 마진: 좌우 약 96px 이상 (화면 크기에 따라 반응형)

• - 근거: Chrome 개발자 도구를 통한 실제 측정

Notion

• - 본문 폰트: 16px (Apple 시스템 서체)

• - 헤드라인 크기: H1: 32px / H2: 24px / H3: 20px

• - 블록 간 여백: 16~24px

• - 패딩: 좌우 최소 96px (PC) / 모바일 24px

Airbnb

• - 카드 간 여백: 32px

• - 카드 내부 패딩: 24px

• - 타이틀 폰트: 30~36px

• - 본문 폰트: 16px / 설명문 14px

편안한 UI는 사용자 경험의 시작점이며, 정량적인 기준에 기반하여 설계할 수 있습니다.

• 본문 폰트 기준:

  • - PC: 16px, 모바일: 14~16px

• 타이틀/서브타이틀:

• - PC: 28/24px, 모바일: 22/20px

• 여백/패딩:

  • - PC: 섹션 간 48~64px, 카드 내부 24~32px

  • - 모바일: 섹션 간 24~32px, 카드 내부 16~24px

• 버튼 및 입력 요소:

  • - 최소 클릭 높이: 44px 이상

  • - 내부 패딩: PC 12px 24px, 모바일 10px 16px