brunch

매거진 UX 디자인의 모든 것

라이킷 87 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Oct 01. 2016

페이지네이션 컨트롤 UX 원칙 9가지

UX 디자인 배우기 #44

Today UX 아티클

UX Planet에 올라온 Nick Babich의 글 Pagination BestPractices를 전문 번역한 글입니다.

Pagination Best Practices

by Nick Babich

uxplanet.org

사이트나 앱의 요소 중에 가장 흔하게 간과하는 요소는 페이지네이션 컨트롤(pagination control)입니다. 많은 경우에 디자이너와 개발자들은 페이지네이션을 나중에 고려할 사항으로 여깁니다. 사실 페이지네이션은 제대로 사용하기가 상당히 쉽지만, 괜찮은 페이지네이션을 쓰고 있는 앱이나 사이트가 아직 별로 많지 않습니다.

좋은 페이지네이션을 분석하기 전에, 제가 생각하는 페이지네이션을 설명하고 싶습니다:

좋은 페이지네이션

페이지네이션은 콘텐츠를 여러 페이지로 나누고, 이전 혹은 다음 페이지로 넘어가거나 특정 페이지로 넘어갈 수 있는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법입니다. 구글 검색 결과가 분명한 사례가 되겠지만, 페이지네이션은 블로그(이전/다음 포스트 링크)와 상당히 많은 이커머스 사이트에서도 발견할 수 있습니다.

Pagination

좋은 페이지네이션을 만드는 것은 어려운 태스크가 아닙니다. 이 태스크를 완료하기 위해서는 다음 가이드라인을 기억하고 따라야 합니다.

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

페이지를 너무 짧게 만들지 않아야 합니다. 사이트나 앱 페이지는 인쇄된 책 페이지가 아닙니다. 인쇄된 페이지의 크기는 종이의 물리적 크기에 제약을 받지만, 사이트의 페이지는 높이가 무한대이고 우리가 원하는 최대한의 콘텐츠를 집어넣을 수 있습니다.

검색 결과 페이지의 경우, 페이지당 25개에서 75개 정도의 항목을 보여주는 것이 가장 안전합니다. 하지만, 이 숫자는 매우 대략적인 숫자입니다. 실제 개수는 여러분 사이트의 콘텐츠와 업계에 따라 달라질 겁니다. 스펙이 중요한 제품(가전제품, 하드웨어, 자동차 부품, 자재 등)이 더 많은 리스트라면, 범위가 좀 더 줄어야 합니다(예: 전자제품 전문 유통업체인 Best Buy는 페이지당 보통 15개 항목을 보여줌). 반면에, 시각적으로 비교할만한 제품(의류 등) 리스트에서는 유저가 좀 더 많은 수의 항목도 잘 처리할 수 있습니다 (예: eBay는 한 페이지당 300개 이상의 아이템을 보여줍니다).

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

많은 사이트와 앱에서 페이지네이션 클릭 타깃의 크기가 얼마나 중요한지 간과하고 있습니다. 클릭 가능 타깃을 크게 만드는 건 메뉴에 있는 요소나 페이지네이션 요소나 상관없이 어떤 종류의 내비게이션용 링크에나 적용되는 룰이지만, 페이지네이션 요소의 경우는 더 관련이 있다고 볼 수 있습니다. 유저가 빠르고 쉽게 찾아 누를 수 있도록 타깃을 충분히 크게 만드는 것도 단순하지만 기본입니다. 모바일 디바이스에서 좋은 사용자 경험을 제공하기 위해서는 최소한 44 points x 44 points 정도 되는 크기로 각 요소를 만들어야 손가락으로 정확하게 누를 수 있습니다.

왼쪽: 페이지네이션타겟이 크면 유저가 쉽고 빠르게 찾을 수 있도록 도와준다. Image credits: Apple

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

“지금 내 위치는?”이란 질문은 성공적인 내비게이션을 이용하는 유저라면 기본적으로 답할 수 있어야 하는 질문입니다. 유저는 이 중요한 질문에 답하기 위해 내비게이션 요소의 ‘시각적 단서’에 의존합니다. 바로 이것이 적절한 스타일을 입혀 현재 페이지를 명확히 알려줘야 하는 이유입니다. 유저는 자신이 지금 당장 어디에 있는지 알아야 합니다. 현 페이지는 다른 페이지와 분명히 구분되게 표시되어서, 유저가 쉽게 자신의 위치를 추적할 수 있게 해줘야 합니다. 그리고 색에만 의존하지 마시고, 색 없이도 상태를 이해할 수 있는지 확인할 수 있어야 합니다.

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

페이지 링크는 최대 10개의 링크만 보여줘야 합니다. 만일 결과가 더 적다면, 들어갈 수 있는 페이지만큼만 보여줘야 합니다.

좋은 사례: 구글은 10개의 링크를 제공한다.

또한 각 페이지 링크 사이에도 충분한 공간을 확보하여 유저가 실수로 다른 숫자를 누르는 일이 없게 해줘야 합니다.

나쁜 사례: 페이지 링크가 조금 가깝습니다. 다른 문제는 페이지 숫자가 두 자리수로 넘어가면 구분하기 매우 어려워 집니다.

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

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

원칙 6. ‘처음으로’와 ‘끝으로’ 링크는 사용하지 않는다

어떤 페이지네이션에는 유저가 첫 페이지나 마지막 페이지로 갈 수 있게 해주는 ‘처음으로’와 ‘끝으로’ 링크가 있습니다. 어떤 때는 이런 링크를 화살촉 두 개를 겹친 모양으로 표현하기도 하는데, 화살촉 하나로 표현한 ‘이전’ 및 ‘다음’ 내비게이션 버튼인 줄 알고 잘못 누를 수 있습니다.

링크에 “처음으로”와 “끝으로”라고 적는 것도 역시 “다음”과 “이전” 링크와 가깝기 때문에 오류를 범할 수 있습니다.

대부분의 경우, ‘처음으로’와 ‘끝으로’ 링크는 필수적이지 않습니다. 유저는 내용을 순차적으로 보는 걸 선호하기 때문입니다. 이전에 본 적 있는 과거의 내용을 찾으려고 하는 게 아니라면 유저에게 마지막 페이지부터 시작할 이유가 없습니다.

하지만, 첫 페이지로 돌아가는 옵션을 제공하는 건 실용적인 가치가 있습니다. 첫 페이지는 보통 가장 연관이 있거나 가장 최근 콘텐츠를 포함하고 있습니다. 페이지를 찾아보다가 “이전” 버튼을 여러 번 누르지 않고 첫 페이지로 바로 돌아가길 원할 수도 있습니다. 첫 페이지 링크는 숫자 “1”로 표시해야 합니다.

원칙 7. 모바일 기기에 페이지네이션 적용하기

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

왼쪽: 데스크탑의 페이지네이션. 오른쪽: 모바일 기기의 페이지네이션.

원칙 8. 키보드 화살표와 탭으로 페이지를 넘길 수 있게 해준다(데스크톱만 해당)

키보드만 사용해서도 페이지를 넘길 수 있는 자유를 유저에게 줘야 합니다. 간단히 오른쪽 화살표 키만 눌러도 다음 페이지로, 왼쪽 화살표 키만 눌러도 이전 페이지로 가게 하는 겁니다. 하지만, 유저는 이런 기능을 알리지 않으면 쓸 수 있는지 모를 겁니다. “페이지를 넘기려면 왼쪽 방향키 ←와 오른쪽 방향키 →를 사용하세요” 같은 간단한 메시지를 페이지네이션 밑에 적는 것만으로도 충분할 겁니다.

유저가 탭 키를 이용해서, 어떤 링크에 포커스가 되면 엔터키를 눌러서 링크된 페이지로 넘어갈 수 있도록 해주는 것도 좋습니다.