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

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

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

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

## 핵심 원칙
- 정직함
- 기능성
- 반골 정신

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

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

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

## 장점
- 극도로 독특해서 기억에 남음
- 개발 비용이 낮음 (단순 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

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

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

관련 스타일 탐색

Neobrutalism

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

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

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

Flat Design

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