디자인 스타일
브루탈리즘(Brutalism)
브루탈리즘(Brutalism)은 매끈하게 다듬은 상업적 UI보다 브라우저 기본 요소, 날것의 타이포그래피와 직접적인 정보 구조를 표현 수단으로 사용하는 디자인 접근입니다.
쉬운 설명
기본 HTML과 시스템 글꼴, 거친 배치로 웹의 구조를 숨기지 않고 드러내는 스타일.
Visual sample
눈으로 보면 이렇습니다
시스템 글꼴, 노출된 그리드와 비정형 배치로 만든 웹 브루탈리즘 샘플
- 날것의 구조
- 시스템 타이포그래피
- 비정형 배치
Raw web brutalism, exposed HTML structure, system fonts, stark monochrome contrast, asymmetric layout, minimal decoration Style variations
같은 스타일도 이렇게 달라집니다
브라우저 기본 요소를 그대로 쓰는 방식부터 거대한 타이포그래피와 흑백 편집을 강조하는 방식까지, 거칠기의 위치에 따라 결과가 달라집니다.로우 웹 브루탈리즘
기본 링크, 입력창과 시스템 글꼴을 숨기지 않고 문서 구조 자체를 시각 언어로 사용합니다.
Raw web brutalism, default browser controls, blue underlined links, system font, exposed document structure 에디토리얼 브루탈리즘
거대한 흑백 제목, 잘린 이미지와 비대칭 열로 독립 잡지 같은 긴장감을 만듭니다.
Editorial brutalism, oversized black type, cropped imagery, asymmetric columns, one red signal color 유틸리티 브루탈리즘
모노스페이스 글자와 표 같은 구성을 사용해 도구·아카이브의 직접적인 정보성을 강조합니다.
Utility brutalism, monospace labels, dense tables, exposed grid, acid green status accent, no ornamental cards Visual DNA
스타일을 만드는 구체적인 요소
단어 하나보다 아래 요소를 함께 지정해야 AI가 더 일관된 결과를 만듭니다.선과 테두리
1–4px · Exposed기본 구분선이나 굵은 검은 선을 숨기지 않고 구조를 그대로 드러냅니다.
모서리
0px · Square대부분 각진 면을 사용하며 둥근 모서리는 기능상 꼭 필요한 컨트롤에만 둡니다.
컬러 톤
흑백 + Signal color흑백을 중심으로 링크 파랑, 경고 빨강이나 형광색 하나를 직접적으로 사용합니다.
타이포그래피
System / Mono · 400–900시스템 글꼴, 모노스페이스와 과장된 제목을 혼합해 가공되지 않은 인상을 냅니다.
아이콘
기본 Symbol / Text정교한 아이콘 세트보다 화살표, 기호와 텍스트 라벨로 기능을 직접 표시합니다.
그림자
없음부드러운 깊이 효과를 거의 쓰지 않고 평면, 선과 겹침으로 층을 구분합니다.
간격과 밀도
8–48px · Irregular의도적으로 촘촘하거나 크게 비운 구간을 대비시켜 비정형 리듬을 만듭니다.
모션
0–150ms · Abrupt즉각적인 상태 반전과 짧은 점프 컷처럼 직접적인 피드백이 잘 맞습니다.
Where it works
어떤 프로젝트에 잘 어울리나요?
스타일의 강도는 제품의 목적과 사용자가 읽어야 하는 정보량에 맞춰 조절해야 합니다.적극적으로 추천
콘텐츠의 태도와 편집 구조를 강하게 드러낼 수 있습니다.
작업자의 관점과 비주류 감성을 첫 화면부터 분명하게 전달합니다.
포스터 같은 강한 글자와 비정형 배치가 짧은 캠페인에 잘 맞습니다.
강도를 조절해서 적용
내비게이션과 핵심 행동은 익숙한 패턴을 유지해야 합니다.
의도적인 불편과 거친 위계가 신뢰와 정보 판독을 해칠 수 있습니다.
Compare
비슷한 스타일과 무엇이 다른가요?
브루탈리즘은 날것의 웹 구조와 불편함까지 표현으로 삼고, 네오 브루탈리즘은 굵은 선과 밝은 색을 쓰면서도 정돈된 상업적 사용성을 더 많이 유지합니다.브루탈리즘(Brutalism)
- 기본 HTML과 시스템 감성
- 비정형·의도적으로 거친 배치
- 가독성 파괴도 표현 수단
Neo-Brutalism
- 밝은 색면과 굵은 카드
- 정돈된 그리드와 컴포넌트
- 친근함과 사용성을 대체로 유지
Prompt recipe
AI에게 요청할 때는 이렇게 조합하세요
Raw web brutalism, exposed HTML structure, system fonts, stark monochrome contrast, asymmetric layout, minimal decoration. Use exposed structure, square edges, system or monospace type, stark contrast, and intentionally irregular rhythm; avoid polished gradients, soft shadows, decorative rounded cards, and fake chaos that hides essential navigation. Final check
완성 전에 확인하세요
- 01
거친 표현에도 핵심 경로가 보이는가?
- 02
비정형 배치가 콘텐츠의 태도를 강화하는가?
- 03
시스템 글꼴과 모노스페이스의 역할이 구분되는가?
- 04
링크와 버튼이 여전히 조작 가능하게 보이는가?
- 05
모바일에서 의도하지 않은 가로 스크롤이 없는가?
- 06
장식적 혼란이 아니라 구조적 선택으로 느껴지는가?
Explore more
다른 스타일도 보러 가기
작은 미리보기로 분위기를 비교하고 다음 디자인 용어로 이어가세요.관계 지도
