시각 위계와 레이아웃 원리 — 보기 좋은 데는 이유가 있다

똑같은 콘텐츠인데 어떤 사이트는 정돈돼 보이고 어떤 사이트는 어설퍼 보입니다. 차이는 시각 위계(visual hierarchy) 예요. 무엇을 먼저 보게 할지, 요소들을 어떻게 묶고 정렬할지에 대한 규칙입니다. 감각이 아니라 법칙이라, 알면 누구나 적용할 수 있어요.

시각 위계란?

화면 요소에 중요도 순서를 부여하고, 그 순서대로 시선이 흐르게 만드는 것입니다. 방문자는 3초 안에 “어디를 봐야 하는지” 알아야 해요.

1순위: 가장 크고·진하고·여백 많은 것 (헤드라인·핵심 CTA)
2순위: 그 다음 (서브 헤드라인·주요 이미지)
3순위: 본문·보조 정보

→ 모든 걸 똑같이 강조하면 아무것도 강조되지 않습니다.

시선을 유도하는 5가지 도구

1. 크기(Size)

큰 요소가 먼저 보입니다. 헤드라인 > 서브 > 본문 순으로 명확한 크기 차이를 둡니다.

❌ 헤드라인 20px, 본문 18px (차이 미미 → 위계 없음)
✅ 헤드라인 40px, 본문 17px (명확한 위계)

2. 대비(Contrast)

색·굵기의 대비로 강조합니다. 가장 중요한 행동(CTA)은 배경과 강한 대비를 주세요.

• 진한 글자 vs 옅은 글자
• 강조색 버튼 vs 무채색 배경
• 단, 대비는 접근성 기준도 충족해야 (4.5:1 이상 — 접근성)

3. 여백(White Space)

가장 과소평가되는 도구입니다. 여백이 충분하면 요소가 고급스럽고 명확해 보여요.

• 중요한 요소일수록 주변 여백을 넉넉히
• 빽빽한 화면 = 싸 보이고 읽기 힘듦
• “여백은 비어 있는 게 아니라 숨 쉬는 공간”

4. 근접성(Proximity)

관련 있는 요소는 가까이, 관련 없는 요소는 멀리 둡니다. 거리가 곧 관계예요.

✅ 제목과 그 설명은 가깝게, 다음 항목과는 멀게
❌ 모든 항목이 같은 간격 → 무엇이 한 묶음인지 모름

5. 정렬(Alignment)

요소들이 보이지 않는 선에 맞으면 정돈돼 보입니다. 제멋대로 흩어진 정렬이 “어설픔”의 주범이에요. (그리드 시스템 참고)

시선의 흐름 — F·Z 패턴

사람의 눈이 화면을 읽는 패턴이 있습니다.

→ 중요한 요소(로고·CTA)를 시선이 지나는 자리에 배치합니다.

타이포 위계 — 실전 스케일

크기를 아무렇게나 정하지 말고 단계(scale) 로 묶으세요.

H1 (페이지 제목)   40~48px / 굵게
H2 (섹션 제목)     28~32px / 굵게
H3 (소제목)        20~22px / 중간
본문               16~17px / 보통
캡션·보조          13~14px / 옅게

• 단계 간 차이를 충분히 (1.25~1.5배씩)
• 색·굵기도 위계에 맞춰 (컬러·타이포)

강조는 하나씩 — “60-30-10” 감각

한 화면에서 강조 요소가 너무 많으면 위계가 무너집니다.

• 주(主) 강조 1개: 가장 중요한 행동·메시지
• 보조 강조 소수: 그 다음
• 나머지는 차분하게: 배경으로

💡 “이 화면에서 제일 먼저 봐야 할 게 뭐지?”에 한 가지로 답할 수 있어야 합니다.

점검 — 흐릿하게 보기 테스트

디자인을 눈을 가늘게 뜨고(또는 흐림 처리해) 봅니다. 흐릿한 상태에서도:

• 가장 강조된 요소가 먼저 보이는가?
• 어디를 봐야 할지 알겠는가?

흐릿하게 봤을 때 위계가 안 보이면, 선명해도 안 보입니다.

시각 위계 체크리스트

• 화면에서 가장 먼저 볼 요소가 명확한가
• 헤드라인·본문 크기 차이가 충분한가
• 핵심 CTA가 배경과 대비되는가
• 중요 요소 주변에 여백이 넉넉한가
• 관련 요소끼리 가깝고, 무관한 것과 멀리 있는가
• 요소들이 정렬 기준선에 맞는가
• 한 화면에 주 강조가 1개인가
• 흐릿하게 봐도 위계가 보이는가

⚠️ 자주 하는 실수

• 다 강조하기: 굵게·색·크게를 남발 → 아무것도 안 보임
• 크기 차이 미미: 헤드라인과 본문이 비슷 → 위계 없음
• 여백 부족: 빽빽 → 싸 보이고 읽기 힘듦
• 정렬 안 맞음: 제멋대로 → 어설픔의 핵심 원인
• 근접성 무시: 모든 간격 동일 → 묶음 구분 안 됨
• CTA가 안 보임: 가장 중요한 버튼이 배경에 묻힘

❓ FAQ

Q. 디자인 감각이 없어도 적용할 수 있나요? A. 네. 시각 위계는 감각이 아니라 규칙입니다. 크기 차이·여백·정렬·근접성만 지켜도 “어설픔”의 대부분이 사라져요. 이 글의 체크리스트부터 적용해보세요.

Q. 여백을 많이 두면 콘텐츠가 적어 보이지 않나요? A. 오히려 여백이 콘텐츠를 돋보이게 합니다. 빽빽한 화면이 정보가 많아 보이지만 읽히지 않아요. 고급스러운 브랜드일수록 여백을 넉넉히 씁니다.

Q. F/Z 패턴 중 뭘 따라야 하나요? A. 텍스트가 많으면 F 패턴(블로그·목록), 단순한 전환 페이지면 Z 패턴(랜딩)입니다. 핵심은 중요 요소를 시선이 지나는 자리에 두는 것이에요. (랜딩페이지 구조 참고)

Q. 강조색은 몇 개가 적당한가요? A. 강조(브랜드)색 1개면 충분합니다. 그 색을 핵심 CTA에만 쓰면 시선이 자연스럽게 모여요. 강조색이 여러 개면 위계가 흩어집니다. (컬러·타이포 참고)

관련 가이드

• 컬러·타이포 잡는 법
• 반응형 그리드·레이아웃
• 전환되는 랜딩페이지 구조
• 웹 접근성 기초