# Neobrutalism — 디자인 스타일 가이드

## 기본 정보
- **ID**: neobrutalism
- **카테고리**: design-style
- **연도**: 2022

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

## 역사·배경
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).

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

## 추천 프로젝트 유형
- 테크 스타트업 랜딩
- 개인 포트폴리오
- 인디 제품
- SaaS 마케팅 페이지

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

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

## 실제 사용 제품·서비스
- Gumroad
- Linear (일부)
- 피그마 커뮤니티 인기 UI 킷

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

## 관련 스타일
- [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)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: #FDE047
- textColor: #000000
- accentColor: #FF6B6B

### 타이포그래피
- fontFamily: Space Grotesk, 'Noto Sans KR', sans-serif
- headingWeight: 800
- bodyWeight: 500
- letterSpacing: 0em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 4px 4px 0 #000000
- md: 6px 6px 0 #000000
- lg: 8px 8px 0 #000000
- xl: 12px 12px 0 #000000

### Border Radius
- none: 0
- sm: 0
- md: 0
- lg: 0
- full: 0

### 테두리 (Borders)
- width: 4px
- style: solid
- color: #000000

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.15s ease-out

### 애니메이션
- duration: 150ms
- easing: ease-out

### 컴포넌트 토큰
- 버튼: shape=brutalist / hoverEffect=offset / textTransform=uppercase
- 카드: style=brutal / hoverEffect=border
- 인풋: style=brutal / focusEffect=border
- 배지: shape=square / style=solid
- 아이콘: package=tabler / strokeWidth=2.5 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: true

## 자주 묻는 질문 (FAQ)

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

### Q: Neobrutalism의 핵심 디자인 원칙은 무엇인가요?
A: Neobrutalism의 핵심 원칙은 대담함, 명확성, 개성입니다.

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

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

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

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

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

### Q: Neobrutalism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Neobrutalism을 적용한 대표적인 제품·서비스로는 Gumroad, Linear (일부), 피그마 커뮤니티 인기 UI 킷 등이 있습니다.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=neobrutalism
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=neobrutalism&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Neobrutalism

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

연도

2022

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

#FDE047

핵심 원칙

1

대담함

2

명확성

3

개성

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

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

실제 사용 예시

GumroadLinear (일부)피그마 커뮤니티 인기 UI 킷

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Bold Border Buttons

굵은 검은 테두리와 밝은 색상의 버튼

Brutalist Cards

대담한 테두리와 평면 색상의 카드

Bold Design

그림자 없이 굵은 테두리만으로 강렬한 인상을 줍니다.

No Shadow

완전히 평면적인 디자인으로 모던한 느낌을 전달합니다.

Brutalist Inputs

강렬한 테두리의 입력 필드

Brutalist Tags

굵은 테두리의 태그와 배지

NewHotSaleTrending

Brutalist Alert

강렬한 경고 메시지 박스

⚠️

Warning!

This is a brutalist style alert box with bold borders and no shadows.

Neobrutalist Typography

굵은 테두리와 대담한 색상이 타이포그래피에도 적용된 스타일

Display (48px)

NEOBRUTALISM

Heading (32px)

대담하고 명확하게

Subheading (20px)

굵은 테두리 · 평면 색상 · 개성

Body (16px)

Neobrutalism은 2022년 SaaS 커뮤니티에서 폭발적으로 유행한 디자인 스타일로, 굵은 검은 테두리와 밝은 평면 색상이 특징입니다.

태그라벨배지

자주 묻는 질문

Neobrutalism이란 무엇인가요?
브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다. 2022년 SaaS 및 인디 해커 씬에서 폭발적으로 유행. 기존 브루탈리즘의 날카로운 느낌을 색상으로 중화한 현대적 버전.
Neobrutalism의 핵심 디자인 원칙은 무엇인가요?
Neobrutalism의 핵심 원칙은 대담함, 명확성, 개성입니다.
Neobrutalism은 어떤 프로젝트에 적합한가요?
Neobrutalism은 테크 스타트업 랜딩 페이지, 개인 포트폴리오, 크리에이티브 SaaS 도구, 인디 게임, 테크 스타트업 랜딩, 개인 포트폴리오, 인디 제품, SaaS 마케팅 페이지 등의 프로젝트에 적합합니다.
Neobrutalism의 장단점은 무엇인가요?
장점으로는 극도로 눈에 띄고 기억에 남음, 구현 비용이 낮음 (CSS border만으로), 개성 강한 브랜드 표현 가능, 밝은 색상으로 접근성 확보 쉬움이 있습니다. 단점으로는 지나치게 사용하면 정보 위계 혼란, 고급 브랜드 이미지와 상충, 복잡한 데이터 UI에 부적합이 있습니다.
Neobrutalism에서 색상은 어떻게 사용하나요?
고채도 원색 또는 형광색 + 순수 검정/흰색의 고대비 시스템. 색감이 강하게 충돌해도 됨 색상 역할은 primary: 배경 블록, CTA 버튼 채우기 — 형광·원색 가능, 강렬할수록 좋음, accent: 호버·포커스 상태, 보조 강조 — primary와 충돌하는 보색도 OK, background: 흰색 또는 밝은 단색 (주로 #fff 또는 #fafafa)입니다. 주의사항: 파스텔·그라데이션 금지 — 원색·형광색만 사용, 투명도(opacity) 사용 금지 — 모든 색은 불투명.
Neobrutalism에 어울리는 폰트 스타일은 무엇인가요?
Neobrutalism에는 기하학적 산세리프 또는 모노스페이스. 장식 없고 투박한 느낌. 시스템 폰트도 OK 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프·스크립트·장식 폰트 사용 금지, letter-spacing 넓히지 않음 — 기본값 또는 약간 좁게.
Neobrutalism 디자인에서 하면 안 되는 것은 무엇인가요?
Neobrutalism에서 피해야 할 것: 은은한 box-shadow 사용 금지 — hard offset shadow만 허용 (예: 4px 4px 0px #000), border-radius 크게 사용 금지 — 0 또는 최대 4px, 그라데이션 배경·버튼 금지, glassmorphism·blur 효과 금지, 세련되고 정돈된 equal-spacing 레이아웃 지양 — 의도적 비정형 허용.
Neobrutalism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Neobrutalism을 적용한 대표적인 제품·서비스로는 Gumroad, Linear (일부), 피그마 커뮤니티 인기 UI 킷 등이 있습니다.

관련 스타일 탐색

Brutalism

거칠고 날것 그대로의 디자인으로, 전통적인 미학을 거부합니다.

Flat Design

2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다.

Swiss Design (국제 타이포그래피 양식)

스위스에서 발전한 그래픽 디자인 스타일로, 명료성과 객관성을 강조합니다.