[Next.js 시리즈 #3] 디자인의 완성: Tailwind CSS로 세련된 UI 컴포넌트 만들기

안녕하세요! 지난 2부에서 웹사이트의 든든한 뼈대를 잘 잡으셨나요? 헤더와 푸터가 생기니 이제 제법 웹사이트 같은 느낌이 나기 시작했을 거예요.

오늘은 그 뼈대에 예쁜 옷을 입혀줄 시간입니다. 바로 Tailwind CSS를 활용해 세련된 UI 컴포넌트를 직접 만들어볼 건데요. “디자인은 소질이 없는데…”라고 걱정하시는 입문 개발자분들도 걱정 마세요. Tailwind CSS와 함께라면 코드 몇 줄로 프로다운 디자인을 뽑아낼 수 있습니다!

Table of Contents

1. 왜 하필 Tailwind CSS일까요?

Next.js 설치 시 권장 옵션으로 선택했던 Tailwind CSS는 ‘Utility-first’라는 철학을 가진 프레임워크입니다.

빠른 속도: CSS 파일을 따로 만들고 왔다 갔다 할 필요 없이, HTML 태그 안에서 바로 스타일을 입힐 수 있어요.
직관적인 클래스명: flex, p-4 (padding 1rem), text-center처럼 이름만 봐도 어떤 스타일인지 딱 알 수 있죠.
반응형 디자인의 끝판왕: md:flex 한 단어면 태블릿이나 PC 화면에서만 정렬되게 만드는 게 가능합니다.

2. 실전! 메인 페이지를 빛낼 ‘히어로(Hero) 섹션’ 만들기

웹사이트에 접속했을 때 가장 먼저 보이는 큰 배너를 보통 ‘히어로 섹션’이라고 부릅니다. 우리의 app/page.tsx를 열어 아래처럼 세련되게 바꿔볼까요?

[app/page.tsx 수정하기]

export default function Home() {
  return (
    <section className="py-20 px-4 text-center">
      {/* 메인 타이틀: 그라데이션으로 포인트를 줬어요 */}
      <h2 className="text-5xl font-extrabold mb-6 bg-gradient-to-r from-blue-600 to-indigo-400 bg-clip-text text-transparent">
        함께 공부하며 성장하는 <br /> 개발자 블로그에 오신 것을 환영합니다
      </h2>
      
      {/* 서브 문구: 읽기 편한 회색 톤으로 설정 */}
      <p className="text-xl text-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
        Next.js와 Tailwind CSS를 활용해 나만의 멋진 웹사이트를 만드는 여정을 기록합니다. 
        주니어 개발자들의 고민을 함께 나누고 싶어요.
      </p>

      {/* 버튼 컴포넌트: 마우스 올렸을 때(hover) 효과는 필수! */}
      <div className="flex justify-center gap-4">
        <button className="px-8 py-3 bg-blue-600 text-white rounded-full font-bold hover:bg-blue-700 transition-all shadow-lg hover:shadow-xl">
          시작하기
        </button>
        <button className="px-8 py-3 border border-gray-300 rounded-full font-bold hover:bg-gray-50 transition-all">
          더 알아보기
        </button>
      </div>
    </section>
  );
}

3. 초급 개발자를 위한 디자인 한 끗 팁

디자인이 막막할 때 아래 3가지만 기억해도 결과물이 달라집니다.

여백(Spacing)의 미학: 답답해 보인다면 py-20처럼 상하 여백을 충분히 줘보세요. 훨씬 전문적으로 보입니다.
그라데이션 활용: 텍스트나 배경에 은은한 그라데이션을 넣으면 트렌디한 느낌이 확 살아납니다.
일관된 둥글기(Rounded): 버튼이나 카드에 rounded-lg나 rounded-full을 섞지 말고 하나로 통일해 보세요. 사이트가 훨씬 정돈되어 보입니다.

4. Tailwind CSS가 처음이라면? (도움되는 도구)

외워야 할 클래스가 너무 많아 보인다면 이 도구들을 꼭 활용해 보세요.

Tailwind CSS IntelliSense: VS Code 확장 프로그램입니다. 클래스명을 입력하면 자동 완성으로 보여줘서 정말 편해요.
Tailwind CSS 공식 문서 (Cheat Sheet): 검색 기능이 정말 잘 되어 있어 저도 매일 열어두고 본답니다.

마치며

오늘 우리는 Tailwind CSS를 이용해 밋밋했던 첫 페이지를 멋진 히어로 섹션으로 탈바꿈시켰습니다. 이제 진짜 서비스 중인 웹사이트 같은 느낌이 나지 않나요?

디자인은 정답이 없습니다. 여러분이 좋아하는 색깔로 바꿔보기도 하고, 여백도 조절해 보면서 나만의 스타일을 찾아보시길 바랍니다.

다음 4부에서는 실제 데이터를 불러와 화면에 보여주는 [API 연동 및 Data Fetching]에 대해 다뤄보겠습니다. 코드로 데이터를 다루는 진정한 개발자의 영역으로 넘어가 볼까요?

오늘도 즐거운 코딩 하세요!

감사합니다.

다른 글도 함께 읽어보세요

IT / 개발 최신 글