사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Brutalism vs Flat Design
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Brutalism -1, Flat Design -1. 온도감 — Brutalism -1, Flat Design 0. 시대감 — Brutalism -1, Flat Design 0. 격식 — Brutalism -2, Flat Design 0.
나란히 놓고 보기
Brutalism
- YEAR
- 2014
- MOOD
- 미니멀 · 레트로
Flat Design
- YEAR
- 2012
- MOOD
- 미니멀 · 친근·발랄
주요 특징
Brutalism
- 비대칭 레이아웃
- 단순한 HTML 요소
- 대담한 타이포그래피
- 제한된 색상
- 의도적인 거칠음
Flat Design
- 그림자 없는 평면적 요소
- 단순한 색상 팔레트
- 미니멀한 타이포그래피
- 명확한 아이콘
- 단순한 인터페이스
장점과 한계
Brutalism
장점
- 극도로 독특해서 기억에 남음
- 개발 비용이 낮음 (단순 HTML)
- 강렬한 브랜드 개성 표현 가능
한계
- 일반 사용자에게 UX가 불친절
- 비즈니스·기업 서비스에 부적합
- 오남용 시 단순히 못 만든 사이트처럼 보임
Flat Design
장점
- 빠른 로딩 속도 (텍스처·그라데이션 없음)
- 어떤 화면 해상도에서도 선명함
- 디자인·개발 모두 구현이 빠름
- 무채색 배경에서 색상이 돋보임
한계
- 클릭 가능 요소와 불가능 요소 구별이 어려울 수 있음
- 개성 표현이 어려움
- 오남용 시 지루함
역사와 배경
Brutalism
건축의 브루탈리즘에서 영감. 2010년대 중반 웹 디자인 트렌드로 재조명되며 고급 패션·아트 씬에서 의도적으로 활용.
Flat Design
2012년 Microsoft의 Metro Design과 iOS 7 플랫 전환을 계기로 주류가 됨. 스큐어모피즘에 대한 반작용으로 탄생.
접근성
Brutalism
텍스트 가독성 극단적으로 나쁜 경우 많음. 의도적 도발과 접근성 확보 사이 균형 필요.
Flat Design
색상 대비만 잘 지키면 가독성 우수. 단, 클릭 가능 요소 구별을 위한 추가 시각 단서 필요.
자주 묻는 질문
Brutalism vs Flat Design, 무엇이 다른가요?
Brutalism — 거칠고 날것 그대로의 디자인으로, 전통적인 미학을 거부합니다. Flat Design — 2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다. 무드 좌표에서 가장 벌어지는 축은 격식입니다 — Brutalism 쪽은 자유분방함 쪽에, Flat Design 쪽은 중간 쪽에 서 있습니다.
언제 Brutalism 쪽, 언제 Flat Design 쪽을 골라야 하나요?
아트·크리에이티브 포트폴리오 · 반문화 브랜드 · 패션·음악 브랜드 같은 화면이라면 Brutalism 쪽이 오래 버팁니다. 반대로 빠른 프로토타이핑 · 모바일 앱 · 아이콘·일러스트 쪽 그림이라면 Flat Design 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Brutalism vs Flat Design, 장단점은 어떻게 갈리나요?
Brutalism 쪽 — 강점은 극도로 독특해서 기억에 남음 · 개발 비용이 낮음 (단순 HTML), 짚고 갈 한계는 일반 사용자에게 UX가 불친절 · 비즈니스·기업 서비스에 부적합입니다. Flat Design 쪽 — 강점은 빠른 로딩 속도 (텍스처·그라데이션 없음) · 어떤 화면 해상도에서도 선명함, 짚고 갈 한계는 클릭 가능 요소와 불가능 요소 구별이 어려울 수 있음 · 개성 표현이 어려움입니다.