[UI/UX 원칙 #15] 페이지네이션 컨트롤 6가지 UX 원칙 가이드라인

페이지네이션 컨트롤 6가지 UX 원칙 가이드라인

닉 바비치의 [페이지네이션 컨트롤 6가지 UX 원칙 가이드라인] 소개하고자 합니다.

사이트나 앱의 요소 중에서 가장 흔히 간과되는 것이 페이지네이션 컨트롤(pagination control)입니다. 많은 경우 디자이너와 개발자들은 페이지네이션을 나중에 고려할 사항으로 미루곤 합니다. 하지만 사실 페이지네이션은 제대로 활용하기가 상당히 간단하며, 그럼에도 불구하고 뛰어난 페이지네이션을 적용하고 있는 앱이나 사이트는 아직 많지 않은 실정입니다.

좋은 페이지네이션을 분석하기에 앞서, 페이지네이션의 개념을 설명하고자 합니다.

좋은 페이지네이션

페이지네이션은 콘텐츠를 여러 페이지로 나누고, 사용자가 이전 페이지나 다음 페이지로 이동하거나 특정 페이지로 쉽게 접근할 수 있도록 하는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법입니다. 구글 검색 결과가 그 좋은 예시가 될 수 있으며, 페이지네이션은 블로그(이전/다음 포스트 링크)와 많은 이커머스 사이트에서도 자주 찾아볼 수 있습니다.

원칙 1. 페이지 길이를 적절하게 제공한다

페이지를 지나치게 짧게 구성해서는 안 됩니다. 사이트나 앱의 페이지는 인쇄된 책의 페이지와는 다르게, 물리적인 제약이 없습니다. 인쇄된 페이지는 종이의 크기에 제한을 받지만, 웹 페이지는 높이가 무한하여 원하는 만큼의 콘텐츠를 담을 수 있습니다.

검색 결과 페이지의 경우, 페이지당 25개에서 75개 정도의 항목을 보여주는 것이 일반적으로 안전한 범위로 여겨집니다. 하지만 이 숫자는 대략적인 기준일 뿐이며, 실제 항목 수는 사이트의 콘텐츠와 업계에 따라 달라질 수 있습니다. 예를 들어, 스펙이 중요한 제품군(가전제품, 하드웨어, 자동차 부품 등)에서는 한 페이지에 보여주는 항목 수가 줄어드는 것이 바람직합니다. 전자제품 전문 유통업체인 Best Buy는 보통 페이지당 15개 항목을 제공하는 예시가 될 수 있습니다. 반면, 시각적으로 비교 가능한 제품군(의류 등)에서는 사용자들이 더 많은 항목을 한 페이지에서 잘 처리할 수 있습니다. 예를 들어, eBay는 한 페이지에 300개 이상의 아이템을 보여줍니다.

이처럼 페이지를 짧게 만들지 않아야 하는 이유는 사용자 경험을 최적화하기 위함입니다. 사이트나 앱의 페이지는 물리적 제약이 없기 때문에, 사용자가 한 번에 볼 수 있는 콘텐츠의 양을 적절히 조절하는 것이 중요합니다. 검색 결과 페이지에서 25개에서 75개 정도의 항목을 보여주는 것은 사용자가 정보를 쉽게 스캔하고 원하는 내용을 빠르게 찾을 수 있도록 돕기 위한 것입니다.

결국, 스펙이 중요한 제품군에서는 사용자가 세부 정보를 비교하기 위해 더 적은 수의 항목을 한 번에 보는 것이 유리하며, 시각적으로 비교 가능한 제품군에서는 더 많은 항목을 나열해도 사용자들이 쉽게 처리할 수 있습니다. 이는 사용자의 인지적 부담을 줄이고, 더 나은 탐색 경험을 제공하기 위한 전략입니다.

원칙 2. 클릭 가능 요소의 크기를 크게 제공한다

많은 사이트와 앱에서 페이지네이션 클릭 타깃의 크기가 얼마나 중요한지를 간과하고 있습니다. 클릭 가능한 타깃을 크게 만드는 것은 메뉴 요소나 페이지네이션 요소에 관계없이 모든 종류의 내비게이션 링크에 적용되는 원칙이지만, 페이지네이션 요소에서는 더욱 중요하게 여겨질 수 있습니다. 사용자가 빠르고 쉽게 클릭할 수 있도록 타깃을 충분히 크게 만드는 것은 단순하면서도 기본적인 접근 방식입니다.

특히 모바일 디바이스에서 좋은 사용자 경험을 제공하기 위해서는 각 요소의 크기를 최소한 44 x 44 points 정도로 설정하는 것이 필수적입니다. 이렇게 하면 손가락으로 정확하게 클릭할 수 있으며, 사용자가 실수 없이 쉽게 선택할 수 있도록 도와줍니다.

결국, 클릭 타깃의 크기를 적절히 조절하는 것은 사용자가 원하는 정보를 빠르고 효율적으로 찾을 수 있도록 하는 중요한 요소이며, 이는 전체적인 만족도를 높이는 데 결정적인 역할을 합니다.

원칙 3. 현재 페이지를 표시한다

“지금 내 위치는?”이라는 질문은 페이지네이션을 사용하는 사용자에게 필수적으로 답할 수 있어야 하는 중요한 질문입니다. 사용자는 이 질문에 대한 답을 찾기 위해 페이지네이션 요소의 ‘시각적 단서’를 활용합니다. 따라서 현재 페이지를 명확하게 표시하는 적절한 스타일을 적용하는 것이 매우 중요합니다.

사용자는 자신이 현재 어떤 페이지에 있는지를 알아야 하며, 이 페이지는 다른 페이지들과 확실히 구분되어야 합니다. 이렇게 해야 사용자가 쉽게 자신의 위치를 추적할 수 있습니다. 만약 페이지네이션이 명확하게 표시되지 않는다면, 사용자는 혼란을 느끼고 원하는 정보를 찾기 어려워질 수 있습니다.

또한, 색상에만 의존하지 않고 상태를 이해할 수 있는 방법을 마련하는 것도 중요합니다. 색상은 유용한 시각적 단서이지만, 모든 사용자가 색을 인식하는 방식이 다르기 때문에 색상만으로 정보를 전달하는 것은 부족할 수 있습니다. 예를 들어, 색맹 사용자들은 특정 색상을 구별하기 어려울 수 있습니다. 따라서 색상 외에도 페이지 번호, 아이콘, 텍스트 등의 다른 시각적 요소를 사용하여 현재 페이지를 명확히 전달해야 합니다. 이는 사용자들이 페이지네이션을 보다 효과적으로 이해하고, 탐색할 수 있도록 도와주는 것입니다.

원칙 4. 페이지 숫자를 제한하고 구성 요소 간 간격을 넓힌다

페이지네이션 링크는 최대 10개만 보여줘야 합니다. 많은 링크가 한 페이지에 표시되면 사용자는 혼란을 느끼고, 원하는 정보를 찾기 어려워질 수 있습니다. 적절한 수의 링크를 제공함으로써 사용자가 쉽게 탐색할 수 있도록 돕는 것이 중요합니다.

1) 정보의 명확성

링크가 적으면 사용자는 현재 위치를 쉽게 파악할 수 있으며, 다음에 무엇을 클릭해야 할지 명확하게 이해할 수 있습니다. 너무 많은 링크는 시각적인 과부하를 초래할 수 있습니다.

2) 탐색의 용이성

최대 10개의 링크는 사용자가 한눈에 볼 수 있는 범위 내에서 필요한 정보를 찾을 수 있도록 도와줍니다. 이 범위는 사용자가 신속하게 클릭할 수 있도록 하여, 탐색 속도를 높입니다.

3) 일관성 유지

페이지네이션의 링크 수를 제한함으로써, 전체적인 디자인과 사용자 인터페이스의 일관성을 유지할 수 있습니다. 일정한 수의 링크는 사용자에게 익숙함을 제공하고, 사이트의 탐색 방식을 쉽게 이해할 수 있게 합니다.

4) 페이지 링크 간격 확보

(1) 실수 방지

링크 사이에 공간을 두면 사용자가 클릭할 때 실수로 다른 링크를 누르는 가능성을 줄일 수 있습니다. 특히 모바일 디바이스에서는 손가락이 작은 화면에서 정확하게 클릭하기 어려울 수 있기 때문에, 여유 공간이 필요합니다.

(2) 사용자 편의성

충분한 간격은 사용자가 링크를 선택할 때 더 편안한 경험을 제공합니다. 사용자는 클릭할 링크를 쉽게 인식하고, 원하는 링크를 정확하게 선택할 수 있어야 합니다. 

(3) 시각적 명확성

링크 사이의 공간은 페이지의 시각적 구성 요소를 명확하게 구분해 줍니다. 이렇게 하면 사용자가 각 링크의 의미를 쉽게 이해하고, 혼란 없이 탐색할 수 있습니다.

(4) 접근성 향상

충분한 간격은 접근성을 개선하는 데도 도움이 됩니다. 장애가 있는 사용자나 손의 움직임이 제한된 사용자에게 더 나은 클릭 경험을 제공할 수 있습니다.

원칙 5. ‘이전’과 ‘다음’ 링크를 제공한다

대부분의 경우에 이전과 다음 링크는 유저에게 매우 유용합니다. 하지만 괜찮은 페이지네이션 컨트롤을 만들기 위해서는 페이지 숫자를 서로 명확하게 구분하고 충분한 띄어 쓰거나 독특한 스타일링을 해서 페이지를 잘못 누르는 일이 없게 해야 합니다. ‘이전’과 ‘다음’이라는 텍스트 대신에 화살표를 쓴다면 특히 더 주의해야 합니다.

1) 오류 감소

페이지 숫자나 링크가 서로 가까이 있으면 사용자가 실수로 잘못된 링크를 클릭할 가능성이 높아집니다. 충분한 간격을 두면 이러한 실수를 줄일 수 있어, 사용자가 원하는 정보를 더 쉽게 찾을 수 있습니다.

2) 시각적 명확성

페이지 숫자와 이전/다음 링크를 명확히 구분하면 시각적으로 깔끔한 레이아웃을 유지할 수 있습니다. 이는 사용자가 페이지를 탐색할 때 더욱 직관적으로 이해할 수 있게 도와줍니다.

3) 사용자 경험 향상

링크 사이의 간격이나 스타일링은 사용자에게 더 나은 경험을 제공합니다. 사용자가 링크를 클릭할 때 혼란을 느끼지 않도록 하여, 보다 원활한 탐색을 가능하게 합니다.

4) 아이콘 사용 시 주의 필요

‘이전’과 ‘다음’을 화살표 아이콘으로 표현할 경우, 사용자에게 의미가 명확하게 전달되지 않을 수 있습니다. 이 경우, 화살표의 크기나 디자인을 신중하게 선택하여 사용자가 쉽게 알아볼 수 있도록 해야 합니다.

원칙 6. 모바일 기기에 페이지네이션 적용한다

모바일 기기에서 스크린 공간이 제약됨은 우리가 잘 아는 사실입니다. 그리고 우리는 이를 효율적으로 사용해야 합니다. 데스크탑에서는 페이지 리스트를 제공할 수 있어도, 모바일 기기에서는 기본적인 요소, 즉 현재 페이지 숫자와 기본 내비게이션 옵션(첫 페이지, 이전 페이지, 다음 페이지)만 제공해야 합니다.

1) 화면 공간의 제약

모바일 기기는 화면 크기가 작기 때문에, 모든 정보를 한꺼번에 표시하기 어렵습니다. 이로 인해 중요한 정보와 기능을 우선적으로 배치해야 하며, 불필요한 요소는 생략해야 합니다.

2) 사용자 경험 최적화

모바일 사용자들은 빠르고 직관적인 탐색을 선호합니다. 많은 링크나 정보를 한 화면에 나열하면 사용자가 혼란을 느낄 수 있습니다. 따라서 현재 페이지 숫자와 기본 내비게이션 옵션만 제공함으로써 사용자가 쉽게 탐색할 수 있도록 해야 합니다.

3) 터치 인터페이스의 특성

모바일 기기는 터치로 조작되므로, 링크나 버튼이 너무 많으면 사용자가 잘못 클릭할 가능성이 높아집니다. 필수적인 내비게이션 요소만 제공하면 실수를 줄이고, 더욱 원활한 조작이 가능합니다.

4) 우선순위 설정

모바일 기기에서는 가장 중요한 정보와 기능에 집중해야 합니다. 현재 페이지 숫자와 기본 내비게이션 옵션(첫 페이지, 이전 페이지, 다음 페이지)은 사용자가 정보를 찾는 데 있어 가장 필요한 요소이기 때문에, 이들만 제공하는 것이 효과적입니다.