네오브루탈리즘 (Neobrutalism)

건축의 브루탈리즘(콘크리트를 가공 없이 노출하는 양식)에서 온 웹 브루탈리즘 — HTML 기본 모습을 날것으로 두는 스타일 — 을 다듬은 후속이에요. 날것의 태도는 유지하되, 규칙이 생겼습니다: 2~4px 검은 보더, 채도 높은 배경색, box-shadow: 4px 4px 0 #000 같은 블러 0의 오프셋 그림자. Figma·Gumroad 계열의 일러스트, 포트폴리오·사이드프로젝트 랜딩에서 많이 보입니다.

언제 쓰나요?#

"우리는 대기업 SaaS처럼 매끈하지 않다"는 태도 자체가 메시지일 때 강해요. 인디 제품, 크리에이터 툴, 실험적 프로젝트와 잘 맞습니다. 반대로 신뢰·안정이 핵심인 도메인(금융, 의료)에서는 장난스러워 보일 위험이 있어요. 그리고 요소 하나하나가 시끄러운 스타일이라, 정보 밀도가 높은 대시보드에 쓰면 금방 피로해집니다.

AI에게 시키기#

랜딩 페이지를 네오브루탈리즘 스타일로 만들어줘.
- 모든 카드·버튼에 3px 검은 보더 + box-shadow: 5px 5px 0 #000 (블러 없음)
- 배경은 채도 높은 색 블록 2~3가지 (노랑·핑크·하늘 계열)
- 버튼 hover 시 그림자 방향으로 살짝 이동해 '눌리는' 느낌
- 폰트는 굵고 각진 산세리프, 라운드는 0 또는 아주 작게

스타일 이름 없이 "튀는 디자인"이라고 하면 AI는 그라데이션을 떡칠합니다. 네오브루탈리즘이라는 단어 하나가 보더·그림자·색 규칙을 전부 실어 날라요.

혼동 주의#

• 웹 브루탈리즘: 스타일링을 거의 안 한 날것 HTML — 네오브루탈리즘은 정교하게 계산된 날것 '연출'
• 멤피스 디자인: 1980년대 기하학 패턴 스타일. 색감은 비슷하지만 검은 보더·하드 섀도 문법이 없음