웹 타이포그래피 - 웹에서 한글 타이포그래피 계층을 만드는 4단계 설정법

목차

• 웹 타이포그래피 계층의 기본 원리
• 1단계: H1 제목 크기와 굵기 설정
• 2단계: H2·H3 하위 제목 스타일 적용
• 3단계: 본문 텍스트 가독성 조정
• 4단계: 색상으로 계층 강화하기
• 웹 타이포그래피 계층은 어떻게 테스트하나요?
• 실제 적용 사례와 체크리스트

웹 타이포그래피 계층의 기본 원리

2026년 웹 환경에서 한글 타이포그래피는 단순한 글꼴 선택을 넘어 정보 구조를 전달하는 도구로 자리 잡았습니다. 조사에 의하면 사용자 78%가 제목과 본문의 시각적 차이를 통해 콘텐츠를 빠르게 스캔한다고 합니다. 따라서 크기, 굵기, 색상을 체계적으로 활용하는 것이 필수입니다.

기본적으로 H1은 페이지 주제를, H2·H3는 하위 주제를, 본문은 상세 설명을 담당합니다. 이 계층이 명확하지 않으면 방문자는 3초 이내에 이탈률이 40% 이상 증가합니다.

1단계: H1 제목 크기와 굵기 설정

H1은 보통 32–40px 사이즈에 Bold(700) 굵기를 적용합니다. 모바일에서는 28–32px로 축소해도 계층이 유지되도록 합니다. 2026년 현재 반응형 기준으로 1.25배 비율을 유지하는 사이트가 늘고 있습니다.

이 단계에서 중요한 점은 H1을 페이지당 한 번만 사용하는 것입니다. 여러 개의 H1을 사용하면 검색 엔진과 사용자 모두 혼란을 겪게 됩니다.

2단계: H2·H3 하위 제목 스타일 적용

H2는 24–28px, SemiBold(600)로 설정하고 H3는 20–22px, Medium(500)으로 구분합니다. 각 단계 사이 간격은 1.5배 이상 확보해야 가독성이 높아집니다.

3단계: 본문 텍스트 가독성 조정

본문은 16–18px, Regular(400) 굵기를 기본으로 하며 줄 간격은 1.7배 이상으로 설정합니다. 디자인 연구에 따르면 한글 본문의 최적 줄 길이는 45–55자입니다. 이 범위를 벗어나면 읽기 피로도가 25% 이상 상승합니다.

또한 본문에 tracking(자간)을 -0.01em 정도로 살짝 조정하면 한글 가독성이 개선됩니다.

4단계: 색상으로 계층 강화하기

색상은 #111111(제목)과 #444444(본문)처럼 명도 차이를 3단계 이상 두는 것이 효과적입니다. 강조가 필요한 부분에는 #0066CC와 같은 보조색을 사용하되, 전체 색상 수는 3가지 이내로 제한합니다.

이렇게 색상까지 더하면 웹 타이포그래피의 시각적 계층이 완성됩니다.

웹 타이포그래피 계층은 어떻게 테스트하나요?

실제 사용자 테스트를 통해 5명 이상에게 30초 동안 페이지를 보여주고 주요 섹션을 찾아보게 합니다. 80% 이상이 원하는 정보를 바로 찾지 못하면 계층을 재조정해야 합니다.

실제 적용 사례와 체크리스트

많은 교육 콘텐츠 사이트는 위 4단계를 적용한 뒤 평균 체류 시간이 2분 이상 증가했다고 보고합니다. 아래 체크리스트를 참고해 점검해 보세요.

• H1은 페이지당 1개인가?
• H2·H3 크기 차이가 4px 이상인가?
• 본문 줄 간격이 1.7배 이상인가?
• 색상 명도 차이가 충분한가?

자주 묻는 질문

웹 타이포그래피 계층을 모바일에서 어떻게 유지하나요?

모바일에서는 기본 크기를 10–15% 축소하되, 상대 비율은 그대로 유지하는 것이 가장 안정적입니다.

한글 폰트와 영문 폰트를 섞어 써도 되나요?

가능하지만, 본문은 한글 폰트를, 숫자·영문은 시스템 폰트 스택을 함께 지정해 통일감을 주는 것이 좋습니다.

계층 설정에 CSS 변수는 어떻게 활용하나요?

:root에 —h1-size, —h2-size 등을 정의하면 한 번의 수정으로 전체 사이트에 일괄 적용할 수 있습니다.

접근성을 고려한 색상 대비 기준은 무엇인가요?

WCAG 기준 AA 등급을 충족하려면 제목과 배경 간 대비율 4.5:1 이상을 유지해야 합니다.

무료 폰트로도 충분한 계층을 만들 수 있나요?

네. 2026년 현재 Noto Sans, Pretendard 등 무료 폰트만으로도 크기·굵기·색상 조합으로 명확한 계층을 구현할 수 있습니다.

웹 타이포그래피를 체계적으로 적용하면 한글 콘텐츠의 가독성과 전문성이 동시에 높아집니다. 위 4단계를 따라 설정한 뒤 실제 사이트에 반영해 보세요. 더 구체적인 적용이 필요하시면 타이포그라피 노트에 문의해 주시기 바랍니다.