# Neobrutalism — 디자인 스타일 가이드 ## 기본 정보 - **ID**: neobrutalism - **카테고리**: design-style - **연도**: 2022 ## 설명 브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다. ## 역사·배경 2022년 SaaS 및 인디 해커 씬에서 폭발적으로 유행. 기존 브루탈리즘의 날카로운 느낌을 색상으로 중화한 현대적 버전. ## 핵심 원칙 - 대담함 - 명확성 - 개성 ## 주요 특징 - 굵은 검은 테두리 - 평면적 색상 - 그림자 없음 - 대담한 타이포그래피 - 의도적 거칠음 ## 사용 사례 - 테크 스타트업 랜딩 페이지 - 개인 포트폴리오 - 크리에이티브 SaaS 도구 - 인디 게임 ## 추천 프로젝트 유형 - 테크 스타트업 랜딩 - 개인 포트폴리오 - 인디 제품 - SaaS 마케팅 페이지 ## 장점 - 극도로 눈에 띄고 기억에 남음 - 구현 비용이 낮음 (CSS border만으로) - 개성 강한 브랜드 표현 가능 - 밝은 색상으로 접근성 확보 쉬움 ## 단점·한계 - 지나치게 사용하면 정보 위계 혼란 - 고급 브랜드 이미지와 상충 - 복잡한 데이터 UI에 부적합 ## 실제 사용 제품·서비스 - Gumroad - Linear (일부) - 피그마 커뮤니티 인기 UI 킷 ## 접근성 굵은 검은 테두리와 대비 높은 색상 조합으로 접근성 비교적 우수. 텍스트 대비는 별도 확인 필요. ## 관련 스타일 - [brutalism](https://ui.buildersgate.com/styles/brutalism) - [flat-design](https://ui.buildersgate.com/styles/flat-design) - [swiss-design](https://ui.buildersgate.com/styles/swiss-design) ## 디자인 토큰 ### 색상 - primary: #FDE047 - secondary: #FF6B6B - accent: #4ECDC4 - background: #FFFFFF - surface: #FFFFFF - text: #000000 - textSecondary: #333333 - border: #000000 ### 헤더 - background: #FDE047 - textColor: #000000 - accentColor: #FF6B6B ### 타이포그래피 - fontFamily: Space Grotesk, 'Noto Sans KR', sans-serif - headingWeight: 800 - bodyWeight: 500 - letterSpacing: 0em ### 스페이싱 - unit: 8px - scale: 1 ### 그림자 (Shadows) - sm: 4px 4px 0 #000000 - md: 6px 6px 0 #000000 - lg: 8px 8px 0 #000000 - xl: 12px 12px 0 #000000 ### Border Radius - none: 0 - sm: 0 - md: 0 - lg: 0 - full: 0 ### 테두리 (Borders) - width: 4px - style: solid - color: #000000 ### 이펙트 - blur: 0px - opacity: 1 - transition: all 0.15s ease-out ### 애니메이션 - duration: 150ms - easing: ease-out ### 컴포넌트 토큰 - 버튼: shape=brutalist / hoverEffect=offset / textTransform=uppercase - 카드: style=brutal / hoverEffect=border - 인풋: style=brutal / focusEffect=border - 배지: shape=square / style=solid - 아이콘: package=tabler / strokeWidth=2.5 / defaultSize=24 ### 레이아웃 - containerStyle: boxed - sectionSpacing: normal ### 특수 효과 - glassmorphism: false - gradientText: false - animatedBackground: false - scanlines: false - noise: true ## API 엔드포인트 - 스타일 상세: https://ui.buildersgate.com/api/styles?id=neobrutalism - 디자인 토큰: https://ui.buildersgate.com/api/themes?id=neobrutalism&merged=true

Neobrutalism

브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다.

연도

2022

2022년 SaaS 및 인디 해커 씬에서 폭발적으로 유행. 기존 브루탈리즘의 날카로운 느낌을 색상으로 중화한 현대적 버전.

#FDE047

핵심 원칙

대담함

명확성

개성

주요 특징

굵은 검은 테두리
평면적 색상
그림자 없음
대담한 타이포그래피
의도적 거칠음

장단점

장점

+극도로 눈에 띄고 기억에 남음
+구현 비용이 낮음 (CSS border만으로)
+개성 강한 브랜드 표현 가능
+밝은 색상으로 접근성 확보 쉬움

단점 / 한계

−지나치게 사용하면 정보 위계 혼란
−고급 브랜드 이미지와 상충
−복잡한 데이터 UI에 부적합

적합한 사용처

사용 사례

테크 스타트업 랜딩 페이지
개인 포트폴리오
크리에이티브 SaaS 도구
인디 게임

이런 프로젝트에 추천

테크 스타트업 랜딩개인 포트폴리오인디 제품SaaS 마케팅 페이지

접근성

굵은 검은 테두리와 대비 높은 색상 조합으로 접근성 비교적 우수. 텍스트 대비는 별도 확인 필요.

실제 사용 예시

GumroadLinear (일부)피그마 커뮤니티 인기 UI 킷

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Bold Border Buttons

굵은 검은 테두리와 밝은 색상의 버튼

Brutalist Cards

대담한 테두리와 평면 색상의 카드

Bold Design

그림자 없이 굵은 테두리만으로 강렬한 인상을 줍니다.

No Shadow

완전히 평면적인 디자인으로 모던한 느낌을 전달합니다.

Brutalist Inputs

강렬한 테두리의 입력 필드

Brutalist Tags

굵은 테두리의 태그와 배지

NewHotSaleTrending

Brutalist Alert

강렬한 경고 메시지 박스

⚠️

Warning!

This is a brutalist style alert box with bold borders and no shadows.

Neobrutalist Typography

굵은 테두리와 대담한 색상이 타이포그래피에도 적용된 스타일

Display (48px)

NEOBRUTALISM

Heading (32px)

대담하고 명확하게

Subheading (20px)

굵은 테두리 · 평면 색상 · 개성

Body (16px)

Neobrutalism은 2022년 SaaS 커뮤니티에서 폭발적으로 유행한 디자인 스타일로, 굵은 검은 테두리와 밝은 평면 색상이 특징입니다.

태그라벨배지