UI 디자인 가이드 : Pagination
페이지네이션, 무한 스크롤, 더 보기 버튼에 관하여
UI cheat sheet: pagination, infinite scroll and the load more button
콘텐츠가 포함된 UI를 설계하는 경우 콘텐츠가 많을 때는 이 세 가지 패턴 중 하나를 선택하여 콘텐츠를 로드합니다. 어떤 방법 가장 좋을까요? 사용자는 무엇을 선호할까요? 대부분의 플랫폼은 무엇을 사용하고 있나요?
시작하기 전에 다른 두 가지 관련 가이드를 먼저 확인하는 것도 좋습니다.
하나는 검색 및 탐색 에 대한 것이고 다른 하나는 그리드 및 목록에 대한 것 입니다.
이것들은 세 가지 패턴 유형을 이해하는 데 중요하지 않지만 몇 가지 배경과 컨텍스트를 제공하고있습니다.
페이지 요약
1. 소개
2. Pagination : 페이지 매김
2.1. 팩트 시트
2.2. 페이지당 항목 수
2.3. 구성 요소: Navigation
2.4. 구성 요소: Filters
2.5. 구성 요소: Sorting
2.6. 구성 요소: Items per page
2.7. 구성 요소: Showing results
2.8. 구성 요소: Grid to list switcher
2.9. 구성 요소: Alphabetical index
2.10. 구성 요소: Jump to
3. Infinite scroll (무한 스크롤)
3.1. 팩트시트
3.2. 구성 요소: Sticky nav bar
3.3. 구성 요소: Instagram’s ‘You are all caught up’ component
3.4. 구성 요소: Loader
4. Load more button (추가 로드 버튼)
4.1. 팩트시트
4.2. 구성 요소: 'Load More' Button
4.3. 구성 요소: Loader
4.4. 구성 요소: Search suggestions tags
4.5. 구성 요소: Scroll to top button
5. 마무리
6. 참조
1. 소개
여러분이 큰 서버룸에서 행복한 작은 서버라고 상상해보세요. 한 번에 몇 가지 작업을 처리할 수 있습니다. 대부분 사람들이 요청할 때 어떤 것을 보내기만 하면 됩니다. 삶은 평화롭습니다. 그러던 어느 날, 여러분은 4백만 명의 다른 사람들을 위해 926조 개의 물건을 보내라는 요청을 받았습니다. 행복한 작은 서버는 아마 놀라서 죽을지도 모릅니다. 그리고 이 결과를 요구하는 사람들도 결과가 나오지 않아 답답해서 죽을지도 모르겠네요. 이게 바로 페이지 매김, 무한 스크롤, 그리고 로드 더 보기 버튼을 사용해야 하는 이유입니다.
이러한 방식들을 통해 서버는 한 번에 내용의 일부만을 사용자에게 보낼 수 있게 되어 로드 시간을 줄일 수 있습니다. 하지만 각각 장단점을 가지고 있고, 사용시에는 어떤 방식이 프로덕트에 적용할 때 더 나은지 결정해야 합니다.
간단히 말하자면,
- Pagination은 말그대로 페이지입니다. 대부분의 온라인 쇼핑 사이트 목록을 떠올리면됩니다.
- Infinite Scroll은 모든 것이 다운로드된 것처럼 보이게한 뒤, 스크롤이 일어나는 시점에 추가로 데이터를 로드하는 형태입니다. 예를 들면, 인스타그램처럼요.
- Load More Button은 페이지 하단에 있는 버튼을 눌러 더 많은 결과를 로드할 수 있습니다. 일종의 버튼이 있는 무한 스크롤일 수도 있습니다. Google 이미지를 생각하면됩니다.
pagination, infinite scroll , load more button 예시
2. Pagination(페이지네이션)
사용자들이 온라인 쇼핑에 들이는 시간을 감안해보면, Pagination은 여전히 아이템 목록을 표시하는 가장 인기 있는 방법일 겁니다. Smashing Magazine 도 그렇게 말했습니다.
사용자가 '검색 모드'일 때에 특정 항목을 찾는 행동을 하게 되는데, 그래서 아래의 사이트들이 검색 결과에 페이지 매김을 사용하고 있습니다.
2.1. 팩트 시트
아래 내용 중 일부는 조사에 기반한 사실이지만, 일부 의견이 포함되어있습니다.
| 장점
e-커머스 사이트에서 자주 사용됩니다.
사용자가 페이지를 검색한 뒤 참조할 수 있습니다.(예를 들어, "아, 내가 맘에 들어했던 상품은 3페이지에 있었어요"라고요.
각 아이템의 순서가 중요한 컨켄츠를 다루는 사이트에 적합합니다.
| 단점
사용자가 느끼기에 로드하는 시간이 오래 걸리고, 느리다고 인식합니다.(참고)
Google의 검색 결과를 참고할 수 있다면 2페이지의 검색 결과는 존재하지 않을 수도 있습니다. 그렇다고는 해도, 물건을 사고 있다면, 모든 것을 클릭할 것입니다.
상당히 '오래된' 방식이기 때문에 대부분의 사람들이 다른 방식에 비해 세련되지 못했다고 생각합니다.
모바일에서는 Fat Finger로 인해 네비게이션 요소를 더욱 간단하게 만들어야 합니다
| 흥미로운 지점
사실 대부분의 페이징에 페이지 번호와 이동 링크가 포함되어 있는데도 사용자는 일반적으로 '다음' 또는 '이전'을 클릭하는 경우가 많다고 합니다. (참고)
대부분의 사람들이 페이징 방식에 대해 불평하지만 여전히 세 가지 패턴 중 가장 인기 있는 걸로 보이고요.
사람들은 첫 페이지의 콘텐츠를 보는 데 가장 많은 시간을 보낸다고 합니다. 중요한 내용은 첫페이지에 노출해야겠네요. (참고)
| 자주 쓰이는 곳
eCommerce
Search results
Reference catalogues
2.2. 그렇다면 한 페이지에는 몇 개 정도의 항목이 있는게 좋을까?
한 페이지 당 몇 개 정도의 항목이 있어야 적당할까요? 그건 몇 가지 요인에 따라 달라집니다.
a) 그리드 또는 목록 보기 중 어떤 걸 사용하고 있나요?
b) '페이지당 항목 수' 컴포넌트가 있나요?
c) 항목별 사이즈는 얼마입니까?
다음은 다음 사이트에서 페이지당 로드되는 목록의 항목 수량입니다.(2020년 5월 14일 기준)
[ 그리드 보기(Grid view) ]
Sears: 50
Toy’s R Us: 100
Shutterstock: 27
Amazon: 48
[ 목록 보기(List view) ]
Udemy: 20
Alibaba: 48
CNN: 10
Google search: +/- 10 items (광고 개수에 따라 차이가 있음)
Amazon: 16
[ 그리드 보기의 '페이지당 항목수' (Grid view with an ‘items per page’ component) ]
Macy’s: 60 (default) or 120
Superbalist: 24 (4 across) (default) or 72 (6 across) or 72 (8 across)
Newegg: 36 (default) or 60 or 90
Currys PC World: 20 (default) or 30 or all
Wondery: 10 or 20 (default) or 50 or 100
Foyles: 10 or 20 (default) or 50 or 100 or 200
Barns & Noble: 20 (default) or 40
[ 목록 보기의 '페이지당 항목 수'(List view with an ‘items per page’ component) ]
eBay: 25 or 50 (default) or 100 or 200
Q : 그렇다면 페이지당 표시할 완벽한 항목 수는 얼마일까요?
A : 정답은 없다...(I can’t tell you.) 위의 내용처럼 모든 값을 보면 서로 다른 사이트 간에 비슷한 점이 거의 없는 게 확인됩니다. (그리드 보기 및 '페이지당 항목 수' 구성 요소가 있는 사이트 제외).
카탈로그 페이지를 디자인할 때는 결국 사용자가 원하는 '스크롤 다운'을 하길 원하는지에 따라, 혹은 페이지당 얼마나 많은 항목에 노출시키기를 원하는지에 따라 결정하게 될 겁니다.
2.3. 구성 요소 : 탐색
다음/이전 버튼은 사용자가 페이지를 탐색하는 주요 방법이므로 눈에 띄게 만드는 것이 좋습니다. 사용자가 '다음' 버튼을 누를 가능성이 더 높기 때문에 버튼이 더 눈에띄도록 해줍니다.
pagination navigation모바일 공간의 낭비없이 페이지 번호를 표시로만 사용하고 버튼을 탐색용으로 사용하기도 합니다.
pagination’s navigation on mobile참고해야 할 또 다른 사항은 첫 페이지나 마지막 페이지에 있는 경우 '이전' 또는 '다음' 버튼을 숨기거나 비활성화하는 겁니다. 상단에는 '이전' 버튼이 비활성화되어 있고 하단에는 버튼이 숨겨져 있는 형태입니다.
pagination’s navigation components on the first page★ Pagination 구성의 필수 요소 인가요? 네. 페이지 탐색은 이 기능이 없으면 안 됩니다.
2.4. 구성 요소: 필터
필터는 사용자가 더 정확한 결과를 찾는 데 도움을 줍니다. 물론 콘텐츠가 정확하게 태그가 지정되고 분류되어있는지에 따라 다를 수는 있습니다. 두 가지 주요 필터링 스타일이 있습니다.
1. Top Filters
먼저 결과 위의 페이지 상단에 정렬되는 형태입니다. 화면이 몇 개뿐이거나 목록이나 그리드가 페이지 전체 너비(Width)를 차지하도록 하려는 경우 이 스타일을 사용합니다.
상위 필터링은 Google 이미지와 같이 Load More 버튼과 함께 사용할 수도 있습니다.
Top filters2. Side Filters
두 번째 스타일은 왼쪽 정렬입니다.
카테고리가 많고 목록/그리드에 전체 너비(Width)가 필요하지 않은 경우 이 스타일을 사용하는 것이 좋습니다.
Side filters★ Pagination 구성의 필수 요소 인가요? 필요할 수 있지만, 필수 요소는 아닙니다.
2.5. 구성 요소 : 정렬 (sorting)
정렬을 통해 사용자는 원하는 방식으로 콘텐츠를 정렬할 수 있습니다. 대부분은 '최저가'주문을 원하지만 모든 사람에게 그게 가장 중요한 것은 아닐 수 있습니다.
기본적으로 검색어를 통해 해당 페이지로 이동한 경우 '가장 관련성 높은 '으로 설정하도록 합니다. 사용자가 검색어가 아닌 클릭을 통해 이동하는 경우 '가장 관련성 높은'을 기본값으로 설정할 수도 있지만 '가장 평가가 좋은' 또는 '최신' 또는 사이트에 특정한 기준을 따를 수도 있습니다.
Sorting정렬할 옵션을 만들 때 아래 목록 중 일부 옵션을 사용하는 것을 고려할 수 있습니다. 때에 따라 다르게 적용할 수 있습니다. 예를 들어 'A-Z 정렬'은 쇼핑몰에서 상품을 볼 때 유용하지는 않아도, 수업에서 학생명 리스트와 같은 경우에 유용합니다.
Most relevant
Most viewed
Most reviewed
Most rated
Most favourited
Newest
Lowest price
Highest Price
Alphabetical: A-Z
Alphabetical by first name: A-Z
Alphabetical by surname: A-Z
Highest score
Lowest score
★ Pagination 구성의 필수 요소 인가요? 필요할 수 있지만, 필수 요소는 아닙니다.
2.6. 구성 요소 : 페이지당 항목(List Items per page)
이 컴포넌트를 통해 사용자는 한 페이지에서 더 많거나 적은 항목을 볼 수 있습니다. 사용자는 일반적으로 인터넷 속도나 한 페이지에서 보고 싶은 항목 수에 따라 이를 조정하게될겁니다. 연구를 하는 동안 이 구성 요소가 미국 사이트보다 영국 사이트에서 더 많이 사용되었음을 알았습니다. 정확하진 않지많요.
Items per page ★ Pagination 구성의 필수 요소 인가요? 있으면 더 좋은 요소입니다.
2.7. 구성 요소: 결과 표시 (Showing results)
사용자는 볼 수 있는 전체 항목의 수량이나, 내가 보고 있는 페이지가 어디쯤인지, 남은 항목은 몇 개 정도인지 알고 싶어합니다. 이것은 검색 기준이 얼마나 인기 있고 얼마나 많은 옵션이 있는지를 나타냅니다.
이것은 구static component성 요소로 표시되는 정보로 변경은 되지 않습니다.
showing results component일반적으로 '페이지당 항목' 구성 요소와 함께 표시됩니다.
combination of showing results and items per page component★ Pagination 구성의 필수 요소 인가요? 필요하지만, 필수 요소는 아닙니다.
2.8. 구성 요소: 목록에 대한 보기 방식 변경(Grid to list switcher)
이 요소를 사용하면 목록 보기 방법을 전환할 수 있습니다. 사용자가 콘텐츠를 보고 싶어하는 방식이 완전히 확정적이지 않은 경우 유용할 수 있습니다.
저는 또한 당신의 사용자들이 어떤 스타일을 선호하는지 알아보기 위해 이 요소를 통해 AB 테스트 진행을 제안합니다.
a grid or list switcher 이 컴포넌트를 사용하여 그리드 너비를 전환할 수도 있습니다. 온라인 쇼핑을 할 때 '스캔(Scanning)' 보기와 '평가(Evaluating)' 보기를 번갈아 볼 수 있도록 하는 것이 꽤 유용합니다.
grid width component★ Pagination 구성의 필수 요소 인가요? 있어도 좋지만, 필수 요소는 아닙니다.
2.9. 구성 요소: 알파벳 인덱스(Alphabetical index)
이러한 컴포넌트 중 하나를 발견할 때마다 저는 이전 사이트에 있다는 것을 압니다. 알파벳 인덱스 구성 요소는 이니셜로 무언가를 찾을 수 있도록 하는 '전화번호부' 형식의 스타일입니다. 요즘은 잘 사용되지 않는 타입입니다. 왜냐하면 검색 기능이 훌륭해져 훨씬 효과적이기 때문입니다.
Alphabetical index★ Pagination 구성의 필수 요소 인가요? 용어집이나 가이드 같은 특별히 필요한 경우를 제외하곤 꼭 필요하지는 않습니다.
2.10. 구성 요소: 페이지 건너기(Jump to)
나는 이 사람들을 좋아하지만 더 이상 그들을 볼 수 없습니다. 큰 문서와 참조 사이트를 탐색하거나 내가 좋아하는 캐서롤 요리가 있는 36페이지로 돌아가는 것은 정말 좋은 방법입니다.
a jump to★ Pagination 구성의 필수 요소 인가요? 있어도 좋지만, 필수는 아닙니다.
3. 무한 스크롤(Infinite Scroll)
사용자가 스크롤하는 것을 좋아하지 않는다고 말하던 때도 있었습니다. 지금은 그렇지 않습니다.
인피니티 스크롤은 '탐색 행위'의 정수입니다. 엔터테인먼트 컨텐츠 리스트에 가장 적합합니다. 스크롤하고 스크롤하고 스크롤하면 시간(및 당신의 삶)이 순삭됩니다.
“scrolling is a continuation; clicking is a decision
스크롤은 계속되고, 클릭은 결정입니다."
-조슈아 포터
3.1. 팩트시트
인피니티 스크롤의 특징적인 장점이자 단점은 그 행동에 중독성이 있다는 것입니다.
'Infinite scroll can be addictive.'
| 장점
무한 스크롤은 중독성이 있습니다.
로딩 시간 빠르게 느껴집니다.
'트렌디'한 스타일입니다.
사용자의 참여 시간이 길어집니다.
스크롤은 특히 터치 스크린에서 더 편리한 동작입니다.
컨텐츠가 이미지인 경우 탐색할 때 편리합니다.
| 단점
그러니까, 무한 스크롤은 중독성이 있습니다.
콘텐츠 검색에는 불편한 편이며, 이전에 찾은 것을 다시 찾기가 어렵습니다.
사용자는 콘텐츠 자체에 덜 집중합니다.(참고)
사용자는 Footer를 거의 볼 수 없습니다.(존재하는 경우)
텍스트 검색 결과에는 좋지 않습니다.
네비게이션이 까다로워질 수 있으며 사용자는 Navigation Bar에 도달하기 위해 끝까지 스크롤해야 할 수도 있습니다.(네비게이션 바가 고정되지 않은 경우).
무한 스크롤 금지에 대한 어떤 막연한 속삭임이 있습니다.(참고)
분석을 추적하는 것이 조금 더 어렵습니다.( designhack.com 참고)
사용자에게 잘못된 신호가 있으면 성능 문제가 발생할 수 있습니다.
| 흥미로운 지점
무한 스크롤을 사용하면 플랫폼이 사용자데 대한 콘텐츠를 지속적으로 생성할 수 있습니다. (다양한 관련성..). Pinterest는 완벽한 예시입니다. 스크롤할수록 관심사와 관련된 콘텐츠가 점점 더 많이 나타납니다.
이 패턴을 무한한(끝없는) 스크롤이라고도 합니다.
| 예시
무한 스크롤 방식은 이커머스 분야보다는 대부분 엔터테인먼트 및 소셜 서비스에서 이를 사용합니다.
예를 들면 다음과 같은 서비스에서요.
YouTube
Google play
** eCommerce 사이트의 일부 모바일 버전에서는 무한 스크롤을 사용하기도 합니다. (예: https://m.snapdeal.com/ )
3.2. 구성 요소: 고정형 네비게이션 바 (Sticky nav bar)
무한 스크롤은 무한히 잘 스크롤되기 때문에 탐색이 고정되어 있는지 확인해야 합니다. 그렇지 않으면 가난한 사용자가 플랫폼에서 길을 찾을 수 없습니다. 브라우저에서 보는 플랫폼의 경우 탐색을 화면 상단에 고정하는 것이 좋습니다. 앱을 사용하면 더 많은 유연성을 가질 수 있으며 Instagram과 마찬가지로 상단과 하단에 탐색을 고정하는 것으로 벗어날 수 있습니다.
a sticky nav on mobile★ Infinite Scroll의 필수 요소 인가요? 예! 필수 요소입니다.
3.3. 구성 요소: Instagram’s ‘You’re all caught up’
우리가 소파에서 Instagram 스크롤을 하면서 몇 시간을 보냈을 때를 기억하나요? 그러다가 어느 날 'You’re all caught up.' 메시지를 보고 벌떡 일어나 "지금 인생을 낭비하고 있어!"라고 소리칠지도 모릅니다.
인스타그램은 과거에 사람들이 자신이 무엇을 가졌는지, 무엇을 보지 않았는지 추적할 수 없다는 이유로 많은 비판을 받았고, 그래서 컴포넌트를 소개한 겁니다. 처음엔 마음에 들지 않았지만 훨씬 더 좋은 경험을 할 수 있게 되었고, 개인적으로는 10분 스크롤 세션(특히 잠금 상태에서)을 훨씬 더 감사하게 생각합니다.
a ‘You are all caught up’ component inspired by Instagram’s★ Infinite Scroll의 필수 요소 인가요? 플랫폼의 종류에 따라 있으면 좋을 수 있습니다.
3.4. 구성 요소: 로더(Loader)/스피너(Spinner)
이상적인 세상에서는 앱의 로더가 어떻게 생겼는지 절대 알 수 없을겁니다. 그러나 슬프게도 우리는 그런 세상에 살고 있지는 않습니다.
a loader인터넷 연결이 좋지 않거나 다운로드중인 서버가 느리면 로더를 영원히.. 쳐다보고 있어야 합니다.
로더는 플랫폼이 망가지지 않았음을 알려주는 시각적 표시일 뿐입니다. 그것은 일종의 맥박과 같습니다.비록 여러분이 백만 번째 인스타그램 스크롤을 한 후 내부가 죽은 것처럼 느껴지더라도 말이죠.
★ Infinite Scroll의 필수 요소 인가요? 예, 필수입니다.
4. 더 보기 버튼 ('Load More'Button)
'더 불러오기/더 보기'버튼은 아무도 드러내놓고 이야기하지 않는 아이템이기도 합니다. 주로 논의되는 건 '페이지 매김'과 '무한 스크롤'인 경우가 많습니다. 왜냐하면, '더 보기' 버튼은 무한 스크롤로 분류되기도 하거든요. 하지만 이 패턴이 세계에서 가장 큰 검색 엔진 중 하나인 Google에서도 사용되는 것을 보고있자면, 그다지 주목을 받지 못하는 것이 이상하니, 별도로 논의해봅니다.
4.1. 팩트 시트
| 장점
페이지 매김과 마찬가지로 여전히 결과를 주문할 수 있습니다.
인피니트 스크롤처럼 모바일에서 적절합니다.
| 단점
무한 스크롤과 같이, 다시 결과를 찾는게 불편합니다.
| 흥미로운 지점
이 방식은 '끝'이 존재한다는 점에서 무한 스크롤과 다른 부분이 존재합니다.
즉, Pinterest와 같이 콘텐츠를 계속 만들어내는 형태는 아닙니다.
| 사용되는 곳
Google (on mobile)
Google Images
Harvard Business Review (in search)
Stitcher
Marks and Spencer
4.2. 구성 요소: 추가 결과 로드/표시 버튼 (Load/Show more results button)
이 패턴이 없으면 작동할 수 없는 버튼입니다.
페이지 하단에 도달하면 더 많은 결과를 로드할 수 있다는 신호가 표시됩니다.
a Load/show more button결정해야 할 사항 중 하나는 버튼에 표시할 내용입니다.
‘Load more / 더 불러오기'
‘Show more results / 더 많은 결과 보기’
‘More results / 더 많은 결과 ’
정도가 가장 일반적인 것 같습니다.
★ Load More button의 필수 요소 인가요? 예, 필수입니다.
4.3. 구성 요소: 로더(Loader)
무한 스크롤과 마찬가지로 로더가 필요합니다. 로더는 'Load More' 버튼을 클릭할 때만 트리거됩니다.
loader★ Load More button의 필수 요소 인가요? 예, 필수입니다.
4.4. 구성요소: 검색 제안 태그(Search suggestions tags)
검색 제안 태그는 사용자가 주제에 대해 더 많이 탐색하도록 권장하는 아주 좋은 방법입니다. 다른 패턴에서도 사용할 수 있지만 '더 보기' 버튼과 가장 잘 작동하는 것 같습니다.
search suggestion tags★ Load More button의 필수 요소 인가요? 필수는 아니지만, 있는 것이 좋습니다.
4.5. 구성 요소: 맨 위로 스크롤 버튼(Scroll to top button)
이 버튼을 사용하면 수동으로 스크롤할 필요 없이 맨 위로 스크롤할 수 있습니다.
불러오기 시 마다 하단에 위치하도록 구성합니다.
★ Load More button의 필수 요소 인가요? 필수는 아니지만, 있는 것이 좋습니다.
5. 마무리
Q : 그렇다면 pagination, infinite scroll, load more button중 어느 것을 사용해야 합니까?
A : 만드려는 제품 서비스에 따라 다릅니다.
1. 사용자가 서비스의 콘텐츠를 참조하고 탐색을 하는 사이트인 경우, Pagination 사용을 고려하세요.
2. 사용자가 탐색을 위한 활동을 하는 소셜 플랫폼을 구축하려는 경우, Infinite Scroll을 고려하세요.
3. 이 둘 사이 또는 별도의 다른 적당한 상황에서는 'Load More' 버튼을 사용할 수도 있습니다.
6. 참고 자료
⭐ 무한 스크롤, 페이지 매김 또는 "더 로드" 버튼? 전자 상거래의 사용성 결과
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
