2026년 5월 1일

Tailwind CSS v4로 네오브루탈리즘 웹사이트 만들기 (단계별 가이드)

Tailwind CSS v4로 완전한 네오브루탈리즘 웹사이트를 처음부터 만드는 방법을 배워보세요. 이 실전 튜토리얼은 복사해서 붙여넣을 수 있는 코드 예제와 함께 셋업, 설정, 그리고 모든 컴포넌트 구축까지 차근차근 안내합니다.

Dov Azencot

@DovAzencot

X에 공유

자, 개발자 여러분. 대담한 무언가를 만들어 보겠습니다.

이론도 없고, 군더더기도 없습니다. 여러분과 저, 그리고 터미널만 있으면 됩니다. 이 튜토리얼을 끝낼 즈음이면, Tailwind CSS v4로 만든, 완전히 동작하는 네오브루탈리즘 웹사이트가 손에 들어옵니다.

이번에 다룰 내용은 이렇습니다.

두꺼운 검정 테두리
선명한 드롭 섀도우
강렬한 옐로우 액센트
두툼한 타이포그래피
둥근 모서리는 전혀 없음

이것은 '여기 컴포넌트 하나 있습니다' 식의 튜토리얼이 아닙니다. 히어로 섹션, 기능, 가격, 푸터까지, 랜딩 페이지 전체를 처음부터 만들어 봅니다. 모든 코드 한 줄 한 줄을 설명하고, 모든 디자인 상의 결정에 이유를 밝힙니다.

커피를 한 잔 챙기세요. 터미널을 여세요. 브루탈하게 가보겠습니다.

What We're Building

시작하기 전에, 우리가 만들 것을 확인해 보겠습니다.

'BoldTask'라는 가상의 SaaS 제품을 위한 랜딩 페이지입니다. 다른 여느 프로젝트 관리 도구와는 다르게 생긴 프로젝트 관리 도구라는 설정입니다.

페이지에는 다음이 들어갑니다.

CTA가 있는 히어로 섹션
기능 카드
가격표
사용자 후기 섹션
푸터

모두 그 상징적인 네오브루탈리즘 미학으로 꾸밉니다. 대담하고, 고대비이며, 도무지 무시할 수 없습니다.

기술 스택:

Tailwind CSS v4 (최신이자 최고)
HTML (원한다면 React/Next.js도 가능)
Google Fonts (Archivo Black + Space Grotesk)

소요 시간: 따라 하면서 진행하면 45~60분

Step 1: Project Setup (5 minutes)

처음부터 시작해 보겠습니다. 이 튜토리얼에서는 간단한 HTML 구성을 사용하지만, React, Next.js, 그 밖의 어떤 프레임워크에도 쉽게 응용할 수 있습니다.

Create Your Project

mkdir neobrutalism-website
cd neobrutalism-website

Initialize npm and Install Tailwind v4

npm init -y
npm install tailwindcss@next @tailwindcss/vite@next

참고: 여기서는 Tailwind v4를 설치합니다 (현재 베타 버전이지만, 프로덕션에서 쓸 만큼 안정적입니다). @next 태그로 v4를 받을 수 있습니다.

Create Project Structure

mkdir src
touch src/index.html src/styles.css

폴더 구조는 다음과 같아야 합니다.

neobrutalism-website/
├── src/
│   ├── index.html
│   └── styles.css
├── package.json
└── node_modules/

Step 2: Configure Tailwind v4 (3 minutes)

Tailwind v4에는 새롭고 더 깔끔한 설정 시스템이 있습니다. tailwind.config.js 대신, 모든 것을 CSS 안에서 설정합니다.

Create Your Styles File

src/styles.css를 열고 다음을 추가하세요.

@import "tailwindcss";
 
/* Tailwind v4 Theme Configuration */
@theme {
  /* Fonts */
  --font-family-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
 
  /* Colors - Neobrutalist Palette */
  --color-brutal-yellow: #ffdb33;
  --color-brutal-pink: #ff006e;
  --color-brutal-cyan: #00f0ff;
  --color-brutal-black: #000000;
  --color-brutal-white: #ffffff;
  --color-brutal-gray: #e5e5e5;
 
  /* Border Radius - Zero for neobrutalism */
  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
 
  /* Border Widths - Thick */
  --border-width-default: 3px;
  --border-width-thick: 4px;
  --border-width-heavy: 6px;
 
  /* Shadows - Hard offset shadows (no blur) */
  --shadow-brutal-sm: 2px 2px 0 0 var(--color-brutal-black);
  --shadow-brutal: 4px 4px 0 0 var(--color-brutal-black);
  --shadow-brutal-md: 6px 6px 0 0 var(--color-brutal-black);
  --shadow-brutal-lg: 8px 8px 0 0 var(--color-brutal-black);
  --shadow-brutal-xl: 10px 10px 0 0 var(--color-brutal-black);
 
  /* Spacing adjustments */
  --spacing-brutal: 1.5rem;
}
 
/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: var(--font-family-sans);
  background-color: var(--color-brutal-white);
  color: var(--color-brutal-black);
  line-height: 1.6;
}
 
/* Custom Utility Classes */
.border-brutal {
  border: 4px solid var(--color-brutal-black);
}
 
.border-brutal-thick {
  border: 6px solid var(--color-brutal-black);
}
 
.shadow-brutal {
  box-shadow: var(--shadow-brutal);
}
 
.shadow-brutal-lg {
  box-shadow: var(--shadow-brutal-lg);
}
 
.shadow-brutal-xl {
  box-shadow: var(--shadow-brutal-xl);
}
 
/* Hover effect - shadow movement */
.btn-brutal {
  transition: all 0.15s ease;
}
 
.btn-brutal:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--color-brutal-black);
}
 
.btn-brutal:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 0 var(--color-brutal-black);
}

방금 한 작업:

커스텀 색 팔레트를 설정했습니다 (검정, 흰색, 노랑, 핑크, 시안)
모든 border-radius 값을 없앴습니다 (네오브루탈리즘 = 날카로운 모서리)
선명한 그림자 유틸리티를 만들었습니다 (블러 없는 오프셋)
그림자가 '눌리는' 듯한 느낌을 흉내 내는 커스텀 버튼 호버 효과를 추가했습니다

Step 3: HTML Structure (5 minutes)

기본 HTML 구조를 만듭니다. src/index.html을 여세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BoldTask - Project Management That Doesn't Suck</title>
 
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
 
  <!-- Tailwind CSS -->
  <link rel="stylesheet" href="/src/styles.css">
</head>
<body>
  <!-- Navigation -->
  <nav class="border-b-4 border-brutal-black bg-brutal-white">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
      <div class="text-2xl font-display">BoldTask</div>
      <div class="hidden md:flex gap-8">
        <a href="#features" class="font-bold hover:text-brutal-pink transition-colors">Features</a>
        <a href="#pricing" class="font-bold hover:text-brutal-pink transition-colors">Pricing</a>
        <a href="#about" class="font-bold hover:text-brutal-pink transition-colors">About</a>
      </div>
      <button class="bg-brutal-yellow border-brutal shadow-brutal px-6 py-2 font-bold uppercase btn-brutal">
        Sign Up
      </button>
    </div>
  </nav>
 
  <!-- We'll add more sections here -->
 
  <main>
    <!-- Hero section will go here -->
    <!-- Features section will go here -->
    <!-- Pricing section will go here -->
    <!-- Testimonial section will go here -->
  </main>
 
  <!-- Footer will go here -->
 
</body>
</html>

Set Up Dev Server

작업을 미리 볼 방법이 필요합니다. Vite를 사용해 보겠습니다.


pnpm add vite
npm install vite
yarn add vite
bun add vite

다음 스크립트를 package.json에 추가하세요.

{
  "scripts": {
    "dev": "vite src"
  }
}

이제 실행하세요.


pnpm dev
npm run dev
yarn dev
bun dev

브라우저에서 http://localhost:5173을 여세요. BoldTask 브랜딩이 들어간 기본 내비게이션 바가 보일 것입니다.

Step 4: Build the Hero Section (10 minutes)

이제 오늘의 주인공입니다. 히어로 섹션은 대담해야 합니다.

<main> 태그 바로 뒤에 다음을 추가하세요.

<!-- Hero Section -->
<section class="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
  <div class="max-w-6xl w-full">
    <div class="grid md:grid-cols-2 gap-12 items-center">
 
      <!-- Left Column - Text -->
      <div>
        <h1 class="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
          Task Management That Doesn't Bore You to Death
        </h1>
        <p class="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
          Stop using the same gray dashboard as everyone else.
          BoldTask gives you project management with personality.
        </p>
 
        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4">
          <button class="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Start Free Trial →
          </button>
          <button class="bg-brutal-white border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Watch Demo
          </button>
        </div>
 
        <!-- Social Proof -->
        <div class="mt-12 flex items-center gap-8">
          <div class="text-center">
            <div class="text-4xl font-display">10K+</div>
            <div class="text-sm font-bold">Active Users</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">4.9★</div>
            <div class="text-sm font-bold">User Rating</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">24/7</div>
            <div class="text-sm font-bold">Support</div>
          </div>
        </div>
      </div>
 
      <!-- Right Column - Visual Element -->
      <div class="relative">
        <!-- Main Card -->
        <div class="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
          <div class="bg-brutal-pink h-4 w-20 mb-4"></div>
          <div class="h-3 bg-brutal-gray mb-2"></div>
          <div class="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
          <!-- Task Items -->
          <div class="space-y-3">
            <div class="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
              <div class="w-5 h-5 border-brutal bg-brutal-black"></div>
              <div class="h-2 bg-brutal-black w-full"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-4/5"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-3/4"></div>
            </div>
          </div>
        </div>
 
        <!-- Floating accent card -->
        <div class="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                    shadow-brutal-lg p-6 w-40 text-center">
          <div class="text-3xl font-display mb-2">+47</div>
          <div class="text-xs font-bold">Tasks Done Today</div>
        </div>
      </div>
 
    </div>
  </div>
</section>

우리가 만든 것:

전체 화면 노랑 배경 (즉각적인 임팩트)
Archivo Black을 사용한 거대한 헤드라인
두꺼운 테두리와 선명한 그림자를 두른 콘텐츠 박스
호버 효과가 있는 CTA (호버하면 그림자가 움직임)
신뢰를 보여주는 지표
제품의 비주얼 목업 (추상적인 표현)
깊이를 더하는 플로팅 액센트 카드

디자인 상의 결정:

노랑 배경 = 높은 에너지, 무시할 수 없음
흰색 콘텐츠 박스 = 대비와 위계를 만듦
노랑 위의 검정 CTA = 최대한의 시인성
플로팅 시안 카드 = 비대칭을 더함 (네오브루탈리즘 원칙)

Step 5: Features Section (10 minutes)

기능 카드를 만들어 보겠습니다. 히어로 섹션 뒤에 다음을 추가하세요.

<!-- Features Section -->
<section class="bg-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Why BoldTask?
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-3xl mx-auto">
        Because your productivity tool shouldn't put you to sleep
      </p>
    </div>
 
    <!-- Feature Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Feature 1 -->
      <div class="bg-brutal-pink text-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">⚡</div>
        <h3 class="font-display text-2xl uppercase mb-4">Lightning Fast</h3>
        <p class="font-bold">
          No lag. No loading. No waiting. Your tasks appear instantly
          because we don't bloat our code with unnecessary animations.
        </p>
      </div>
 
      <!-- Feature 2 -->
      <div class="bg-brutal-cyan border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🎨</div>
        <h3 class="font-display text-2xl uppercase mb-4">Actually Unique</h3>
        <p class="font-bold">
          Tired of boring dashboards? We built something you'll actually
          want to open. Bold colors, zero BS.
        </p>
      </div>
 
      <!-- Feature 3 -->
      <div class="bg-brutal-yellow border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🔒</div>
        <h3 class="font-display text-2xl uppercase mb-4">Privacy First</h3>
        <p class="font-bold">
          Your data stays yours. No tracking. No selling. No corporate
          surveillance. Just your tasks, secured.
        </p>
      </div>
 
      <!-- Feature 4 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">📱</div>
        <h3 class="font-display text-2xl uppercase mb-4">Mobile Ready</h3>
        <p class="font-bold">
          Works on your phone, tablet, or desktop. Same bold design,
          same fast performance everywhere.
        </p>
      </div>
 
      <!-- Feature 5 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🤝</div>
        <h3 class="font-display text-2xl uppercase mb-4">Team Friendly</h3>
        <p class="font-bold">
          Invite your team. Assign tasks. Track progress. All without
          the corporate bloat of "enterprise" tools.
        </p>
      </div>
 
      <!-- Feature 6 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">💰</div>
        <h3 class="font-display text-2xl uppercase mb-4">Fair Pricing</h3>
        <p class="font-bold">
          No hidden fees. No "contact sales." Just honest pricing that
          makes sense. Pay for what you use.
        </p>
      </div>
 
    </div>
  </div>
</section>

우리가 만든 것:

반응형 그리드에 담긴 6개의 기능 카드
시각적 흥미를 위한 컬러 블로킹 (핑크, 시안, 노랑, 흰색)
이모지 아이콘 (단순하고, 장난스럽고, 브랜드에도 잘 맞음)
호버 효과 (호버하면 카드가 떠오름)
일관된 두꺼운 테두리와 선명한 그림자

디자인 패턴: 첫 세 카드는 액센트 색(핑크, 시안, 노랑)을 쓰고, 아래 세 카드는 흰색을 쓴 것을 눈치채셨나요? 이렇게 하면 시각적 위계가 생깁니다. 윗줄이 더 많은 주목을 받게 되는 것이죠.

Step 6: Pricing Section (12 minutes)

가격표는 매우 중요합니다. 놓칠 수 없게 만들어 보겠습니다.

<!-- Pricing Section -->
<section id="pricing" class="bg-brutal-black text-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Simple Pricing
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        No tricks. No hidden costs. Just pick a plan and start shipping.
      </p>
    </div>
 
    <!-- Pricing Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Free Plan -->
      <div class="bg-brutal-white text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2 text-gray-600">For Individuals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Free</h3>
          <div class="text-5xl font-display mb-2">$0</div>
          <div class="text-sm font-bold text-gray-600">Forever free</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Up to 10 projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Team collaboration</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-white border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Start Free
        </button>
      </div>
 
      <!-- Pro Plan (Highlighted) -->
      <div class="bg-brutal-yellow text-brutal-black border-brutal-thick shadow-brutal-xl p-8
                  relative transform md:-translate-y-4">
        <!-- Popular Badge -->
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-brutal-pink text-brutal-white
                    border-brutal px-6 py-2 font-bold uppercase text-sm">
          Most Popular
        </div>
 
        <div class="mb-6 mt-4">
          <div class="text-sm font-bold uppercase mb-2">For Professionals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Pro</h3>
          <div class="text-5xl font-display mb-2">$12</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Team collaboration (5 members)</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Pro →
        </button>
      </div>
 
      <!-- Team Plan -->
      <div class="bg-brutal-cyan text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2">For Teams</div>
          <h3 class="font-display text-4xl uppercase mb-4">Team</h3>
          <div class="text-5xl font-display mb-2">$29</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Everything in Pro</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited team members</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Advanced analytics</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Custom integrations</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">24/7 priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-cyan border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Team
        </button>
      </div>
 
    </div>
 
    <!-- Money Back Guarantee -->
    <div class="mt-16 text-center">
      <div class="inline-block bg-brutal-yellow text-brutal-black border-brutal-thick
                  shadow-brutal-lg px-8 py-4 font-bold text-lg">
        💰 30-Day Money Back Guarantee - No Questions Asked
      </div>
    </div>
 
  </div>
</section>

우리가 만든 것:

명확하게 차별화된 3개의 가격 등급
색으로 구분 (흰색 = 무료, 노랑 = 인기, 시안 = 프리미엄)
가운데 카드를 더 크고 높게 (추천 플랜에 주목을 끔)
Pro 플랜에 붙인 "Most Popular" 배지
명확함을 위한 기능 체크마크 (✓와 ✗)
신뢰를 위한 환불 보장

디자인 전략:

검정 배경이 색 있는 카드를 확 살려줌
가운데 카드를 살짝 높여 시각적 위계를 만듦
CTA 배치를 통일해 비교하기 쉽게 함
카드 배경색에 맞춰 CTA 색을 다르게 함

Step 7: Testimonial Section (8 minutes)

사회적 증거는 설득력이 있습니다. 사용자 후기를 추가해 보겠습니다.

<!-- Testimonial Section -->
<section class="bg-brutal-gray py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        People Love It
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        Don't take our word for it. Here's what actual users say.
      </p>
    </div>
 
    <!-- Testimonials Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 
      <!-- Testimonial 1 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Finally, a task manager that doesn't look like it was designed
          by accountants. BoldTask actually makes me WANT to check my tasks."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-pink border-brutal"></div>
          <div>
            <div class="font-bold">Sarah Chen</div>
            <div class="text-sm text-gray-600">Product Designer</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 2 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "I switched from Asana and never looked back. BoldTask is faster,
          cleaner, and way more fun to use. Plus it's actually affordable."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-cyan border-brutal"></div>
          <div>
            <div class="font-bold">Marcus Rodriguez</div>
            <div class="text-sm text-gray-600">Startup Founder</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 3 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Our whole team uses it now. The bold design actually helps us
          stay focused. Weird but true."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-yellow border-brutal"></div>
          <div>
            <div class="font-bold">Priya Kapoor</div>
            <div class="text-sm text-gray-600">Engineering Manager</div>
          </div>
        </div>
      </div>
 
    </div>
  </div>
</section>

우리가 만든 것:

스타일을 통일한 3개의 후기 카드
별점 (노랑 = 주목)
사용자 아바타 (사진 대신 추상적인 색 사각형)
신뢰성을 위한 이름과 직함

왜 추상적인 아바타일까요? 실제 사진은 기업적으로 느껴질 수 있습니다. 색 사각형은 장난스럽고 기하학적인 네오브루탈리즘 미학을 유지해 줍니다.

Step 8: Footer (5 minutes)

모든 웹사이트에는 푸터가 필요합니다. 우리 것은 대담하게 만들어 보겠습니다.

<!-- Footer -->
<footer class="bg-brutal-black text-brutal-white border-t-4 border-brutal-white py-12 px-6">
  <div class="max-w-7xl mx-auto">
 
    <div class="grid md:grid-cols-4 gap-12 mb-12">
 
      <!-- Brand -->
      <div>
        <div class="font-display text-3xl mb-4">BoldTask</div>
        <p class="font-bold text-gray-300">
          Project management that doesn't suck.
        </p>
      </div>
 
      <!-- Product Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Product</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Features</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Pricing</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Roadmap</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Changelog</a></li>
        </ul>
      </div>
 
      <!-- Company Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Company</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">About</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Blog</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Careers</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Contact</a></li>
        </ul>
      </div>
 
      <!-- Newsletter -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Stay Updated</h4>
        <p class="font-bold mb-4 text-gray-300">Get updates about new features.</p>
        <div class="flex gap-2">
          <input
            type="email"
            placeholder="Your email"
            class="flex-1 bg-brutal-white text-brutal-black border-brutal px-4 py-2
                   font-bold placeholder:text-gray-400"
          />
          <button class="bg-brutal-yellow text-brutal-black border-brutal shadow-brutal
                         px-4 py-2 font-bold uppercase btn-brutal">
            →
          </button>
        </div>
      </div>
 
    </div>
 
    <!-- Bottom Bar -->
    <div class="border-t-2 border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
      <div class="font-bold text-gray-400">
        © 2026 BoldTask. All rights reserved.
      </div>
      <div class="flex gap-6">
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Privacy</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Terms</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Twitter</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">GitHub</a>
      </div>
    </div>
 
  </div>
</footer>

우리가 만든 것:

4열 푸터 레이아웃
브랜드, 내비게이션, 뉴스레터 구독
호버 효과 (링크가 노랑으로 변함)
브루탈한 스타일의 이메일 입력란
하단 저작권 바

Step 9: Adding Polish and Interactions (5 minutes)

사이트를 한층 세련되게 느껴지도록 마지막 손질을 몇 가지 더해 보겠습니다.

Smooth Scrolling

다음을 src/styles.css에 추가하세요.

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}
 
/* Custom scrollbar (optional but on-brand) */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background: var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb {
  background: var(--color-brutal-black);
  border: 2px solid var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brutal-yellow);
}

이 JavaScript를 닫는 </body> 태그 앞에 추가하세요.

<script>
  // Mobile menu toggle
  const mobileMenuButton = document.createElement('button');
  mobileMenuButton.className = 'md:hidden border-brutal bg-brutal-yellow px-4 py-2 font-bold';
  mobileMenuButton.textContent = 'MENU';
 
  const nav = document.querySelector('nav > div');
  const navLinks = nav.querySelector('.hidden');
 
  // This is a simple example - you'd want to make this more robust
  mobileMenuButton.addEventListener('click', () => {
    navLinks.classList.toggle('hidden');
    navLinks.classList.toggle('flex');
  });
 
  // Add button to nav (you'd do this more elegantly in production)
</script>

Performance Optimization

다음 메타 태그를 <head>에 추가하세요.

<!-- Preload critical fonts -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap">
 
<!-- Meta tags for SEO and social -->
<meta name="description" content="BoldTask - Project management that doesn't suck. Bold design, fast performance, fair pricing.">
<meta property="og:title" content="BoldTask - Project Management That Doesn't Suck">
<meta property="og:description" content="Stop using boring task managers. BoldTask gives you project management with personality.">
<meta property="og:image" content="/og-image.png">
<meta name="twitter:card" content="summary_large_image">

이제 웹사이트를 테스트해 보겠습니다.

Responsive Testing

DevTools(F12)를 열고 다음 브레이크포인트를 테스트하세요.

모바일 (375px)
태블릿 (768px)
데스크톱 (1280px)

다음을 확인하세요.

모든 크기에서 텍스트가 읽힘
모바일에서 버튼을 탭할 수 있음 (높이 최소 44px)
그리드 레이아웃이 제대로 접힘
작은 화면에서 그림자가 잘리지 않음

Accessibility Check

이 체크리스트를 점검하세요.

모든 인터랙티브 요소를 키보드로 조작할 수 있음 (Tab으로 페이지 이동)
색 대비가 WCAG AA 기준을 충족함 (흰색 위 검정 ✓, 흰색 위 노랑 ✓)
이미지에 대체 텍스트가 있음 (여기서는 div를 썼지만, 이미지를 추가한다면 대체 텍스트를 넣으세요)
폼 입력란에 레이블이 있음
포커스 상태가 보임

Performance Check

Chrome DevTools에서 Lighthouse를 열고 감사를 실행하세요. 다음과 같은 결과가 나올 것입니다.

Performance: 90+ (최소한의 CSS, 무거운 프레임워크 없음)
Accessibility: 90+ (고대비, 시맨틱 HTML)
Best Practices: 90+
SEO: 90+

점수가 낮다면, 흔한 해결책은 다음과 같습니다.

이미지에 width와 height를 추가하기
프로덕션에서 CSS를 minify하기
캐싱 헤더를 활성화하기
이미지를 압축하기

Bonus: Converting to React/Next.js

이것을 React 앱에서 사용하고 싶으신가요? 히어로 섹션을 변환하는 방법입니다.

// components/Hero.tsx
export default function Hero() {
  return (
    <section className="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
      <div className="max-w-6xl w-full">
        <div className="grid md:grid-cols-2 gap-12 items-center">
 
          {/* Left Column */}
          <div>
            <h1 className="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
              Task Management That Doesn't Bore You to Death
            </h1>
            <p className="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
              Stop using the same gray dashboard as everyone else.
              BoldTask gives you project management with personality.
            </p>
 
            <div className="flex flex-col sm:flex-row gap-4">
              <button className="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Start Free Trial →
              </button>
              <button className="bg-brutal-white border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Watch Demo
              </button>
            </div>
 
            {/* Social Proof */}
            <div className="mt-12 flex items-center gap-8">
              <div className="text-center">
                <div className="text-4xl font-display">10K+</div>
                <div className="text-sm font-bold">Active Users</div>
              </div>
              <div className="h-12 w-1 bg-brutal-black"></div>
              <div className="text-center">
                <div className="text-4xl font-display">4.9★</div>
                <div className="text-sm font-bold">User Rating</div>
              </div>
            </div>
          </div>
 
          {/* Right Column - Visual */}
          <div className="relative">
            <div className="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
              {/* Task mockup */}
              <div className="bg-brutal-pink h-4 w-20 mb-4"></div>
              <div className="h-3 bg-brutal-gray mb-2"></div>
              <div className="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
              <div className="space-y-3">
                <div className="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
                  <div className="w-5 h-5 border-brutal bg-brutal-black"></div>
                  <div className="h-2 bg-brutal-black w-full"></div>
                </div>
                <div className="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
                  <div className="w-5 h-5 border-brutal"></div>
                  <div className="h-2 bg-brutal-gray w-4/5"></div>
                </div>
              </div>
            </div>
 
            <div className="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                          shadow-brutal-lg p-6 w-40 text-center">
              <div className="text-3xl font-display mb-2">+47</div>
              <div className="text-xs font-bold">Tasks Done Today</div>
            </div>
          </div>
 
        </div>
      </div>
    </section>
  );
}

그런 다음 tailwind.config.ts에 다음과 같이 작성합니다.

import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-space-grotesk)', 'sans-serif'],
        display: ['var(--font-archivo-black)', 'sans-serif'],
      },
      colors: {
        'brutal-yellow': '#ffdb33',
        'brutal-pink': '#ff006e',
        'brutal-cyan': '#00f0ff',
        'brutal-black': '#000000',
        'brutal-white': '#ffffff',
        'brutal-gray': '#e5e5e5',
      },
      boxShadow: {
        'brutal-sm': '2px 2px 0 0 #000',
        'brutal': '4px 4px 0 0 #000',
        'brutal-lg': '6px 6px 0 0 #000',
        'brutal-xl': '8px 8px 0 0 #000',
      },
      borderWidth: {
        'brutal': '4px',
        'brutal-thick': '6px',
      },
    },
  },
  plugins: [],
}
 
export default config

Common Mistakes and How to Avoid Them

수십 개의 네오브루탈리즘 사이트를 만들어 본 경험에서, 가장 자주 보이는 함정들을 소개합니다.

1. Inconsistent Border Widths

실수: 어떤 요소에는 2px 테두리, 다른 요소에는 5px, 또 어딘가에는 3px, 이런 식으로 제각각 쓰는 것.

해결책: 테두리 굵기를 2~3가지로 정하고 (예: 표준 3px, 강조 4px, 주요 요소 6px) 전체에서 일관되게 쓰세요.

2. Forgetting Mobile Shadow Offsets

실수: 모바일에서 10px 그림자 오프셋이 잘리거나 가로 스크롤을 만드는 것.

해결책: 반응형 그림자 유틸리티를 쓰세요.

.card {
  box-shadow: 4px 4px 0 0 #000;
}
 
@media (min-width: 768px) {
  .card {
    box-shadow: 8px 8px 0 0 #000;
  }
}

3. Too Many Accent Colors

실수: '많을수록 더 브루탈하다'는 생각으로 5색 이상을 쓰는 것.

해결책: 검정 + 흰색 + 액센트 색 많아야 2~3개로 유지하세요. 우리 팔레트는 노랑, 핑크, 시안을 쓰는데, 이것도 이미 아슬아슬합니다.

4. Neglecting Accessibility

실수: 흰 배경에 노랑 텍스트(읽을 수 없음), 포커스 상태 없음, 부족한 대비.

해결책: 항상 대비를 테스트하세요. 노랑/흰색 배경에는 검정 텍스트를, 검정/어두운 배경에는 흰색 텍스트를 쓰세요.

5. Soft Shadows Sneaking In

실수: 블러가 들어간 Tailwind의 기본 그림자(shadow-lg)를 무심코 쓰는 것.

해결책: 커스텀 그림자 유틸리티를 만들고, 필요하면 기본 그림자를 비활성화하세요.

Next Steps and Resources

축하합니다. 방금 완전한 네오브루탈리즘 웹사이트를 처음부터 만들어냈습니다.

What to Do Next

1. Deploy It

# Build for production
npm run build
 
# Deploy to Vercel, Netlify, or wherever

2. Add Functionality

뉴스레터 폼을 서비스(ConvertKit, Mailchimp)에 연결하기
가격 CTA를 Stripe로 구현하기
애널리틱스(Plausible, Fathom)를 추가하기

3. Expand the Design System

컴포넌트를 더 만들기 (모달, 드롭다운, 툴팁)
페이지를 추가로 만들기 (about, blog, contact)
다크 모드를 추가하기 (네오브루탈리즘은 다크 모드에서도 멋지게 어울립니다)

4. Optimize Further

CSS와 HTML을 minify하기
이미지 최적화를 추가하기
캐싱 전략을 구현하기
더 나은 성능을 위해 정적 사이트 생성기를 고려하기

Helpful Resources

Design Inspiration:

Brutalist Websites - 엄선된 컬렉션
Gumroad - 제대로 된 네오브루탈리즘
Feastables - 장난기 있는 네오브루탈리즘 이커머스

Tools:

Neobrutalism - 미리 만들어진 네오브루탈리즘 컴포넌트
Tailwind CSS v4 Docs - 공식 문서
Google Fonts - 무료 폰트 (Archivo Black, Space Grotesk)

Color Palette Generators:

Coolors - 색 조합 생성
Adobe Color - 색상환과 팔레트 도구

Final Thoughts

방금 네오브루탈리즘 웹사이트를 한 시간도 안 되어 처음부터 배포까지 만들어냈습니다. 정말이지 대단한 일입니다.

핵심 요약:

네오브루탈리즘 = 두꺼운 테두리 + 선명한 그림자 + 대담한 색 + border-radius 제로
Tailwind v4의 @theme 디렉티브가 커스터마이징을 더 깔끔하게 해줌
일관성이 핵심 (테두리 굵기, 그림자, 색)
접근성은 여전히 중요 (고대비가 도움이 됨)
탄탄한 디자인 시스템부터 시작한 뒤 컴포넌트를 만들기

이 사이트는 단순한 데모가 아닙니다. 실제 프로젝트에 응용할 수 있는 템플릿입니다. 색을 바꾸고, 폰트를 교체하고, 그림자를 조정해서 여러분의 것으로 만드세요.

네오브루탈리즘의 가장 좋은 점은 무엇일까요. 너그럽다는 것입니다. 불완전함은 이 미학의 일부입니다. 살짝 어긋난 테두리나 중심에서 벗어난 요소요? 그건 버그가 아니라 개성입니다.

이제 남들의 포트폴리오나 SaaS, 랜딩 페이지와는 다른, 대담한 무언가를 만들러 가보세요.

더 빠르게 진행할 수 있도록 미리 만들어진 컴포넌트를 원한다면, Neobrutalism를 살펴보세요. 바로 이 미학을 복사 붙여넣기 컴포넌트로 담아낸 것입니다.

즐겁게 만드세요. 🚀

궁금한 점이 있으신가요? 댓글을 남기거나 Twitter로 연락 주세요. 사람들이 이 스타일로 무엇을 만드는지 보는 게 정말 좋습니다.

전체 코드가 필요하신가요? 완성된 HTML 파일은 GitHub Gist로 제공됩니다 (링크는 댓글에).

도움이 되셨나요? 지루한 디자인의 덫에서 벗어나야 할 개발자에게 공유해 주세요.

← 블로그로 돌아가기

Tailwind CSS v4로 네오브루탈리즘 웹사이트 만들기 (단계별 가이드)

What We're Building

Step 1: Project Setup (5 minutes)

Create Your Project

Initialize npm and Install Tailwind v4

Create Project Structure

Step 2: Configure Tailwind v4 (3 minutes)

Create Your Styles File

Step 3: HTML Structure (5 minutes)

Set Up Dev Server

Step 4: Build the Hero Section (10 minutes)

Step 5: Features Section (10 minutes)

Step 6: Pricing Section (12 minutes)

Step 7: Testimonial Section (8 minutes)

Step 8: Footer (5 minutes)

Step 9: Adding Polish and Interactions (5 minutes)

Smooth Scrolling

Mobile Menu Toggle

Performance Optimization

Responsive Testing

Accessibility Check

Performance Check

Bonus: Converting to React/Next.js

Common Mistakes and How to Avoid Them

1. Inconsistent Border Widths

2. Forgetting Mobile Shadow Offsets

3. Too Many Accent Colors

4. Neglecting Accessibility

5. Soft Shadows Sneaking In

Next Steps and Resources

What to Do Next

Helpful Resources

Final Thoughts

hex 코드까지 담은 네오브루탈리즘 컬러 팔레트 20선 (복사 & 붙여넣기 가능)

어떤 React 프로젝트든 10분 만에 네오브루탈리즘으로 바꾸는 방법

네오브루탈리즘 vs 미니멀리즘: 언제 쓰고 언제 피해야 하는가

Tailwind CSS v4로 네오브루탈리즘 웹사이트 만들기 (단계별 가이드)

What We're Building

Step 1: Project Setup (5 minutes)

Create Your Project

Initialize npm and Install Tailwind v4

Create Project Structure

Step 2: Configure Tailwind v4 (3 minutes)

Create Your Styles File

Step 3: HTML Structure (5 minutes)

Set Up Dev Server

Step 4: Build the Hero Section (10 minutes)

Step 5: Features Section (10 minutes)

Step 6: Pricing Section (12 minutes)

Step 7: Testimonial Section (8 minutes)

Step 8: Footer (5 minutes)

Step 9: Adding Polish and Interactions (5 minutes)

Smooth Scrolling

Mobile Menu Toggle

Performance Optimization

Step 10: Testing and Refinements (5 minutes)

Responsive Testing

Accessibility Check

Performance Check

Bonus: Converting to React/Next.js

Common Mistakes and How to Avoid Them

1. Inconsistent Border Widths

2. Forgetting Mobile Shadow Offsets

3. Too Many Accent Colors

4. Neglecting Accessibility

5. Soft Shadows Sneaking In

Next Steps and Resources

What to Do Next

Helpful Resources

Final Thoughts

관련 글

hex 코드까지 담은 네오브루탈리즘 컬러 팔레트 20선 (복사 & 붙여넣기 가능)

어떤 React 프로젝트든 10분 만에 네오브루탈리즘으로 바꾸는 방법

네오브루탈리즘 vs 미니멀리즘: 언제 쓰고 언제 피해야 하는가