소개

네오브루탈리즘이란 무엇인가?#

네오브루탈리즘은 2010년대 후반, 평면적이고 미니멀한 디자인의 획일성에 대한 반발로 등장한 웹 디자인 스타일입니다. 이 스타일은 브루탈리즘 건축의 거친 매력 — 솔직한 소재와 드러난 구조 — 을 대담한 색상과 유쾌한 기하학적 형태를 통해 화면으로 재현합니다.

다음 다섯 가지 특징으로 이를 알아볼 수 있습니다:

• 두꺼운 테두리 — 모든 요소에 테두리가 그려지며, 대개 검은색 실선으로 표시됩니다.
• 선명한 그림자 — 블러 효과가 없는 평면적인 오프셋으로, 요소들이 마치 페이지 위에 물리적으로 겹쳐진 것처럼 보입니다.
• 강렬한 색상 — 대비가 높고 채도가 높은 단색 채우기. 그라데이션이나 글래스모피즘은 사용하지 않습니다.
• 각진 모서리와 굵은 서체 — 공간을 아까워하기보다는 당당하게 차지하는 기하학적 형태.
• 촉각적 상호작용 — 버튼을 클릭하면 버튼이 그림자 속으로 눈에 띄게 눌려 들어갑니다.

떠다니는 것도, 흐릿해지는 것도, 숨겨지는 것도 없다. Gumroad의 2021년 리디자인을 통해 이 스타일이 주류로 자리 잡았으며, 오늘날 이 스타일은 ‘기본 설정’이 아닌 ‘의도된’ 느낌을 주고자 하는 제품들에게 가장 먼저 선택되는 디자인이 되었다.

Neobrutalism.com란 무엇인가요?#

Neobrutalism.com React에 스타일을 적용하는 디자인 시스템으로, shadcn/ui과 동일한 레지스트리 모델을 기반으로 구축되었습니다. 패키지를 설치할 필요는 없습니다. shadcn CLI를 실행하면 각 컴포넌트의 소스 코드가 프로젝트에 복사되며, 그 시점부터는 해당 코드가 사용자의 소유가 됩니다.

내용:

• 구성 요소 — 하나의 디자인 가이드라인에 맞춰 스타일링된 전체 세트로, 테두리, 그림자, 글꼴이 서로 조화를 이룹니다.
• 블록 — 미리 만들어진 구성 요소: 영웅, 가격표, 인증 화면, 대시보드.
• 템플릿 — 완성된 웹사이트 및 관리자 패널.
• 테마 — 공유 가능한 사전 설정이 포함된 테마 빌더.
• Figma kit — 디자이너를 위한 동일한 시스템.
• MCP 서버 — Claude Code 및 Cursor와 같은 AI 편집기를 사용하면 이름으로 컴포넌트를 추가할 수 있습니다.

두 가지 기본 요소, 하나의 스타일#

모든 구성 요소는 두 가지 버전으로 제공됩니다. 설치 시 구성 요소별로 선택하시면 됩니다. 설치 URL에 따라 어떤 버전이 적용될지 결정됩니다:

• Radix UI — 대부분의 shadcn 프로젝트가 이미 이 기본 요소들을 기반으로 실행되고 있습니다.
• Base UI — Radix 및 MUI 팀이 개발한 최신 기본 요소들.

동일한 디자인, 동일한 내보내기 기능, 동일한 API. 접근성(포커스, 키보드, 스크린 리더 등)은 그 기반이 되는 기본 요소에서 비롯됩니다.

한 번 해보세요#

단 한 번의 명령, 별도의 설정 없이:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json
복사

그런 다음 ‘설치’로 이동하여 글꼴과 테마 토큰을 확인하거나, 먼저 구성 요소를 둘러보세요.