UX디자인과 인간심리 - 2편. 근접성의 원리
논리적인 UX디자이너 되기 프로젝트
작은 디자인 차이 하나가 사업의 성패를 좌우할 수 있습니다. 앞서서 게슈탈트 유사성의 원리를 이야기하면서 UX디자인은 논리싸움이라고 이야기한 입니다. 이런 논리 싸움에서 우위를 점하기 위해서 필요한 디자인 원칙들을 이야기하는 'UX디자인과 인간심리' 시리즈 2편인 근접성의 원리에 대해서 이야기합니다.
이전 글 'UX디자인과 인간심리 - 1편. 게슈탈트 유사성의 원리' 보기>>
근접성의 원리는 게슈탈트의 인간심리 이론에서 나온 개념인데요. 게슈탈트에 대해서는 복습을 위해 아래에 적어두었으니 이 시리즈를 처음 보시는 분들은 참고하시기 바랍니다.
* 게슈탈트(Gestalt) 이론이란?
게슈탈트는 독일의 20세기 초 독일과 오스트리아의 심리학자들에 의해서 소개된 개념으로 사전적 의미는 '형태', '배열'입니다. Gestalt의 핵심은 "전체는 개별요소의 합보다 크다(the whole is more than the sum of its parts.)"로 사람들은 무엇을 볼 때에 개별 요소만 들여다보지 않고 전체적인 패턴, 배열을 보려는 경향이 있다고 봅니다. 이러한 인간심리를 안다면 훨씬 더 효과적으로 사용자에게 도움이 되도록 화면을 디자인할 수 있겠죠? 참고로, 게슈탈트 이론은 제가 UI디자인의 경력을 쌓기 시작할 무렵 알게 된 개념으로 UI디자인을 잘하는데에 정말 많은 도움을 받았습니다.
근접성의 원리 (Proximity): 사람들은 유사한 것들 안에서 패턴을 찾는다.
사람들은 무엇을 볼 때에, 가까이 있는 물체들은 서로 연관성이 있다고 보는 경향이 있다고 합니다. 즉, 사람들은 서로 이웃해 있는 요소들과 그렇지 않은 요소들을 구분지으려고 합니다. 예를 들어볼게요. 아래 그림을 보시면, 무엇이 보이시나요?
동그라미 9개가 보이셨을 겁니다. 그리고 각 동그라미들은 서로 인접해있습니다. 이 안에서 어떤 그룹들이 서로 편이 갈라져있다고 보이진 않으셨을 거에요. 그러면 이제 다음 그림을 보시기 바랍니다.
동일하게 9개의 동그라미가 있습니다. 하지만, 아래에 있는 3개의 동그라미가 위 6개와 인접해 있지 않기 때문에 분리되어 있는 것처럼 보입니다. 즉, 위 6개의 동그라미가 하나의 그룹, 아래 3개가 하나의 그룹으로 나뉘어 2개의 그룹으로 구별하게 됩니다. 이렇게 근접한 정도에 따라 구분 짓고, 그룹 짓는 사람들의 심리 때문에 이를, 근접성 (Proximity)의 원리라고 부릅니다.
근접성의 원리에서 핵심은 '거리'입니다. 요소들 간의 거리를 가깝게 하거나, 멀게 하여 그룹을 명확하게 구분해줄 수 있는 것입니다. 거리가 가깝다면 하나의 그룹으로, 거리가 멀다면 다른 그룹으로 인식하는 것이지요.
이 원리는 간단하지만, UX디자인에 굉장히 효과적으로 활용될 수 있습니다. 우리가 일상적으로 사용하는 많은 앱, 웹사이트의 화면들이 이 원리를 적용하고 있습니다. 이 원리가 잘 적용이 안 되어 사용자를 괴롭히는(?) 경우도 많이 있구요.
아래를 보시면 거리감을 어떻게 활용하면 그룹화를 더 잘할지 보이실 겁니다. 확실히 오른 쪽이 이름과 지역이 묶음으로 잘 되어져 보이기 때문이지요.
그렇다면 이것이 제품 및 서비스의 UX, UI를 디자인할 때에 실질적으로 어떻게 적용될 수 있는지 알아보겠습니다. 아래는 미국의 오프라인 유통업의 전통강자인 Walmart의 이커머스 웹사이트입니다. 참고로, Walmart는 Jet.com을 인수한 이후로, 이커머스 마켓 쉐어를 야금야금 늘려가면서 이커머스 1위인 아마존을 점점 위협하고 있습니다. Walmart UX는 좋은 사례로도 참고하기 좋을 정도로 수준이 많이 올라왔습니다.
그러면 질문을 드릴게요. 근접성의 원리가 어떻게 적용되었는지 보이시나요?
첫번째 열에서 상품과 텍스트가 인접해 있고, 아래의 열에 있는 상품들과는 거리가 떨어져 있기 때문에 하나의 그룹으로 구분되어 보입니다. Walmart는 근접성의 원리를 적용해서 상품과 텍스트를 붙이고, 아래 상품군과는 떨어뜨려 사용자로 하여금 빠르게 그룹을 인지할 수 있도록 한 것입니다. 그리고 두 열 사이에 하얀색의 여백을 형성해서 상품들에 대한 시각적인 가시성을 높이고 정보의 흐름을 더 효율적으로 만들어주었습니다.
디자이너는 유사성의 원리를 활용해서 사용자가 깊이 생각을 하지 않고도 그룹을 구별할 수 있도록 해줄 수 있습니다. 예를 들면, 사용자는 Walmart의 예시에서 레고 그림과 아래에 있는 'Toys' 텍스트를 보면서 둘 중 무엇을 클릭해도 같은 곳으로 나를 안내해줄 것이라고 생각할 수 있습니다. 반대로, 근접성의 원리가 제대로 적용되어 있지 않다면 어떤 문제가 발생할까요? Walmart가 이 원리를 적용하지 않았을 경우 어떻게 보일지 제가 약간 수정을 해봤습니다.
위 그룹과 아래의 그룹의 거리를 좁혀봤는데요. 그룹에 대한 명확한 구별이 잘 되지 않는 걸 느끼셨을 겁니다. 특히, Home 글자를 보시면 이 글자가 위 믹서기에 대한 것인지, 아래 옷과 연관된 것인지 그룹이 애매해집니다.
이 원리를 이해하셨다면, 여러분들이 일상적으로 사용하는 웹사이트, 또는 앱에서 근접성이 어떻게 적용되었는지 보이기 시작할 겁니다. 특히, 제품 이미지와 글자는 사용자 경험을 이루는 핵심 요소이기 때문입니다. 몇가지 예시를 더 보여드리겠습니다.
에어비앤비 예시
요즘 코로나 바이러스로 어려움에 직면해 있지만, 어쨌든 글로벌 1위 숙박 플래폼 에어비앤비 사례입니다. Walmart와 마찬가지로 그림과 아래의 텍스트는 인접하게, 아래 열의 제품과는 거리를 멀게 해주어 사용자 입장에서는 쉽게 그룹을 인지할 수 있게 해주었습니다.
그룹화 뿐 아니라 컨텐츠의 편안한 소비도 돕는 근접성의 원리 - 크몽 예시
아래 예시는 프리랜서 마켓플레이스인 크몽입니다. 크몽 사례의 경우 섹션 사이에 여백을 두어 스크롤을 내림에 따라 나타나는 다른 섹션에 대해 구분이 잘 되도록 해주고 있습니다. 그리고 이런 여백은 화면을 보는 사용자 입장에서 좀 더 편안하게 컨텐츠를 소비할 수 있게 도와줍니다. 모든 것이 빽빽하게 몰려있다면 답답함이 느껴질 수 있는 것이지요.
거리를 충분히 사용하지 않을 경우 생기는 답답함
제가 한때 애용했던 디시인사이드입니다. 이 웹사이트만의 추구하는 바가 있을 것이고, 제 생각이 주관적일 수도 있겠지만, 저는 요소 간의 거리가 많이 없어서 조금은 답답함을 느낍니다.
정리하며... 'UX기본기를 탄탄하게 해주는 근접성의 원리'
다시 말씀드리자만, 작은 디자인의 차이는 사업의 성패에 영향을 미칠 수 있습니다. 그리고 어떤 큰 것도 작은 것들의 집합체이기 때문에 작은 디테일들이 모여 웹 사이트 또는 앱 전체의 퀄리티를 결정하게 됩니다. 근접성의 원리는 디자이너들이 탄탄한 기본기를 다질 수 있는 좋은 원리라고 생각되어 소개해봤습니다.
글쓴이 '에릭'을 소개합니다.
5년 전 유학을 와서 지금은 뉴욕의 테크 Scene에서 프로덕 디자이너로 일을 하고 있습니다. 두 아이의 아빠이며 육아와 요리, 교육에 관심이 많습니다.
'비전공자/입문자를 위한, 쉽게 이해하는 UX디자인 개론' 강의를 하고 있습니다.
UX를 전공하지 않은 분들, 학교에서 UX를 막 공부하기 시작한 분들이 쉽고 재미있게 UX분야에 입문할 수 있도록 첫 걸음을 안내해 드립니다. UX와 UX디자인의 본질에 대해서, 10년 동안 이 업계에 있으면서 기업, 스타트업, 테크 회사, 프리랜서 등 다양한 곳에서 실무를 하며 얻은 노하우를 알려드리고 있습니다. UX디자이너가 어떻게 사용자에 대해서 배우고, 문제를 발견하며 솔루션을 만들어나가는지, 개발자, PM과는 어떻게 협업을 하는지 경험들을 대방출합니다.
탈잉에서는 위의 UX디자인 개론 강의를 1:1로 과외를 진행하고 있습니다.
SNS를 통해 UX, UI 공부를 위한 정보를 공유하고 있으며, 오픈 1:1 채팅을 통해 상담 문의를 받고 있어요.
인스타그램 / 페이스북 / 1:1 카톡 오픈채팅
