Pagination UI를 직접 만들어보면서 배운점

Pagination을 만들게 된 계기

농구장 검색 프로젝트를 진행하면서, 현재는 데이터가 많지 않지만 데이터가 많아질 경우를 대비해 검색 내용을 보여줄 List가 필요하다고 판단했다. 데이터가 많아지면 모든 정보를 한번에 보여주는 것보다는 여러번으로 나누어 유저들에게 보여주는 것이 UX 측면에서 화면의 복잡성을 줄이고 빠른 서비스를 제공할 수 있을 것이라고 생각했다.

고민했던 UI는 Infinite Scroll과 Pagination이였다. 일반적으로 이 두 가지 중에 하나를 많이 사용하는 것으로 알고 있는데, 이 두 가지 중에 어떤 UI가 내 프로젝트에 더욱 부합할 것인지 그 특징과 내 프로젝트의 연관성에 대해 고민하게 되었다.

어떤 UI가 적합할까

내가 생각하는 Infinite Scroll의 특징은 누적 데이터를 효율적으로 유저가 확인할 수 있다는 장점이 있다고 생각했다. Pagination과는 다르게, 간단하게 내리기만 하면 데이터를 추가로 확인할 수 있고 내가 원하는 데이터가 나올때까지, 그리고 그 누적된 데이터를 통해 이전의 데이터와 비교 확인할 수 있는 장점이 있다고 생각했다. 하지만 현재 프로젝트의 가장 큰 목적은 필요한 농구장 주소 등의 정보 습득이자 지도상에서의 위치 파악이기 때문에 누적데이터를 통한 비교 분석과 지도상에 추가되는 마커들은 오히려 사용자의 복잡성을 가중시키는 비효율적인 방법이 되겠다고 생각했다.
이러한 생각과 함께 Pagination은 제한된 갯수의 데이터를 화면에 보여주면서 page 전환을 통해 현재 페이지의 데이터만 깔끔하게 볼 수 있어 더욱 좋은 UX를 제공할 수 있을 것으로 생각해 Pagination을 결정하게 되었다.

Pagination을 설계하면서

Pagination을 설계하면서 가장 먼저 생각했던 부분은 design이였다. design을 먼저 고려했던 이유는 아래 사진과 같이 다양한 design으로 구현할 수 있고 design에 따라서 기능들이 추가될 수 있기 때문이다.

design에서 가장 고려했던 부분은 필수적인 기능을 포함하는 심플함이었다. 단순히 화살표로 하나씩 이전/다음 page로 전환하는 것과 페이지를 눌렀을 때 해당 page로 바로 접근하는 기능만 포함하여 심플한 design으로 설계했다.

또한, 설계시 Pagination에 대해 동작 과정에 대한 필요 기능을 세분화해봤다.

1. 클릭했을 때 서버로 새로운 데이터 요청하기
2. 처음 1~5까지의 페이지를 UI에 표시하고 5번에서 다음 화살표를 누르면 6~10까지 보여주는 방식으로 페이지 처리하기
3. 현재 페이지를 특정 색으로 표현하기
4. 1 페이지 이전, 마지막 페이지 다음으로 이동하려 할 경우 화살표 버튼의 동작 막기

재사용 가능한 UI를 만들기 위한 고민

설계에서 난관에 봉착했던 부분은 어떻게 의존성을 낮출 수 있을까라는 부분이었다. 다른 곳에서도 재사용할 수 있는 UI를 만들고 싶었고, 그러기 위해서는 props를 얼마나 적절히 설계해야하는가가 중요하다고 생각했다. 그 중에서 고민을 했던 부분은 구현 중 설계를 수정했던 부분인 비동기 통신에 관한 부분이었다. (이 부분은 어쩌면 아래의 설계 실패에 다뤄야 했을 수도 있다.) 처음에는 단순히 비동기 데이터 통신을 진행하는 callback 함수를 넣으면 되겠다고 생각했지만, Global Store에 있는 유저 검색어 및 Filter Input과 Pagenation 자체에서 관리하는 page 정보가 데이터 통신에 필요한 정보였기 때문에 어떻게 전달할지 고민했다. 하지만, 완전히 재사용 가능한 UI를 만들고 싶어서 효율적이다라고 말하기는 힘들어도 현재 프로젝트 구조 (Redux와 Reduxs-saga 사용)에 맞는 방법으로 검색어 Input, filter Input 정보를 props로 전달하고 dispatch를 실행하는 callback 함수까지 props로 전달하는 방식으로 재사용 가능하도록 구현했다.

const Pagination = ({ 
  courtsPerPage, // 한 page당 court 정보 - 서버 요청시 필요
  numbersOnList,  // Pagination UI에 보여줄 숫자 ex) < 1 2 3 4 5 > - 5, < 1 2 3 > - 3
  totalCourts,  // 전체 court 정보 - 전체 pagination의 page 계산시 필요
  clickHandler, // 데이터 통신을 위한 event hanlder
  userInput, // 데이터 통신에 필요한 유저 검색어 Input
  filterInput, // 데이터 통신에 필요한 유저 Filter Input
}) => {

설계의 실패에서 더욱 꼼꼼한 설계의 필요성을 느끼다

기능을 구현하고 직접 UI를 동작해보면서 설계시에 고려하지 못했던 필요 기능들을 찾아내게 되었다. 초기 설계가 완벽하지 않거나 다른 방향으로 진행될 수도 있다고하여 어쩌면 굉장히 사소한 부분으로 치부될 수도 있지만, 더욱 완벽한 설계를 익히고 설계에 맞춰 진행하는 것을 추구하고자 이번에 실패했던 부분을 따로 적어 향후 설계의 발전을 이뤄내고 싶다.

설계에 실패했던 부분은 아래와 같다.

1. 새로운 검색시 페이지 1로 돌아가기
2. 1 페이지 이전, 또는 마지막 페이지 이후로 화살표를 사용할 수 없도록 화살표 버튼 색 변경하여 UX측면 개선
3. Page를 변경할 때마다 한 번 요청한 페이지의 데이터는 추가 요청하지 않도록 caching작업 진행

지속적인 개선을 통해 UI를 이해하기

추후 내가 아직도 발견하지 못한 Pagination에서 필요한 세부 기능을 발견할 수도 있다. Pagination을 처음 구현했던 만큼 그 UI 자체에 대한 이해 부족이 설계 실패의 가장 큰 원인이라고 생각한다. 경험은 좋은 보완 방법이라고 생각한다. 내가 UI를 구현하면서 설계했던 내용, 필요하다고 생각했던 기능, 과정 등을 문서화 하여 추후 같은 UI를 설계할 경우 참고하고 반복적인 실패를 줄이는 것이 중요하다고 생각한다.

도움받은 문서

공부한 내용을 정리하는 공간으로 학습 중 습득한 내용이 정확하지 않은 정보를 포함할 수 있어 추후 발견시 수정하도록 하겠습니다.