brunch

매거진 딛자인 데이

라이킷 13 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 매미 Feb 11. 2018

딛자인 데이 :: 10 Pagination

페이지네이션 디자인을 해보자!

열 번째 딛자인 데이는 페이지네이션입니다.

딛자인 데이 오랜만이다...(눈치)

한동안 딛자인 데이를 잠시 잊고 살았었다. 왜 그랬을까? 흑흑. 다시 게을러져 버렸다.

그래도 지금이라도 이렇게 정신 차리고 돌아오게 되어 다행이라고 생각한다.

아무튼! 이번에는 페이지네이션(pagination) 디자인을 해보려고 한다.

콘텐츠가 여러 페이지일 경우, 다음 페이지로 넘어가기 위한 숫자 링크들이 필요한데 이를 'Pagination'이라고 한다. 간단한 예는 갓구글에서 손쉽게 찾아볼 수 있다.

바로 이런 것. 호호.

1.목표

페이지네이션에 대한 이해와 이를 바탕으로 한 UI 디자인 도저언.

2.리서치 내용

미디엄에 Pagination 디자인에 있어 주요한 UX 원칙을 설명한 글이 있었는데 삭제되어버렸다.(땀)

그래서 혹시나 하고 브런치에 검색해봤더니 어떤 분이 그 글을 번역한 게 남아 있었다.(휴)

아무튼, 주요하게 고려해야 할 부분들을 다음과 같았다.

(1) 손쉽게 클릭 가능하게 만들어라.

어떤 요소든지 간에 clickable한 크기를 만드는 건 중요하다고 생각한다.

특히나, 이 페이지네이션 같은 경우에는 이루어져 있는 모든 요소가 클릭과 연관이 많기 때문이다.

(이러한 기능이 모바일에 들어가게 된다면? 꺄.)

여기에 추가로 구성 요소 간의 간격을 잘 조정하여 실수로 다른 숫자를 누르는 우를 범하지 않도록 하자.

(2) 현재 위치한 페이지를 표시하자.

여긴 어디... 난 누구...?

유저가 지금 어디에 있는지 단번에 알아야 하는 것은 기본 중의 기본일 것이다.

(3) 이전/다음 버튼을 제공한다. (처음/끝 버튼은?)

이전/다음 버튼은 제공하는 게 맞다고 생각하는데, 과연 처음/끝 버튼은 있어야 하는가?

부정적인 의견도 있었다. 처음/끝 버튼이 이전/다음 버튼과 혼선을 줄 수도 있다는 점.

그리고 유저는 대게 내용을 순차적으로 보는 걸 선호하기 때문에 굳이 필요하지 않다는 점.

하지만, 맨 처음으로 돌아가는 링크는 필요한 면도 있다.

왜냐하면 보통 맨 처음 페이지에 연관성이 높은 콘텐츠들이 많기 때문이다.

나의 개인적인 경험에서 보자면, 처음과 끝 버튼이 있으면 계속해서 이전 혹은 다음 버튼을 광클하지 않아도 된다는 편리함이 있어서 좋았다. 하지만, 보통 제일 끝으로 가기 위한 광클보다는 처음으로 가기 위한 광클이 더 많은 편이었던지라 맨 처음으로 가는 버튼 정도는 필요하지 않을까 하는 생각도 든다.

(4) 모바일 기기에서의 페이지네이션은?

아시다시피 모바일은 디자이너의 크레에이티브한 상상력을 마음껏 뿜뿜하기엔...넘나리..좁은...공간...(ㅇㅈ?)

아무튼 그런 공간적 제약을 염두에 두고 디자인을 해야 한다.

그래서 모바일에서만큼은 정말 필요한 요소들(현재 페이지 숫자, 이전 페이지, 다음 페이지) 정도만 필요하지 않을까 싶다.

그래서! 페이지네이션을 쓸만한 서비스를 참조해보기 위해 이커머스 앱 중 롯데면세점을 한번 실행시켜보았다.

그런데 상품을 보여 줄 때 페이지네이션이 아니라 무한 스크롤링을 사용하고 있었다...! ㅇ0ㅇ!! 호에.

(웹은 페이지네이션 기능을 사용하고 있었다.)

그렇다면... 여기서 궁금점! 무한스크롤링과 페이지네이션! 뭐가 더 좋은 걸까?

내가 생각하기엔, 뭐가 더 좋고 나쁘냐 보다는 아래 두 가지 측면에서 더 효율적인 것을 찾아야 할 것 같다.

(1) 적용시키면 좋을만한 업종(?)

(2) Web이냐 App이냐?

1번의 경우 예를 들면, 뭔가 비주얼적인걸 강하게 드러내야 하는 서비스라면 무한 스크롤링이 더 효과적일 수 있다. 인스타그램을 보자. ~~'저 이렇게 잘 먹고 잘 살고 다녀요.'~~를 빠르게 훑어보도록 하는 서비스에 클릭해서 다음 페이지로 넘어가야만 하는 페이지네이션이 있다면...?

스크롤링에 중독된 우리의 엄지와 검지가 분명 ㅂㄷㅂㄷ할 것이다.

무한 스크롤링을 통해 내가 좋아하는 빵들을 빠르게 훑어볼 수 있으며 먹고 싶은 빵을 매의 눈으로 포착 가능. 넘나 좋아.

반면, 이커머스와 같이 여러 가지의 상품을 파는 곳에서는 페이지네이션 기능이 효율적일 수 있다.

쿠팡의 페이지네이션 기능

쿠팡을 보자. 하단에 페이지네이션 기능이 있다.

그리고 쿠팡은 특이하게 스크롤이 일정 부분을 지나가면 페이지네이션이 밑에서 자동으로 올라와 하단에 계속 붙어 다닌다. (스고이)

이런 e-commerce에 페이지네이션 기능이 활발히 사용되고 있는 이유는 뭘까?

아무래도 내가 사고 싶은 아이템의 위치를 대략적으로 기억할 수 있기 때문일 것이다.

내가 한 열 번째 페이지에 갔었는데,

'음... 아까 로켓배송 되는 5,900냥짜리 누텔라 초코바 걍 사야겠다.' 하면 첫 번째 페이지로 손쉽게 돌아갈 수 있을 것이다.

근데 만약 여기에 무한스크롤링 기능이 적용된다면?

이미 먼 아래까지 온 당신.... 검지와 마우스 휠과 합심하여 위로 스크롤링하며 그 아이템을 열심히 찾고 있겠지...(ㅠㅠ)

이러한 이유로 페이지네이션은 유저의 '목적 지향적인 활동 충족'에 더 적합하다고 설명되고 있다.

그리고 이렇게 서비스의 특징뿐만 아니라 웹이냐 앱이냐에 따라서도 선택이 가능할 것 같다.

앱의 경우 앞서 말했듯이, 공간의 제약으로 인해 손가락 터치가 주된 제스처인 스마트폰에서 페이지네이션 기능은 확실히 웹에 비해 손쉽게 클릭하기 어려울 것이다.

3.GUI 작업

짜란. 위에서 공부한 것을 토대로 만들어보았다.

- 기본적으로 이전 버튼과 다음 버튼은 전 세계적으로 통용되는 화살표 아이콘을 활용했다.

- 이전 버튼의 경우 첫 번째 페이지의 경우 이전이 없기 때문에 Disabled 된 상태를 표시해주었다.

- 현재 위치를 표시할 때는 컬러+밑줄 조합을 선택했다. 처음에 밑줄 없이 디자인했었는데 밑줄을 넣으니 훠얼씬 인지가 빠르게 되었다.

그리고 보통은 라프텔을 바탕으로 GUI를 고쳐보는데, 우리 서비스는 기본적으로 무한 스크롤링 방식이 더 적합한지라 페이지네이션 기능을 쓰는 곳이 1도 없었다.(없..겠지?) 근데 생각해보니... 이번에 새로 리디자인이 되는 작품상세 페이지가 2단 레이아웃으로 바뀌면서 리뷰 기능에 페이지네이션 기능이 생긴다. 흐하호헤.

오늘 디자인한 것을 잘 활용하면 될 것 같다. (야호)