👀 UI/UX 좋아보이게 만들기 2편:근접성의 법칙

 

안녕하세요. 여러분! 프루티드 디자인입니다.

오늘은 지난번에 이어 UI/UX 좋아보이게 만들기 2편 : 근접성의 법칙를 준비하였습니다.

 

'UI/UX'좋아보이게 만들기는 게슈탈트 이론에 기반하여

사람이 사물을 인지하는 기본 원칙을 알아보는 시리즈입니다.

 

1편에서는 전경과 배경에 대해 설명해드렸는데요,

오늘은 근접성의 법칙이 무엇인지, 실제로 어떻게 활용되는지 함께 알아보도록 하겠습니다.

 

반응형

 

게슈탈트 이론 : 근접성의 법칙

 

우리의 뇌는 서로 가까이 있는 요소들을 멀리 떨어져있는 요소보다 연관지어 인식합니다.

뇌는 기본적으로 복잡함 속에서 그룹을 짓고 패턴을 찾으려는 경항을 보이는데요,

그 중에서 근접성의 법칙은 '거리'에 초점을 맞춰,

도형의 모양이나 색상과는 상관없이 거리가 가까운 도형끼리 집단으로 인식하는 것을 설명하고 있습니다.

 

 

따라서 위 그림처럼 형태 다른거나 색상이 다른더라도,

거리에 따라 가까이 있는 객체끼리 그룹을 만들어 인식되는 것을 확인할 수 있습니다.

 

이를 UI/UX에 활용한다면 형태나 색상이 다른 객체끼리의 거리를 조절하여

시각적으로 그룹화하여 보여줄 수 있겠죠.

 

 

 

공동 영역

 

하지만 가까운 거리에 근접해 있는 객체더라도, 두가지 그룹으로 분리시킬 수 있습니다.

방법은 매우 간단한데요, 바로 같은 영역으로 묶는 것이죠.

이는 게슈탈트 이론에서 공동영역이라 불리며,

거리, 형태, 색상에 상관없이 같은 영역에 놓인 것은 같은 그룹으로 인지된다는 것을 의미합니다.

 

 

위 그림처럼 색상, 거리, 모양에 상관없이 같은 영역으로 강제로 묶게된다면,

하나의 그룹으로 인지하게 된답니다.

이는 인포그래픽과 같은 데이터 시각화 작업에서 멀리 떨어져있는

객체를 하나로 묶어서 보여줘야하는 상황에 사용하거나,

웹/앱의 GNB 카테고리 영역에서 여러 카테고리를 일목요연하게

묶어서 보여줄 때 유용하게 사용할 수 있습니다.

 

 

 

예외의 경우 : 대칭

 

하지만 거리가 가깝다고해서, 모두 하나의 그룹으로 인지되는 것은 아닙니다.

예외 경우도 존재하는데요, 바로 대칭의 경우입니다.

사람은 무의식적으로 대칭을 찾아내는 경향이기 때문에 다른 영역,

먼 거리에 있더라도 대칭이라 인지하게되면 같은 그룹인지해버리고 맙니다.

이는 근접성의 법칙, 공동영역 보다 우선되는 조건입니다.

 

대칭은 근접성의 법칙, 공동영역보다 우선되는 법칙입니다.

 

여러분은 위 그림이 어떻게 그룹지어 보이시나요?

대부분의 경우 같은 도형끼리 그룹지어 인식하셨을텐데요,

근접성의 법칙에 따르면, 가까운 거리에 있는 것들끼리

묶어서 인식이되어야하지만 실상 우리의 뇌는 대칭을 우선시하기 때문에

대칭을 이루는 같은 도형끼리 묶어서 인식된 것을 확인할 수 있습니다.

 

 

 

 

실사용 사례 : GNB, LNB

 

출처 : 토스

 

GNB란 Global Navigation Bar 의 약자로, 모든 웹 상단 노출되어 내가 어떤 페이지에 위치든지

쉽고 빠르게 원하는 페이지로 이동할 수 있게끔 역할을 하는 영역입니다.

토스의 웹사이트를 예시로 최상단의 붉은색 영역이 GNB에 해당합니다.

근접성의 법칙에 따라 토스의 GNB 영역은 [로고], [카테고리], [언어변경] 3그룹으로

나누어져서 인식되게 됩니다.

 

출처 : 애플

 

LNB는 Local Navigation Bar의 약자로 GNB 영역의 카테고리를 선택하였을 때

나오는 하위 카테고리를 의미합니다.

애플 웹사이트를 예로 GNB영역의 '스토어'에 마우스를 올려놓으면

하위메뉴인 LNB가 위 그림처럼 나오게 됩니다.

애플의 LNB에서도 역시 근접성의 법칙에 따라 3그룹으로 나누어져서 인식됩니다.

 

 

 

실사용 사례 : 피드, Masonry grid

 

출처 : 핀터레스트

 

근접성 법칙은 유튜브, 핀터레스트 등 다양한 콘텐츠를 정리된 형태로

나타내야하는 웹,앱 화면에서 더욱 빛을 발합니다.

특히 콘텐츠의 세로 길이를 통제하지 않고 불규칙한 형태로 배열하는 Masonry Grid에서

더욱 유용하게 사용되는데요, 콘텐츠 섬네일이 불규칙하게 쌓이는 그리드 특성상

섬네일과 타이틀이 자칫잘못하면 지저분해 보일 수 있지만

근접성의 법칙에 따라 섬네일과 타이틀이 한 덩어리로 인식되기 때문에

가독성이 떨어지는 것을 방지할 수 있습니다.

 

 

 

마무리

 

근접성 법칙과 공동 영역을 활용하여 많은 정보를 그룹화하고 시각적으로 규칙성을 만들어

가독성 좋고 일목요연한 정돈된 형태의 웹/앱을 디자인해보세요!

다음시간에는 'UI/UX 좋아보이게 만들기 3편 : 공동운명' 으로 찾아뵙겠습니다!

 

오늘의 3줄 요약
🧑‍🤝‍🧑 사람은 형태,모양,컬러에 상관없이 근접한 것들을 같은 그룹으로 인식한다. (근접성의 법칙)
🚩 거리가 멀더라도 공통된 영역에 놓여있으면 같은 그룹으로 인식한다. (공동영역)
👯 이 모든 것에는 대칭이 우선된다. (대칭 우선)

---

🔥프리미엄 목업으로 포트폴리오를 업그레이드하세요!

 

❤️무료 목업은 어떠세요?

---