# Brutalism

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

- 층: 스타일 (디자인 스타일)
- ID: brutalism
- 연도: 2014
- 무드 태그: 미니멀, 레트로
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/brutalism

## 정의

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

## 역사·배경

건축의 브루탈리즘에서 영감. 2010년대 중반 웹 디자인 트렌드로 재조명되며 고급 패션·아트 씬에서 의도적으로 활용.

## 주요 특징

- 비대칭 레이아웃
- 단순한 HTML 요소
- 대담한 타이포그래피
- 제한된 색상
- 의도적인 거칠음

## 핵심 원칙

- 정직함
- 기능성
- 반골 정신

## 컬러 시스템

흑백 또는 극단적으로 제한된 색상. 색보다 구조와 타이포가 지배하는 시스템

### 색상 역할

- background: 흰색 또는 매우 밝은 회색 — 웹 원형
- text: 순수 검정 (#000) — 타협 없이
- accent: 선택적, 단 하나의 강렬한 색 (있어도 되고 없어도 됨)

### 색상 제약

- 색상으로 계층 구분 금지 — 크기·위치·굵기로만 구분
- 색상 수 최대 2종 (흑+백, 또는 흑+강조 1색)
- 그라데이션·opacity 사용 금지

### 다크모드 전략

배경 검정, 텍스트 흰색으로 단순 반전. 강조색은 그대로 유지

### 대비 요구사항

흑백 대비로 자연적으로 최고 대비 확보

## 타이포그래피

- 폰트 성격: Arial, Helvetica, Times New Roman 등 시스템 기본 폰트 또는 의도적으로 못생긴 느낌의 폰트. 미적 선택보다 비선택이 미학
- 권장 폰트 수: 최대 1개
- 타입 스케일: 정해진 스케일 없음 — 의도적 비례 파괴 허용

### 타이포그래피 제약

- 폰트 자체는 거의 기본 시스템 폰트 — 꾸미지 않음
- 크기 대비 극단적 — h1은 매우 크고 body는 매우 작아도 됨
- alignment 좌정렬 기본, 비대칭 레이아웃 허용

## 설계 제약

### 하면 안 되는 것

- 그림자·둥근 모서리 사용 금지
- 장식 아이콘 사용 금지 — HTML 텍스트로 대체 가능
- 균형 잡힌 레이아웃 지양 — 비대칭이 원칙

### 반드시 포함할 것

- HTML 기본 요소의 날것 느낌
- 일관성보다 날것의 정직함
- underline 링크, 기본 button 등 웹 원형 요소

### 모션 가이드

모션 없음이 원칙. 있다면 CSS transition 최소한만 (200ms 이하 linear).

## 무드 프로파일

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

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

## 사용 사례

- 아트·크리에이티브 포트폴리오
- 독립 음악·패션 브랜드
- 아방가르드 스타트업
- 실험적 웹사이트

## 추천 프로젝트 유형

- 아트·크리에이티브 포트폴리오
- 반문화 브랜드
- 패션·음악 브랜드
- 실험적 프로젝트

## 장단점

### 장점

- 극도로 독특해서 기억에 남음
- 개발 비용이 낮음 (단순 HTML)
- 강렬한 브랜드 개성 표현 가능

### 단점·한계

- 일반 사용자에게 UX가 불친절
- 비즈니스·기업 서비스에 부적합
- 오남용 시 단순히 못 만든 사이트처럼 보임

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

- Bloomberg Businessweek 웹사이트
- Balenciaga
- craigslist (비의도적)

## 접근성

텍스트 가독성 극단적으로 나쁜 경우 많음. 의도적 도발과 접근성 확보 사이 균형 필요.

## 자주 묻는 질문

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

거칠고 날것 그대로의 디자인으로, 전통적인 미학을 거부합니다. 건축의 브루탈리즘에서 영감. 2010년대 중반 웹 디자인 트렌드로 재조명되며 고급 패션·아트 씬에서 의도적으로 활용.

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

Brutalism의 핵심 원칙은 정직함, 기능성, 반골 정신입니다.

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

Brutalism은 아트·크리에이티브 포트폴리오, 독립 음악·패션 브랜드, 아방가르드 스타트업, 실험적 웹사이트, 아트·크리에이티브 포트폴리오, 반문화 브랜드, 패션·음악 브랜드, 실험적 프로젝트 등의 프로젝트에 적합합니다.

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

장점으로는 극도로 독특해서 기억에 남음, 개발 비용이 낮음 (단순 HTML), 강렬한 브랜드 개성 표현 가능이 있습니다. 단점으로는 일반 사용자에게 UX가 불친절, 비즈니스·기업 서비스에 부적합, 오남용 시 단순히 못 만든 사이트처럼 보임이 있습니다.

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

흑백 또는 극단적으로 제한된 색상. 색보다 구조와 타이포가 지배하는 시스템 색상 역할은 background: 흰색 또는 매우 밝은 회색 — 웹 원형, text: 순수 검정 (#000) — 타협 없이, accent: 선택적, 단 하나의 강렬한 색 (있어도 되고 없어도 됨)입니다. 주의사항: 색상으로 계층 구분 금지 — 크기·위치·굵기로만 구분, 색상 수 최대 2종 (흑+백, 또는 흑+강조 1색).

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

Brutalism에는 Arial, Helvetica, Times New Roman 등 시스템 기본 폰트 또는 의도적으로 못생긴 느낌의 폰트. 미적 선택보다 비선택이 미학 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 자체는 거의 기본 시스템 폰트 — 꾸미지 않음, 크기 대비 극단적 — h1은 매우 크고 body는 매우 작아도 됨.

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

Brutalism에서 피해야 할 것: 그림자·둥근 모서리 사용 금지, 장식 아이콘 사용 금지 — HTML 텍스트로 대체 가능, 균형 잡힌 레이아웃 지양 — 비대칭이 원칙.

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

Brutalism을 적용한 대표적인 제품·서비스로는 Bloomberg Businessweek 웹사이트, Balenciaga, craigslist (비의도적) 등이 있습니다.

## 참고 디자인 토큰

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

### 색상

- primary: #FF0000
- secondary: #000000
- accent: #FFFF00
- background: #FFFFFF
- surface: #DDDDDD
- text: #000000
- textSecondary: #333333
- border: #000000

### 타이포그래피

- fontFamily: Arial, Helvetica, 'Noto Sans KR', sans-serif
- headingWeight: 900
- bodyWeight: 700
- letterSpacing: -0.02em

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

- spacing: unit 8px × scale 1.2
- borderRadius: sm 0 / md 0 / lg 0 / full 0
- shadow sm: none
- shadow md: none
- shadow lg: none
- border: 5px solid #000000

### 컴포넌트 형태

- button: brutalist / hover none / text uppercase
- card: brutal / hover none
- input: brutal / focus border
- badge: square / solid
- icon: tabler / stroke 3 / size 24px
- layout: fluid / section compact
- animation: 0ms linear
- specialEffects: noise

## 관련 링크

### 관련 스타일

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

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

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

### 비교

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

### 쓰임새별 추천

- [포트폴리오](https://ui.buildersgate.com/for/portfolio)

---

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

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