같은 크기의 글자만 늘어놓은 화면은 어디부터 읽어야 할지 알려 주지 않습니다. 크기와 무게, 색, 여백으로 읽는 순서를 코드에 새기면 눈이 저절로 길을 찾습니다. 아래 예제는 그대로 복사해 확인할 수 있습니다.
04.1 크기로 순서 매기기
제목과 본문, 보조 설명이 다 같은 크기면 눈이 헤맵니다. 크기 차이가 곧 중요도의 차이입니다.
.title {
font-size: 24px;
font-weight: 700;
}
.body {
font-size: 16px;
}
.meta {
font-size: 13px;
color: #6b7280;
}
24px 제목이 먼저 눈에 들어오고, 16px 본문이 그다음, 옅은 13px 메타 정보가 마지막에 읽힙니다. 세 단계면 대부분의 화면은 충분히 정리됩니다. 단계를 너무 잘게 쪼개면 오히려 차이가 흐릿해지니, 눈에 확실히 구분되는 몇 개로 줄이는 편이 낫습니다.
04.2 배수로 크기 체계 잡기
글자 크기를 그때그때 정하면 화면마다 제각각이 됩니다. 일정한 비율로 오르는 값을 변수로 묶어 둡니다.
:root {
--text-sm: 13px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 28px;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
p { font-size: var(--text-base); }
단계별 크기를 미리 정해 두면 제목 하나를 키울 때도 변수만 바꿔 전 화면이 함께 조정됩니다. 눈금 없는 자로 매번 재는 대신 정해진 눈금을 골라 쓰는 셈입니다.
04.3 무게로 강약 주기
크기를 바꾸지 않고도 굵기만으로 위계를 만들 수 있습니다. 같은 줄에서 이름은 굵게, 나머지는 보통으로 둡니다.
.name {
font-weight: 600;
color: #111827;
}
.label {
font-weight: 400;
color: #6b7280;
}
같은 16px라도 600 굵기의 이름이 400 라벨보다 앞으로 나와 보입니다. 크기를 못 바꾸는 좁은 자리에서 무게는 요긴한 도구입니다.
04.4 색 명도로 층 나누기
글자색을 전부 새까맣게 두면 중요한 것과 덜한 것이 같은 목소리로 외칩니다. 덜 중요한 것은 회색으로 물러서게 합니다.
.primary-text { color: #111827; }
.secondary-text { color: #4b5563; }
.muted-text { color: #9ca3af; }
진한 먹색, 중간 회색, 옅은 회색 세 단계로 나누면 같은 크기 글자 사이에도 앞뒤 층이 생깁니다. 색의 명도 차이가 조용한 위계를 만듭니다.
04.5 여백으로 덩어리 세우기
중요한 영역은 주변을 비워 홀로 서게 하면 저절로 격이 올라갑니다. 위계는 요소 자체만이 아니라 주변 여백으로도 만들어집니다.
.hero {
padding: 56px 24px;
text-align: center;
}
.hero h1 {
font-size: 32px;
margin-bottom: 12px;
}
위아래 56px의 넉넉한 여백이 히어로 영역을 화면 맨 위 주인공으로 세웁니다. 제목 아래 12px만 남겨 설명과는 한 덩어리로 묶었습니다.
04.6 한 화면에 강조는 하나
모든 걸 강조하면 아무것도 강조되지 않습니다. 주된 행동 버튼 하나만 채우고 나머지는 테두리만 남깁니다.
.btn-primary {
background: #2563eb;
color: #fff;
}
.btn-ghost {
background: transparent;
color: #2563eb;
border: 1px solid #93c5fd;
}
꽉 찬 파란 버튼이 시선을 독차지하고 테두리만 있는 버튼은 곁에서 대기합니다. 두 버튼의 무게 차이가 사용자에게 무엇을 먼저 누르라고 일러 줍니다.
04.7 줄 간격과 자간으로 격 조절
큰 제목과 작은 본문은 같은 줄 간격을 쓰면 안 됩니다. 큰 글자는 줄을 좁히고 자간을 조여 단단하게 만듭니다.
h1 {
font-size: 32px;
line-height: 1.2;
letter-spacing: -0.02em;
}
p {
font-size: 16px;
line-height: 1.7;
}
제목은 줄 간격 1.2에 자간을 살짝 조여 야무진 덩어리로 뭉치고, 본문은 1.7로 벌려 편히 읽히게 합니다. 같은 폰트라도 이 미세 조정이 격의 차이를 냅니다.
04.8 위계를 코드로 검증하기
위계가 제대로 섰는지 보려면 색을 걷어 내고 회색조로만 봐도 순서가 읽혀야 합니다. 크기와 무게만으로 층이 나뉘어야 튼튼한 위계입니다.
.debug * {
color: #000 !important;
background: none !important;
}
이 임시 규칙으로 색을 지웠을 때도 제목이 먼저 보이면 크기와 무게가 제 몫을 하는 것입니다. 색이 사라지자 전부 평평해진다면 위계를 색에만 기대고 있었다는 신호입니다.
04.9 배경과 그림자로 앞으로 끌어내기
같은 층에 놓인 요소라도 배경과 그림자를 얹으면 화면에서 살짝 떠올라 앞으로 나옵니다. 강조하고 싶은 카드에만 이 깊이를 줍니다.
.card {
background: #fff;
border-radius: 12px;
}
.card.featured {
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
그림자가 짙고 넓을수록 요소는 더 높이 떠 보입니다. featured 카드만 살짝 들어 올리면 나머지 평평한 카드들 위로 한 겹 올라앉아 시선을 먼저 받습니다. 깊이도 위계의 한 축입니다.
04.10 조각을 하나로 모으기
지금까지의 도구를 한 카드에 얹으면 이렇게 층이 생깁니다. 마크업은 평범하지만 눈에는 순서가 또렷합니다.
<article class="post">
<h2>주간 업데이트</h2>
<p class="lead">이번 주 핵심 요약입니다.</p>
<p class="meta">3분 읽기</p>
</article>
.post h2 { font-size: 22px; font-weight: 700; }
.post .lead { font-size: 16px; color: #374151; }
.post .meta { font-size: 13px; color: #9ca3af; }
제목이 맨 앞, 요약이 그다음, 읽는 시간이 맨 뒤로 자연스레 밀립니다. 크기와 색만 세 단계로 나눴을 뿐인데 사용자는 뭘 먼저 볼지 고민하지 않습니다. 여기에 무게나 여백을 한 겹 더 얹으면 층은 더 또렷해지지만, 지금처럼 두 축만으로도 순서는 분명하게 읽힙니다.
04.11 위계 정리
시각적 위계는 화려함이 아니라 순서를 눈에 보이게 하는 일입니다. 크기, 무게, 색의 명도, 여백 이 네 가지를 조금씩 층지게 주면 같은 글자들 사이에도 앞뒤가 생깁니다. 강조는 아껴 쓸 때만 힘을 냅니다. 한 화면에 주인공을 하나만 두면 나머지는 저절로 제자리를 찾습니다.