피그마 목록 화면 검토법: 검색, 필터, 정렬, 페이징 체크리스트
목록 화면은 서비스에서 사용자가 가장 오래 머무는 화면 중 하나입니다. 검색, 필터, 정렬, 페이징은 각각 따로 노는 기능이 아니라 하나의 흐름으로 연결되어야 합니다. 이 네 가지 중 하나라도 어긋나면 사용자는 원하는 정보를 찾지 못하고 이탈하게 됩니다.
이 글에서는 피그마로 목록 화면을 디자인하거나 검토할 때 놓치기 쉬운 부분을 검색, 필터, 정렬, 페이징 네 가지 기준으로 나눠 체크리스트로 정리했습니다.
검토 전 준비 — 목록 화면의 3가지 상태값 정의
목록 화면을 검토하기 전에 빈 상태, 로딩 상태, 에러 상태부터 정의해야 합니다.
빈 상태는 데이터가 없을 때 사용자에게 다음 행동을 안내하는 화면이고, 로딩 상태는 데이터를 불러오는 동안 스켈레톤이나 스피너로 대기 경험을 관리하는 구간입니다. 에러 상태는 요청 실패 시 재시도 버튼과 명확한 안내 문구가 있는지 확인하는 부분입니다.
이 세 상태를 먼저 잡아야 이후 체크리스트가 헛돌지 않습니다.
검색(Search) 체크리스트
검색창은 화면 상단, 엄지 손가락이 닿기 쉬운 위치에 있는지부터 확인합니다.
자동완성과 최근 검색어가 노출될 때 리스트 항목과 시각적으로 구분되는지, 검색 실행 방식이 버튼 클릭인지 실시간 필터링인지 명확한지도 확인해야 합니다.
가장 자주 놓치는 부분은 검색 결과 0건일 때 화면입니다. 빈 화면만 덩그러니 두지 말고, 검색어 재입력을 유도하는 문구와 대안 콘텐츠를 함께 배치했는지 확인해야 합니다.
필터(Filter) 체크리스트
필터는 적용 전과 적용 후 상태가 시각적으로 명확히 구분되어야 합니다.
여러 필터를 동시에 적용했을 때 선택된 필터 개수나 태그가 화면에 잘 보이는지, 필터 조합이 서로 충돌하지 않는지 확인합니다. 필터 초기화 버튼은 찾기 쉬운 위치에 있어야 하고, 클릭 한 번으로 전체 초기화가 되는지도 체크 대상입니다.
필터가 많아질수록 사용자는 지금 무엇을 켜놓았는지 잊어버리기 쉬우므로 이 부분을 특히 꼼꼼히 확인해야 합니다.
정렬(Sort) 체크리스트
정렬 옵션은 드롭다운으로 감출지, 탭으로 노출할지부터 결정해야 합니다.
옵션 개수가 적으면 탭이 발견성이 좋고, 많으면 드롭다운이 화면을 깔끔하게 유지해 줍니다. 기본 정렬값이 서비스 목적에 맞게 설정되어 있는지, 정렬 기준을 바꿨을 때 스크롤 위치가 맨 위로 리셋되는지도 확인해야 합니다.
스크롤 위치가 갑자기 튀면 사용자는 방금 본 항목을 다시 찾느라 헤매게 됩니다.
페이징(Paging) 체크리스트
무한 스크롤과 페이지네이션 중 어떤 방식이 맞는지는 콘텐츠 성격에 따라 달라집니다.
탐색 목적이 강하면 무한 스크롤이, 특정 항목을 다시 찾아야 하는 목적이면 페이지네이션이 유리합니다. 페이지 이동 시 로딩 인디케이터가 있는지, 마지막 페이지에 도달했을 때 더 이상 항목이 없다는 명확한 종료 표시가 있는지도 확인해야 합니다. 이 표시가 없으면 사용자는 로딩이 멈춘 것인지 데이터가 끝난 것인지 헷갈리게 됩니다.
실전 QA 체크리스트 요약표
| 항목 | 체크 포인트 |
|---|---|
| 검색 | 검색창 위치, 자동완성, 0건 결과 화면 |
| 필터 | 적용 상태 표시, 조합 충돌 여부, 초기화 버튼 |
| 정렬 | 노출 방식, 기본값, 스크롤 위치 처리 |
| 페이징 | 방식 선택, 로딩 표시, 종료 지점 안내 |
이 표는 실무에서 바로 인쇄해서 체크박스처럼 사용할 수 있도록 만들었습니다. QA 단계에서 팀원과 공유하면 빠뜨리는 항목을 확실히 줄일 수 있습니다.
결론 — 체크리스트를 실제 QA에 적용하는 법
이 체크리스트는 디자인 완료 후 한 번, 개발 완료 후 한 번, 이렇게 두 번 돌리는 것이 이상적입니다.
디자인 단계에서는 상태값과 흐름이 빠짐없이 정의되었는지 확인하고, 개발 완료 후에는 실제 데이터로 엣지 케이스(빈 결과, 필터 조합, 마지막 페이지)를 직접 눌러보며 확인합니다.
체크리스트를 팀 노션이나 피그마 코멘트에 고정해두면 다음 프로젝트에서도 재사용할 수 있습니다.
자주 묻는 질문 (FAQ)
Q. 목록 화면 검토 시 가장 많이 놓치는 실수는 무엇인가요?
빈 상태와 에러 상태를 나중으로 미루다가 결국 검토 없이 넘어가는 경우가 가장 흔합니다. 정상 데이터가 있는 화면만 보고 QA를 끝내면, 실제 사용자가 마주치는 검색 0건이나 네트워크 에러 상황에서 화면이 깨지거나 안내 문구가 없는 채로 배포될 수 있습니다.
Q. 필터와 정렬을 함께 쓸 때 우선순위는 어떻게 되나요?
필터로 범위를 먼저 좁힌 뒤 정렬을 적용하는 순서가 사용자에게 더 직관적입니다. 반대로 정렬부터 하고 필터를 걸면 사용자가 정렬 기준을 다시 확인해야 하는 인지 부담이 생깁니다.
Q. 무한 스크롤이 항상 좋은 선택인가요?
그렇지 않습니다. 탐색형 콘텐츠(피드, 상품 목록)에는 좋지만, 특정 항목을 다시 찾아야 하는 서비스(주문 내역, 검색 이력, 관리자 화면)에는 오히려 불편할 수 있습니다. 사용자가 이전에 본 항목을 다시 찾으려면 위치 기준이 되는 페이지 번호가 있는 편이 낫습니다.
Q. 모바일과 데스크톱에서 목록 화면 검토 기준이 달라야 하나요?
그렇습니다. 모바일에서는 필터와 정렬을 바텀시트나 별도 화면으로 빼는 경우가 많아서 진입/이탈 흐름을 따로 확인해야 합니다. 데스크톱은 화면이 넓어서 필터를 사이드바에 상시 노출할 수 있지만, 모바일은 공간 제약 때문에 숨김/펼침 상태 전환이 자연스러운지가 검토 포인트입니다.
Q. 검색과 필터를 동시에 적용했을 때 결과가 없으면 어떻게 처리해야 하나요?
검색어와 필터 중 어느 쪽이 원인인지 사용자가 구분할 수 있게 안내해야 합니다. 예를 들어 특정 검색어에 대한 결과가 없다는 문구와 함께 필터 해제를 유도하는 안내를 함께 보여주면 이탈률을 줄일 수 있습니다.
Q. 페이지네이션 번호는 몇 개까지 노출하는 것이 적당한가요?
일반적으로 현재 페이지 기준 앞뒤 2~3개 정도만 노출하고 처음/마지막 페이지로 바로 이동하는 버튼을 별도로 두는 방식이 많이 쓰입니다. 전체 페이지 번호를 다 노출하면 화면이 복잡해지고, 특히 모바일에서는 터치 영역이 좁아져 오조작이 잦아질 수 있습니다.