브루탈리즘 웹디자인 — 못생김의 전략

브루탈리즘 웹디자인은 깔끔한 그리드와 부드러운 그림자, 은은한 파스텔 톤으로 정돈된 웹사이트들 사이에서 시스템 폰트 그대로, 각진 테두리, 원색의 충돌로 시선을 멈추게 하는 전략이다. 다만 이 스타일을 그냥 “못생기게 만들기”로 오해하면 결과물은 정말로 실패한 디자인이 되어버린다.

1. 왜 못생김이 전략이 되는가

대부분의 웹사이트가 비슷한 컴포넌트 라이브러리를 쓰면서 화면의 생김새가 균질해졌다. 둥근 모서리, 그림자가 있는 카드, 여백이 넉넉한 히어로 섹션은 이제 특별하지 않고 기본값이 되었다. 이런 환경에서 브루탈리즘은 의도적으로 다듬어지지 않은 인상을 만들어 사용자의 눈길을 끈다. 브랜드가 스스로를 실험적이거나 저항적인 존재로 포지셔닝하고 싶을 때 이 신호는 강력한 무기가 된다.

브루탈리즘이라는 이름 자체는 원래 건축 용어에서 왔다. 20세기 중반 건축에서 콘크리트를 마감재로 감추지 않고 날것 그대로(“béton brut”) 드러내는 방식이 브루탈리즘 건축의 핵심이었다. 겉을 꾸미지 않고 재료와 구조를 그대로 노출한다는 태도가 그대로 웹으로 옮겨오면서, 레이아웃을 감추는 그리드 시스템이나 부드럽게 다듬은 시각 효과 대신 HTML 요소의 날것 그대로의 형태를 드러내는 스타일이 브루탈리즘 웹디자인이라는 이름을 얻었다.

원색이 충돌하는 브루탈리즘 특유의 시각적 신호

2. 브루탈리즘이 실패하는 지점

문제는 이 스타일이 사용성과 자주 충돌한다는 점이다. 낮은 대비, 작은 텍스트, 예측 불가능한 내비게이션은 시각적 재미와 별개로 실제 정보 탐색을 어렵게 만든다. 상업적 목적이 뚜렷한 사이트, 특히 결제나 문의로 이어져야 하는 페이지에 브루탈리즘을 전면 적용하면 전환율이 떨어질 위험이 크다. 뉴트로 디자인이 반복해서 유행하는 이유에서 다룬 것처럼, 스타일이 강한 트렌드일수록 어디에 적용하고 어디에 적용하지 말지를 구분하는 판단이 결과를 가른다.

실제로 브루탈리즘이 좋은 성과를 내는 곳은 대개 상업적 전환이 최우선 목표가 아닌 영역이다. 실험적인 작가 포트폴리오, 예술·문화 행사 페이지, 브랜드의 태도를 보여주는 캠페인 랜딩 페이지처럼 “탐색”보다 “인상”이 우선인 자리에서는 낮은 대비와 거친 레이아웃도 개성으로 읽힌다. 반대로 검색과 비교, 결제가 핵심 동선인 커머스나 금융 서비스에서는 같은 요소가 방해물로 작동한다.

3. 날것의 인상과 사용성을 함께 지키는 법

실무에서 통하는 브루탈리즘은 대개 완전히 무질서하지 않다. 겉보기엔 거칠어도 안에는 일관된 그리드와 명확한 정보 위계가 숨어 있는 경우가 많다. 인터페이스 밀도를 사용자 숙련도에 맞춰 조절하는 접근과 마찬가지로, 브루탈리즘 역시 실험적 인상과 실제 사용성 사이의 균형을 어디서 잡을지 미리 정해두어야 결과물이 무너지지 않는다.

가장 흔한 실수는 레퍼런스로 삼은 브루탈리즘 사이트의 겉모습만 베끼고, 그 안에 숨어 있는 그리드 질서나 접근성 기준까지는 가져오지 않는 것이다. 각진 테두리와 시스템 폰트만 따라 하면서 실제 색상 대비나 클릭 가능 영역의 크기까지 함부로 낮춰버리면, 개성 있는 사이트가 아니라 그냥 사용하기 불편한 사이트가 된다.

겉보기
낮아 보이는 대비, 어긋난 듯한 정렬, 장식 없는 시스템 폰트

실제 설계
일관된 그리드, 명확한 정보 위계, 접근성 기준을 지키는 실제 색상값

실무에서 통하는 브루탈리즘은 안에 질서를 숨기고 있다

4. 어떤 사이트에 어울리는가

브루탈리즘을 검토할 때는 사이트의 목적부터 되짚어보는 것이 순서다. 사용자가 무언가를 찾고 비교하고 결정해야 하는 목적 지향적 사이트라면 이 스타일의 위험이 이점보다 크다. 반대로 브랜드의 태도나 실험 정신을 보여주는 것 자체가 목적이라면, 약간의 불편함조차 메시지의 일부로 작동할 수 있다.

목적 지향적 사이트
이커머스, 금융, 예약 서비스 — 낮은 대비와 거친 내비게이션이 곧바로 이탈로 이어진다

인상 지향적 사이트
포트폴리오, 캠페인, 문화 행사 — 날것의 태도 자체가 브랜드 메시지가 된다

사이트의 목적에 따라 브루탈리즘의 위험과 이점이 달라진다

적용 전 체크리스트

이 브랜드가 실험적이고 대담한 인상을 전달할 필요가 실제로 있는가

전환이 중요한 페이지(결제, 가입)까지 이 스타일을 적용할 필요가 있는가

낮아 보이는 대비가 실제 색상값 기준으로는 접근성을 통과하는가

겉보기와 달리 내부 그리드와 정보 위계는 명확하게 설계되어 있는가

타깃 사용자층이 이런 날것의 인상을 신선함으로 받아들일 사람들인가

브루탈리즘 적용 전 확인해야 할 체크리스트

💡 실무 포인트 — 결제·가입처럼 전환이 중요한 페이지에는 브루탈리즘을 전면 적용하지 말고, 텍스트 대비는 낮아 보이더라도 실제 색상값은 접근성 기준을 지켜야 한다.

5. 마치며

브루탈리즘 웹디자인은 잘 쓰면 브랜드를 각인시키는 가장 빠른 방법 중 하나지만, 아무 데나 얹으면 사용성만 해치는 장식이 된다. 다음에 이 스타일을 검토한다면, 못생김 자체가 목적이 아니라 그 못생김이 무엇을 전달하려는 것인지부터 명확히 하는 것이 순서다. Brutalist Websites 아카이브를 살펴보면 스타일이 실제로 어떻게 다양하게 쓰이는지 감을 잡을 수 있다.

Design Daily Life · 디자인의 일상을 기록합니다

댓글 남기기