표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Brutalism
거칠고 날것 그대로의 디자인으로, 전통적인 미학을 거부합니다.
- YEAR
- 2014
- MOOD
- 미니멀 · 레트로
- PRIMARY#FF0000
- SECONDARY#000000
- ACCENT#FFFF00
- BG#FFFFFF
- SURFACE#DDDDDD
취급 표시
- 각진 모서리
- 굵은 테두리
- 굵은 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 2단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 2단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 1단계
- 미니멀
- 레트로
어디에 쓰나
실제로 쓰는 곳
- Bloomberg Businessweek 웹사이트
- Balenciaga
- craigslist (비의도적)
사용 사례
- 아트·크리에이티브 포트폴리오
- 독립 음악·패션 브랜드
- 아방가르드 스타트업
- 실험적 웹사이트
이런 프로젝트에 맞습니다
- 아트·크리에이티브 포트폴리오
- 반문화 브랜드
- 패션·음악 브랜드
- 실험적 프로젝트
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
건축의 브루탈리즘에서 영감. 2010년대 중반 웹 디자인 트렌드로 재조명되며 고급 패션·아트 씬에서 의도적으로 활용.
핵심 원칙
- 정직함
- 기능성
- 반골 정신
주요 특징
- 비대칭 레이아웃
- 단순한 HTML 요소
- 대담한 타이포그래피
- 제한된 색상
- 의도적인 거칠음
장점과 한계
장점
- 극도로 독특해서 기억에 남음
- 개발 비용이 낮음 (단순 HTML)
- 강렬한 브랜드 개성 표현 가능
한계
- 일반 사용자에게 UX가 불친절
- 비즈니스·기업 서비스에 부적합
- 오남용 시 단순히 못 만든 사이트처럼 보임
컬러 시스템
흑백 또는 극단적으로 제한된 색상. 색보다 구조와 타이포가 지배하는 시스템
색의 역할
- background: 흰색 또는 매우 밝은 회색 — 웹 원형
- text: 순수 검정 (#000) — 타협 없이
- accent: 선택적, 단 하나의 강렬한 색 (있어도 되고 없어도 됨)
제약
- 색상으로 계층 구분 금지 — 크기·위치·굵기로만 구분
- 색상 수 최대 2종 (흑+백, 또는 흑+강조 1색)
- 그라데이션·opacity 사용 금지
다크모드 — 배경 검정, 텍스트 흰색으로 단순 반전. 강조색은 그대로 유지
명도 대비 — 흑백 대비로 자연적으로 최고 대비 확보
타이포그래피
Arial, Helvetica, Times New Roman 등 시스템 기본 폰트 또는 의도적으로 못생긴 느낌의 폰트. 미적 선택보다 비선택이 미학
글꼴은 최대 1종 · 스케일 비율 정해진 스케일 없음 — 의도적 비례 파괴 허용
- 폰트 자체는 거의 기본 시스템 폰트 — 꾸미지 않음
- 크기 대비 극단적 — h1은 매우 크고 body는 매우 작아도 됨
- alignment 좌정렬 기본, 비대칭 레이아웃 허용
설계 제약
반드시 포함
- HTML 기본 요소의 날것 느낌
- 일관성보다 날것의 정직함
- underline 링크, 기본 button 등 웹 원형 요소
하지 말 것
- 그림자·둥근 모서리 사용 금지
- 장식 아이콘 사용 금지 — HTML 텍스트로 대체 가능
- 균형 잡힌 레이아웃 지양 — 비대칭이 원칙
모션 — 모션 없음이 원칙. 있다면 CSS transition 최소한만 (200ms 이하 linear).
접근성
텍스트 가독성 극단적으로 나쁜 경우 많음. 의도적 도발과 접근성 확보 사이 균형 필요.
자주 묻는 질문
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 (비의도적) 등이 있습니다.