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

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

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

## 역사·배경
건축의 브루탈리즘에서 영감. 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).

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

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

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

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

## 실제 사용 제품·서비스
- Bloomberg Businessweek 웹사이트
- Balenciaga
- craigslist (비의도적)

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

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

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

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

### 헤더
- background: #EEEEEE
- textColor: #000000
- accentColor: #FF0000

### 타이포그래피
- fontFamily: Arial, Helvetica, 'Noto Sans KR', sans-serif
- headingWeight: 900
- bodyWeight: 700
- letterSpacing: -0.02em

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

### 그림자 (Shadows)
- sm: none
- md: none
- lg: none
- xl: none

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

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

### 이펙트
- blur: 0px
- opacity: 1
- transition: none

### 애니메이션
- duration: 0ms
- easing: linear

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

### 레이아웃
- containerStyle: fluid
- sectionSpacing: compact

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

## 자주 묻는 질문 (FAQ)

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

### Q: Brutalism의 핵심 디자인 원칙은 무엇인가요?
A: Brutalism의 핵심 원칙은 정직함, 기능성, 반골 정신입니다.

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

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

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

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

### Q: Brutalism 디자인에서 하면 안 되는 것은 무엇인가요?
A: Brutalism에서 피해야 할 것: 그림자·둥근 모서리 사용 금지, 장식 아이콘 사용 금지 — HTML 텍스트로 대체 가능, 균형 잡힌 레이아웃 지양 — 비대칭이 원칙.

### Q: Brutalism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Brutalism을 적용한 대표적인 제품·서비스로는 Bloomberg Businessweek 웹사이트, Balenciaga, craigslist (비의도적) 등이 있습니다.

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

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

← 홈으로 돌아가기

Brutalism

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

연도

2014

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

#000000

핵심 원칙

1

정직함

2

기능성

3

반골 정신

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

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

실제 사용 예시

Bloomberg Businessweek 웹사이트Balenciagacraigslist (비의도적)

UI 컴포넌트 예제

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

Raw HTML Style

기본 HTML 요소를 거의 스타일링 없이 사용

BRUTALISM

This is raw, unpolished design. No fancy effects, no smooth transitions. Just pure HTML.

Asymmetric Layout

의도적으로 불규칙한 레이아웃

ASYMMETRIC

Breaking the grid on purpose

Brutalism rejects symmetry

RAW

BOLD & HONEST

Bold Typography

대담하고 거친 타이포그래피

BRUTAL

NO DECORATION

<raw> HTML </raw>

Brutalist Forms

장식 없는 기본 폼 요소

Limited Color Palette

제한된 색상만 사용

WHITE

BLACK

RED

BLUE

자주 묻는 질문

Brutalism이란 무엇인가요?
거칠고 날것 그대로의 디자인으로, 전통적인 미학을 거부합니다. 건축의 브루탈리즘에서 영감. 2010년대 중반 웹 디자인 트렌드로 재조명되며 고급 패션·아트 씬에서 의도적으로 활용.
Brutalism의 핵심 디자인 원칙은 무엇인가요?
Brutalism의 핵심 원칙은 정직함, 기능성, 반골 정신입니다.
Brutalism은 어떤 프로젝트에 적합한가요?
Brutalism은 아트·크리에이티브 포트폴리오, 독립 음악·패션 브랜드, 아방가르드 스타트업, 실험적 웹사이트, 아트·크리에이티브 포트폴리오, 반문화 브랜드, 패션·음악 브랜드, 실험적 프로젝트 등의 프로젝트에 적합합니다.
Brutalism의 장단점은 무엇인가요?
장점으로는 극도로 독특해서 기억에 남음, 개발 비용이 낮음 (단순 HTML), 강렬한 브랜드 개성 표현 가능이 있습니다. 단점으로는 일반 사용자에게 UX가 불친절, 비즈니스·기업 서비스에 부적합, 오남용 시 단순히 못 만든 사이트처럼 보임이 있습니다.
Brutalism에서 색상은 어떻게 사용하나요?
흑백 또는 극단적으로 제한된 색상. 색보다 구조와 타이포가 지배하는 시스템 색상 역할은 background: 흰색 또는 매우 밝은 회색 — 웹 원형, text: 순수 검정 (#000) — 타협 없이, accent: 선택적, 단 하나의 강렬한 색 (있어도 되고 없어도 됨)입니다. 주의사항: 색상으로 계층 구분 금지 — 크기·위치·굵기로만 구분, 색상 수 최대 2종 (흑+백, 또는 흑+강조 1색).
Brutalism에 어울리는 폰트 스타일은 무엇인가요?
Brutalism에는 Arial, Helvetica, Times New Roman 등 시스템 기본 폰트 또는 의도적으로 못생긴 느낌의 폰트. 미적 선택보다 비선택이 미학 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 자체는 거의 기본 시스템 폰트 — 꾸미지 않음, 크기 대비 극단적 — h1은 매우 크고 body는 매우 작아도 됨.
Brutalism 디자인에서 하면 안 되는 것은 무엇인가요?
Brutalism에서 피해야 할 것: 그림자·둥근 모서리 사용 금지, 장식 아이콘 사용 금지 — HTML 텍스트로 대체 가능, 균형 잡힌 레이아웃 지양 — 비대칭이 원칙.
Brutalism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Brutalism을 적용한 대표적인 제품·서비스로는 Bloomberg Businessweek 웹사이트, Balenciaga, craigslist (비의도적) 등이 있습니다.

관련 스타일 탐색

Neobrutalism

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

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

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

Flat Design

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