미학보다 효율성, 투박하고 단순명료함 '브루탈리즘'

웹 디자인의 브루탈리즘은 형식보다 기능을, 미학보다 효율성을 우선시하는 투박하고 단순하며 명료한 스타일입니다. 날것의 모습과 극도로 단순하고 미니멀한 접근 방식이 특징입니다.

 

브루탈리즘의 간략한 역사

브루탈리즘은 1950년대 유럽에서 제2차 세계대전 이후 국가 재건을 모색하면서 등장한 디자인 스타일입니다. 이 스타일의 디자인을 추구한 주된 이유 중 하나는 비용 및 자원 효율성 때문이었습니다. 노출된 콘크리트와 벽돌, 단조로운 컬러는 매력적이지 않지만 건설하기 더 실용적이고 저렴했습니다. "brutalism"이라는 단어는 "날것(가공하지 않은)"으로 번역되는 프랑스어 brut 에서 유래했습니다. 

 

제 2차 세계대전 이후 소련이 주택 위기를 해결하기 위해 브루탈리즘을 채택했으나 차갑고 가혹하며 공산주의와 연관되어 있다는 부정적인 평판으로 결국 1970년대에 쇠퇴합니다.

 

브루탈리즘 웹 디자인의 특성 중 일부입니다.

날것의 텍스트 / 시스템 글꼴 / 밑줄 친 하이퍼링크 / 웹 안전 색상 / 단색성 / 장식이 거의 또는 전혀 없는 단색 배경(그래디언트 없음) / 기하학적 구성 요소 및 날카로운 모서리 / 처리되지 않은 사진 — 즉 테두리, 음영, 반올림 등이 없습니다. / 내비게이션 열기(드롭다운 또는 햄버거 메뉴와 반대) / 섹션 간 구분선 / 테이블에 포함된 콘텐츠 / 개요 버튼

 

브루탈리스트 VS 미니멀리스트 웹 디자인

미니멀리즘은 단순함과 아름다움의 균형을 목표로 하지만 브루탈리즘은 극단적인 효율성을 강조합니다. 효과적인 전달 다시 말해 진정으로 콘텐츠 우선 접근 방식입니다. 반면에 미니멀리스트 디자이너는 더 의도적입니다. 주요 영역에 주의를 끌기 위해 스타일링이나 애니메이션을 주저하지 않습니다.

 

웹 디자인에서 브루탈리즘의 4가지 원칙

 

1. 최소한의 작업으로 필요한 작업 수행

낭비를 허용하지 않습니다. 효과적인 웹사이트를 만드는 데 필요한 것만 사용합니다. 스타일이 지정되지 않은 HTML로 작업하고 글꼴, 색상, 모양 등에 대한 기본 설정을 사용하는 것을 의미합니다. 

기능도 간단하고 단순해야 합니다. 방문자는 과도한 콘텐츠, 주의를 산만하게 하는 기능 또는 느리게 로드되는 페이지로 인해 부담을 받아서는 안 됩니다. 

 

2. 구조를 통한 견고함 과 안정성

겉보기에는 원시적으로 보일 수 있지만 이러한 스타일은 많은 강점과 안정성을 보여줄 수 있습니다. 너무 크거나 희미한 서체에게 웹 페이지가 지배당하지 않더라도 구분선, 표, 개방형 탐색과 같은 노출된 UI 구조는 사이트에 견고한 느낌을 줄 수 있습니다. 

검은색, 흰색과 같은 기본 색상과 회색, 황갈색, 구리색과 같은 자연스러운 색상을 사용하면 웹 사이트가 모델이 된 물리적 구조처럼 더 견고해집니다. 딱딱한 모서리가 있는 거칠고 불완전한 UI는 또한 더 산업적인 느낌이 들게 합니다.

 

3. 효과적인 디자인은 매력적일 필요가 없습니다.

골자만 남긴 인터페이스는 매력이 떨어질 수 있지만 사이트에 참여하고 전환하는 빠르고 쉬운 길을 원하는 사용자에게 매력은 그다지 중요하지 않을 수 있습니다. 

그렇다고 브루탈리스트 웹 디자인이 반드시 추할 필요는 없습니다. 낭비하거나 사치스럽지 않고 복잡하게 디자인된 동시대 및 현대의 브루탈리즘 건축, 가구 및 웹사이트의 예가 많이 있습니다. 

 

4. 단순함을 통한 투명성 전달

브루탈리즘이 처음 등장했을 때, 그것은 건물을 짓는 실용적이고 효율적인 방법이었습니다. 어디에서나 보이는 인위성과 가벼움에도 도전했습니다.

이와 같이 오늘날의 브루탈리즘은 힘을 전달하는 데만 유용한 것이 아닙니다. 견고하고 불완전한 인터페이스는 때로는 말로는 할 수 없는 브랜드에 대한 진실을 전달할 수 있습니다. 웹디자인의 브루탈리즘은 브랜드가 자신의 진정한 모습을 드러낼 수 있게 해주며, 한편으로 브랜드나 사람들은 그것을 드러내길 두려워할 것입니다.

 

브루탈리스트 웹 디자인의 7가지 예

1. 56 Digital

2. A2-TYPE

3. Alicia Keys

4. Apelido & Apelido

5. Balenciaga

6. Drudge Report

7. Seth’s Blog

 

출처 : 

https://elementor.com/blog/brutalism-in-web-design/