사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Brutalism vs Neobrutalism
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Brutalism -1, Neobrutalism 1. 온도감 — Brutalism -1, Neobrutalism 0. 시대감 — Brutalism -1, Neobrutalism 0. 격식 — Brutalism -2, Neobrutalism -1.
나란히 놓고 보기
Brutalism
- YEAR
- 2014
- MOOD
- 미니멀 · 레트로
Neobrutalism
- YEAR
- 2022
- MOOD
- 화려한 · 친근·발랄
주요 특징
Brutalism
- 비대칭 레이아웃
- 단순한 HTML 요소
- 대담한 타이포그래피
- 제한된 색상
- 의도적인 거칠음
Neobrutalism
- 굵은 검은 테두리
- 평면적 색상
- 그림자 없음
- 대담한 타이포그래피
- 의도적 거칠음
장점과 한계
Brutalism
장점
- 극도로 독특해서 기억에 남음
- 개발 비용이 낮음 (단순 HTML)
- 강렬한 브랜드 개성 표현 가능
한계
- 일반 사용자에게 UX가 불친절
- 비즈니스·기업 서비스에 부적합
- 오남용 시 단순히 못 만든 사이트처럼 보임
Neobrutalism
장점
- 극도로 눈에 띄고 기억에 남음
- 구현 비용이 낮음 (CSS border만으로)
- 개성 강한 브랜드 표현 가능
- 밝은 색상으로 접근성 확보 쉬움
한계
- 지나치게 사용하면 정보 위계 혼란
- 고급 브랜드 이미지와 상충
- 복잡한 데이터 UI에 부적합
역사와 배경
Brutalism
건축의 브루탈리즘에서 영감. 2010년대 중반 웹 디자인 트렌드로 재조명되며 고급 패션·아트 씬에서 의도적으로 활용.
Neobrutalism
2022년 SaaS 및 인디 해커 씬에서 폭발적으로 유행. 기존 브루탈리즘의 날카로운 느낌을 색상으로 중화한 현대적 버전.
접근성
Brutalism
텍스트 가독성 극단적으로 나쁜 경우 많음. 의도적 도발과 접근성 확보 사이 균형 필요.
Neobrutalism
굵은 검은 테두리와 대비 높은 색상 조합으로 접근성 비교적 우수. 텍스트 대비는 별도 확인 필요.
자주 묻는 질문
Brutalism vs Neobrutalism, 무엇이 다른가요?
Brutalism — 거칠고 날것 그대로의 디자인으로, 전통적인 미학을 거부합니다. Neobrutalism — 브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다. 무드 좌표에서 가장 벌어지는 축은 밀도입니다 — Brutalism 쪽은 여백 쪽에, Neobrutalism 쪽은 빽빽함 쪽에 서 있습니다.
언제 Brutalism 쪽, 언제 Neobrutalism 쪽을 골라야 하나요?
아트·크리에이티브 포트폴리오 · 반문화 브랜드 · 패션·음악 브랜드 같은 화면이라면 Brutalism 쪽이 오래 버팁니다. 반대로 테크 스타트업 랜딩 · 개인 포트폴리오 · 인디 제품 쪽 그림이라면 Neobrutalism 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Brutalism vs Neobrutalism, 장단점은 어떻게 갈리나요?
Brutalism 쪽 — 강점은 극도로 독특해서 기억에 남음 · 개발 비용이 낮음 (단순 HTML), 짚고 갈 한계는 일반 사용자에게 UX가 불친절 · 비즈니스·기업 서비스에 부적합입니다. Neobrutalism 쪽 — 강점은 극도로 눈에 띄고 기억에 남음 · 구현 비용이 낮음 (CSS border만으로), 짚고 갈 한계는 지나치게 사용하면 정보 위계 혼란 · 고급 브랜드 이미지와 상충입니다.