📌 프로젝트 개요
이번 프로젝트에서는 Tailwind CSS v4의 새로운 방식에 따라
폰트, 컬러, 타이포그래피 시스템을 설계하고 적용했습니다.
특히 아래의 키포인트에 중점을 두었습니다:
-
✅ 웹폰트 최적화: TTF vs WOFF2 성능 비교, preload 적용 방식 고민
-
✅ 디자인 토큰 중심의 컬러 시스템 구현 (@theme)
-
✅ 의미 기반 타이포그래피 유틸리티 정의 (@layer utilities)
1️⃣ 폰트 최적화: TTF vs WOFF2 실전 비교
⚠️ 문제 배경
처음엔 GmarketSans 폰트를 .ttf 포맷으로 적용했는데,
폰트 로딩 시 용량이 크고, 로딩 시간이 길어지는 문제가 발생했습니다.
특히 Chrome DevTools > Network 탭을 통해 확인한 결과,
.ttf 포맷은 파일 크기가 크고 로딩 우선순위에서도 부담이 되어
보다 경량화된 포맷(.woff2) 으로 교체할 필요가 생겼습니다.
📸 성능 비교 스크린샷 (Network 관점)
| TTF 사용 시 (Before) | WOFF2 사용 시 (After) |
|---|---|
 |  |
위 스크린샷은 Chrome DevTools의 Network 탭에서 캡처한 것으로,
.ttf와.woff2의 용량 차이, 로드 시점, 네트워크 소요 시간 등을 비교하기 위함입니다.
특히.woff2가 더 빠르고 가볍게 로드되는 것을 확인할 수 있습니다.
⚠️ 참고: 이 비교는 렌더링 지표(FCP, LCP 등) 가 아니라 파일 로딩 관점의 비교입니다.
✅ 최적화 방식
@font-face {
font-family: 'GmarketSans-Medium';
src: url('/fonts/GmarketSansTTFMedium.woff2') format('woff2'),
url('/fonts/GmarketSansTTFMedium.woff') format('woff'),
url('/fonts/GmarketSansTTFMedium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}-
✅ 브라우저 호환을 고려한 fallback 순서 (
woff2 → woff → ttf) -
✅
font-display: swap으로 FOUT 방지
🧩 서브셋 / preload는 왜 당장 적용하지 않았는가?
❓ 의문
-
왜 GmarketSans에서 서브셋(한글 포함)으로 폰트를 줄이지 않았나?
-
preload 설정은 왜 제거했나?
✅ 이유
| 항목 | 이유 | 후속 계획 |
|---|---|---|
| 서브셋(Subset) | Transfonter를 포함한 .woff2 변환 과정에서 자동 Korean 서브셋이 불가능했음 | 필요시 직접 필요한 한글 문자 입력하여 경량화 |
| preload | preload는 잘못 사용하면 성능이 오히려 감소됨 (unused preload) | 폰트가 실제 사용되는 구조 확정 후 preload 추가 예정 |
⚠️ preload는 무조건 성능을 올리는 것이 아니라, 실제로 화면에 쓰이는 폰트에만 적용해야 합니다.
2️⃣ 왜 @theme로 Color를 등록했을까?
Tailwind v4는 기존의 theme.extend.colors 방식을 버리고,
CSS 변수 기반 디자인 토큰 시스템(@theme) 을 중심으로 설계됩니다
✅ 이유
| 기존 방식 (v3) | v4 방식 (@theme) |
|---|---|
| Tailwind 내부 확장 구조 사용 | 표준 CSS 변수로 재정의 |
text-primary, bg-secondary 등 추상화 어려움 | 의미 기반 토큰 구성 가능 (--color-grey-050) |
| 다크 모드 등 별도 설정 필요 | @media prefers-color-scheme로 대응 쉬움 |
@theme {
--color-grey-0: #ffffff;
--color-grey-50: #f6f6f6;
--color-grey-200: #d1d1d1;
--color-grey-300: #b0b0b0;
--color-grey-400: #888888;
--color-grey-950: #1a1a1a;
--color-green: #59ac6e;
--color-blue: #58b6ff;
--color-yellow: #f9ac14;
}
사용 예:
<div className="bg-green text-grey-50">
버튼 텍스트
</div>
✅ 토큰을 통해 컬러 시스템 일관성을 유지하고, 글로벌한 테마 대응도 쉬워집니다.
3️⃣ 왜 Typography는 @layer utilities로 등록했을까?
Tailwind v4에서는 theme.extend.fontSize로 커스텀을 하더라도
자동완성 제한, 디자인 시스템 반영 어려움 등의 단점이 있습니다.
✅ 그래서 선택한 방식: @layer utilities
@layer utilities {
.text-heading1-medium {
font-size: 20px;
line-height: 28px;
font-weight: 500;
}
.text-body3-bold {
font-size: 12px;
line-height: 18px;
font-weight: 700;
}
}
📍 이 방식을 택한 이유
| 장점 | 설명 |
|---|---|
| ✅ 의미 기반 클래스 정의 | .text-body3-bold처럼 명확한 이름으로 스타일 적용 가능 |
| ✅ Tailwind v4와 충돌 없음 | PostCSS 단계에서 확장되므로 안전 |
| ✅ 시각적 토큰 체계 유지 | heading/body, medium/bold 등 구조 설계 가능 |
