미니멀리스트 디자인 UX 4가지 원칙
UX 디자인 배우기 #100
Today UX 아티클babich.biz에 올라온 Nick Babich 의 글 Best Practices for Minimalist Design을 원저자의 허락을 받아 번역한 글입니다.
모바일 기기 사용이 늘어남에 따라 미니멀리즘이 유행하고 있습니다. 미니멀리즘은 로딩 시간을 줄여주고 다양한 스크린 사이즈 간에 호환성을 높여 주어 앱과 웹사이트를 보다 나은 방향으로 만들어 줍니다. 훌륭한 사용성과 결합된 아름다운 미니멀리스트 앱은 굉장히 인상적입니다. 원하는 것을 찾기 쉬우면서도 간단하게 만든 앱은 굉장히 파워풀한 커뮤니케이션 형식입니다.
디자이너는 더 적게 보여줌으로 더 많은 얘기를 하고 싶어 합니다.
'
하지만 동시에 미니멀리즘은 제대로 만들기가 굉장히 어렵기도 합니다. 디자이너에게 더 적은 것을 통해 많은 얘기를 하라고 강요하기 때문입니다. 미니멀리즘을 시도해 보고자 한다면 시작하기 전에 기본 경험법칙을 알아야 합니다. 다음은 제대로 미니멀리즘을 적용하는 몇 가지 팁입니다.
1. 모든 부가적인 요소는 제거한다
디자인에 들어가는 모든 아이템은 목적을 가지고 있어야 합니다
미니멀리스트 디자인에서는 대충 버릴 수 있는 부분이 없습니다. 페이지에 들어가는 모든 요소는 어떠한 의도를 가지고 있어야 합니다. 모든 요소는 목적을 위해 존재해야 하는 것이죠. 그렇게 만들어진 디자인은 완전히 기본적인 구성요소를 제외한 모든 요소를 뺀 것이 됩니다.
Antoine De Saint-Exupery 은 이렇게 말을 했습니다.
“더 이상 더할 것이 없을 때, 하지만 더 이상 뺄 것도 없을 때 완벽해지는 것이다.”
메시지가 명확하게 표현되어 있으며 불필요한 클러터는 스크린에서 빠져 있습니다.팁
무엇을 남기고 무엇을 뺄지 결정할 때는 신중해야 합니다.
특색 없는 스톡 사진은 잊어버리세요. 이미지는 메시지를 명확하게 전달하는 데 필수적인 게 아니라면 사용하지 않아야 합니다.
모든 불필요한 말을 제거하고 가능한 간결하게 의사소통하세요. 텍스트 카피에는 메시지를 완전히 설명하는 데 필요한 최소한의 정보만 담습니다. 동시에, 텍스트 카피에는 모든 의미 있는 정보를 담아야 합니다. 의미 있는 정보의 감소는 혼란을 낳으며 결점 있는 사용자 경험을 만들게 됩니다.
2. 스크린 당 하나의 초점을 만든다
메시지를 가다듬습니다.
스크린 상에 요소가 적을수록 남아있는 요소는 더 강력해집니다. 미니멀리스트 철학은 콘텐츠를 중심으로 디자인을 해야 한다는 아이디어에 초점을 맞춥니다. 콘텐츠가 왕이며 비주얼 레이아웃은 콘텐츠를 호위하는 무사들입니다. 불필요한 장애물을 제거할 뿐만 아니라 콘텐츠에 집중함으로 메시지를 보다 명확하게 전달한다는 개념이죠. 따라서 깔끔한 미니멀리스트 디자인에서는 콘텐츠를 강조해줘야 하며 행동 유도 버튼은 애매하지 않은 방식으로 명확하게 만들어야 합니다.
계층구조는 내용을 이해하기 쉽게 만듭니다. 팁
대략적인 콘텐츠에서 시작하여 유저가 찾기 쉽게 인터페이스를 만들어가야 합니다.
3. 컬러 스킴(color scheme)을 간소화한다
사용하는 컬러의 개수를 제한합니다.
컬러 스킴을 간소화하는 것은 사용자 경험을 개선해주는 반면, 너무 많은 색상을 사용하면 부정적 영향을 미칠 수 있습니다. 하지만, 컬러스킴을 제한하라는 것이 곧 강조 색상 하나에 흑백만 사용해서 디자인해야 한다는 뜻은 아닙니다. 미니멀리스트 디자인의 개념은 정확하게 디자인을 그리고 계층구조를 만들기 위해서 꼭 필요한 컬러만 사용하는 것입니다.
iOS용 Clear 앱은 시각적으로 태스크의 우선순위를 보여주기 위해 유사한 컬러 스킴을 사용합니다.
팁
디자인에 강렬한 색상을 사용하는 걸 고려해보세요. 크기를 키운 폰트와 강조 색상은 추가적인 시각적 힌트 없이 스크린 상의 특정 영역으로 유저의 관심을 끌어줍니다.
강조하는 컬러는 스크린 상의 특정 영역으로 유저의 관심을 끌어줍니다. Image credit: Dribbble4. 여백을 충분히 활용한다
여백은 어수선해지는 것을 피할 수 있게 해줍니다.
여백은 콘텐츠 사이에 있는 빈 공간으로, 꼭 하얀색일 필요는 없습니다. 여백은 미니멀리즘의 필수적 재료입니다. 스타일을 시각적으로 포괄적이면서도 읽기 쉽게 만들어주는 것이죠. 여백을 채워야 하는 빈 공간으로 보는 대신, 프레임이자 콘텐츠의 경계선이라고 생각하세요.
Medium에서는 타이포그래피, 여백, 밝은 회색을 매우 깔끔하게 활용했습니다.팁
거리가 멀수록 주의를 끌게 됩니다. 요소들 주변의 여백을 늘려서 요소를 좀 더 알아보기 쉽게 만들어줄 수 있습니다. 여백이 콘텐츠 사이에서 논리적 패턴으로 유저의 눈길을 끌 수 있게 만들도록 하세요.
iOS 버전 Sky 앱은 계층구조를 만들고 내용을 좀 더 이해하기 쉽게 만들기 위해 여백을 활용하였습니다.
결론
미니멀리스트 인터페이스는 좋은 디자인을 만드는 분명한 방법이지만, 목표라고 할 수는 없습니다.
형태는 기능에 따른다 (Form follows function)
이 말은 곧 ‘심플하고 결점 없는 디자인을 만드는 것이 궁극적 목표’라는 뜻으로, 디자이너가 사용성으로 디자인을 정제했을 때 만들어낼 수 있습니다. 기억하세요, 미니멀리즘은 그냥 요소들을 제거하는 것이 아닙니다. 스토리를 전달하기에 충분할 만큼만 더하는 것입니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
