2026년 5월 1일

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

지루한 React 앱을 대담하게 바꾸고 싶으신가요. Neobrutalism를 사용해 어떤 React 프로젝트든 단 10분 만에 눈길을 사로잡는 네오브루탈리즘 디자인으로 탈바꿈시키는 방법을 배워보세요. before/after 예제와 함께하는 단계별 튜토리얼입니다.

Dov Azencot

@DovAzencot

X에 공유

솔직해져 봅시다. 여러분의 React 앱은 아마 세상의 다른 모든 React 앱과 비슷하게 생겼을 겁니다. 깔끔한가요? 물론입니다. 전문적인가요? 두말할 것 없습니다. 기억에 남나요? 전혀 아닙니다.

그런데 단 10분 만에, 그 평범해 보이는 프로젝트를 개성이 넘쳐흐르는 무언가로 바꿀 수 있다고 하면 어떨까요. 사람들이 '우와, 저건 뭐지?'라고 하게 만드는 무언가로 말입니다.

그것이 바로 네오브루탈리즘의 힘입니다. 대담하고, 거침없으며, 도무지 무시할 수 없는 디자인 스타일이죠. 그리고 Neobrutalism를 쓰면 React 프로젝트를 바꾸는 일이 어이없을 만큼 쉽습니다.

커피(아니면 에너지 드링크, 뭐든 상관없습니다)를 챙기고, 그 밋밋한 앱을 짜릿한 무언가로 바꿔 보겠습니다.

What the Heck is Neobrutalism Anyway?

본격적으로 들어가기 전에, 눈높이를 맞춰 보겠습니다. 네오브루탈리즘은 1950년대의 날것 그대로이고 콘크리트를 많이 쓴 브루탈리즘 건축에서 영감을 얻어, 그것을 현대적이고 디지털한 감각으로 재해석한 디자인 무브먼트입니다.

이런 것들을 떠올려 보세요.

모든 요소에 두른 두꺼운 검정 테두리
선명한 그림자 (그 물렁한 블러 같은 건 없음)
검정, 흰색, 네온 옐로우 같은 고대비 색상
둥근 모서리는 전혀 없음 (날카롭고 각지게, 그게 핵심)
그리드를 깨뜨리는 비대칭 레이아웃

반완벽주의입니다. 반항적입니다. 이사회 회의에 가죽 재킷을 입고 나타나는 것의 디자인 판이라고 할 수 있죠. 그리고 실제로 통합니다.

Why Neobrutalism?

네오브루탈리즘 컴포넌트를 처음부터 만들 수도 있지만, Neobrutalism가 있는데 굳이 바퀴를 다시 발명할 이유가 있을까요. Neobrutalism는 네오브루탈리즘을 위해 특별히 만들어진 React UI 라이브러리로, 다음과 같은 특징이 있습니다.

그 상징적인 브루탈한 미학을 담은, 미리 만들어진 컴포넌트
CLI를 통한 간편한 설치
Tailwind CSS로 완전히 커스터마이징 가능
Next.js, Vite, Remix 등 사실상 모든 React 구성에서 동작

게다가 무료이고 오픈소스입니다. 바로 시작해 보겠습니다.

Step 1: Set Up Your Project (2 minutes)

가장 먼저 할 일부터. 기존 React 프로젝트로 작업 중이라면 이미 한발 앞서 있는 셈입니다. 그렇지 않다면 Next.js 앱을 빠르게 하나 띄워 보겠습니다 (물론 어떤 React 프레임워크에서도 통합니다).


pnpm create next-app@latest my-brutal-app
cd my-brutal-app
npx create-next-app@latest my-brutal-app
cd my-brutal-app
yarn create next-app@latest my-brutal-app
cd my-brutal-app
bunx --bun create-next-app@latest my-brutal-app
cd my-brutal-app

프롬프트가 나오면 TypeScript와 Tailwind CSS에 yes라고 답하세요. 둘 다 필요합니다.

Vite나 Create React App을 쓰고 있어도 괜찮습니다. 셋업은 거의 동일합니다.

Step 2: Install Neobrutalism (1 minute)

이제 마법의 순서입니다. shadcn을 초기화하고 (Neobrutalism는 내부적으로 이것을 사용합니다) Neobrutalism 유틸리티를 설치해야 합니다.

다음 명령을 실행하세요.


pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

몇 가지 프롬프트가 나옵니다. 이렇게 고르면 됩니다.

Style: Default
Base color: Slate (크게 상관없습니다, 어차피 덮어쓸 거예요)
CSS variables: Yes

다음으로 Neobrutalism utils를 설치하세요.


pnpm dlx shadcn@latest add https://neobrutalism.com/r/utils.json
npx shadcn@latest add https://neobrutalism.com/r/utils.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/utils.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/utils.json

완료입니다. 이게 다예요. 이제 브루탈한 인터페이스를 만들 토대가 갖춰졌습니다.

Step 3: Add the Neobrutalist Theme (2 minutes)

여기서부터 변신이 본격적으로 시작됩니다. global.css 파일(보통 app/globals.css나 src/index.css)을 열고, 테마 변수를 Neobrutalism의 상징적인 브루탈 테마로 교체하세요.

이 CSS를 붙여넣으세요.

@theme {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: 0;
 
  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);
 
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-border: var(--border);
}
 
:root {
  --radius: 0;
  --background: #fff;
  --foreground: #000;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --border: #000;
}
 
.dark {
  --background: #1a1a1a;
  --foreground: #f5f5f5;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --border: #3a3a3a;
}

방금 무슨 일이 일어났을까요?

모든 border-radius를 없앴습니다 (이제 둥근 모서리는 없습니다)
물렁한 그림자를 선명하게 오프셋된 그림자로 바꿨습니다
대담한 검정/흰색/노랑 색 조합을 설정했습니다
다크 모드 지원을 추가했습니다 (우리는 야만인이 아니니까요)

벌써 앱의 모습이 달라지기 시작했습니다. 하지만 아직 끝난 게 아닙니다.

Step 4: Install Your First Components (2 minutes)

이제 실제 컴포넌트를 몇 개 가져와 보겠습니다. 기본이 되는 것들부터 시작합니다. Button, Card, Input입니다.

다음 명령들을 하나씩 실행하세요.


pnpm dlx shadcn@latest add https://neobrutalism.com/r/button.json
npx shadcn@latest add https://neobrutalism.com/r/card.json
npx shadcn@latest add https://neobrutalism.com/r/input.json
npx shadcn@latest add https://neobrutalism.com/r/button.json
npx shadcn@latest add https://neobrutalism.com/r/card.json
npx shadcn@latest add https://neobrutalism.com/r/input.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/button.json
npx shadcn@latest add https://neobrutalism.com/r/card.json
npx shadcn@latest add https://neobrutalism.com/r/input.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/button.json
npx shadcn@latest add https://neobrutalism.com/r/card.json
npx shadcn@latest add https://neobrutalism.com/r/input.json

각 컴포넌트가 components/neobrutalism/ 폴더에 추가되어 바로 쓸 수 있게 됩니다. CSS는 한 줄도 쓸 필요가 없습니다.

Step 5: Swap Out Your Components (2 minutes)

이제 재미있는 부분입니다. 낡고 지루한 컴포넌트를 새롭고 브루탈한 것들로 바꿔 보겠습니다.

Before:

// Your old, generic button
<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Click Me
</button>

After:

import { Button } from "@/components/neobrutalism/Button";
 
<Button>Click Me</Button>

이렇게 간단하게, 두꺼운 검정 테두리와 선명한 그림자, 그리고 그 상징적인 네오브루탈리즘 분위기를 지닌 버튼이 완성됩니다.

카드도 똑같이 해보겠습니다.

Before:

<div className="bg-white shadow-lg rounded-lg p-6">
  <h2 className="text-2xl font-bold">My Card</h2>
  <p className="text-gray-600">Some generic content here.</p>
</div>

After:

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/neobrutalism/Card";
 
<Card>
  <CardHeader>
    <CardTitle>My Card</CardTitle>
    <CardDescription>Now with 100% more attitude.</CardDescription>
  </CardHeader>
  <CardContent>
    Some bold content here.
  </CardContent>
</Card>

구조는 같지만 분위기는 완전히 다릅니다. 이제 카드는 날카로운 모서리, 대담한 테두리, 그리고 페이지에서 튀어나올 듯한 선명한 그림자를 갖췄습니다.

Step 6: Add Neobrutalist Fonts (1 minute)

네오브루탈리즘에서 타이포그래피는 어마어마하게 중요합니다. 기본 시스템 폰트로는 어림도 없습니다. Neobrutalism는 제목에 Archivo Black, 본문에 Space Grotesk를 추천합니다.

Next.js를 쓰고 있다면, app/layout.tsx에 다음을 추가하세요.

import { Archivo_Black, Space_Grotesk } from "next/font/google";
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
});
 
const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-sans",
  display: "swap",
});
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  );
}

이제 제목은 두툼하고 대담해지고, 본문은 깔끔하고 읽기 좋게 유지됩니다.

Step 7: Fine-Tune and Customize (Optional)

이 시점에서 사실상 다 끝났지만, 더 커스터마이징하고 싶다면 Neobrutalism가 그것도 쉽게 해줍니다.

다른 액센트 색을 원하시나요? CSS의 --primary 변수를 바꾸세요.

:root {
  --primary: #ff006e; /* Hot pink instead of yellow */
}

더 부드러운 그림자를 원하시나요? 그림자 변수를 조정하세요.

--shadow: 2px 2px 0 0 var(--border); /* Smaller offset */

컴포넌트를 더 추가하고 싶으신가요? neobrutalism.com/docs/components에서 라이브러리 전체를 확인하세요. input, badge, dialog, table 등 모든 것이 그 브루탈한 미학으로 스타일링되어 있습니다.

Before and After: The Transformation

자, 차이를 살펴보겠습니다. 간단한 랜딩 페이지가 네오브루탈리즘으로 바꾸기 전과 후에 어떻게 달라지는지 보시죠.

Before: Generic React App

export default function GenericLanding() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="max-w-md bg-white shadow-lg rounded-lg p-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-4">
          Welcome to My App
        </h1>
        <p className="text-gray-600 mb-6">
          This is a clean, minimal design that looks like every other React app.
        </p>
        <input
          type="email"
          placeholder="Enter your email"
          className="w-full px-4 py-2 border border-gray-300 rounded mb-4"
        />
        <button className="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
          Get Started
        </button>
      </div>
    </div>
  );
}

이게 뭐가 문제일까요?

기술적으로는 아무 문제 없습니다. 잘 작동하고 깔끔합니다. 하지만 동시에 완전히 잊히기 쉽습니다. 이걸 100명에게 보여주면, 다들 이번 주에 본 다른 수십 개의 사이트와 헷갈릴 겁니다.

After: Neobrutalist Makeover

import { Button } from "@/components/neobrutalism/Button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/neobrutalism/Card";
import { Input } from "@/components/neobrutalism/Input";
 
export default function BrutalLanding() {
  return (
    <div className="min-h-screen bg-[#ffdb33] flex items-center justify-center p-4">
      <Card className="max-w-md w-full">
        <CardHeader>
          <CardTitle className="text-4xl font-head uppercase">
            Welcome to My App
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-lg font-sans">
            This is a bold, memorable design that actually stands out.
          </p>
          <Input type="email" placeholder="Enter your email" />
          <Button className="w-full">Get Started</Button>
        </CardContent>
      </Card>
    </div>
  );
}

무엇이 바뀌었을까요?

배경: 지루한 회색에서 강렬한 노랑으로
타이포그래피: Archivo Black으로 대담한 대문자 제목 사용
테두리: 모든 요소에 두꺼운 검정 테두리
그림자: 물렁한 블러 대신 선명하게 오프셋된 그림자
모서리: border-radius 제로. 날카롭고 각짐
분위기: '기업 브로슈어'에서 '개성 있는 인디 스타트업'으로

컴포넌트 구조도, 레이아웃도 똑같지만 느낌은 완전히 다릅니다. 사람들은 이것을 기억할 겁니다.

조금 더 복잡한 예를 살펴보겠습니다. 대시보드 통계 카드입니다.

Before: Bland Dashboard

export default function GenericStats() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Total Users</p>
        <p className="text-3xl font-bold text-gray-900">1,284</p>
        <p className="text-green-500 text-sm">+12% from last month</p>
      </div>
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Revenue</p>
        <p className="text-3xl font-bold text-gray-900">$52,340</p>
        <p className="text-green-500 text-sm">+8% from last month</p>
      </div>
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Active Now</p>
        <p className="text-3xl font-bold text-gray-900">127</p>
        <p className="text-red-500 text-sm">-3% from last hour</p>
      </div>
    </div>
  );
}

After: Brutal Dashboard

import { Card, CardContent } from "@/components/neobrutalism/Card";
 
export default function BrutalStats() {
  return (
    <div className="grid grid-cols-3 gap-6">
      <Card className="bg-[#ffdb33]">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Total Users</p>
          <p className="text-5xl font-head mb-2">1,284</p>
          <p className="text-sm font-bold">▲ 12% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-white">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Revenue</p>
          <p className="text-5xl font-head mb-2">$52,340</p>
          <p className="text-sm font-bold">▲ 8% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-black text-white">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Active Now</p>
          <p className="text-5xl font-head mb-2">127</p>
          <p className="text-sm font-bold">▼ 3% from last hour</p>
        </CardContent>
      </Card>
    </div>
  );
}

무엇이 다를까요?

컬러 블로킹: 각 카드가 서로 다른 배경색을 가짐 (노랑, 흰색, 검정)
대담한 타이포그래피: 숫자가 크고 디스플레이 폰트를 사용
고대비: 검정 위의 흰 텍스트가 곧바로 시각적 위계를 만듦
대문자 레이블: 모든 것을 더 의도적이고 대담하게 느껴지게 함
색 대신 화살표: 명확함을 위해 ▲와 ▼ 기호 사용

같은 데이터인데 보여주는 방식은 완전히 다릅니다. 브루탈한 버전은 그저 짜맞춘 게 아니라, 자신감 있게 디자인된 느낌을 줍니다.

Pro Tips for Neobrutalist Design

기본을 익혔으니, 이제 이 미학을 제대로 완성하기 위한 팁을 몇 가지 소개합니다.

1. Embrace Asymmetry

그리드를 깨는 것을 두려워하지 마세요. 요소를 어긋나게 두고, 테두리를 겹치고, 여백을 불규칙하게 주세요. 완벽함은 지루합니다.

2. Use Color Intentionally

네오브루탈리즘은 고대비 색 조합을 좋아합니다. 검정과 흰색을 베이스로 삼고, 거기에 액센트 색을 하나나 둘(노랑, 핑크, 시안) 더하세요. 무지개색으로 가지 마세요. 하나의 분위기를 정하고 거기에 집중하세요.

3. Go Big on Typography

제목은 거대해야 합니다. 본문은 평범해도 되지만, H1은 시선을 사로잡아야 합니다. 강하게 주장하고 싶을 때는 두껍고 대문자인 글자를 쓰세요.

4. Add Micro-Interactions

브루탈하다는 게 정적이라는 뜻은 아닙니다. 버튼이 살짝 움직이거나 그림자가 커지는 호버 효과를 더하세요. 은은하지만 알아챌 수 있을 정도로요.

<Button className="hover:translate-x-1 hover:translate-y-1 transition-transform">
  Click Me
</Button>

5. Don't Overdo It

모든 요소에 두꺼운 테두리가 필요한 것은 아닙니다. 모든 섹션에 밝은 배경이 필요한 것도 아닙니다. 균형은 여전히 중요합니다. 다만 그 저울을 대담함 쪽으로 살짝 기울일 뿐입니다.

What to Do Next

축하합니다. 방금 10분 남짓 만에 React 프로젝트의 비주얼을 완전히 뜯어고쳤습니다. 이제 여기서 무엇을 할 수 있는지 소개합니다.

Explore More Components

Neobrutalism에는 badge, dialog, table, tabs 등 컴포넌트 라이브러리가 풍부하게 갖춰져 있습니다. 컴포넌트 문서를 확인해 무엇을 더 추가할 수 있는지 살펴보세요.

Customize Your Theme

CSS 변수를 이리저리 만져 브랜드에 맞추세요. 액센트 색을 바꾸고, 그림자 강도를 조정하고, 여백을 미세하게 손봐서 여러분의 것으로 만드세요.

Build Something Cool

이제 앱이 평범해 보이지 않으니, 마음껏 자랑하세요. Twitter에 공유하고, Reddit에 올리고, 포트폴리오에 추가하세요. 사람들은 네오브루탈리즘을 알아봅니다.

Join the Community

Neobrutalism에는 디자이너와 개발자가 프로젝트를 공유하고, 질문을 주고받고, 브루탈한 디자인에 대해 열띠게 이야기하는 활발한 Discord가 있습니다. 들어와서 인사를 건네보세요.

Final Thoughts

대부분의 React 앱이 비슷하게 생긴 이유는, 대부분의 개발자가 같은 도구에 손을 뻗기 때문입니다. Material UI, Bootstrap, 기본 설정 그대로의 shadcn 같은 것들이죠. 그것들이 나쁘다는 게 아닙니다 (다들 훌륭합니다). 다만 여러분을 돋보이게 해주지는 않습니다.

네오브루탈리즘은 개성으로 가는 지름길입니다. 대담하고, 기억에 남으며, 적절한 도구만 있으면 의외로 쉽게 구현할 수 있습니다. Neobrutalism는 처음부터 다시 만들 필요 없이 갈아탈 수 있도록 필요한 모든 것을 제공합니다.

단 10분 만에, '그저 그런 React 앱'에서 '잠깐, 저건 뭐지?'로 올라섰습니다. 그리고 솔직히 말해, 그건 대단한 일입니다.

그러니 어서, 여러분의 앱을 도무지 무시할 수 없게 만드세요.

이제 밖으로 나가 브루탈한 무언가를 만들어 보세요. 🚀

← 블로그로 돌아가기

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

What the Heck is Neobrutalism Anyway?

Why Neobrutalism?

Step 1: Set Up Your Project (2 minutes)

Step 2: Install Neobrutalism (1 minute)

Step 3: Add the Neobrutalist Theme (2 minutes)

Step 4: Install Your First Components (2 minutes)

Step 5: Swap Out Your Components (2 minutes)

Step 6: Add Neobrutalist Fonts (1 minute)

Step 7: Fine-Tune and Customize (Optional)

Before and After: The Transformation

Before: Generic React App

After: Neobrutalist Makeover

Another Example: Dashboard Widget

Before: Bland Dashboard

After: Brutal Dashboard

Pro Tips for Neobrutalist Design

What to Do Next

Final Thoughts

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

2026년 React 애니메이션 라이브러리 톱 8

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

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

What the Heck is Neobrutalism Anyway?

Why Neobrutalism?

Step 1: Set Up Your Project (2 minutes)

Step 2: Install Neobrutalism (1 minute)

Step 3: Add the Neobrutalist Theme (2 minutes)

Step 4: Install Your First Components (2 minutes)

Step 5: Swap Out Your Components (2 minutes)

Step 6: Add Neobrutalist Fonts (1 minute)

Step 7: Fine-Tune and Customize (Optional)

Before and After: The Transformation

Before: Generic React App

After: Neobrutalist Makeover

Another Example: Dashboard Widget

Before: Bland Dashboard

After: Brutal Dashboard

Pro Tips for Neobrutalist Design

What to Do Next

Final Thoughts

관련 글

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

2026년 React 애니메이션 라이브러리 톱 8

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