# Neobrutalism

> 브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다.

- 층: 스타일 (디자인 스타일)
- ID: neobrutalism
- 연도: 2022
- 무드 태그: 화려한, 친근·발랄
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/neobrutalism

## 정의

브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다.

## 역사·배경

2022년 SaaS 및 인디 해커 씬에서 폭발적으로 유행. 기존 브루탈리즘의 날카로운 느낌을 색상으로 중화한 현대적 버전.

## 주요 특징

- 굵은 검은 테두리
- 평면적 색상
- 그림자 없음
- 대담한 타이포그래피
- 의도적 거칠음

## 핵심 원칙

- 대담함
- 명확성
- 개성

## 컬러 시스템

고채도 원색 또는 형광색 + 순수 검정/흰색의 고대비 시스템. 색감이 강하게 충돌해도 됨

### 색상 역할

- primary: 배경 블록, CTA 버튼 채우기 — 형광·원색 가능, 강렬할수록 좋음
- accent: 호버·포커스 상태, 보조 강조 — primary와 충돌하는 보색도 OK
- background: 흰색 또는 밝은 단색 (주로 #fff 또는 #fafafa)
- text: 순수 검정 (#000 또는 #111) — 타협 없이 진하게
- border: 순수 검정 — 두께가 곧 스타일의 정체성

### 색상 제약

- 파스텔·그라데이션 금지 — 원색·형광색만 사용
- 투명도(opacity) 사용 금지 — 모든 색은 불투명
- 배경은 반드시 밝게 — 어두운 배경은 스타일 정체성을 약화시킴 (다크모드 예외)
- 색상 수는 2~3색으로 제한 (배경+primary+선택적 accent)

### 다크모드 전략

배경을 검정(#000)으로 전환. primary 블록 색상은 채도 그대로 유지. 텍스트를 흰색으로 반전. border는 흰색으로

### 대비 요구사항

원색+검정 조합으로 자연적으로 높은 대비 확보. 별도 검증보다 색상 선택 원칙 준수가 중요

## 타이포그래피

- 폰트 성격: 기하학적 산세리프 또는 모노스페이스. 장식 없고 투박한 느낌. 시스템 폰트도 OK
- 권장 폰트 수: 최대 1개
- 타입 스케일: 1.333 (Perfect Fourth) 이상 — 계층 대비 극대화

### 타이포그래피 제약

- 세리프·스크립트·장식 폰트 사용 금지
- letter-spacing 넓히지 않음 — 기본값 또는 약간 좁게
- heading은 font-weight 700 이상, body와 크기 차이 과감하게
- 대문자(uppercase) 제목 허용 — 강렬함 강화

## 설계 제약

### 하면 안 되는 것

- 은은한 box-shadow 사용 금지 — hard offset shadow만 허용 (예: 4px 4px 0px #000)
- border-radius 크게 사용 금지 — 0 또는 최대 4px
- 그라데이션 배경·버튼 금지
- glassmorphism·blur 효과 금지
- 세련되고 정돈된 equal-spacing 레이아웃 지양 — 의도적 비정형 허용

### 반드시 포함할 것

- 두꺼운 검정 테두리 (2px 이상, 권장 2~4px)
- hard offset box-shadow
- 고채도 컬러 블록 최소 1개

### 모션 가이드

모션 최소화. 호버 시 오프셋 이동(transform: translate(2px, 2px)) + shadow 축소로 눌리는 느낌. 부드러운 ease-in-out 금지 — 즉각 반응(linear 또는 steps).

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: +1 (여백 −2 ↔ +2 빽빽)
- 온도감: 0 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: -1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 테크 스타트업 랜딩 페이지
- 개인 포트폴리오
- 크리에이티브 SaaS 도구
- 인디 게임

## 추천 프로젝트 유형

- 테크 스타트업 랜딩
- 개인 포트폴리오
- 인디 제품
- SaaS 마케팅 페이지

## 장단점

### 장점

- 극도로 눈에 띄고 기억에 남음
- 구현 비용이 낮음 (CSS border만으로)
- 개성 강한 브랜드 표현 가능
- 밝은 색상으로 접근성 확보 쉬움

### 단점·한계

- 지나치게 사용하면 정보 위계 혼란
- 고급 브랜드 이미지와 상충
- 복잡한 데이터 UI에 부적합

## 실제 사용 제품·서비스

- Gumroad
- Linear (일부)
- 피그마 커뮤니티 인기 UI 킷

## 접근성

굵은 검은 테두리와 대비 높은 색상 조합으로 접근성 비교적 우수. 텍스트 대비는 별도 확인 필요.

## 자주 묻는 질문

### Q1. Neobrutalism이란 무엇인가요?

브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다. 2022년 SaaS 및 인디 해커 씬에서 폭발적으로 유행. 기존 브루탈리즘의 날카로운 느낌을 색상으로 중화한 현대적 버전.

### Q2. Neobrutalism의 핵심 디자인 원칙은 무엇인가요?

Neobrutalism의 핵심 원칙은 대담함, 명확성, 개성입니다.

### Q3. Neobrutalism은 어떤 프로젝트에 적합한가요?

Neobrutalism은 테크 스타트업 랜딩 페이지, 개인 포트폴리오, 크리에이티브 SaaS 도구, 인디 게임, 테크 스타트업 랜딩, 개인 포트폴리오, 인디 제품, SaaS 마케팅 페이지 등의 프로젝트에 적합합니다.

### Q4. Neobrutalism의 장단점은 무엇인가요?

장점으로는 극도로 눈에 띄고 기억에 남음, 구현 비용이 낮음 (CSS border만으로), 개성 강한 브랜드 표현 가능, 밝은 색상으로 접근성 확보 쉬움이 있습니다. 단점으로는 지나치게 사용하면 정보 위계 혼란, 고급 브랜드 이미지와 상충, 복잡한 데이터 UI에 부적합이 있습니다.

### Q5. Neobrutalism에서 색상은 어떻게 사용하나요?

고채도 원색 또는 형광색 + 순수 검정/흰색의 고대비 시스템. 색감이 강하게 충돌해도 됨 색상 역할은 primary: 배경 블록, CTA 버튼 채우기 — 형광·원색 가능, 강렬할수록 좋음, accent: 호버·포커스 상태, 보조 강조 — primary와 충돌하는 보색도 OK, background: 흰색 또는 밝은 단색 (주로 #fff 또는 #fafafa)입니다. 주의사항: 파스텔·그라데이션 금지 — 원색·형광색만 사용, 투명도(opacity) 사용 금지 — 모든 색은 불투명.

### Q6. Neobrutalism에 어울리는 폰트 스타일은 무엇인가요?

Neobrutalism에는 기하학적 산세리프 또는 모노스페이스. 장식 없고 투박한 느낌. 시스템 폰트도 OK 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프·스크립트·장식 폰트 사용 금지, letter-spacing 넓히지 않음 — 기본값 또는 약간 좁게.

### Q7. Neobrutalism 디자인에서 하면 안 되는 것은 무엇인가요?

Neobrutalism에서 피해야 할 것: 은은한 box-shadow 사용 금지 — hard offset shadow만 허용 (예: 4px 4px 0px #000), border-radius 크게 사용 금지 — 0 또는 최대 4px, 그라데이션 배경·버튼 금지, glassmorphism·blur 효과 금지, 세련되고 정돈된 equal-spacing 레이아웃 지양 — 의도적 비정형 허용.

### Q8. Neobrutalism을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Neobrutalism을 적용한 대표적인 제품·서비스로는 Gumroad, Linear (일부), 피그마 커뮤니티 인기 UI 킷 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #FDE047
- secondary: #FF6B6B
- accent: #4ECDC4
- background: #FFFFFF
- surface: #FFFFFF
- text: #000000
- textSecondary: #333333
- border: #000000

### 타이포그래피

- fontFamily: Space Grotesk, 'Noto Sans KR', sans-serif
- headingWeight: 800
- bodyWeight: 500
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 0 / md 0 / lg 0 / full 0
- shadow sm: 4px 4px 0 #000000
- shadow md: 6px 6px 0 #000000
- shadow lg: 8px 8px 0 #000000
- border: 4px solid #000000

### 컴포넌트 형태

- button: brutalist / hover offset / text uppercase
- card: brutal / hover border
- input: brutal / focus border
- badge: square / solid
- icon: tabler / stroke 2.5 / size 24px
- layout: boxed / section normal
- animation: 150ms ease-out
- specialEffects: noise

## 관련 링크

### 관련 스타일

- [Brutalism](https://ui.buildersgate.com/styles/brutalism)
- [Flat Design](https://ui.buildersgate.com/styles/flat-design)
- [Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/styles/swiss-design)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/neobrutalism)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/neobrutalism)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/neobrutalism)

### 비교

- [Neobrutalism vs Brutalism](https://ui.buildersgate.com/compare/brutalism-vs-neobrutalism)
- [Neobrutalism vs Cyberpunk](https://ui.buildersgate.com/compare/cyberpunk-vs-neobrutalism)
- [Neobrutalism vs Flat Design](https://ui.buildersgate.com/compare/flat-design-vs-neobrutalism)
- [Neobrutalism vs Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/compare/neobrutalism-vs-swiss-design)

### 쓰임새별 추천

- [제품 랜딩 페이지](https://ui.buildersgate.com/for/landing-page)

---

HTML 버전: https://ui.buildersgate.com/styles/neobrutalism

이 문서는 https://ui.buildersgate.com/styles/neobrutalism.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.