사람이 ‘편하다’고 느끼는 웹사이트 숫자들
폰트 사이즈, 여백, 패딩의 실제 기준
어떤 디자인은 딱 보자마자 ‘편하다’고 느껴집니다.
글이 잘 읽히고, 구조가 명확하고, 뭔가 눈이 덜 피곤합니다.
그런데 이 ‘편함’이라는 감각은 그냥 운이 좋은 게 아닙니다.
정확한 수치와 근거, 그리고 반복된 연구 결과가 만든 결과물이죠.
텍스트 – 가장 중요한 시작점
사람이 정보를 인지할 때, 가장 먼저 만나는 건 텍스트입니다.
✅ 본문 폰트 크기 기준
PC (화면폭 1024px 이상): 16px (1rem)
모바일 (320~430px): 14~16px
▶ 가독성과 피로도 사이의 최적 지점
한글 기준으로는 14px 이상부터 글자 형태가 분명히 구분됩니다.
16px은 영문 기준 평균 독서 속도가 가장 높은 크기입니다.
Material Design, Apple HIG, WCAG 모두 이 기준을 제시하고 있습니다.
여백과 패딩 – 숨 쉴 공간 만들기
사람의 눈은 **군집(Gestalt)**을 빠르게 인지합니다.
즉, 요소 간 간격만으로 정보가 이해되기도, 혼란을 유발하기도 합니다.
✅ 섹션 간 여백
PC: 48px ~ 64px
모바일: 24px ~ 32px
✅ 카드 내부 패딩
PC: 상하 24px / 좌우 16~24px
모바일: 상하 16px / 좌우 12~16px
▶ 너무 촘촘하면 ‘조잡함’,
▶ 너무 넓으면 ‘비어 있음’을 유발합니다.
버튼과 인터랙션 – 손끝이 느끼는 최소 기준
모바일 사용자 기준, 클릭 가능한 요소의 크기는 최소 44px 높이가 되어야 합니다.
손가락 하나가 정확히 눌러야 하기 때문이죠.
✅ 버튼 기준
최소 높이: 44px
내부 패딩: PC 기준 12px 24px / 모바일 10px 16px
텍스트 사이즈: 14~16px이 가장 무난합니다.
참고: Apple HIG, WCAG 2.1 터치 타겟 가이드라인
실제 서비스들은 어떻게 쓸까?
Google (Material Design 기준)
본문: 16px (Roboto/Noto Sans KR)
타이틀: 32px(H1), 24px(H2)
섹션 여백: 64px
버튼 높이: 48px
Apple (iOS)
본문: 약 17pt (≒ 16px)
버튼: 높이 44px 이상
리스트 여백: 16~20pt
Medium (읽기 중심 플랫폼)
본문: 21px
줄간격: 1.5~1.6
단락 간 여백: 24px
좌우 마진: 약 96px 이상
Notion
본문: 16px
H1/H2/H3: 32/24/20px
패딩: PC 96px 이상 / 모바일 24px
Airbnb
본문: 16px / 설명문 14px
카드 간 여백: 32px
카드 내부 패딩: 24px
마무리하며
‘편안한 UI’는 감각만으로 만들어지지 않습니다.
디테일은 숫자에서 시작되고, 감성은 구조 위에 올라탑니다.
디자인 시스템을 짤 때, 리디자인을 할 때, 이 숫자들이 여러분의 ‘감각’을 다시 정리해줄 수 있을 겁니다.
더 많은 인사이트를 얻고 싶다면, 렛플을 확인해보세요
� https://bit.ly/4nGsEFC
