표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Neobrutalism
브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다.
- YEAR
- 2022
- MOOD
- 화려한 · 친근·발랄
- PRIMARY#FDE047
- SECONDARY#FF6B6B
- ACCENT#4ECDC4
- BG#FFFFFF
- SURFACE#FFFFFF
취급 표시
- 각진 모서리
- 굵은 테두리
- 굵은 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 4단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 2단계
- 화려한
- 친근·발랄
어디에 쓰나
실제로 쓰는 곳
- Gumroad
- Linear (일부)
- 피그마 커뮤니티 인기 UI 킷
사용 사례
- 테크 스타트업 랜딩 페이지
- 개인 포트폴리오
- 크리에이티브 SaaS 도구
- 인디 게임
이런 프로젝트에 맞습니다
- 테크 스타트업 랜딩
- 개인 포트폴리오
- 인디 제품
- SaaS 마케팅 페이지
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2022년 SaaS 및 인디 해커 씬에서 폭발적으로 유행. 기존 브루탈리즘의 날카로운 느낌을 색상으로 중화한 현대적 버전.
핵심 원칙
- 대담함
- 명확성
- 개성
주요 특징
- 굵은 검은 테두리
- 평면적 색상
- 그림자 없음
- 대담한 타이포그래피
- 의도적 거칠음
장점과 한계
장점
- 극도로 눈에 띄고 기억에 남음
- 구현 비용이 낮음 (CSS border만으로)
- 개성 강한 브랜드 표현 가능
- 밝은 색상으로 접근성 확보 쉬움
한계
- 지나치게 사용하면 정보 위계 혼란
- 고급 브랜드 이미지와 상충
- 복잡한 데이터 UI에 부적합
컬러 시스템
고채도 원색 또는 형광색 + 순수 검정/흰색의 고대비 시스템. 색감이 강하게 충돌해도 됨
색의 역할
- primary: 배경 블록, CTA 버튼 채우기 — 형광·원색 가능, 강렬할수록 좋음
- accent: 호버·포커스 상태, 보조 강조 — primary와 충돌하는 보색도 OK
- background: 흰색 또는 밝은 단색 (주로 #fff 또는 #fafafa)
- text: 순수 검정 (#000 또는 #111) — 타협 없이 진하게
- border: 순수 검정 — 두께가 곧 스타일의 정체성
제약
- 파스텔·그라데이션 금지 — 원색·형광색만 사용
- 투명도(opacity) 사용 금지 — 모든 색은 불투명
- 배경은 반드시 밝게 — 어두운 배경은 스타일 정체성을 약화시킴 (다크모드 예외)
- 색상 수는 2~3색으로 제한 (배경+primary+선택적 accent)
다크모드 — 배경을 검정(#000)으로 전환. primary 블록 색상은 채도 그대로 유지. 텍스트를 흰색으로 반전. border는 흰색으로
명도 대비 — 원색+검정 조합으로 자연적으로 높은 대비 확보. 별도 검증보다 색상 선택 원칙 준수가 중요
타이포그래피
기하학적 산세리프 또는 모노스페이스. 장식 없고 투박한 느낌. 시스템 폰트도 OK
글꼴은 최대 1종 · 스케일 비율 1.333 (Perfect Fourth) 이상 — 계층 대비 극대화
- 세리프·스크립트·장식 폰트 사용 금지
- letter-spacing 넓히지 않음 — 기본값 또는 약간 좁게
- heading은 font-weight 700 이상, body와 크기 차이 과감하게
- 대문자(uppercase) 제목 허용 — 강렬함 강화
설계 제약
반드시 포함
- 두꺼운 검정 테두리 (2px 이상, 권장 2~4px)
- hard offset box-shadow
- 고채도 컬러 블록 최소 1개
하지 말 것
- 은은한 box-shadow 사용 금지 — hard offset shadow만 허용 (예: 4px 4px 0px #000)
- border-radius 크게 사용 금지 — 0 또는 최대 4px
- 그라데이션 배경·버튼 금지
- glassmorphism·blur 효과 금지
- 세련되고 정돈된 equal-spacing 레이아웃 지양 — 의도적 비정형 허용
모션 — 모션 최소화. 호버 시 오프셋 이동(transform: translate(2px, 2px)) + shadow 축소로 눌리는 느낌. 부드러운 ease-in-out 금지 — 즉각 반응(linear 또는 steps).
접근성
굵은 검은 테두리와 대비 높은 색상 조합으로 접근성 비교적 우수. 텍스트 대비는 별도 확인 필요.
자주 묻는 질문
Neobrutalism이란 무엇인가요?
브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다. 2022년 SaaS 및 인디 해커 씬에서 폭발적으로 유행. 기존 브루탈리즘의 날카로운 느낌을 색상으로 중화한 현대적 버전.
Neobrutalism의 핵심 디자인 원칙은 무엇인가요?
Neobrutalism의 핵심 원칙은 대담함, 명확성, 개성입니다.
Neobrutalism은 어떤 프로젝트에 적합한가요?
Neobrutalism은 테크 스타트업 랜딩 페이지, 개인 포트폴리오, 크리에이티브 SaaS 도구, 인디 게임, 테크 스타트업 랜딩, 개인 포트폴리오, 인디 제품, SaaS 마케팅 페이지 등의 프로젝트에 적합합니다.
Neobrutalism의 장단점은 무엇인가요?
장점으로는 극도로 눈에 띄고 기억에 남음, 구현 비용이 낮음 (CSS border만으로), 개성 강한 브랜드 표현 가능, 밝은 색상으로 접근성 확보 쉬움이 있습니다. 단점으로는 지나치게 사용하면 정보 위계 혼란, 고급 브랜드 이미지와 상충, 복잡한 데이터 UI에 부적합이 있습니다.
Neobrutalism에서 색상은 어떻게 사용하나요?
고채도 원색 또는 형광색 + 순수 검정/흰색의 고대비 시스템. 색감이 강하게 충돌해도 됨 색상 역할은 primary: 배경 블록, CTA 버튼 채우기 — 형광·원색 가능, 강렬할수록 좋음, accent: 호버·포커스 상태, 보조 강조 — primary와 충돌하는 보색도 OK, background: 흰색 또는 밝은 단색 (주로 #fff 또는 #fafafa)입니다. 주의사항: 파스텔·그라데이션 금지 — 원색·형광색만 사용, 투명도(opacity) 사용 금지 — 모든 색은 불투명.
Neobrutalism에 어울리는 폰트 스타일은 무엇인가요?
Neobrutalism에는 기하학적 산세리프 또는 모노스페이스. 장식 없고 투박한 느낌. 시스템 폰트도 OK 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프·스크립트·장식 폰트 사용 금지, letter-spacing 넓히지 않음 — 기본값 또는 약간 좁게.
Neobrutalism 디자인에서 하면 안 되는 것은 무엇인가요?
Neobrutalism에서 피해야 할 것: 은은한 box-shadow 사용 금지 — hard offset shadow만 허용 (예: 4px 4px 0px #000), border-radius 크게 사용 금지 — 0 또는 최대 4px, 그라데이션 배경·버튼 금지, glassmorphism·blur 효과 금지, 세련되고 정돈된 equal-spacing 레이아웃 지양 — 의도적 비정형 허용.
Neobrutalism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Neobrutalism을 적용한 대표적인 제품·서비스로는 Gumroad, Linear (일부), 피그마 커뮤니티 인기 UI 킷 등이 있습니다.