---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-06
---

# 네오브루탈리즘 (Neo-brutalism)

> 한 줄 정의
> 굵은 잉크 테두리, blur 0 잉크 그림자, 일부러 부딪히는 원색 — 세련됨을 거부하는 "날것의 소프트웨어" 미학. 웹 초기의 기본 HTML 감성을 현대 그리드 위에 올린 것으로, Gumroad 리브랜딩(2021)이 상업적 표준을 만들었다.

![[preview-neo-brutalism.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 크리에이터 이코노미·인디 제품 (개성이 곧 신뢰) | 금융·의료 코어 화면 (안정 톤 필수) |
| 포트폴리오·이벤트·Z세대 캠페인 | 고밀도 데이터 UI (굵은 테두리가 밀도를 잡아먹음) |
| "대기업 아님"을 어필해야 하는 브랜드 | 럭셔리·프리미엄 톤 |

## 스타일 DNA

### 팔레트 — 잉크 + 부딪히는 원색

| 토큰 | 값 | 역할 |
|------|-----|------|
| paper | `#FFFDF5` | 바탕 (미색 — 순백도 허용되는 유일한 축) |
| ink | `#0D0D0D` | 테두리·텍스트·그림자 전부 |
| pop-1 | `#FF90E8` | 면 색 1 (Gumroad 핑크 계열) |
| pop-2 | `#FFC900` | 면 색 2 |
| pop-3 | `#23A094` | 면 색 3 |

- 색끼리 조화시키려 하지 말 것 — **부딪힘이 에너지**다. 대신 잉크(테두리·텍스트·그림자)를 전부 같은 검정으로 묶어 시스템을 만든다.

### 타이포

- 디스플레이: 초굵은 산세리프 (Archivo Black, Lexend Mega — 자간 넓은 괴력형. 한글: Black Han Sans·검은고딕).
- 본문·UI: Space Grotesk 또는 시스템 산세리프. 버튼·라벨은 굵게 + 대문자.

### 형태 — 기계로 찍은 스티커

- border `2~4px solid ink` + box-shadow `Xpx Ypx 0 ink` (blur 0) — 전 요소 동일 규칙. 통일된 하드 섀도 하나가 이 스타일의 "시스템다움"이다.
- radius는 0(하드코어) 또는 8~12px(장난감) 중 **하나로 통일**.
- [[페이퍼 컷아웃]]과의 차이: 회전 없음, 그림자 색 = 잉크 검정(갈색조 아님), 질감 없음.

## 핵심 레시피 (CSS)

```css
.card {
  background: #FF90E8;
  border: 3px solid #0D0D0D;
  border-radius: 8px;
  box-shadow: 6px 6px 0 #0D0D0D;   /* blur 0 — 그림자는 잉크다 */
}
.btn {
  border: 3px solid #0D0D0D; background: #FFC900; font-weight: 800;
  box-shadow: 4px 4px 0 #0D0D0D;
  transition: transform .1s, box-shadow .1s;
}
/* 눌림 물리 — 그림자 쪽으로 이동하며 그림자가 줄어든다 */
.btn:hover  { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #0D0D0D; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #0D0D0D; }
```

- 인터랙션은 이 "눌림 물리" 하나면 충분하다 — 색 전환·글로우를 얹는 순간 날것이 아니게 된다.
- 섹션 구분도 잉크 실선(`border-top: 3px solid`)으로 — 여백 대신 선으로 나누는 것이 이 문법.

## 흔한 실수

- 그림자에 blur·투명도 → 즉시 머티리얼 카드. 네오브루탈 그림자는 잉크 100%.
- 테두리를 회색(`#ccc`)으로 → 힘 소멸. 테두리는 항상 잉크 풀 농도.
- 요소마다 radius 제각각 → 시스템 붕괴. 하나로 통일.
- 원색 면 위에 원색 텍스트 → 텍스트는 잉크로만. 색은 면으로 쓴다.
- 저대비 조합(노랑 위 흰 글자 등) → 날것이어도 본문 4.5:1은 법이다.

## 실물 레퍼런스

**정석 — 상업 적용의 교과서**
- [Gumroad](https://gumroad.com) — 네오브루탈 리브랜딩(2021)의 원점. 테두리·통짜 그림자·부딪히는 색의 문법이 전부 여기 있다.
- [Neubrutalism is taking over the web (hype4.academy)](https://hype4.academy/articles/design/neubrutalism-is-taking-over-web) — 이 트렌드를 정의한 Malewicz의 글. 원조 브루탈리즘과의 차이(현대 타이포·일러스트·애니메이션의 결합)가 정리된 기준 문서.

**갤러리**
- [Brutalist Websites](https://brutalistwebsites.com) — 원조(네오 이전) 브루탈리즘 아카이브 + 제작자 인터뷰. 이 미학이 어디서 왔는지 보여주는 원형.
- [Awwwards — Brutalism 컬렉션](https://www.awwwards.com/awwwards/collections/brutalism/) — 수상급으로 다듬어진 브루탈. "날것 + 완성도"의 공존 사례.

**도구 — 문법 관찰 겸 부트스트랩**
- [neobrutalism.dev](https://www.neobrutalism.dev) — shadcn/ui 기반 네오브루탈 컴포넌트 (MIT, 유지보수는 중단됐지만 문법 레퍼런스로 여전히 최고).
- [RetroUI](https://retroui.dev) — 같은 계열의 React 컴포넌트 대안.
- [Uiverse](https://uiverse.io) — 오픈소스 UI 요소 5,800+ 커뮤니티 라이브러리. 네오브루탈 버튼·카드가 대량 — 눌림 물리의 변주를 코드째 관찰한다.

**폰트**
- [Archivo Black](https://fonts.google.com/specimen/Archivo+Black) · [Lexend Mega](https://fonts.google.com/specimen/Lexend+Mega) · [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — 한글은 Black Han Sans·검은고딕 계열.

- 검색 키워드: `neobrutalism ui`, `neo brutalist web design`

- 로컬 데모(코드=이 문서 레시피): `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · 인접 스타일: [[나이브 디자인]] (같은 "반듯함 거부" 축 — 손그림 vs 기계 스티커), [[페이퍼 컷아웃]] (통짜 그림자 형제 — 갈색조·회전 vs 잉크·직각), [[하프톤 도트]] (원색 인쇄 축)