제목은 진하게, 본문은 가볍게? 텍스트 계층 구조로 시선을 사로잡는 법
폰트도 이쁘고 색상도 괜찮은데, 이상하게 읽기 힘든 글, 보신 적 있죠?
반면 아주 심플한 디자인인데도 눈이 편하고 내용이 잘 들어오는 글도 있어요. 이 차이를 만드는 건 바로 타이포그래피의 계층 구조입니다.
이 글에서는 디자이너가 아니어도 쉽게 이해할 수 있도록 텍스트 계층 구조(Visual Hierarchy)의 핵심 원칙과 실전 적용 방법을 예시와 함께 소개할게요.
블로그, 웹페이지, 프레젠테이션을 준비하는 분들께도 분명 도움이 될 겁니다.
1. 왜 계층 구조가 중요할까요?
사람은 텍스트를 단어 단위로 정독하기보다, 먼저 시선을 훑고 ‘중요한 정보’를 찾는 습성이 있어요.
이걸 스캐닝 리딩(Scanning Reading)이라고 부르는데, 대부분의 웹 사용자들이 이렇게 콘텐츠를 소비합니다.
그래서 ‘어떤 내용을 먼저 보이게 할 것인가?’를 시각적으로 설계하는 게 중요합니다.
그 중심에 있는 게 바로 타이포그래피의 계층 구조예요.
2. 시각적 계층 구조란?
시각적 계층 구조(Visual Hierarchy)는 텍스트 정보를 중요도에 따라 구분해 배치하는 디자인 원칙입니다.
이 구조가 잘 짜여 있으면 독자는 텍스트를 훨씬 더 빠르게 이해하고, 머릿속에 정보를 정리하기 쉬워져요.
- 제목: 눈에 띄게 크고 굵게
- 본문: 읽기 편한 크기와 줄 간격
- 보조 설명: 작은 사이즈, 회색 톤 등으로 덜 강조
3. 초보자도 당장 쓸 수 있는 핵심 요소
계층 구조를 구성할 땐 아래 요소만 기억하세요:
- 크기(Size): 제목 > 소제목 > 본문 > 캡션 순
- 굵기(Weight): 중요한 정보는 Bold, 일반 텍스트는 Regular
- 색상(Color): 블랙으로 강조, 회색으로 보조 정보 구분
- 간격(Spacing): 줄간격은 최소 1.4~1.6배 유지
- 정렬(Alignment): 왼쪽 정렬을 기본으로 통일성 유지
참고로, 정렬과 간격만 잘 맞춰도 전체 분위기가 훨씬 정돈돼 보여요.
4. 적용 예시: 같은 문장, 다른 인상
A안: 계층 구조 없이 나열
여행을 떠나요
나만의 여행 스타일을 찾아보세요
최신 트렌드 · 인기 목적지 · 알뜰 팁까지
B안: 계층 구조 적용
여행을 떠나요
나만의 여행 스타일을 찾아보세요
최신 트렌드 · 인기 목적지 · 알뜰 팁까지
같은 내용인데도 B안이 훨씬 더 ‘정리되어 있고, 전달력이 좋다’는 느낌이 들지 않나요?
이게 바로 시각적 계층 구조의 힘입니다.
5. 타이포그래피 스타일 기본 가이드
디자인 툴 없이도 따라 할 수 있는 기본 규칙입니다.
📌 제목 (H1)
크기: 24~32px 이상
굵기: Bold
색상: 블랙 또는 브랜드 컬러
📌 소제목 (H2~H3)
크기: 18~24px
굵기: Medium
색상: 진회색 계열
📌 본문
크기: 14~16px
굵기: Regular
줄간격: 1.5배 이상 권장
📌 캡션
크기: 12~14px
색상: #999999 ~ #CCCCCC 계열
6. 실무에서 바로 써먹는 타이포그래피 팁
- 글자가 작을수록 줄 간격은 더 넓게 (읽기 피로 줄이기)
- 3~5줄 안에서 문단 끊기 (스크롤 피로 완화)
- 폰트는 2종 이하로 통일 (브랜드/보조용 정도만)
- 크기+굵기만으로도 충분히 계층 표현 가능
예: 블로그 본문은 16px Regular, 소제목은 20px Medium만 써도 충분히 구분됩니다.
7. 결론: 글도 디자인입니다
좋은 디자인은 눈에 띄는 것이 아니라, 읽는 사람이 편안하게 느끼는 것입니다.
텍스트도 마찬가지예요. 아무리 좋은 내용이라도 계층 구조 없이 한 덩어리로 보이면, 독자의 시선은 금방 멀어져요.
이제부터는 글을 단지 '써야 할 것'이 아니라, '디자인해야 할 것'으로 바라보세요.
시선을 설계하고, 흐름을 제안하고, 감정을 유도하는 도구로써 말이에요.
당신의 글이, 당신의 브랜드가 시각적으로 더 설득력 있게 전달되기를 바랍니다 :)
댓글
댓글 쓰기