🎨 Tailwind 4장: 타이포그래피와 색상 시스템

2026년 3월 5일 수정됨

📋 개요

Tailwind 의 폰트, 색상, 텍스트 유틸리티 — 디자인 시스템의 두 축을 클래스로 완벽하게 제어하기

📋 목차

📌 이 문서를 읽기 전에
🤔 왜 알아야 하는가
🎨 Tailwind 색상 팔레트 시스템
✍️ 타이포그래피 유틸리티 완전 정복
💻 실전: 영수네 커뮤니티 텍스트 디자인
🔧 색상 투명도 조절 (Opacity Modifier)
🏁 이번에 배운 내용 총정리
📝 마무리 퀴즈
🐣 영철이의 퇴근 일기
🔗 더 알아보기

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 15분

🎯 이 문서를 다 읽으면 할 수 있는 것

text-gray-500, bg-blue-100, text-blue-700 같은 색상 클래스 체계를 완전히 이해한다
폰트 크기, 굵기, 행간, 자간을 Tailwind 클래스로 정교하게 제어한다
bg-blue-500/50 같은 투명도 수정자(opacity modifier)를 활용한다

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

🎨 영숙 (디자이너): "영철 님, 피그마에서 쓴 색이 #1D4ED8 인데 Tailwind 클래스로는 뭐예요?"
🐣 영철: "음... text-[#1D4ED8] 이라고 쓰면 될 것 같은데요..."
🦁 영호 (리드): "영철 님, 그건 Tailwind 기본 팔레트에 있어요. text-blue-700 이에요. 디자인 시스템 토큰을 임의값으로 대체하면 나중에 색상 변경 시 대혼란이 와요."

🤔 왜 알아야 하는가

UI 에서 색상과 타이포그래피는 시각적 언어야. 개발자가 "그냥 파란색" 을 쓰면 디자이너가 지정한 "정확한 파란색" 과 달라져서 디자인 의도가 무너져.

영수네 커뮤니티에서 실제로 벌어진 일:

영철이가 버튼에 bg-[#1e40af] 라고 쓰고
카드 테두리에 border-[#1d4ed8] 이라고 쓰고
뱃지에 text-[#1e3a8a] 라고 써버렸어.

셋 다 파란색인데 미묘하게 달라. 영숙이 "파란색 톤 좀 맞춰주세요" 라고 했을 때 세 군데를 각각 수정해야 했어.

Tailwind 팔레트 시스템을 쓰면 blue-700 하나로 통일되고, 이후 색상 변경도 훨씬 쉬워.

🎨 Tailwind 색상 팔레트 시스템

색상 스케일 구조

Tailwind 는 각 색상마다 50부터 950 까지 11단계 음영을 제공해.

{색상}-50    → 가장 밝음 (거의 흰색)
{색상}-100
{색상}-200
{색상}-300
{색상}-400
{색상}-500   → 중간 (대표 색상)
{색상}-600
{색상}-700   → 진함 (텍스트에 자주 씀)
{색상}-800
{색상}-900
{색상}-950   → 가장 어두움 (거의 검정)

주요 색상 팔레트와 실무 용도

<!-- Slate (차가운 회색 계열) -->
<div class="bg-slate-50">   <!-- 페이지 배경 -->
<div class="bg-slate-100">  <!-- 섹션 배경 -->
<p class="text-slate-500">  <!-- 보조 텍스트 -->
<p class="text-slate-700">  <!-- 본문 텍스트 -->
<p class="text-slate-900">  <!-- 제목 텍스트 -->
 
<!-- Gray (중립 회색) -->
<div class="bg-gray-50">    <!-- 카드 배경 대안 -->
<div class="border-gray-200"> <!-- 테두리 -->
<p class="text-gray-400">   <!-- 힌트/플레이스홀더 -->
<p class="text-gray-600">   <!-- 보조 정보 -->
 
<!-- Blue (주요 브랜드 색상으로 자주 씀) -->
<div class="bg-blue-50">    <!-- 파란 배경 (알림 영역) -->
<div class="bg-blue-100">   <!-- 배지 배경 -->
<p class="text-blue-600">   <!-- 링크 색상 -->
<p class="text-blue-700">   <!-- 배지 텍스트 -->
<button class="bg-blue-600 hover:bg-blue-700"> <!-- CTA 버튼 -->
<button class="bg-blue-700 hover:bg-blue-800"> <!-- 진한 버튼 -->
 
<!-- Green (성공/완료 상태) -->
<div class="bg-green-100 text-green-700">  <!-- 성공 배지 -->
<div class="bg-green-500">                 <!-- 성공 버튼 -->
 
<!-- Red (에러/경고 상태) -->
<div class="bg-red-100 text-red-700">   <!-- 에러 배지 -->
<p class="text-red-500">                <!-- 에러 메시지 -->
<div class="border-red-300">            <!-- 에러 입력 필드 테두리 -->
 
<!-- Yellow/Amber (주의 상태) -->
<div class="bg-amber-100 text-amber-700"> <!-- 경고 배지 -->
 
<!-- Purple (특별한 강조) -->
<div class="bg-purple-100 text-purple-700"> <!-- 프리미엄 배지 -->

영수네 커뮤니티 색상 사용 패턴

// 스터디 태그 컴포넌트 — 기술 스택별 색상 구분
type Tag = 'react' | 'nextjs' | 'typescript' | 'nodejs';
 
const tagStyles: Record<Tag, string> = {
  react:      'bg-blue-100 text-blue-700',
  nextjs:     'bg-slate-100 text-slate-700',
  typescript: 'bg-blue-100 text-blue-800',
  nodejs:     'bg-green-100 text-green-700',
};
 
function StudyTag({ tag }: { tag: Tag }) {
  return (
    <span className={`rounded-full px-3 py-0.5 text-xs font-semibold ${tagStyles[tag]}`}>
      {tag}
    </span>
  );
}

✍️ 타이포그래피 유틸리티 완전 정복

폰트 크기 (font-size)

<!-- text-{size} 클래스 -->
<p class="text-xs">    <!-- 12px / line-height: 1rem -->
<p class="text-sm">    <!-- 14px / line-height: 1.25rem ← UI 보조 텍스트 -->
<p class="text-base">  <!-- 16px / line-height: 1.5rem ← 본문 기본 -->
<p class="text-lg">    <!-- 18px / line-height: 1.75rem ← 카드 제목 -->
<p class="text-xl">    <!-- 20px / line-height: 1.75rem -->
<p class="text-2xl">   <!-- 24px / line-height: 2rem ← 섹션 제목 -->
<p class="text-3xl">   <!-- 30px / line-height: 2.25rem ← 페이지 제목 -->
<p class="text-4xl">   <!-- 36px / line-height: 2.5rem ← 히어로 텍스트 -->
<p class="text-5xl">   <!-- 48px / line-height: 1 -->
<p class="text-6xl">   <!-- 60px / line-height: 1 ← 랜딩 페이지 대형 텍스트 -->

폰트 굵기 (font-weight)

<p class="font-thin">       <!-- font-weight: 100 -->
<p class="font-extralight"> <!-- font-weight: 200 -->
<p class="font-light">      <!-- font-weight: 300 -->
<p class="font-normal">     <!-- font-weight: 400 ← 본문 기본 -->
<p class="font-medium">     <!-- font-weight: 500 ← 버튼, 레이블 -->
<p class="font-semibold">   <!-- font-weight: 600 ← 소제목, 카드 제목 -->
<p class="font-bold">       <!-- font-weight: 700 ← 페이지 제목, 강조 -->
<p class="font-extrabold">  <!-- font-weight: 800 -->
<p class="font-black">      <!-- font-weight: 900 ← 히어로 텍스트 -->

행간 (line-height)

<p class="leading-none">    <!-- line-height: 1 — 제목에 tight 하게 -->
<p class="leading-tight">   <!-- line-height: 1.25 -->
<p class="leading-snug">    <!-- line-height: 1.375 ← 카드 제목 -->
<p class="leading-normal">  <!-- line-height: 1.5 ← 본문 기본 -->
<p class="leading-relaxed"> <!-- line-height: 1.625 ← 긴 본문 가독성 향상 -->
<p class="leading-loose">   <!-- line-height: 2 — 넓게 -->

텍스트 정렬

<p class="text-left">    <!-- text-align: left (기본) -->
<p class="text-center">  <!-- text-align: center ← 모달/히어로 제목 -->
<p class="text-right">   <!-- text-align: right ← 숫자 데이터 -->
<p class="text-justify"> <!-- text-align: justify ← 긴 문장 양쪽 정렬 -->

텍스트 말줄임 (Truncate)

<!-- 한 줄 말줄임 -->
<p class="truncate">아주 긴 텍스트가 한 줄로 잘림...</p>
 
<!-- 여러 줄 말줄임 (line-clamp) -->
<p class="line-clamp-2">두 줄까지만 보이고 나머지는 ...으로 잘림</p>
<p class="line-clamp-3">세 줄까지</p>

텍스트 꾸미기

<p class="uppercase">   <!-- 대문자 변환 -->
<p class="lowercase">   <!-- 소문자 변환 -->
<p class="capitalize">  <!-- 첫 글자 대문자 -->
 
<p class="underline">   <!-- 밑줄 -->
<p class="line-through"> <!-- 취소선 -->
<p class="no-underline"> <!-- 밑줄 제거 (링크 스타일 초기화) -->
 
<p class="tracking-tight">   <!-- letter-spacing: -0.05em ← 제목에 -->
<p class="tracking-normal">  <!-- letter-spacing: 0 -->
<p class="tracking-wide">    <!-- letter-spacing: 0.025em -->
<p class="tracking-widest">  <!-- letter-spacing: 0.1em ← 라벨/뱃지 -->

💻 실전: 영수네 커뮤니티 텍스트 디자인

페이지 제목 계층 구조

// 🦁 영호: "텍스트 계층을 명확히 하면 사용자가 정보를 더 빠르게 파악해요."
 
function StudyDetailPage({ study }: { study: Study }) {
  return (
    <article className="max-w-3xl mx-auto px-4 py-8">
      {/* 카테고리 레이블: 작고, 대문자, 넓은 자간 */}
      <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-blue-600">
        React · 주 1회
      </p>
 
      {/* 페이지 메인 제목: 크고, 굵고, 좁은 행간 */}
      <h1 className="mb-4 text-4xl font-bold leading-tight tracking-tight text-gray-900">
        {study.title}
      </h1>
 
      {/* 부제목: 중간 크기, 보조 색상 */}
      <p className="mb-6 text-xl font-medium text-gray-500">
        {study.subtitle}
      </p>
 
      {/* 메타 정보: 작고, 흐림 */}
      <div className="mb-8 flex items-center gap-4 text-sm text-gray-400">
        <span>👤 {study.hostName}</span>
        <span>📅 {study.schedule}</span>
        <span>👥 {study.memberCount}명</span>
      </div>
 
      {/* 본문: 가독성 최적화 */}
      <div className="prose max-w-none text-base leading-relaxed text-gray-700">
        {study.description}
      </div>
    </article>
  );
}

상태 배지 시스템

type StudyStatus = 'recruiting' | 'ongoing' | 'completed' | 'closed';
 
const statusConfig = {
  recruiting: {
    label: '모집 중',
    className: 'bg-green-100 text-green-700',
  },
  ongoing: {
    label: '진행 중',
    className: 'bg-blue-100 text-blue-700',
  },
  completed: {
    label: '완료',
    className: 'bg-gray-100 text-gray-500',
  },
  closed: {
    label: '마감',
    className: 'bg-red-100 text-red-600',
  },
};
 
function StatusBadge({ status }: { status: StudyStatus }) {
  const { label, className } = statusConfig[status];
  return (
    <span className={`rounded-full px-3 py-1 text-xs font-semibold ${className}`}>
      {label}
    </span>
  );
}

🔧 색상 투명도 조절 (Opacity Modifier)

Tailwind v3+ 부터 색상 클래스에 슬래시(/)로 투명도를 직접 지정할 수 있어.

<!-- bg-{color}/{opacity} 형태 -->
<div class="bg-blue-500/10">   <!-- blue-500 색상, 10% 불투명도 -->
<div class="bg-blue-500/50">   <!-- blue-500 색상, 50% 불투명도 -->
<div class="bg-blue-500/75">   <!-- blue-500 색상, 75% 불투명도 -->
 
<!-- text 에도 적용 -->
<p class="text-gray-900/60">  <!-- gray-900 색상, 60% 불투명도 -->
 
<!-- border 에도 적용 -->
<div class="border border-gray-900/10"> <!-- 테두리에 약한 불투명도 -->

실전 사례: 오버레이 배경

{/* 모달 오버레이: 검정 배경 50% 투명 */}
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm">
 
{/* 카드 호버 오버레이 */}
<div className="absolute inset-0 rounded-xl bg-blue-600/10 opacity-0 transition-opacity group-hover:opacity-100">
 
{/* 유리 효과 카드 */}
<div className="rounded-xl border border-white/20 bg-white/10 p-6 backdrop-blur-md">

🏁 이번에 배운 내용 총정리

카테고리	주요 클래스	용도
색상 텍스트	`text-gray-900`, `text-blue-600`	글자 색
색상 배경	`bg-white`, `bg-blue-100`	배경 색
폰트 크기	`text-sm`, `text-lg`, `text-2xl`	글자 크기
폰트 굵기	`font-medium`, `font-bold`	굵기
행간	`leading-snug`, `leading-relaxed`	가독성
말줄임	`truncate`, `line-clamp-2`	텍스트 자르기
투명도	`bg-blue-500/50`, `text-gray-900/60`	색상 투명도

📝 마무리 퀴즈

Q1. 영숙이 피그마에서 색상 #1D4ED8 을 지정했다. 이에 해당하는 Tailwind 색상 클래스는?

✅ 정답: blue-700 (배경이면 bg-blue-700, 텍스트면 text-blue-700)

💡 상세 해설:

Tailwind 의 blue-700 의 hex 값이 정확히 #1d4ed8 야. 이처럼 Tailwind 기본 팔레트는 잘 알려진 색상 값들을 이미 포함하고 있어.
임의값 text-[#1D4ED8] 로 쓰면 색상 일관성을 Tailwind 시스템이 추적할 수 없어. 팀 전체가 blue-700 을 쓴다는 컨벤션이 있으면 수정 시 blue-700 → blue-600 으로 전역 교체가 쉬워.
📌 핵심 기억법: "임의값보다 팔레트 먼저. 팔레트에 없으면 @theme 에 추가."

Q2. 영철이가 카드 제목(h3)에 적합한 타이포그래피 조합을 만들어야 한다. 18px, 굵기 700, 행간 좁게, 진한 회색 — 올바른 클래스 조합은?

✅ 정답: text-lg font-bold leading-snug text-gray-900

💡 상세 해설:

text-lg: 18px
font-bold: font-weight 700
leading-snug: line-height 1.375 (제목에 적합한 좁은 행간)
text-gray-900: 가장 진한 회색 (거의 검정에 가까워 제목에 적합)
본문 텍스트는 text-base leading-relaxed text-gray-700 이 일반적. 제목은 tight, 본문은 relaxed.
📌 핵심 기억법: "제목은 tight(snug), 본문은 relaxed."

Q3. 모달 배경 오버레이를 검정색 50% 투명도로 만들고 싶다. 올바른 Tailwind 코드는?

✅ 정답: bg-black/50

💡 상세 해설:

Tailwind v3 이상에서는 {color}/{opacity} 형식으로 투명도를 직접 지정할 수 있어.
bg-black/50 = background-color: rgb(0 0 0 / 0.5) — 검정색 50% 투명도.
예전 방식 bg-black bg-opacity-50 도 동작하지만, 슬래시 방식이 더 간결하고 모던해.
추가로 backdrop-blur-sm 을 같이 쓰면 배경 흐리기 효과까지 줄 수 있어.
📌 핵심 기억법: "투명도는 슬래시로 — bg-black/50."

🐣 영철이의 퇴근 일기

색상 팔레트 번호 체계가 처음엔 낯설었는데, 50이 제일 밝고 950이 제일 어두운 거라는 걸 알고 나니까 바로 직관이 생겼다. 이제 피그마 보면서 "이거 blue-600 이겠다" 싶으면 거의 맞더라.

그리고 bg-black/50 같은 투명도 수정자가 생각보다 강력하다. 모달 오버레이 만들 때 bg-opacity-50 이라고 쓰던 걸 이렇게 줄일 수 있으니까.

💡 오늘의 교훈: "색상은 팔레트 시스템으로, 투명도는 슬래시로. 임의값은 디자인 시스템의 적이다."

내일 영수 님한테 "서비스에 색상 토큰 정의 제대로 하면 디자인 변경 비용이 확 줄어요" 라고 한번 어필해봐야지. 오늘 배운 거 써먹어야지! 퇴근하고 집에서 커피 한 잔 마시면서 색상 시스템 정리해봐야겠다. ☕

🎨 Tailwind 4장: 타이포그래피와 색상 시스템

📋 목차

📌 이 문서를 읽기 전에

🤔 왜 알아야 하는가

🎨 Tailwind 색상 팔레트 시스템

색상 스케일 구조

주요 색상 팔레트와 실무 용도

영수네 커뮤니티 색상 사용 패턴

✍️ 타이포그래피 유틸리티 완전 정복

폰트 크기 (font-size)

폰트 굵기 (font-weight)

행간 (line-height)

텍스트 정렬

텍스트 말줄임 (Truncate)

텍스트 꾸미기

💻 실전: 영수네 커뮤니티 텍스트 디자인

페이지 제목 계층 구조

상태 배지 시스템

🔧 색상 투명도 조절 (Opacity Modifier)

실전 사례: 오버레이 배경

🏁 이번에 배운 내용 총정리

📝 마무리 퀴즈

🐣 영철이의 퇴근 일기

🔗 더 알아보기