brunch

매거진 디자인 그리고 프로덕트

라이킷 103 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by eric Apr 04. 2020

UX디자인과 인간심리 - 1편. 게슈탈트 유사성의 원리

논리적인 UX디자이너가 되는 유사성의 원리

UX디자인은 논리싸움입니다. 작은 디자인 차이 하나가 사업의 성패를 좌우할 수 있기 때문에 왜 이러한 의사 결정을 내렸는지 명확한 논리가 있어야 합니다. 예를 들어 온라인 쇼핑몰의 제품 상세 화면에서 중요한 구매하기 버튼을 디자인한다고 가정해봅시다. 구매하기 버튼을 어디에 두었는지, 버튼의 문구를 무엇으로 하였는지에 따라 실제로 구매로 이어지는 비율이 엄청나게 달라질 수 있습니다. 이런 결정을 잘 내리기 위해서 정성적 또는 정량적 테스트도 해야 하고, 공부도 많이 해야 하겠지만, 제가 생각할 때 제일 효율적으로 빠르게 공부할 수 있는 방법은 다양한 실험을 통해, 그리고 많은 디자이너들에게 이미 널리 사용되고 있는 디자인 원칙을 공부하는 것입니다. 디자인 원칙으로 UI, UX 분야에 바로 활용될 수 있는 게슈탈트 심리이론이 있습니다. 그 안에서도 오늘은 유사성의 원리에 대해서 소개해드리겠습니다.

게슈탈트 (Gestalt)는 독일의 20세기 초 독일과 오스트리아의 심리학자들에 의해서 소개된 개념으로 사전적 의미는 '형태', '배열'입니다. Gestalt의 핵심은 "전체는 개별요소의 합보다 크다(the whole is more than the sum of its parts.)"로 사람들은 무엇을 볼 때에 개별 요소만 들여다보지 않고 전체적인 패턴, 배열을 보려는 경향이 있다고 봅니다. 이러한 인간심리를 안다면 훨씬 더 효과적으로 사용자에게 도움이 되도록 화면을 디자인할 수 있겠죠? 참고로, 게슈탈트 이론은 제가 UI디자인의 경력을 쌓기 시작할 무렵 알게 된 개념으로 UI디자인을 잘하는데에 정말 많은 도움을 받았습니다.

유사성의 원리 (Similarity): 사람들은 유사한 것들 안에서 패턴을 찾는다.

사람들은 무엇을 볼 때에, 그 안에 유사해 보이는 요소들을 찾고, 그것들을 그룹화하려는 경향이 있다고 합니다. 예를 들어볼게요. 아래 그림을 보시면, 무엇이 보이시나요? 원형과 사각형 두 개의 그룹이 보였을 겁니다.

그렇다면 이제 이것이 UX, UI를 디자인할 때에 실질적으로 어떻게 적용될 수 있는지 알아볼까요? 아래는 강의 마켓플레이스인 탈잉의 홈페이지입니다. 화면을 보면 어떤 그룹들이 발견되시나요?

강의 플래폼 탈잉의 홈페이지

저는 이 화면을 볼 때에 유사성을 기준으로 3개의 그룹이 보였습니다. 상단 메뉴 바, 중간의 배너, 하단의 카테고리였습니다. 이는, 상단 메뉴 바는 텍스트, 배너는 카드, 카테고리는 아이콘과 텍스트라는 패턴을 지니고 있기 때문입니다.

디자이너는 유사성의 원리를 활용해서 각 그룹에 뚜렷한 목적을 부여할 수 있습니다. 예를 들어, 탈잉에서 배너 부분을 보는 사용자는 깊이 생각하지 않아도 '아, 이 섹션은 이 회사에서 제일 밀어주는 강의들이구나'라고 알 수 있는 것이지요. 만약에 중간의 배너 공간에 어떤 것은 카드 형태로, 어떤 것은 텍스트만 있는 형태로 뒤죽박죽 되어 있다면 어떨까요? 사용자들이 이 곳을 배너로 인식하기 어려울 것입니다.

사람들이 인지하기 쉽도록 유사성을 높여준다면, 각 요소에 대한 목적을 쉽게 알 수 있도록 도와줄 수 있는 것입니다. 형태 외에도 유사성을 높이기 위해서 색, 사이즈, 드롭쉐도우, 코너 부분에 대한 라운딩 등 다양한 방법을 사용할 수 있습니다. 특히 색은 유사성을 크게 높여줄 수 있는데요. 각 화면에서 가장 강조하고자 하는 메인 CTA버튼의 경우, 색을 통해 그 존재감을 드러낼 수 있습니다.

색상을 활용해 유사성 끌어올리기

아래는 마켓컬리의 제품 상세 페이지입니다. 마켓컬리는 보라색을 버튼과 같이 'Action (사용자의 행동)'과 관련된 요소 또는 사용자가 꼭 봤으면 하는 'Importance(중요도)'가 높은 부분에 적용하기로 한 것 같습니다. 다른 요소 대비 보라색을 쓴 부분이 눈에 확 들어올 수 있도록 차별화하는 것이지요. '장바구니 담기'에 보라색을 사용해서 사용자로 하여금 다음 스텝으로 어떤 행동을 취해야 하는 지 명확하게 제시를 하고 있다고 보여집니다.

마켓컬리의 제품 상세 페이지

형태와 사이즈의 유사성을 통해 시각적 우선순위 만들기

아래 에어비앤비의 경우 상위 카테고리라고 할 수 있는 '도시'는 모두 닫힌 형태의 타일 형식을 갖고 있고, 실제 숙박 시설들에 대해서는 열린 형태의 타일 형식을 갖고 있습니다. 그리고 사이즈에도 변화를 주었습니다. 이와 같이 형태와 사이즈의 유사성을 활용하면 사용자에게 시각적 우선순위가 형성됩니다. 즉, 유사성이 있는 다른 그룹에 대해 각각의 목적성을 부여할 수 있는 것이지요. 디자이너는 형태와 사이즈의 유사성을 활용해서 정보의 체계를 만들 수 있습니다.

아래는 미국 온라인 쇼핑몰 중 하나인 Jet.com의 랜딩 페이지인데요. 에어비앤비와 비슷하게 유사성의 원리를 활용하고 있습니다. 상위 카테고리와 실 제품의 형태에 차별화를 두어 정보의 우선순위, 시각적 체계를 만들어주고 있습니다.

정리하며..

정리하자면, 유사성의 원리를 잘만 활용한다면, 사용자에게 정보를 전달함에 있어서 효율성을 끌어올릴 수 있습니다. 뿐만 아니라, 사업적인 측면에서도 주요 화면에 대한 화면전환률을 끌어올려서 매출, 수익을 올리는데 직접적으로 영향을 미칠 수 있습니다. UX, UI디자이너가 인터넷 기반의 테크 회사, 스타트업의 성공에 있어서 왜 필수적인지 확인해주는 대목이기도 합니다.

[UX디자인 개론 강의 무료 쿠폰 안내]

UX디자인 공부를 이제 막 시작하셨나요? UX디자인 입문을 하려고 하는데 어디서부터 어떻게 해야 할지 고민중이신가요? 인프런에 개설한 '비전공자/입문자를 위한, 쉽게 이해하는 UX디자인 개론' 강의 "무료 수강 쿠폰"을 드립니다. (강의 원가: 7만 5천원)

UX를 전공하지 않은 분들, 학교에서 UX를 막 공부하기 시작한 분들이 쉽고 재미있게 UX분야에 입문할 수 있도록 첫 걸음을 안내해 드립니다. UX와 UX디자인의 본질에 대해서, 10년 동안 이 업계에 있으면서 기업, 스타트업, 테크 회사, 프리랜서 등 다양한 곳에서 실무를 하며 얻은 노하우를 알려드리고 있습니다. UX디자이너가 어떻게 사용자에 대해서 배우고, 문제를 발견하며 솔루션을 만들어나가는지, 개발자, PM과는 어떻게 협업을 하는지 경험들을 대방출합니다. 이 강의는 평점 4.8, 수강평 115개, 1004명이 신청한 강의(2024년 5월 기준)로 많은 수강생 분들로부터 좋은 평가를 받은 강의입니다. 강의를 통해서 보다 빠른 UX입문과 커리어 목표 달성을 응원합니다.

아래 설문을 참여하시면 강의를 무료로 들을 수 있는 쿠폰을 바로 확인하실 수 있습니다 .

"UX디자인 개론" 강의 무료 쿠폰 받으러 가기>>