인터넷 쇼핑몰에서 상품을 검색하거나 병원 EMR에서 환자 목록을 조회하다 보면 화면 아래쪽에 1, 2, 3, 4, 5와 같은 숫자가 표시되는 것을 볼 수 있습니다. 이것이 바로 Pagination(페이지네이션)입니다.
많은 정보를 한 화면에 모두 표시하는 대신 여러 페이지로 나누어 보여주는 UI 기술입니다.
예를 들어 병원에 등록된 환자가 1,000명이라고 생각해 보겠습니다. 1,000명의 환자를 한 화면에 모두 표시하면 화면이 길어지고, 정보를 찾거나 처리하는 데 불편할 수 있습니다. 페이지네이션을 적용하면 한 화면에 20명씩 보여주고, 다음 페이지를 선택해 나머지 환자를 확인할 수 있습니다.
1. Pagination은 어떤 모습일까?
일반적인 페이지네이션은 다음과 같은 형태입니다.
〈 이전 1 2 3 4 5 다음 〉
각 숫자는 하나의 페이지를 의미합니다.
이전: 앞 페이지로 이동
1, 2, 3: 해당 번호의 페이지로 이동
다음: 다음 페이지로 이동
현재 페이지: 선택된 번호를 강조 표시
예를 들어 환자 목록이 100명이고 페이지당 10명을 보여준다면 총 10페이지가 만들어집니다. 1페이지에는 1~10번 환자, 2페이지에는 11~20번 환자가 표시되는 방식입니다.
시각적 예시는 병원 EMR 환자 목록을 활용하면 좋습니다. 첫 화면에는 1~10번 환자가 보이고, 2페이지를 누르면 11~20번 환자로 목록이 바뀌는 모습을 나란히 비교하면 이해하기 쉽습니다.
2. Pagination과 무한 스크롤은 무엇이 다를까?
두 방식 모두 많은 데이터를 나누어 보여주지만 사용 방법이 다릅니다.
Pagination(페이지네이션)은 사용자가 페이지 번호를 직접 선택해 이동합니다.
Infinite Scroll(무한 스크롤)은 화면을 아래로 내리면 다음 콘텐츠가 자동으로 추가됩니다.
예를 들어 비아토 스토리에서는 독자가 새로운 이야기를 계속 발견할 수 있도록 무한 스크롤을 사용할 수 있습니다. 반면 병원 EMR의 환자 목록이나 검사 결과 조회에서는 특정 페이지를 선택하고 해당 목록을 관리할 수 있는 페이지네이션이 더 적합할 수 있습니다.
특히 병원 업무 시스템에서는 특정 환자나 기록을 다시 찾을 수 있어야 하므로 페이지 번호를 명확하게 표시하는 방식이 유용합니다.
3. AI에게 어떻게 요청해야 할까?
막연한 요청은 다음과 같습니다.
“목록 아래에 페이지 번호를 만들어 줘.”
이렇게만 요청하면 숫자는 표시되지만 실제 데이터가 변경되지 않거나 페이지를 이동할 때마다 전체 화면이 새로고침될 수 있습니다.
보다 구체적인 요청은 다음과 같습니다.
“환자 목록에 Pagination 기능을 적용해 줘. 한 페이지에 20명씩 표시하고, 페이지 번호를 선택하면 해당 페이지의 데이터만 조회하도록 만들어 줘. 현재 페이지를 강조 표시하고 이전·다음 버튼도 추가해 줘.”
중요한 것은 페이지 번호를 디자인하는 것이 아니라 실제 데이터 조회와 연결하는 것입니다.
4. 바로 복사해서 사용하는 실전 프롬프트
아래 프롬프트를 복사해서 병원 관리자 프로그램이나 EMR에 적용해 보세요.
병원 EMR의 환자 목록 화면에 Pagination 기능을 구현해 줘.
기본적으로 한 페이지에 환자 20명을 표시해 줘.
화면 하단에 이전, 페이지 번호, 다음 버튼을 배치해 줘.
현재 선택된 페이지 번호는 파란색 배경으로 강조해 줘.
페이지 번호를 클릭하면 해당 페이지의 환자 목록으로 변경해 줘.
첫 페이지에서는 이전 버튼을 비활성화하고 마지막 페이지에서는 다음 버튼을 비활성화해 줘.
전체 환자 수와 현재 표시 범위를 함께 보여줘. 예를 들어 '전체 1,000명 중 1~20명 표시'와 같이 표현해 줘.
페이지당 표시 개수를 10명, 20명, 50명으로 변경할 수 있도록 해 줘.
검색이나 필터를 적용하면 검색 결과를 기준으로 페이지 수를 다시 계산해 줘.
페이지 이동 시 불필요하게 전체 화면을 새로고침하지 않도록 해 줘.
실제 서버 데이터와 연결하고, 대량 데이터에서도 빠르게 동작하도록 서버 측 Pagination을 적용해 줘.
PC와 모바일 환경 모두에서 자연스럽게 사용할 수 있도록 반응형으로 구성해 줘.
기존 EMR의 디자인과 일관성을 유지해 줘.
이렇게 요청하면 단순한 화면 디자인을 넘어 실제 업무에 사용할 수 있는 페이지네이션을 구현하는 데 도움이 됩니다.
5. 결과가 마음에 들지 않을 때
페이지 번호가 너무 많다면
“페이지가 많아지면 모든 번호를 표시하지 말고 처음과 마지막 페이지, 현재 페이지 주변의 번호만 표시해 줘. 중간에는 생략 기호(...)를 사용해 줘.”
페이지 이동이 느리다면
“전체 데이터를 한꺼번에 불러오지 말고 현재 페이지에 필요한 데이터만 서버에서 조회하도록 변경해 줘. 데이터베이스 조회에 LIMIT과 OFFSET 또는 커서 기반 페이지네이션을 활용해 줘.”
검색하면 페이지가 제대로 바뀌지 않는다면
“검색어나 필터 조건이 변경되면 현재 페이지를 1페이지로 초기화하고, 검색 결과를 기준으로 전체 페이지 수를 다시 계산해 줘.”
모바일에서 페이지 번호가 잘린다면
“모바일에서는 페이지 번호를 간결하게 표시하고 이전·다음 버튼을 쉽게 누를 수 있도록 배치해 줘. 터치 영역도 충분히 확보해 줘.”
6. Pagination을 사용할 때 기억할 점
페이지당 데이터 수를 적절하게 설정하세요. 너무 적으면 페이지 이동이 잦아지고, 너무 많으면 화면이 무거워집니다.
전체 데이터 건수를 표시하세요. 사용자가 현재 데이터 규모를 파악할 수 있어야 합니다.
검색과 필터를 연동하세요. 검색 결과가 바뀌면 페이지 수도 함께 변경되어야 합니다.
현재 페이지를 명확하게 구분하세요. 사용자가 현재 어느 페이지를 보고 있는지 알 수 있어야 합니다.
데이터 규모에 맞는 방식을 선택하세요. 대량 데이터에서는 서버 측 페이지네이션을 고려해야 합니다.
특히 병원 EMR에서는 환자 목록, 처방 내역, 검사 결과, 간호 기록, 청구 내역 등 다양한 업무 화면에 페이지네이션을 적용할 수 있습니다.
오늘 기억할 한 가지
Pagination은 많은 데이터를 여러 페이지로 나누어 사용자가 효율적으로 조회하고 관리할 수 있도록 돕는 UI 기술입니다.
AI에게 요청할 때는 페이지 번호만 만들어 달라고 하지 마세요. 페이지당 데이터 수, 실제 데이터 조회, 검색 연동, 모바일 대응까지 함께 지정하면 완성도 높은 업무 화면을 만들 수 있습니다.
다음 편에서는 사용자가 원하는 정보를 빠르게 찾도록 도와주는 Search Bar(검색창)를 살펴보겠습니다. 비아토 스토리 검색과 병원 EMR 환자 검색 화면을 예로 들어 실전 프롬프트를 알아보겠습니다.