DESIGN/WEB DESIGN

(Web Design) 미니멀리즘이 웹 디자인에 미친 영향

OnB 2022. 6. 6. 09:00

미니멀리즘을 웹 디자인에 활용하기 위한 방법과 사례 분석

 

삶의 방식으로서 미니멀리즘은 필요한 만큼만 갖는 것을 의미합니다. 밖으로 나가기 전에 오늘은 뭘 입어야 할까 항상 고민하지 않으시나요? 미니멀리즘 라이프스타일은 내 생활 패턴에 맞는 최소한 옷만을 갖추기 때문에 이런 고민할 필요가 없어집니다. 오늘 하루는 뭘 입어야 할지, 오늘 패션은 괜찮은지, 내일은 또 뭘 입어야 할지 고민할 시간에, 미니멀리즘 라이프스타일은 우리에게 중요한 무언가에 좀 더 집중할 수 있게 해 줍니다. 불필요한 것을 버림으로써 좀 더 근본적이고 본질적인 무언가에 초점을 맞추는 것 그것이 미니멀리즘이 추구하는 가치이죠.  그리고 이는 웹 디자인에도 큰 영향을 주었습니다. 서로 다른 콘텐츠로 구성된 풍성한 디자인을 심플하게 바꿈으로써 브랜드가 추구하는 가치와 메시지를 직접적으로 전달하는 것이죠.

 

하지만 막상 디자인 시안을 기획하다보면 이것도 넣고 싶고 저것도 넣고 싶어 집니다. 지금까지 쌓아온 안목이 있고, 디자인이 브랜딩에 얼마나 큰 영향력을 갖는지를 이해한다면 더 좋은 걸 추구할 수밖에 없기 때문이죠. 물론 반드시 필요한 요소라고 한다면 전부 넣어도 좋습니다. 미니멀리즘이란 필요한 요소들을 빼는 것이 아니라 불필요한 요소들을 제거하는 것이기 때문입니다. 하지만 실제로 만들어서 사람들의 반응이 보기 전까지는 불필요한 요소인지 아닌지 판별하기란 쉽지 않은데요. 그럼 미니멀리즘을 웹 디자인에 적용하기 위한 원칙과 사례를 살펴보도록 하겠습니다.

 

미니멀리즘 디자인의 원칙 4가지

1. 단 하나만을 최상단에 배치하기

음식점에서 메뉴판을 유심히 본 적이 있으신가요? 몇가지 선택지가 있는 경우, 추천/인기 품목이 제일 앞에 와 있는 경우가 많습니다. 처음 음식점을 방문하거나 오늘 뭘 먹어야 할지 고민하는 손님에게 먼저 음식을 제안하여 선택에 대한 부담과 스트레스를 줄여주는 것이죠. 이는 미니멀리즘 디자인에서도 동일하게 적용됩니다. 사업을 대표하는 제품과 서비스가 있다면, 아마 웹 사이트를 방문하는 사람들 대부분은 그 제품과 서비스에 대한 정보를 얻으려고 방문하는 경우가 많을 것입니다. 다른 상품/서비스로 유도하고 싶은 마음이 굴뚝같겠지만, 사용자의 니즈를 먼저 충족시키는 것이 먼저라는 점을 인지해야 합니다. 스크롤링을 하지 않은 사이트의 첫 화면에는 단 하나의 핵심 콘텐츠가 잘 드러나게끔 해보세요.

 

2. 정보 구분하기

각각의 요소가 갖는 목적과 의미를 정확하게 이해해야 합니다. 예를 들어 단지 기업을 소개하는 사이트를 만든다고 가정해보겠습니다. 회사가 추구하는 가치, 이루고자 하는 목표, 제공하고 있는 서비스/제품 등이 사이트에 소개될 것입니다. 그런데 여기에 회원 기능이 추가되면 어떨까요? 회원 기능을 통해 충성 고객과의 더 끈끈한 유대감을 쌓고, 회원 정보를 기반으로 빅데이터를 구축하고. 의미를 부여하자면 끝이 없습니다. 온라인 서비스를 위한 사이트라면 회원 기능이 추가되는 것이 좋을 것입니다.(서비스 유형에 따라 다름) 하지만 '회사를 소개한다'라는 목적을 가진 사이트에서는 불필요한 기능이죠. 이렇게 자신이 사용할 각 요소에 대해 보다 정확히 이해하고 이 차이점을 구분하는 것이 중요합니다.

 

3. 명확하게 만들기

콘텐츠는 가급적이면 간결하고 명확하게 보여지게끔 준비해주세요. 구구절절한 설명과 복잡한 레이아웃은 브랜드가 추구하는 가치와 메시지로 가야할 시선을 분산시킬 뿐입니다. 간단한 문장으로 회원가입, 구매에 대한 유도 문을 작성하고 버튼을 적절하게 활용해보세요. 서비스와 제품은 장점을 텍스트로 나열하기보단 제품의 특징과 타 제품과의 차별성이 잘 들어나는 고화질의 사진과 키워드로 표현하는 것이 좋습니다. 

 

4. 리소스 제한하기

색상, 폰트 등 디자인 리소스는 제한하여 사용하세요. 브랜드를 떠올리게 하는 단 하나의 색상과 폰트 그리고 통일된 콘텐츠의 크기는 디자인에 통일성을 줍니다. 디자인의 통일성은 유저들에게 편안함과 안정감을 주기 때문에, 콘텐츠를 효과적으로 전달할 수 있습니다. 마케팅에 자주 사용되는 단어 중에는 '톤앤매너'가 있습니다. 톤앤매너란 색상, 레이아웃,컨셉 등을 일관되게 사용하여 사람들이 브랜드에 대해 어떻게 느끼게 할지를 정의하는 방법론입니다. 시각적인 콘텐츠가 중요한 웹 디자인에서도 톤앤매너는 똑같이 동작합니다.

 

미니멀리즘 웹 디자인 사례

 

큰 사진, 핵심 키워드 만을 사용한 Apple의 홈페이지
미니멀리즘을 적극 활용하는 IT 선두 기업 'Apple'

Apple 웹사이트

애플은 미니멀리즘을 적극적으로 활용하는 것으로 잘 알려져 있습니다. 로고에서는 다양한 색과 입체적 디자인을 사용하다가도 화려함을 배제한 채, 한 입 베어문 사과 아이콘에 초점을 맞추어 리뉴얼하기도 했죠. 제품의 외형뿐만 아니라 그 안에 들어가는 UX, UI에도 미니멀리즘을 적극 사용하여, 사용자가 제품을 직관적으로 이해하고 사용하기 쉽게 만들었습니다. 이러한 애플의 미니멀리즘 사랑은 웹 사이트에서도 나타나는데요. 전반적으로 제품 사진들을 크게 배치하고, 핵심 키워드와 최소한의 문장만을 사용하는 것이 눈에 띕니다. 특히 홈페이지에 접속하면 아이폰 13 프로가 제일 먼저 눈에 띄게끔 사이트 최상단에 배치시켰으며, 검은색을 주로 사용하며 고급스러움과 통일성을 부여한 것이 특징입니다. 회사 규모와 다양한 제품 라인 그리고 서비스 때문에 헤더(Header)와 푸터(Footer) 영역은 다소 복잡하게 느껴질 수 있지만, 콘텐츠 영역에서는 미니멀리즘이 잘 느껴지는 것 같습니다.

 

우리는 복잡한 것이 아니라 단순한 것을 믿습니다.
<Tim Cook, Apple>

 

Nuka 원페이지 웹사이트

Nuka는 영원한 차세대 노트를 만드는 스타트업입니다. Nuka는 원페이지 방식을 사용하여 웹사이트를 구축했습니다. 노트를 홍보한다는 목적이 잘 들어나게끔 마치 실제 사이즈의 제품을 보는 듯 노트 제품을 크게 배치한 것이 눈에 띄는데요. 스크롤을 내리다 보면 텍스트 위주의 설명서가 없어도 사용법을 알 수 있을 정도로 이미지와 키워드를 직관적으로 배치한 것이 특징입니다. 회사 소개는 단 한 줄로만 표현하고 제품 소개에 집중한 모습이 미니멀리즘을 가장 잘 활용한 사례라 생각됩니다.

 

Ecoist 원페이지 웹사이트

Ecoist사의 Tian은 전기 삼륜차로, 원페이지 방식으로 사이트가 구성되어 있습니다. 강렬한 녹색을 메인 색상으로 한 디자인이 눈길을 사로잡습니다. 스크롤을 내리더라도 불필요한 텍스트는 찾아볼 수 없으며 사진, 핵심 키워드, 필요한 정보만을 배치한 것이 특징입니다. 추가적인 내용이 필요한 곳에는 라이트박스(Lightbox), 토글(Toggle), 외부 링크를 활용하여 심플한 콘셉트를 잘 유지시켰습니다.  '친환경'을 모토로 하기 때문인지, 어떻게 이 사업을 시작하게 되었는지 소개하는 부분도 있는데요. 충분히 공감할 수 있는 스토리를 담고 있고, 조직도나 과장되거나 반복된 문구가 없기 때문인지 들어가야 할 내용이 들어갔다는 느낌을 줍니다. 필요한 부분을 빼는 게 아닌 불필요한 부분을 뺀다는 미니멀리즘의 핵심을 적절히 잘 활용한 사례인 것 같습니다.

 

이렇게 미니멀리즘 웹 디자인 원칙과 사례를 알아봤는데요. 제공하는 상품과 서비스가 한정적일 때 미니멀리즘 디자인이 좀 더 효과적인 것 같습니다. N포탈이나 서로 다른 콘텐츠를 한 눈에 볼 수 있는 웹 디자인을 통해, 여러 사진과 글로 꽉 찬 화면이 익숙하게 느껴질 수도 있는데요. 익숙한 디자인을 제공하기 위해 무리하게 콘텐츠를 확장하거나 반복해서 사용하기보다는 미니멀리즘 디자인으로 표현해보는 건 어떠신가요?

'DESIGN > WEB DESIGN' 카테고리의 다른 글

웹 디자인이 여러분의 사업에 미치는 영향  (0) 2022.06.30