거칠고 대담한 포스터 같은 화면 · Brutalism

시각 스타일 · 큰 글자, 강한 대비와 노출된 구조로 거친 인상을 주는 웹 스타일

조회 0추천 0

직접 만든 예시

[서비스 첫 화면]을 웹 브루탈리즘으로 디자인해줘. 초대형 타이포그래피, 흑백과 강조색 하나, 드러나는 구획선과 비대칭 배치를 써줘. 링크와 버튼의 동작은 명확하게 유지해줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 같은 기록 서비스의 소개 문구·기능 3개·CTA

Brutalism · 브루탈리즘의 특징을 적용한 시각적 변형. 문구와 기능은 같고 색·재질·배치를 비교합니다.

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

정제된 카드형 화면과 다른 강한 인상을 요청할 때 유용합니다. 거친 표현을 요청해도 읽는 순서와 버튼의 사용성까지 버리는 것은 아닙니다.

첨부 영상에서 확인한 키워드입니다. 프롬프트와 예시는 직접 제작했으며 링크는 기법 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Brutalism · 브루탈리즘은 큰 글자, 강한 대비와 노출된 구조로 거친 인상을 주는 웹 스타일입니다. 이 키워드는 시각 스타일을 지정하는 데 씁니다.

복사할 문구

[서비스 첫 화면]을 웹 브루탈리즘으로 디자인해줘. 초대형 타이포그래피, 흑백과 강조색 하나, 드러나는 구획선과 비대칭 배치를 써줘. 링크와 버튼의 동작은 명확하게 유지해줘.

가상의 기록 서비스에 같은 제목·기능·CTA를 두고 스타일을 바꿨습니다. 색상, 글자의 크기, 표면, 배치의 차이를 살펴보세요. 다른 스타일은 화면 위 선택창에서 바꿀 수 있습니다.

정제된 카드형 화면과 다른 강한 인상을 요청할 때 유용합니다. 거친 표현을 요청해도 읽는 순서와 버튼의 사용성까지 버리는 것은 아닙니다.

이 화면은 직접 만든 해석 예시이며, 해당 스타일의 유일한 정답이나 특정 모델의 성능 비교 결과는 아닙니다. 입체 화면은 CSS 3D, 메시 배경은 CSS 그라디언트로 구현했습니다.

확인일: 2026-10-18