애플 타이포그래피로 화면 위계 잡기 HIG Typography 적용 회고

들어가며

요즘 홈페이지를 처음부터 혼자 만들고 있어요. 기획부터 문구, 배치, 디자인까지 전부 제 손으로 신경 쓰다 보니, 정작 완성된 화면을 열어보면 뭔가 정돈이 안 된 느낌이 들더라고요. 제목인지 본문인지 한눈에 안 들어오고, 눈이 어디를 봐야 할지 헤맸어요.

원인을 찾다 보니 결국 위계(hierarchy) 가 안 잡혀 있던 거였어요. 글자 크기도 두께도 그때그때 손 가는 대로 넣다 보니 값이 천차만별이었고, 그래서 가독성도 강조도 하나도 안 되는 상태였던 거죠. "여기가 중요해요"라고 말하고 싶을 때마다 무작정 굵게(bold) 키우다 보니, 화면 전체가 다 강조라서 결국 아무것도 강조가 안 되는 아이러니였어요.

그래서 디자인을 더 만지기 전에 레퍼런스 조사부터 다시 시작했고, 그 과정에서 애플의 Human Interface Guidelines(HIG) - Typography 문서를 만났어요. 거기서 배운 원칙을 제 홈페이지에 적용해보니 화면이 확 정리돼서, 제가 공부하고 깨달은 내용을 정리해두려고 합니다.

참고한 문서: Apple Human Interface Guidelines - Typography

1. 가장 먼저 잡고 간 것 - 애플의 타이포 철학

본격적으로 크기·두께를 정하기 전에, 애플이 타이포를 대하는 태도부터 이해하는 게 순서더라고요. 네 가지로 정리됐어요.

• 콘텐츠 우선 - 타이포 자체가 주목받는 게 목적이 아니라, 내용이 잘 읽히는 게 목적이에요. 장식적인 서체나 과한 웨이트는 오히려 내용 전달을 방해하니까 지양해요.
• 시맨틱(의미 기반) 텍스트 스타일을 쓴다 - 32px 같은 숫자를 여기저기 하드코딩하지 말고, Body·Headline·Title 처럼 의미로 이름 붙은 스타일을 쓰라는 거예요. 그래야 접근성 글자 크기 설정 같은 기능과 자동으로 연동돼요.
• 서체 수를 최소화한다 - 한 화면에 폰트와 웨이트를 이것저것 섞지 않아요. 위계는 오직 크기 · 웨이트 · 컬러 세 가지로만 만들어요.
• 글자를 키워도 위계가 무너지지 않게 - 사용자가 글자 크기를 크게 키워도 "제목 > 본문"의 관계가 유지되도록 설계해요.

제 화면이 정돈 안 됐던 이유가 여기서 바로 보였어요. 저는 강조를 폰트·크기·두께를 다 동시에 바꿔가며 만들고 있었거든요. 애플은 정반대로, 변수를 줄이는 방향으로 위계를 만들고 있었어요.

2. 위계는 '굵기'가 아니라 '크기'로 만든다 - 타입 스케일

이 부분이 저한테 제일 충격이었어요. 애플은 텍스트 스타일별로 크기·행간·웨이트를 미리 정해둔 하나의 스케일을 제공해요. iOS 기준(기본 Large 설정)으로 정리하면 이래요.

여기서 제가 밑줄 그은 관찰 포인트 두 가지예요.

• 제목들(Large Title ~ Title 3)이 전부 Regular 웨이트예요. 즉 제목을 굵게 만들어서 위계를 주는 게 아니라, 크기만 키워서 제목임을 알게 하는 거예요. 저는 제목이면 무조건 bold라고 생각했는데, 애플은 크기로 충분히 위계를 만들고 있었어요.
• 본문 강조는 Headline 으로 처리해요. 그런데 Headline은 Body와 똑같은 17pt인데 웨이트만 Semibold예요. 즉 같은 크기에서 두께만 바꿔서 강약을 줘요. "강조 = 더 키우기"가 아니라 "강조 = 같은 크기에서 살짝 더 굵게"였던 거죠.

이걸 깨닫고 제 CSS를 갈아엎었어요. 웹이라서 단위는 rem으로 바꾸고, 의미 기반 변수로 스케일을 정의했어요.

🙅🏻‍♀️ 원래 이렇게 하고 있었어요 (위계 없이 그때그때)

.title   { font-size: 32px;   font-weight: 800; }
.section { font-size: 19px;   font-weight: 700; }
.lead    { font-size: 18px;   font-weight: 600; }
.text    { font-size: 15.5px; font-weight: 500; }
.note    { font-size: 13px;   font-weight: 400; }
/* 크기도 굵기도 제각각 → 어디가 중요한지 눈에 안 들어옴 */

🙆🏻‍♀️ 시맨틱 타입 스케일로 정리했어요

:root {
  /* 의미 기반 스타일: 위계는 '크기'로, 강조는 '웨이트'로만 */
  --type-large-title: 2.125rem; /* 34px */
  --type-title-1:     1.75rem;  /* 28px */
  --type-title-2:     1.375rem; /* 22px */
  --type-body:        1.0625rem;/* 17px */
  --type-caption:     0.75rem;  /* 12px */
}

.large-title { font-size: var(--type-large-title); font-weight: 400; }
.title-2     { font-size: var(--type-title-2);     font-weight: 400; }
.body        { font-size: var(--type-body);        font-weight: 400; }
.body-strong { font-size: var(--type-body);        font-weight: 600; } /* = Headline */

제목은 전부 400으로 두고 크기로만 위계를 만들고, 강조가 필요한 본문만 같은 크기에서 600을 주는 식이에요. 이것만 바꿨는데도 화면이 훨씬 차분하게 정리됐어요.

3. 같은 SF Pro인데도 크기에 따라 모양이 달라진다 - 옵티컬 사이즈

애플은 용도별로 서체도 나눠 써요. 기본은 SF Pro, 워치처럼 좁은 공간엔 SF Compact, 세리프가 필요하면 New York, 코드엔 SF Mono 를 쓰는 식이에요.

그중에 제일 신기했던 건 옵티컬 사이즈(optical size) 개념이었어요. 같은 SF Pro라도 크기에 따라 자모 형태와 자간이 자동으로 바뀌어요.

• 20pt 미만 → Text 스타일: 자간을 넓히고 획을 또렷하게 → 작은 글자도 잘 읽혀요.
• 20pt 이상 → Display 스타일: 자간을 좁히고 형태를 정제 → 큰 글자가 깔끔하게 보여요.

쉽게 비유하면, 작은 글씨일 땐 "또박또박" 써주고 큰 글씨일 땐 "멋 부려" 써주는 거예요. 폰트 하나가 크기에 따라 알아서 두 가지 모드로 동작하는 셈이죠.

4. 큰 글자는 자간을 좁히고, 작은 글자는 살짝 벌린다 - 트래킹 & 리딩

여기서 트래킹(자간)과 리딩(행간)도 일정한 규칙이 있다는 걸 배웠어요.

트래킹(자간) - 애플은 크기별 트래킹 값을 표로 제공해요. 방향만 기억하면 돼요: 작은 글자는 살짝 벌리고(+), 큰 글자는 좁힌다(−). 예를 들어 본문 17pt는 약 −0.4pt 수준으로 좁히고, 11pt 같은 작은 글자는 +쪽으로 살짝 벌려요. 큰 제목은 글자끼리 멀면 흩어져 보이니 좁히고, 작은 글자는 너무 붙으면 뭉개지니 벌리는, 가독성 최적화 원리예요.

리딩(행간) - 위 표를 다시 보면 행간이 크기의 약 1.2~1.3배예요(34→41 ≈ 1.21배, 17→22 ≈ 1.29배). 그리고 큰 글자일수록 배수가 작아져요(더 타이트해져요). 큰 제목은 줄 간격이 너무 벌어지면 붕 떠 보이고, 본문은 줄 간격을 조금 더 줘야 술술 읽히거든요.

저는 그동안 line-height를 전부 1.5로 똑같이 박아두고 있었는데, 그게 큰 제목을 어색하게 붕 뜨게 만든 원인이었어요.

🙅🏻‍♀️ 행간을 전부 똑같이

* { line-height: 1.5; } /* 제목도 본문도 일률적 → 큰 제목이 붕 뜸 */

🙆🏻‍♀️ 크기가 클수록 행간 배수를 줄이기

.large-title { line-height: 1.2;  } /* 34→41 ≈ 1.21 */
.title-2     { line-height: 1.27; } /* 22→28 ≈ 1.27 */
.body        { line-height: 1.29; } /* 17→22 ≈ 1.29 */

5. 접근성 - 위계는 글자를 키워도 무너지면 안 된다

마지막으로 접근성 기준도 챙겼어요. 멋있는 화면도 안 읽히면 의미가 없으니까요.

• 최소 크기 11pt - 그보다 작아지면 읽기 어려워요. 애플은 사용자가 글자 크기를 크게 키우는 접근성 단계(AX1~AX5)에서 본문이 약 53pt까지도 확대되도록 설계해요. 핵심은 그렇게 키워도 제목 > 본문 관계가 유지된다는 점이에요. 이게 가능한 이유가 바로 1번에서 본 "시맨틱 스타일을 쓴다"였어요. 숫자를 하드코딩했으면 글자를 키우는 순간 위계가 다 깨졌을 거예요.
• 대비(contrast) - 본문은 명도대비를 충분히 줘요. 웹 표준인 WCAG AA 기준과도 맞물리는데, 일반 텍스트는 4.5:1, 큰 텍스트는 3:1 이상을 권장해요.
• 실제 환경에서 테스트 - 라이트/다크 모드, 글자 확대 상태, 그리고 실제 콘텐츠(더미 텍스트 말고)로 꼭 확인하라고 해요. 제 블로그도 다크/라이트 모드가 있어서 이 부분이 특히 와닿았어요.

적용하고 나서 달라진 것

원칙을 정리하고 나니 제가 뭘 잘못하고 있었는지가 또렷하게 보였어요.

• 강조 방법이 너무 많았어요. 폰트·크기·두께·색을 동시에 바꿔가며 강조하다 보니, 화면 전체가 강조 투성이라 정작 중요한 게 안 보였어요. → 위계는 크기로, 강조는 같은 크기에서 웨이트로만 만들도록 규칙을 단순화했어요.
• 숫자가 제각각이었어요. 15.5px, 19px 같은 값이 손 가는 대로 박혀 있었어요. → 의미 기반 변수로 된 타입 스케일 하나로 통일했어요.
• 행간이 일률적이었어요. 전부 1.5라 큰 제목이 붕 떴어요. → 크기가 클수록 행간 배수를 줄였어요.

결과적으로, 디자인을 화려하게 더한 게 아니라 선택지를 줄였더니 오히려 화면이 정돈되고 위계가 살아났어요. "타이포는 더하는 게 아니라 규칙을 정하는 일"이라는 걸 몸으로 배운 작업이었어요.

마치며

처음엔 "위계가 안 잡힌다"는 막연한 답답함에서 출발했는데, 애플 HIG를 따라가다 보니 결국 핵심은 변수를 줄이고 규칙을 정하는 것이더라고요. 크기로 위계를 만들고, 강조는 웨이트로만 주고, 행간과 자간은 크기에 따라 일관된 방향으로 조절하기 - 이 세 가지만 지켜도 화면이 한결 차분해졌어요.

여러분은 화면 위계를 잡을 때 어떤 기준을 쓰고 계신가요? 혹시 즐겨 쓰는 타입 스케일이나 레퍼런스가 있다면 댓글로 공유해주세요. 저도 더 배우고 싶어요. 🙂