정보 그룹핑 어떻게 하는 건가요?

🧐 Summary

1️⃣ 정보 그룹핑은 UX 디자인에서 사용자가 더 쉽게 정보를 이해하고 빠르게 선택할 수 있도록 돕습니다.

2️⃣ 게슈탈트 법칙과 같은 원칙을 활용해 비슷한 요소를 시각적으로 묶을 수 있습니다.

3️⃣ 여백, 크기 차이, 블러 효과 등으로 정보 간의 시각적 우선순위를 설정할 수 있습니다.

안녕하세요 구독자님, 제품을 설계하면서 가장 많이 하는 UX 고민은 뭘까요. 어떤 문제를 정의해야하는지, 어떻게 해결해야지, 이게 제일 고민이긴해요. 하지만 실제 모바일 화면을 설계할 때는 여기서 정보를을 어떻게 얼마나 보여주지 하는 생각을 가장 반복적으로 매번하는 것 같아요. 그래서 오늘은 정보 그룹핑에 대한 이야기를 함께 나눠보려고 합니다.

정보 그룹핑이 왜 중요할까

정보 그룹핑은 간단하게 말하면, 많은 정보를 잘 정리하는 것입니다. UX 디자인에서 정보를 시각적으로 그룹핑하는 것은 중요한 작업이죠. 잘 짜여진 시각적 구조를 통해 정보 우선 순위를 직관적으로 알려주고 사용자가 쉽게 선택할 수 있는 틀을 만들어주기 때문입니다.

더 빠르고 쉽게 이해: 정보를 명확하게 묶어서 보여주면 사용자는 복잡한 내용을 빠르게 훑어보고 필요한 내용을 쉽게 찾을 수 있어요. 어디에 집중해야할지 자연스럽게 알 수 있죠.

시각적 피로 줄이기: 여러 정보가 섞여 있으면 내가 원하는 정보를 찾기 위해 눈을 많이 움직여야해서 피곤해질꺼에요. 잘 그룹화된 정보는 사용자가 한눈에 정보를 파악할 수 있게해줘서 시각적 피로를 줄여줍니다.

우선순위를 쉽게 파악: 그룹핑을 하면 중요한 정보와 덜 중요한 정보를 명확하게 구분할 수 있어요.

의사결정이 빨라짐: 그룹핑된 정보는 사용자가 필요로 하는 정보를 더 빨리 찾아낼 수 있게 도와줘요. 선택하는 시간이 줄어드는 거죠.

정보 그룹핑 방법 1 : 게슈탈트 법칙

정보를 시각적으로 그룹핑하려면 어떻게 해야할까요?

비슷한 것들을 같이 묶여서 보여준다.

사람들은 서로 비슷한 색, 모양, 크기 등이 있으면 그걸 하나의 그룹으로 인식합니다. 우리 뇌는 개별적인 요소를 하나하나 따로 보지 않고, 전체적으로 묶어서 인식하려는 경향이 있기 때문입니다. 이걸 게슈탈트의 법칙이라고 해요. 예를 들어, 책장에 같은 크기와 색의 책들이 있다면, 자연스럽게 한 세트로 생각하는 거죠.

이렇게 정보의 근접성과 유사성을 활용한 6개의 중요한 원칙이 있어요.

1. 가까이 있는 것들은 하나의 그룹처럼 보인다: 가까이 있는 요소들은 서로 연관된 것으로 인식돼요. 메뉴에서 항목들이 서로 가까이 붙어 있으면 관련된 항목처럼 느껴지죠.

2. 비슷하게 생긴 것들은 같은 역할을 한다고 생각한다: 모양, 색깔, 크기가 비슷한 것들은 같은 기능을 할 것 같다고 인식됩니다. 같은 색깔의 버튼들은 비슷한 기능을 할 것처럼 보이는거죠.

3. 연결된 것들은 하나로 이어져 보인다: 선이나 곡선으로 연결된 요소들은 자연스럽게 하나의 흐름으로 느껴져요. 길이나 선이 이어진다면 우리는 그것을 하나의 완성된 경로로 인식합니다.

4. 완성되지 않은 것도 자동으로 완성한다: 선이나 모양이 일부만 그려져 있어도, 그것을 완성된 모양으로 인식해요. 끊어진 원을 보면 우리는 자동으로 완전한 원으로 생각합니다.

5. 앞과 뒤를 쉽게 구분할 수 있다: 우리는 화면에서 무엇이 앞에 있고, 무엇이 배경인지 쉽게 구분할 수 있어요. 배경과 대비되는 버튼은 앞에 있는 요소로 인식됩니다.

6. 같은 방향으로 움직이는 것들은 하나의 그룹처럼 보인다: 같은 방향으로 움직이는 요소들은 서로 관련이 있다고 느껴져요. 애니메이션에서 동일한 속도로 움직이는 것들은 하나로 묶여 보입니다.

정보 그룹핑 방법 2: 크게, 흐리게, 공간

복잡한 정보를 보기 편하게 만드는 다른 방법도 있습니다. 중요한 정보는 크게 주고, 정보 사이를 흐리게 만들거나 공간을 주는 거죠. 이렇게 하면 정보간의 강약과 덩어리가 자연스럽게 생깁니다.

중요한 건 크게, 덜 중요한 건 작게 보여준다

중요한 정보는 더 크고 눈에 띄게, 덜 중요한 정보는 작게 보여줘서 우선순위를 알려주는 거에요. 제목은 크게, 세부 내용은 작게 표시하는 것처럼요.

흐리게 만들어서 구분짓는다

정보들 사이를 흐리게 만들어서 구분하면 사람들은 그 구분된 부분을 하나의 덩어리로 인식합니다. 블러(흐림) 효과를 주면 시각적으로 구분된 부분을 하나의 덩어리로 인식하게 되죠.

정보들 사이에 공간을 준다

정보들 사이에 여백을 두면 자연스럽게 각 영역이 구분됩니다. 여백이 많을수록 그 부분이 더 주목받기도 하고요. 박스나 테두리를 이용해서 정보를 묶어주면 한 그룹으로 보이게 할 수 있어요. 복잡한 레이아웃에서 효과적이죠.

UX 디자이너분들은 오늘 이야기를 읽고 별로 새로울게 없네라고 생각하실 수 있어요. 뭐 우리가 잘 아는 내용들이니까요. 그런데 여러분, 튜닝의 끝은 순정이라고, 정보 그룹핑을 할 때 이 기본 원칙들과 방법들을 떠올리는 연습을 하면 복잡해보이는 문제가 쉽게 풀리는 경우가 있더라구요. 무엇보다도 정보 그룹핑을 할 때 큰 기준을 단단하게 세울 수 있습니다.

개인적으로, 정보를 그룹핑할 때 중요한 것 중에 하나는 리듬감 같아요. 비슷한 것들이 잘 모여있고, 그 덩어리가 일정한 호흡으로 반복되는지. 덩어리의 경계가 시각적으로 잘 보이는지. 이런 것들이 모여서 정보 간의 리듬감을 만들어줍니다. 이번 뉴스레터가 이런 작업에 도움이 되었으면 좋겠네요.

그럼 우린, 월요일에 만나요!