디자인 스타일

네오 브루탈리즘(Neo-Brutalism)

네오 브루탈리즘(Neo-Brutalism)은 웹 브루탈리즘의 직설적인 표현을 밝은 색과 장난스러운 UI 요소로 재해석한 스타일입니다.

쉬운 설명

굵은 테두리, 선명한 색상과 딱딱한 그림자로 의도적인 거칠기를 드러내는 스타일.

Visual sample

눈으로 보면 이렇습니다

굵은 검은색 테두리, 원색과 옵셋 그림자로 만든 네오 브루탈리즘 샘플

  • 굵은 테두리
  • 고대비 색상
  • 딱딱한 옵셋 그림자
AI에게 이렇게 요청해 보세요
Soft neo-brutalism, bold black borders, vivid primary colors, hard offset shadows, playful but readable

Style variations

같은 스타일도 이렇게 달라집니다

콘텐츠 구조는 같게 두고 색, 선, 모서리와 타이포그래피의 강도를 달리한 세 가지 표현입니다.
Classic

클래식 네오 브루탈리즘

원색과 4px 검은 테두리, 단단한 옵셋 그림자로 가장 전형적인 인상을 만듭니다.

Classic neo-brutalism, primary colors, 4px black borders, square corners, 8px hard offset shadows
Soft

소프트 네오 브루탈리즘

파스텔 색, 2px 테두리와 작은 둥근 모서리로 친근하고 가벼운 인상을 냅니다.

Soft neo-brutalism, pastel blocks, 2px black borders, 10px radius, short hard shadows, friendly tone
Editorial

에디토리얼 네오 브루탈리즘

흑백 면과 큰 제목, 비대칭 구성을 중심으로 포스터와 독립 잡지 같은 분위기를 만듭니다.

Editorial neo-brutalism, monochrome grid, oversized grotesk type, asymmetric layout, one orange accent

Visual DNA

스타일을 만드는 구체적인 요소

단어 하나보다 아래 요소를 함께 지정해야 AI가 더 일관된 결과를 만듭니다.
01

선과 테두리

2–4px · Solid

주요 카드와 버튼에 번짐 없는 검은 실선을 사용합니다. 작은 라벨까지 모두 감싸지 않는 것이 좋습니다.

02

모서리

0–12px

클래식은 거의 각지고, 소프트 변형은 8–12px를 사용합니다. 알약형은 배지에만 제한합니다.

03

컬러 톤

고채도 · 고대비

크림색 바탕에 노랑, 빨강, 민트 같은 선명한 색을 2–3개 조합합니다.

04

타이포그래피

Grotesk · 700–900

제목은 굵고 촘촘하게, 본문은 단순한 산세리프로 유지합니다. 한글은 구조가 단단한 고딕 계열이 잘 맞습니다.

05

아이콘

굵은 Outline

2–3px의 기하학적인 선 아이콘이나 단순한 filled icon을 한 계열로 통일합니다.

06

그림자

4–8px · No blur

한 방향으로 밀린 검은 면을 사용합니다. 번지는 소프트 섀도는 스타일의 힘을 약하게 만듭니다.

07

간격과 밀도

16–32px · Compact

블록 내부는 촘촘하게, 섹션 사이는 분명하게 벌려 포스터처럼 강한 리듬을 만듭니다.

08

모션

100–200ms · Direct

hover에서는 색을 반전하고 press에서는 그림자만큼 눌리는 짧고 직접적인 피드백이 잘 어울립니다.

Where it works

어떤 프로젝트에 잘 어울리나요?

스타일의 강도는 제품의 목적과 사용자가 읽어야 하는 정보량에 맞춰 조절해야 합니다.

적극적으로 추천

추천 크리에이티브 포트폴리오

작업자의 개성과 실험적인 태도를 첫 화면부터 강하게 전달할 수 있습니다.

추천 이벤트·문화 콘텐츠

포스터 같은 색과 타이포그래피가 행사와 콘텐츠의 에너지를 살려줍니다.

추천 커뮤니티·소비자 앱

친근한 색과 직접적인 상태 표현이 참여 중심 서비스에 잘 맞습니다.

강도를 조절해서 적용

부분 적용 업무용 대시보드

전체 화면보다 CTA, 상태 배지와 핵심 요약 카드에 제한적으로 적용하는 편이 좋습니다.

신중 금융·의료 서비스

시각적 소음이 신뢰와 빠른 정보 판독을 방해하지 않도록 강도를 크게 낮춰야 합니다.

신중 긴 문서·데이터 테이블

굵은 선과 원색이 반복되면 읽기 피로가 커지므로 본문 영역에는 중립적인 표현이 필요합니다.

Compare

비슷한 스타일과 무엇이 다른가요?

둘 다 거칠고 직접적이지만, 네오 브루탈리즘은 정돈된 사용성과 친근한 상업적 표현을 더 많이 유지합니다.
THIS STYLE

네오 브루탈리즘(Neo-Brutalism)

  • 원색과 장난스러운 색면
  • 정돈된 카드와 그리드
  • 사용성과 가독성을 대체로 유지
COMPARE

Brutalism

  • 날것의 브라우저·문서 감성
  • 비정형·의도적으로 불편한 배치
  • 가독성 파괴도 표현 수단으로 사용

Prompt recipe

AI에게 요청할 때는 이렇게 조합하세요

스타일+색상+선과 모서리+타이포그래피+제외 조건
READY TO COPY Soft neo-brutalism, bold black borders, vivid primary colors, hard offset shadows, playful but readable. Keep body content readable, preserve clear hierarchy, and avoid decorative effects that do not support the chosen style.

Final check

완성 전에 확인하세요

  1. 01

    주요 컴포넌트의 테두리 굵기가 일관적인가?

  2. 02

    포인트 색상을 2–3개 안에서 절제해 사용했는가?

  3. 03

    그림자의 방향과 강도가 화면 전체에서 일관적인가?

  4. 04

    제목과 본문의 역할 및 읽기 순서가 분명한가?

  5. 05

    모바일에서도 장식이 콘텐츠를 압도하지 않는가?

  6. 06

    hover와 press가 주변 레이아웃을 움직이지 않는가?

Explore more

다른 스타일도 보러 가기

작은 미리보기로 분위기를 비교하고 다음 디자인 용어로 이어가세요.
미니멀리즘(Minimalism) 불필요한 장식을 덜어내고 타이포그래피와 여백으로 핵심 정보에 집중하게 하는 스타일. 스타일 보기 글래스모피즘(Glassmorphism) 반투명한 표면과 배경 블러로 서리 낀 유리 같은 깊이를 만드는 스타일. 스타일 보기 스큐어모피즘(Skeuomorphism) 현실의 사물과 재질, 조작 방식을 디지털 인터페이스에 재현하는 스타일. 스타일 보기 벤토 UI(Bento UI) 크기가 다른 콘텐츠 블록을 도시락 칸처럼 하나의 그리드에 정리하는 레이아웃. 스타일 보기 브루탈리즘(Brutalism) 기본 HTML과 시스템 글꼴, 거친 배치로 웹의 구조를 숨기지 않고 드러내는 스타일. 스타일 보기 뉴모피즘(Neumorphism) 같은 배경색의 밝고 어두운 그림자를 조합해 표면이 눌리거나 솟아난 듯 보이게 하는 스타일. 스타일 보기 클레이모피즘(Claymorphism) 말랑한 점토처럼 부풀어 오른 형태, 큰 라운드와 다층 그림자를 사용하는 3D 스타일. 스타일 보기 스위스 스타일(Swiss Style) 엄격한 그리드, 산세리프 타이포그래피와 비대칭 정렬로 정보를 객관적으로 전달하는 스타일. 스타일 보기 멤피스 디자인(Memphis Design) 기하 도형, 패턴과 대담한 색을 자유롭게 조합하는 장난스럽고 반권위적인 스타일. 스타일 보기 플랫 디자인(Flat Design) 입체적인 재질과 장식 그림자를 줄이고 단색 면과 단순한 아이콘으로 기능을 직접 전달하는 UI 스타일. 스타일 보기 에디토리얼 디자인(Editorial Design) 잡지와 신문처럼 타이포그래피, 이미지와 컬럼의 리듬으로 읽는 순서를 설계하는 디자인 방식. 스타일 보기 머티리얼 디자인(Material Design) 색상 역할, 컴포넌트 상태, 형태와 모션을 하나의 규칙으로 연결하는 Google의 오픈 디자인 시스템. 스타일 보기 맥시멀리즘(Maximalism) 색, 패턴, 글자와 이미지의 시각적 과잉을 반복과 초점으로 통제하는 표현 중심 스타일. 스타일 보기 리퀴드 글래스(Liquid Glass) 빛을 굴절하고 주변 색에 적응하며 상호작용에 따라 유동적으로 변하는 동적 유리 재질 표현. 스타일 보기 바우하우스(Bauhaus) 기본 기하 형태, 원색과 기능 중심의 구성을 결합해 형태와 목적의 관계를 드러내는 모더니즘 디자인 사조. 스타일 보기 Y2K 디자인(Y2K Design) 크롬, 반투명 플라스틱과 버블 형태로 2000년 전후의 디지털 미래상을 재해석하는 복고 스타일. 스타일 보기

관계 지도

네오 브루탈리즘(Neo-Brutalism) 중심으로 관련 개념의 정의와 관계를 한눈에 정리했습니다.
네오 브루탈리즘(Neo-Brutalism)의 정의와 관련 개념 간 관계를 설명한 계층형 그래프