미니멀리스트 디자인의 주요 원칙
today
Today UX 아티클
Nick Babich의 Functional Minimalism for Web Design를 번역한 글입니다.
제2차 세계대전 이후의 예술 사조에 기반했던 미니멀리즘은 현대 웹 디자인에서 강력한 테크닉으로 다시 나타나고 있습니다. 이 테크닉은 겉모습보다는 내용을 우선순위에 두려는 시도를 통해 표현되기도 합니다.
제대로 적용하기만 하면, 미니멀리즘은 디자이너가 유저의 태스크를 단순화하는 데 집중할 수 있도록 도움을 줄 수 있습니다. 이는 웹사이트에도 부수적인 혜택이 될 수 있습니다. 가령 로딩 시간이 빨라지거나 다양한 스크린 사이즈 간의 호환성이 좋아지는 겁니다. 미니멀리즘의 간결성은 간단해 보일 수 있지만, 그 이면에는 단순이 “적을수록 좋다”는 것 이상이 깔려있습니다.
아래는 미니멀리스트 디자인의 주요 원칙과 모범사례입니다.
미니멀리스트 웹 디자인이란?
오늘날 유행하는 디자인 트렌드(플랫디자인, 히어로 이미지, 히든 글로벌 네비게이션 등) 중 많은 부분은 미니멀리즘에 직접적인 영향을 받은 것으로, 2000년대 초반에 시작된 웹디자인 무브먼트입니다.
구글이 현재 다양한 제품을 제공하고있지만, 홈 화면은 지난 15년간 거의 바뀌지 않았습니다.구글은 미니멀리스트 웹 인터페이스의 선구자로 여겨집니다. 그들은 1990년대 제공했던 베타 버전 이후로 지금까지 계속해서 인터페이스의 간결성을 우선순위에 두고 있습니다.
구글 검색 페이지의 성공이 미니멀리즘의 길을 닦은 것입니다.
비록 미니멀리스트 웹 디자인의 자격 요건이 정확히 무엇이냐에 대한 논란이 있긴 하지만, 대부분의 디자이너들이 동의할 만한 몇 가지 공통된 특징들이 있습니다. 미니멀리즘의 특성을 정의해봅시다.
오직 기본만
“적을수록 좋다”는 미니멀리즘의 철학은 매우 간단하게 들립니다. 웹 다지인에서는 주어진 디자인에서 기본적인 요소만 사용함으로 이를 실현할 수 있습니다. 미니멀리스트 웹 디자인 전략 중 하나는 불필요한 요소나 유저 태스크를 서포트하지 않는 콘텐츠를 제거하여 인터페이스를 간소화하는 것입니다.
왜냐하면, 스크린 상의 요소가 적어질수록, 남은 요소는 더 강력해지기 때문입니다.
이러한 논리에 따르면, 스크린상에 한 가지 요소만 남기면 그 메시지가 유저에게 전달될 수 있을 것이라고 확신할 수 있을 겁니다.
페이지에 들어간 요소가 적을수록 유저의 인지 부하는 줄어듭니다.미니멀리즘은 유저가 콘텐츠를 보는 데 방해가 되는 모든 것을 의도적으로 제거하는 것입니다. 하지만 동시에 유저에게 필요한 콘텐츠를 제거하거나 숨겨버려서 유저가 주요 태스크를 수행할 수 없게 만들고 있진 않은지 확인해야 합니다.
그러므로, 콘텐츠를 중심으로 디자인을 하고 딱 필요한 부수적 요소들(가령 주 네비게이션 같은)만 남겨서, 유저가 혼란스러워하지 않게 해야 합니다.
여백
미니멀리즘에서 가장 흔하게 사용되는 요소가 ‘아무 요소도 넣지 않는 것’이라는 점은 별로 놀라운 일이 아닙니다. ‘여백’은 미니멀리즘의 가장 중요한 특징이며, 미니멀리즘에 가장 크게 힘을 실어주는 것이기도 합니다. 여백은 유저의 비주얼 플로우를 조작하기 위해 사용됩니다.
오브젝트 주변에 여백이 많을수록, 눈길은 그 오브젝트로 가게 됩니다.
사람들이 ‘미니멀리즘’하면 떠올리는 가장 주된 디자인 요소는 여백입니다. Image credits: bouguessa시각적 특징
미니멀리스트 디자인에서는 모든 디테일이 중요합니다. 여러분이 남겨두기로 결정하는 것은 다음과 같은 필수적인 것들입니다.
플랫 텍스쳐(flat texture)
미니멀리스트 인터페이스에서는 보통 플랫 텍스쳐, 플랫 아이콘, 플랫 그래픽 요소를 사용합니다. 플랫 인터페이스는 눈에 띄는 하이라이트나 그림자, 그라데이션, 혹은 UI 요소를 화려하거나 3D처럼 보이게 만드는 다른 텍스쳐를 사용하지 않습니다.
UI 요소에 플랫 디자인을 가미해서 강조해주는 미니멀 비주얼 계층구조는 모던 웹디자인에서 흔하게 볼 수 있는 조합입니다. Image credits: F-Secure선명한 사진
이미지는 미니멀리스트 디자인에서 가장 중요한 삽화 형식입니다. 사진은 정서적 유대감을 형성할 수 있게 해주며 분위기를 조성해줍니다. 하지만 사진을 선택할 때 한 가지 핵심 팁을 기억하셔야 합니다. 바로 모든 미니멀리스트 비주얼 디자인 요소는 해당 이미지 위에 보여야 한다는 것입니다. 잘못된 이미지(예: 시선이 분산되는 복잡한 사진)를 고르면, 주변 미니멀리스트 인터페이스의 효과가 무효화될 것입니다.
미니멀리스트 디자인에서 가장 중요한 삽화 형식인 히어로 이미지는 스크롤 상단쪽에 배치되는 거대한 이미지를 뜻합니다. Credits: adablackjackgoods미니멀한 컬러 사용
미니멀리스트 디자인에서는 다른 추가적인 디자인 요소다 실제 그래픽을 사용하지 않고 시각적인 멋을 내거나 시선 집중을 하려고 할 때 컬러를 사용합니다. 적은 컬러를 가지고 디자인해야 하기 때문에, 시각적 계층구조를 만들어야 할 때면 창의력을 발휘해야 합니다.
유저가 보는 시각적 정보가 적을수록, 컬러 팔레트는 더 눈에 띄게 되며사이트의 임팩트 측면에서 더 많은 영향력을 발휘할 것입니다. Image credits: Mixd드라마틱한 서체 사용
굵은 서체는 즉각적으로 글자와 내용으로 시선을 끌어줍니다. 미니멀 디자인 및 서체 사례 중 인상적인 사례를 보면 보통 굵은 서체나 흥미로운 활자 디자인이 사용됩니다. 하지만, 굵은 서체로 관심을 끄는 것은 그 텍스트가 의미 있는 정보를 전달할 때만 유용한 방법이라는 점을 명심해야 합니다.
의미를 전달하거나 시각적인 멋을 낼 때 서체를 활용해보세요.대비 효과
상대적으로 적은 요소를 가지고 디자인해야 하기 때문에 시각적 계층 구조를 만들 때도 창의력을 발휘해야 합니다. 아래의 ‘We Ain’t Plastic’ 사례를 보면, 흰 배경에 검은 보석 원석이 배치된 미니멀리즘의 정수를 볼 수 있습니다.
많은 미니멀리스트 디자인에서 강렬한 색상 하나를 사용해 강조를 해주는 걸 볼 수 있습니다. 그 색상은 페이지에서 가장 중요한 요소를 강조할 때 사용됩니다.Credits: weain미니멀리스트 웹 디자인 모범사례
미니멀리즘이 간단하기 때문에 쉬울 것이라고 생각하면 안 됩니다. 들어가는 요소가 더 적지만, 그 적은 인터페이스 요소를 가지고 기존과 동일한 수준의 사용성을 제공해야 합니다.
스크린 당 한 가지 초점을 사용한다
“한 페이지에 한 콘셉트”이라 는룰을 따르고, 각 페이지나 스크린마다 한 요소에 집중해야 하며, 하나의 비주얼을 중심으로 모아야 합니다.
Image credits: Bureau Tonic처음 보이는 부분에서 기대감을 갖게 만든다
중요한 내용은 스크린 상단의 넓은 여백에 배치하고 스크롤을 내릴수록 콘텐츠의 밀도가 높아지게 만들어야 합니다.
애플의 홈 화면(처음 보이는 영역)신선한 카피를 쓴다
<The Element of Style>이라는 책을 보면 저자인 Strunk와 White가 “불필요한 단어는 제거하라”는 말을 합니다. 미니멀리즘에서도 마찬가지입니다. 글로 쓴 콘텐츠는 여러분이 전하고자 하는 메시지를 완전히 설명하는데 필요한 최소한의 표현만을 사용하도록 편집하세요.
불필요한 단어를 모두 제거하고 할 수 있는 한 간결하게 전달해야 합니다. Imagecredits: BFF네비게이션은 간소화하되 숨기진 않는다
네비게이션을 쉽게 만드는 것은 언제나 웹 디자인의 주요 목표 중 하나입니다. 하지만 네비게이션을 쉽게 만들라는 것이 네비게이션을 숨기라는 뜻은 아닙니다. 인터페이스를 간소화하는데 도움을 받기 위해 햄버거 메뉴를 적용하기 전에, 그렇게 하는 적절한 이유가 있는지 확인해 봐야 합니다. 햄버거 메뉴가 네비게이션 아이템을 발견하기 힘들게 만들 수도 있다는 점을 기억해야 합니다. 대부분의 경우, 항상 노출되는 네비게이션을 선택하는 것이 유저에게 더 놓습니다.
첫 번째 사이트의 네비게이션을 두 번째 사이트의 네비게이션과 비교해 보시길 바랍니다.
주 네비게이션은 클릭을 해야 보입니다.
주 네비게이션이 항상 노출되어있습니다.애니메이션을 활용한다
애니메이션 효과가 인기여서 미니멀리스트 사이트에서 애니메이션을 적용하지 않으면 낙후되어 보일 수 있다는 위험 부담이 있습니다. 하지만, 이 새로운 효과도 미니멀리즘의 원칙을 따라야 합니다: 필수적인 것만 가지고 영리하게 만들어야 하죠.
애니메이션은 사이트와의 인터랙션을 훨씬 다이나믹하게 만들어줍니다. Image credits: Intercom랜딩 페이지와 포트폴리오 사이트에서 미니멀리즘을 사용한다
콘텐츠 중심 디자인이라는 미니멀리스트의 철학이 모든 사이트에 적용되고 있긴 하지만, 미니멀리스트적 심미성이 항상 적절한 것은 아닐 수도 있습니다. 미니멀리즘은 랜딩 페이지나 포트폴리오 사이트에 적합합니다. 아래 사례처럼 간단한 목표를 가지면서도 상대적으로 내용이 적은 사이트에 말입니다.
디자이너 Brian Danaher의 포트폴리오는 미니멀리스트 사이트라고 부를 수 있는 전형적인 사례이다.더 복잡한 사이트에 미니멀리즘을 효과적으로 적용하는 것은 훨씬 더 어려울 수 있습니다. 쓰이는 요소가 부족하다는 점은 콘텐츠가 풍부한 사이트에서는 해로울 수 있습니다. 그런 경우에는, 랜딩 페이지를 미니멀하게 만들고, 거기서 복잡한 페이지로 연결되도록 만드는 것이 더 나은 선택이 될 것입니다.
자료 및 툴
Minimalist Color Palettes – 표준적인 흑백에서 벗어난 미니멀리스트 컬러 스킴을 볼 수 있습니다
https://color.adobe.com/ko/explore/
Color Contrast Checker - 배경색과 전경 색을 입력하면 대비율을 계산하여 가장 적절한 색상 조합을 보여줍니다.
결론
미니멀리스트 사이트는 유저 태스크를 서포트하지 않는 불필요한 요소나 내용을 제거함으로 인터페이스를 간소화하는 것을 추구합니다. 디자인이 사용성 요소와 세련됨을 적절히 결합시킬 때, 사이트에 진정으로 활기를 불어넣어지는 것입니다: 쉽게 원하는 내용을 찾을 수 있고, 간단한 사이트는 강력한 커뮤니케이션 형식이 될 수 있을 것입니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성전자, SK텔레콤, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
