예쁘게 꾸미기 — Tailwind CSS로 빠르고 즐겁게 스타일링

지금까지 우리는 페이지를 만들고, 이동하고, 동적인 URL도 다뤄 봤습니다. 이제 슬슬 이런 생각이 들기 시작합니다.

"기능은 되는데… 좀 밋밋한데?"

맞습니다. 화면이 작동하는 것과 화면이 보기 좋은 것은 다른 문제입니다. 초보자일수록 여기서 많이 지칩니다. CSS를 따로 쓰자니 파일이 늘어나고, 클래스 이름을 짓자니 머리가 아프고, 정렬 하나 맞추려다가 한 시간이 지나 버리기도 합니다.

이럴 때 아주 든든한 친구가 바로 Tailwind CSS입니다. Tailwind CSS는 미리 준비된 작은 스타일 조각들을 조합해서 화면을 꾸미는 방식의 도구입니다. 쉽게 말해, 레고 블록처럼 p-4, rounded-xl, text-lg, bg-white 같은 조각을 붙여서 원하는 모양을 빠르게 만드는 느낌입니다.

이번 장에서는 우리가 만들고 있는 '작은 기록 상점' 프로젝트에 Tailwind CSS를 적용하면서, 초보자도 금방 눈에 보이는 결과를 얻을 수 있도록 차근차근 스타일링해 보겠습니다. 중요한 목표는 단순히 "예쁘게 만들기"가 아닙니다. 빠르게 만들고, 반복해서 쓰기 좋게 정리하는 습관까지 함께 익히는 것입니다.

Tailwind CSS가 왜 초보자에게 잘 맞을까요?

일반 CSS를 배우는 건 아주 중요합니다. 하지만 처음 프로젝트를 만들 때는 CSS 자체보다 "화면을 완성하는 경험"이 더 필요할 때가 많습니다. Tailwind CSS는 그 경험을 빠르게 만들어 줍니다.

예를 들어 버튼 하나를 만든다고 해 봅시다. 보통 CSS 방식이라면 버튼용 클래스를 만들고, 파일을 오가며 스타일을 쓰고, 다시 JSX로 돌아와 클래스를 붙입니다. Tailwind CSS는 이 과정을 훨씬 짧게 줄여 줍니다. 버튼에 필요한 모양을 바로 className에 적으면 됩니다.

<button className="rounded-lg bg-black px-4 py-2 text-white">
  저장하기
</button>

딱 봐도 어느 정도 감이 오지요?

• rounded-lg는 모서리를 둥글게 만듭니다.

• bg-black은 배경을 검정색으로 만듭니다.

• px-4 py-2는 좌우, 위아래 여백을 줍니다.

• text-white는 글자색을 흰색으로 바꿉니다.

이 방식의 좋은 점은 "지금 이 요소가 왜 이렇게 생겼는지"를 눈앞에서 바로 읽을 수 있다는 것입니다. 처음에는 클래스가 길어 보여도, 몇 번 써 보면 오히려 CSS 파일을 왔다 갔다 하지 않아도 된다는 점이 편하게 느껴집니다.

최신 Next.js 프로젝트에서는 보통 이미 준비되어 있습니다

최신 버전의 Next.js로 프로젝트를 만들 때 create-next-app에서 Tailwind CSS 사용을 선택하면, 많은 설정이 이미 끝난 상태로 시작하는 경우가 많습니다. 그래서 이번 책의 흐름에서도 "설치 지옥"보다 "바로 써 보기"에 집중하겠습니다.

우리 프로젝트를 열고 먼저 확인할 것은 두 가지입니다.

첫째, app/globals.css가 있는지 봅니다. 둘째, 여기에 Tailwind가 적용되는 기본 내용이 들어 있는지 봅니다.

최신 환경에서는 globals.css에 이런 식의 코드가 보일 수 있습니다.

@import "tailwindcss";

예전 자료에서는 아래처럼 보이는 경우도 많습니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

둘 다 Tailwind를 쓰기 위한 흐름과 관련이 있지만, 최신 버전에서는 프로젝트 기본 구성이 조금 더 간단해진 경우가 많다고 이해하면 됩니다. 초보자 입장에서는 "왜 문법이 다르지?" 하고 겁먹을 필요가 없습니다. 중요한 건 지금 내 프로젝트에 들어 있는 기본 방식에 맞춰 사용하면 된다는 점입니다.

그리고 app/layout.tsx에서 globals.css를 불러오고 있어야 전역 스타일이 전체 페이지에 적용됩니다.

import './globals.css'

이 줄이 이미 있다면, Tailwind를 쓸 준비는 거의 끝났다고 봐도 좋습니다.

아주 작은 스타일 한 줄부터 시작해 봅시다

스타일링은 거창하게 시작하지 않는 것이 좋습니다. 가장 먼저 홈 화면이나 목록 화면에서 눈에 띄는 부분 하나만 바꿔 보세요. 예를 들면 제목입니다.

export default function HomePage() {
  return (
    <main className="p-6">
      <h1 className="text-3xl font-bold text-zinc-900">작은 기록 상점</h1>
      <p className="mt-2 text-zinc-600">하루의 기록을 가볍게 남기는 공간</p>
    </main>
  )
}

여기서 눈여겨볼 점은 많지 않습니다. 오히려 적어서 좋습니다.

text-3xl은 글자를 크게 만들고, font-bold는 굵게 만들며, text-zinc-900은 진한 회색 계열 글자색을 줍니다. 문단에 붙인 mt-2는 위쪽 여백입니다.

이렇게 조금만 바꿔도 화면의 분위기가 달라집니다. 초보자에게 필요한 건 바로 이런 순간입니다. "아, 내가 화면을 바꾸고 있구나." 이 느낌이 중요합니다.

'작은 기록 상점'의 기본 화면 톤 먼저 정하기

디자인이 어려운 가장 큰 이유는 한 번에 너무 많이 결정하려고 하기 때문입니다. 색, 간격, 글자 크기, 테두리, 그림자를 모두 동시에 고민하면 금방 피곤해집니다.

그래서 이번 프로젝트는 먼저 아주 단순한 규칙부터 정하겠습니다.

• 배경은 밝고 편안하게

• 카드에는 흰색 배경과 둥근 모서리 사용

• 강조 색은 너무 튀지 않는 진한 포인트 하나만 사용

• 글자는 진한 회색과 중간 회색을 나눠 사용

이 정도만 정해도 화면이 훨씬 정돈됩니다.

예를 들어 전체 배경과 본문 영역을 이렇게 만들 수 있습니다.

export default function RootPage() {
  return (
    <main className="min-h-screen bg-zinc-50 px-4 py-8 text-zinc-900">
      <div className="mx-auto max-w-5xl">
        <h1 className="text-3xl font-bold tracking-tight">작은 기록 상점</h1>
        <p className="mt-2 text-zinc-600">기억을 카드처럼 모아 보는 작은 앱</p>
      </div>
    </main>
  )
}

여기서 새로 나온 클래스도 겁먹지 않아도 됩니다.

min-h-screen은 화면 높이만큼 최소 높이를 잡아 주는 클래스입니다. 빈 화면이 너무 짧아 보이지 않게 할 때 자주 씁니다. mx-auto max-w-5xl은 가운데 정렬된 최대 너비 컨테이너라고 이해하면 됩니다. 즉, 내용이 너무 양옆으로 퍼지지 않게 잡아 주는 역할입니다.

기록 카드부터 예쁘게 만들어 봅시다

'작은 기록 상점' 프로젝트는 기록 목록이 중요한 앱입니다. 그러니 가장 먼저 카드 컴포넌트를 잘 만들어 두는 것이 좋습니다. 카드가 좋아 보이면 앱 전체가 좋아 보이기 때문입니다. 조금 억울하지만 사실입니다.

먼저 아주 기본적인 카드부터 만들어 봅시다.

type RecordCardProps = {
  title: string
  description: string
  tag: string
}

export default function RecordCard({ title, description, tag }: RecordCardProps) {
  return (
    <article className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-md">
      <span className="inline-flex rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-800">
        {tag}
      </span>

      <h3 className="mt-4 text-lg font-semibold text-zinc-900">{title}</h3>
      <p className="mt-2 text-sm leading-6 text-zinc-600">{description}</p>

      <div className="mt-4 text-sm font-medium text-zinc-800">
        자세히 보기 →
      </div>
    </article>
  )
}

이 카드는 생각보다 많은 것을 담고 있습니다.

rounded-2xl은 크게 둥근 모서리를 만들고, border border-zinc-200은 연한 테두리를 추가합니다. shadow-sm은 가벼운 그림자입니다. 여기에 hover:-translate-y-1과 hover:shadow-md를 넣으면 마우스를 올렸을 때 카드가 살짝 떠오르는 느낌을 줍니다.

이런 작은 움직임은 화면을 훨씬 살아 있게 만듭니다. 사용자는 이유를 정확히 설명하지 못해도 "오, 좀 좋다"라고 느끼게 됩니다. 좋은 UI는 종종 이런 작은 차이에서 만들어집니다.

목록을 그리드로 배치하면 훨씬 앱처럼 보입니다

카드 하나만 예쁘면 아직 포트폴리오 초안 느낌이 납니다. 여러 카드를 보기 좋게 정리해야 비로소 앱 같은 인상을 줍니다. 이럴 때 Tailwind CSS의 grid 관련 클래스가 아주 편합니다.

import RecordCard from '@/components/record-card'

const records = [
  {
    id: '1',
    title: '오늘의 커피 기록',
    description: '비 오는 날 마신 진한 라테의 맛과 기분을 남겼어요.',
    tag: '음료',
  },
  {
    id: '2',
    title: '동네 책방 메모',
    description: '작은 책방에서 발견한 문장과 따뜻한 분위기를 적어 두었어요.',
    tag: '공간',
  },
  {
    id: '3',
    title: '산책 중 떠오른 생각',
    description: '저녁 바람을 맞으며 떠오른 아이디어를 짧게 기록했어요.',
    tag: '생각',
  },
]

export default function RecordListPage() {
  return (
    <main className="min-h-screen bg-zinc-50 px-4 py-8">
      <div className="mx-auto max-w-5xl">
        <h1 className="text-3xl font-bold text-zinc-900">기록 목록</h1>
        <p className="mt-2 text-zinc-600">작은 메모들이 차곡차곡 쌓이는 중입니다.</p>

        <section className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {records.map((record) => (
            <RecordCard
              key={record.id}
              title={record.title}
              description={record.description}
              tag={record.tag}
            />
          ))}
        </section>
      </div>
    </main>
  )
}

여기서 핵심은 grid gap-4 sm:grid-cols-2 lg:grid-cols-3입니다.

이 문장을 사람 말로 바꾸면 이렇습니다.

기본적으로는 한 줄에 하나씩 보여 주고, 화면이 조금 넓어지면 두 칸으로, 더 넓어지면 세 칸으로 보여 주세요.

이것이 Tailwind CSS의 큰 장점 중 하나입니다. 반응형 디자인이 놀랄 만큼 짧은 문장으로 들어갑니다. 반응형이란 화면 크기에 따라 레이아웃이 바뀌는 것을 말합니다. 휴대폰, 태블릿, 컴퓨터에서 보기 좋게 만드는 데 꼭 필요합니다.

자주 쓰는 클래스의 감각을 먼저 익히세요

Tailwind CSS를 잘 쓰려면 모든 클래스를 외울 필요는 없습니다. 자주 쓰는 몇 가지 덩어리만 몸에 익히면 됩니다.

처음에는 아래 흐름으로 기억해 두면 좋습니다.

• 배치: flex, grid, items-center, justify-between

• 여백: p-4, px-6, py-2, mt-4, gap-3

• 글자: text-sm, text-lg, font-medium, font-bold

• 색상: bg-white, text-zinc-900, border-zinc-200

• 모양: rounded-xl, shadow-sm, border

이 다섯 묶음만 익혀도 웬만한 화면은 만들 수 있습니다.

예를 들어 헤더는 보통 이렇게 생깁니다.

<header className="flex items-center justify-between border-b border-zinc-200 bg-white px-4 py-3">
  <div>
    <p className="text-lg font-bold text-zinc-900">작은 기록 상점</p>
  </div>
  <nav className="flex items-center gap-3 text-sm text-zinc-600">
    <a href="#">목록</a>
    <a href="#">새 기록</a>
  </nav>
</header>

여기에도 특별한 기술은 없습니다. 다만 flex, items-center, justify-between을 알고 있으면 좌우 정렬이 매우 쉬워집니다.

버튼 스타일도 한 번에 정리해 둡시다

프로젝트를 만들다 보면 버튼은 끝없이 등장합니다. 저장하기, 수정하기, 삭제하기, 더 보기, 뒤로 가기…. 그러니 버튼 모양을 일찍 정해 두면 이후 작업이 매우 편해집니다.

먼저 가장 단순한 방식부터 보겠습니다.

<button className="rounded-lg bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-zinc-700">
  기록 저장하기
</button>

이제 보조 버튼도 하나 만들어 봅시다.

<button className="rounded-lg border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100">
  취소
</button>

이렇게 쓰다 보면 비슷한 코드가 여러 곳에 반복됩니다. 이때부터는 "컴포넌트로 빼는 습관"이 필요합니다. 초보자가 성장하는 가장 빠른 길 중 하나가 바로 이 지점입니다.

type ButtonProps = {
  children: React.ReactNode
  variant?: 'primary' | 'secondary'
}

export default function Button({ children, variant = 'primary' }: ButtonProps) {
  const base = 'rounded-lg px-4 py-2 text-sm font-medium transition'
  const style =
    variant === 'primary'
      ? 'bg-zinc-900 text-white hover:bg-zinc-700'
      : 'border border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-100'

  return <button className={`${base} ${style}`}>{children}</button>
}

이제 어디서든 이렇게 쓸 수 있습니다.

<Button>저장하기</Button>
<Button variant="secondary">취소</Button>

디자인을 바꾸고 싶을 때도 훨씬 쉽습니다. 버튼 컴포넌트 하나만 수정하면 여러 화면이 같이 바뀌니까요.

클래스가 길어 보일 때는 어떻게 해야 할까요?

Tailwind CSS를 처음 보면 이런 걱정을 많이 합니다.

"클래스가 너무 길어서 더 복잡해 보이는 것 같은데요?"

그럴 수 있습니다. 실제로 한 요소에 많은 역할이 몰리면 클래스가 길어집니다. 하지만 이건 Tailwind CSS의 단점이라기보다, 그 요소가 너무 많은 일을 하고 있다는 신호일 때도 많습니다.

이럴 때는 두 가지 방법을 떠올리면 좋습니다.

첫째, 반복되는 UI를 컴포넌트로 분리합니다. 둘째, 정말 반복되는 스타일은 작은 재사용 클래스로 정리합니다.

예를 들어 app/globals.css 안에서 재사용 스타일을 조금 만들 수 있습니다.

@import "tailwindcss";

@layer components {
  .page-container {
    @apply mx-auto max-w-5xl px-4;
  }

  .section-title {
    @apply text-2xl font-bold tracking-tight text-zinc-900;
  }

  .soft-card {
    @apply rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm;
  }
}

이제 JSX에서는 이렇게 쓸 수 있습니다.

<section className="page-container py-8">
  <h2 className="section-title">최근 기록</h2>
  <div className="soft-card mt-4">내용</div>
</section>

다만 여기서 중요한 기준이 있습니다. 처음부터 너무 많은 걸 @apply로 묶으려 하지 마세요. Tailwind CSS의 장점은 빠르게 조합해 보는 데 있습니다. 반복이 보일 때만 천천히 정리해도 늦지 않습니다.

상세 페이지도 카드 감각으로 연결해 봅시다

앞 장에서 동적 라우트를 이용해 상세 페이지를 만들었다면, 이번에는 그 화면을 보기 좋게 다듬어 보겠습니다. 목록 카드와 비슷한 톤을 유지하면 앱 전체가 하나의 제품처럼 보입니다.

export default function RecordDetailPage() {
  return (
    <main className="min-h-screen bg-zinc-50 px-4 py-8">
      <div className="mx-auto max-w-3xl rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
        <div className="inline-flex rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-800">
          생각
        </div>

        <h1 className="mt-4 text-3xl font-bold tracking-tight text-zinc-900">
          산책 중 떠오른 생각
        </h1>

        <p className="mt-3 text-sm text-zinc-500">2026년 3월 23일</p>

        <div className="mt-6 space-y-4 text-[15px] leading-7 text-zinc-700">
          <p>
            걷다가 떠오른 생각은 신기하게도 앉아서 억지로 짜낼 때보다 더 선명할 때가 있다.
          </p>
          <p>
            그래서 작은 기록 상점은 거창한 글보다, 짧아도 자주 남길 수 있는 메모 공간이 되면 좋겠다.
          </p>
        </div>
      </div>
    </main>
  )
}

여기서는 space-y-4가 눈에 띕니다. 이 클래스는 안쪽 자식 요소들 사이에 세로 간격을 일정하게 넣어 줍니다. 문단 여러 개를 보기 좋게 띄울 때 아주 자주 씁니다. 초보자에게는 이런 클래스가 특히 고맙습니다. 한 번에 정리되거든요.

입력 폼도 어렵지 않게 꾸밀 수 있습니다

앞으로 우리는 사용자의 입력을 받는 화면도 만들게 됩니다. 그 전에 Tailwind CSS로 입력창이 얼마나 쉽게 보기 좋아지는지 먼저 맛보겠습니다.

export default function RecordForm() {
  return (
    <form className="space-y-5 rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
      <div>
        <label className="mb-2 block text-sm font-medium text-zinc-800">제목</label>
        <input
          type="text"
          className="w-full rounded-xl border border-zinc-300 px-4 py-3 text-sm outline-none transition focus:border-zinc-500"
          placeholder="기록 제목을 입력해 보세요"
        />
      </div>

      <div>
        <label className="mb-2 block text-sm font-medium text-zinc-800">설명</label>
        <textarea
          className="min-h-32 w-full rounded-xl border border-zinc-300 px-4 py-3 text-sm outline-none transition focus:border-zinc-500"
          placeholder="오늘 남기고 싶은 내용을 적어 보세요"
        />
      </div>

      <button className="rounded-xl bg-zinc-900 px-4 py-3 text-sm font-semibold text-white transition hover:bg-zinc-700">
        기록 저장하기
      </button>
    </form>
  )
}

폼을 예쁘게 만드는 핵심은 복잡한 장식이 아닙니다. 여백, 테두리, 모서리, 글자 크기만 잘 맞춰도 충분히 깔끔합니다. Tailwind CSS는 바로 이 기본기를 빠르게 맞추는 데 강합니다.

반응형 디자인은 "작은 화면부터" 생각하세요

초보자가 자주 하는 실수 중 하나는 큰 화면부터 만들고 나중에 휴대폰 화면에서 당황하는 것입니다. 하지만 요즘은 작은 화면으로 보는 사용자가 많습니다. 그래서 작은 화면 기준으로 먼저 만들고, 화면이 넓어질 때 확장하는 방식이 좋습니다.

Tailwind CSS는 이 흐름에 잘 맞습니다. 기본 클래스는 작은 화면용이라고 생각하고, sm:, md:, lg: 같은 접두어를 붙여 큰 화면 스타일을 추가하면 됩니다.

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {items.map((item) => (
    <div key={item.id} className="rounded-2xl bg-white p-4 shadow-sm">
      {item.title}
    </div>
  ))}
</div>

이렇게 하면 휴대폰에서는 1열, 조금 더 넓은 화면에서는 2열, 큰 화면에서는 3열이 됩니다. 따로 미디어 쿼리를 길게 쓰지 않아도 된다는 점이 정말 편합니다.

헤더도 반응형으로 바꿔 볼 수 있습니다.

<header className="flex flex-col gap-3 border-b border-zinc-200 bg-white px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
  <div>
    <h1 className="text-lg font-bold text-zinc-900">작은 기록 상점</h1>
  </div>
  <nav className="flex gap-3 text-sm text-zinc-600">
    <a href="#">홈</a>
    <a href="#">기록</a>
    <a href="#">새 글</a>
  </nav>
</header>

작은 화면에서는 세로로 쌓이고, sm: 이상부터는 가로로 정렬됩니다. 이것만으로도 훨씬 자연스러운 반응형 헤더가 됩니다.

디자인이 흔들리지 않게 하는 가장 쉬운 방법

초보 프로젝트에서 화면이 어수선해 보이는 이유는 보통 재능 부족이 아니라 기준 부족입니다. 페이지마다 글자 크기가 다르고, 간격이 제각각이고, 버튼 모양도 조금씩 다르면 화면이 금방 흔들립니다.

그래서 아래 세 가지를 먼저 통일해 두면 좋습니다.

• 카드 모양: rounded-2xl border bg-white shadow-sm

• 본문 너비: mx-auto max-w-5xl px-4

• 제목 규칙: text-2xl 또는 text-3xl + font-bold

이런 기준이 있으면 새 페이지를 만들 때도 고민이 줄어듭니다. 디자인은 자유가 전부가 아닙니다. 오히려 작은 규칙이 있을 때 더 안정적으로 예뻐집니다.

다크 모드는 나중에 붙여도 괜찮습니다

요즘 앱을 보면 다크 모드가 참 멋져 보입니다. 그래서 처음부터 넣고 싶어질 수 있습니다. 하지만 초보자라면 이 장에서는 욕심내지 않아도 좋습니다. 기본 화면을 먼저 안정적으로 만든 뒤에 붙여도 충분합니다.

다만 Tailwind CSS가 다크 모드 확장과 잘 어울린다는 점은 기억해 두면 좋습니다. 나중에 dark: 접두어를 활용하면 같은 컴포넌트에 어두운 테마용 스타일을 덧붙일 수 있습니다.

지금 단계에서는 "지금 화면이 보기 좋은가?"에만 집중합시다. 기능도 아직 많고, 우리가 갈 길은 멉니다. 멋은 도망가지 않습니다.

초보자가 자주 겪는 문제들

Tailwind CSS를 쓰다 보면 처음에 몇 가지 흔한 함정이 있습니다.

첫 번째는 스타일이 아예 적용되지 않는 경우입니다. 이때는 대개 globals.css가 제대로 불러와지지 않았거나, 프로젝트 설정이 예상과 다른 경우가 많습니다.

두 번째는 클래스를 문자열 조합으로 너무 복잡하게 만드는 경우입니다. Tailwind CSS는 보통 눈에 보이는 정적인 클래스 이름을 잘 처리합니다. 초보 단계에서는 아래처럼 너무 꼬아서 쓰기보다,

<div className={`text-${size}-600`}>안녕하세요</div>

명확하게 나누는 편이 좋습니다.

<div className={size === 'large' ? 'text-lg text-zinc-600' : 'text-sm text-zinc-600'}>
  안녕하세요
</div>

세 번째는 페이지마다 스타일 기준이 제멋대로 바뀌는 경우입니다. 오늘은 rounded-lg, 내일은 rounded-3xl, 모레는 rounded-md를 쓰기 시작하면 일관성이 무너집니다. 기준을 한 번 정하면 자주 반복해서 쓰는 것이 좋습니다.

이 장에서 꼭 가져가야 할 습관

이번 장에서 가장 중요한 것은 Tailwind 문법을 많이 외우는 것이 아닙니다. 아래 습관을 익히는 것입니다.

첫째, 화면 전체보다 하나의 작은 조각부터 꾸미기.

둘째, 반복되는 UI는 컴포넌트로 분리하기.

셋째, 간격과 글자 크기, 카드 스타일의 기준을 통일하기.

넷째, 반응형은 나중이 아니라 처음부터 작은 화면 기준으로 생각하기.

이 습관만 잘 잡아도 프로젝트가 훨씬 덜 지저분해지고, 나중에 기능을 추가할 때도 마음이 편해집니다.

우리 프로젝트에 바로 적용해 볼 작은 미션

이번 장을 읽고 나면 바로 손을 움직여 보는 것이 좋습니다. '작은 기록 상점'에 아래 내용을 직접 붙여 보세요.

• 목록 페이지 카드에 둥근 모서리와 그림자 넣기

• 태그 배지를 색상 있는 pill 모양으로 만들기

• 새 기록 작성 폼에 입력창 스타일 적용하기

• 작은 화면과 큰 화면에서 카드 개수가 다르게 보이게 만들기

이 네 가지만 적용해도 앱 분위기가 확 달라질 것입니다. 그리고 그 변화는 꽤 신납니다. 코드 몇 줄 바꿨을 뿐인데, 갑자기 "내가 진짜 웹앱을 만들고 있구나" 하는 느낌이 들거든요.

마무리

Tailwind CSS는 디자인 감각이 뛰어난 사람만을 위한 도구가 아닙니다. 오히려 디자인 때문에 지치기 쉬운 초보자에게 아주 실용적인 도구입니다. 작은 클래스를 조합하는 방식 덕분에, CSS 파일 구조에 압도되기 전에 먼저 화면을 완성하는 경험을 할 수 있습니다.

이번 장에서는 '작은 기록 상점' 프로젝트에 맞춰 배경, 카드, 버튼, 폼, 반응형 그리드까지 차근차근 꾸며 보았습니다. 이제 여러분의 화면은 이전보다 훨씬 앱다워졌을 것입니다.

다음 장에서는 여기서 한 걸음 더 나아가, Next.js에서 아주 중요한 개념인 서버와 클라이언트의 차이를 배워 보겠습니다. 화면을 예쁘게 만드는 힘을 얻었다면, 이제는 화면이 어디에서 실행되는지 이해할 차례입니다. 이 둘이 만나면, 여러분의 Next.js 앱은 한층 더 제대로 된 모습이 됩니다.