웹 디자인에서의 미니멀리즘이란

Thobeck

초보자들이 자주 하는 실수가 고작 "무언가를 지워버리는 것"을 미니멀리즘이라고 혼동하는 겁니다. 미니멀리즘은 인터넷이 있기 수십년 전부터 있어온 예술적 스타일이며, 웹 디자인의 핵심원칙으로 자리잡고 있습니다. 만약 미니멀리즘을 단순히 여백이나 그리드 레이아웃 자르기에 관한 것이라고 생각한다면, 그건 종이인형 자르기와 다를바 없을 겁니다. 

앞으로의 이야기는 미학뿐만 아니라 미니멀리스트의 철학과 웹 UI 디자인이 결합된 몇 가지 주요 포인트를 설명해 드리고자 합니다. 우선, 미니멀리즘으로부터 긍정적 효과를 본 몇몇 회사들을 살펴볼 것이며, 다음으로 특정 가이드라인을 살펴본 후, 몇가지 유용한 체크리스트를 알려드리겠습니다. 

누가 미니멀리즘을 사용해야 하는가

미니멀리즘은 뚜렷한 기능들이 없기를 원하기 때문에, 보통 에이전시 사이트나 예술/디자인 포트폴리오 사이트에서 흔하게 사용됩니다. 그래서 대형 비지니스에서는 콘텐트 목록이나 부서마다의 우선사항들이 서로 다르기 때문에 사용하기에 곤란할 수 있습니다. 

medium

대형 콘텐츠 사이트에서는 미니멀리즘이 놀랍도록 효과적입니다. 왜냐하면 미니멀리즘은 둘째 기능을 잘 다듬는 것에서는 두말할나위 없으며, 잘 정돈된 인터페이스가 콘텐츠를 더욱 부각시키기 때문입니다.

그러나 광고가 많은 사이트에서는 최악의 상황을 겪을 수 있습니다. 그 이유는 미니멀한 스타일이 광고 서버에서 날아올 무작위 광고들과 너무나 차이가 나기 때문입니다. 주요 콘텐트와 주로 분리되어 있는 그 광고들은 디자인과 어울리지 못하며, 사용자로 하여금 콘텐트에 집중하는데 방해하기까지 합니다. 

twodots

보통 온라인 쇼핑 사이트가 미니멀리스트 디자인 컨셉에 맞는 경우도 있습니다. 그러나 모든 미니멀리스트한 것이 방대한 양의 정보를 설명하거나 상품을 주로 팔아야 하는 곳에서 현실적이라고 볼 수만은 없습니다. 

물론, 온라인 쇼핑 사이트의 타입에 따라 크게 좌우됩니다. 아래 사이트처럼 마우스 호버를 통해 필요한 정보를 노출시키는 방법으로 미니멀리스트 사용에 따른 단점을 보완할 수도 있습니다. 하지만 기억해야 할 점은, 이것만이 유일한 방법인데, 그 이유는 콘텐츠가 복잡하지 않으며 사용자를 위한 최선이기 때문입니다.

over clothing

이베이Ebay나 아마존Amazon 같은 일반적인 대형 온라인 쇼핑 사이트에서는 미니멀리스트가 잘 먹히지 않을 겁니다. 저런 곳은 복잡한 정보구조를 필요로 하며, 더 넓은 층을 소화하기 위해 전통적인 UI 디자인을 선호할 겁니다. 

어린이 사이트도 마찬가지로 미니멀한 구조를 피해야 합니다. 단순한 디자인은 아이들에게는 “지루하게“ 보입니다. 현란한 색과 자극적인 것들로 짧게 자주 아이들의 주의를 사로잡아야 합나다. 미니멀리즘한 느낌을 풍기기만해도 어린이 사용자를 잃게 될 겁니다. 

예를 들어, 아래 밥더빌더Bob the Builder 사이트를 보면 밝고 다양한 컬러, 자동 실행되는 오디오 등 얼마만큼 자극적인지를 알 수 있습니다. 어른들의 감성으로는 그 효과가 엄청나죠. 하지만 어린 아이들을 대상으로 주의를 끌려면 이건 너무나도 당연한 겁니다. 

bob the builder

미니멀리즘이 모든 사이트의 디자인을 위한 디자인이 될 수는 없어도, 사이트에 어느 정도 적용해서 더 많은 것을 이끌어내볼 수 있습니다. 특히 시각적 계층구조를 명확히 하고 싶다면 미니멀 디자인 철학을 홈페이지 적용해볼 수 있는데요, 이를 통해 사용자가 페이지를 콘텐츠 문맥 그 이상으로 생각하게끔 할 수 있습니다.

콘텐츠 우선주의: 미니멀리즘의 함성

미니멀리즘의 핵심이 콘텐츠를 강조한 이래로, 이야기를 가지고 디자인에 접근하는 콘텐츠 우선주의는 언제나 유용할 것입니다. 로렘 잎섭Lorem Ipsum 텍스트를 가지고 와이어프레임이나 프로토타입을 만드는 대신, 러프한 콘텐츠를 가지고 디자인을 시작하면서, 동시에 그 두가지를 동일선상에서 맞춰가면서 반복을 거듭하며 작업해 나가보세요.

각각의 페이지의 목적을 명확히 하고, 각 사이트 섹션마다 내용을 맵핑합니다. 그런 다음 각 페이지 사이의 관계를 점검하고, 어색하거나 부자연스럽지 않게 잘 맞춘 다음, 콘텐츠(텍스트와 이미지)를 만들기 시작합니다. 초안이 만들어지면, 러프한 콘텐츠를 가지고 와이어프레임과 프로토타입을 만듭니다. 이렇게 하면 디자인할 때 사용할 수 있는 튼실한 콘텐츠의 토대를 마련할 수 있게 됩니다. 

squarespace  

미니멀리즘은 단순히 그러한 느낌 그 이상의 디자인 철학임을 기억하세요. 하얀 백그라운드에 텍스트만 있는 인터페이스나 엄격한 그리드 레이아웃으로 된 종류의 비슷한 미니멀리스트 사이트는 많이 봐 왔습니다. 그러나 단순히 그러한 느낌보다는 미니멀리즘의 정신을 따르는 것이 더 중요합니다. 

실전을 위한 체크리스트

미니멀리즘에 관한 모든 것이 꼭 추상적이거나 주관적이진 않습니다. 여기 미니멀리즘을 위한 몇 가지 중요한 규칙을 알려드립니다. 

메인 섹션의 수 제한하기

사이트 콘텐트를 그룹 지어서, 최대 5개 이하로 된 메인 카테고리에 모두 담으세요. 단순한 구조는 심플함의 초석이 될 겁니다. 

정말로 필요한 요소가 무엇인지 알기

로고, 내비게이션, 바디 콘텐트, 연락처 등 중에서 사이트를 위한 진정한 필수요소가 무엇인지를 알아내세요. 그리고 그것이 없어도 웹사이트가 잘 돌아갈지 자문해 보세요. 우선사항 순으로 리스트를 작성한 후, 상위 다섯개만을 골라 사용해 보세요.

그리고 그 외에 것들은 다 지우기

위의 다섯개 외에 것들은 다 지워버리세요. 

페이지당 한가지 핵심 컨셉만을 가지기

혼란을 가중시키거나 집중을 떨어뜨리지 않도록 페이지당 한가지 핵심 컨셉만을 가져야 합니다. 스크롤을 하는 섹션에서도 이는 마찬가지 입니다. 

내실을 다져가는 동안에도 꾸준히 제거하기

매 단계마다 꾸준히 불필요한 것들을 지워나가는 것이 중요합니다. 정말로 중요하고 필수적인 요소들만을 남겨두세요. 

기본적인 디자인만을 가지고 시작하기 

로우파이 와이어프레임이든, 흑백 디자인이든, 최소한의 것만을 사용해서 시작한 디자인은 군더더기 없이 정말 필요한 것들만을 볼 수 있도록 도와줍니다. 

선택항목 최소화하기

사용자에게 선택항목에 제한을 걸면, 그 다음으로 취해야 할 행동이 훨씬 분명해집니다. 정보의 계층구조를 잘 기획해서 기본 내비게이션 메뉴에서 수십개 이상의 아이템을 한꺼번에 모두 보여주지 않도록 합니다. 

원문: How to do nothing in web design

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.