피그마 목록 화면 검토법: 검색, 필터, 정렬, 페이징 체크리스트
피그마 목록 화면 검토법: 검색·필터·정렬·페이징 체크리스트 피그마 목록 화면 검토법: 검색, 필터, 정렬, 페이징 체크리스트 목록 화면은 서비스에서 사용자가 가장 오래 머무는 화면 중 하나입니다. 검색, 필터, 정렬, 페이징은 각각 따로 노는 기능이 아니라 하나의 흐름으로 연결되어야 합니다. 이 네 가지 중 하나라도 어긋나면 사용자는 원하는 정보를 찾지 못하고 이탈하게 됩니다. 이 글에서는 피그마로 목록 화면을 디자인하거나 검토할 때 놓치기 쉬운 부분을 검색, 필터, 정렬, 페이징 네 가지 기준으로 나눠 체크리스트로 정리했습니다. 📌 목차 검토 전 준비 — 목록 화면의 3가지 상태값 정의 검색(Search) 체크리스트 필터(Filter) 체크리스트 정렬(Sort) 체크리스트 페이징(Paging) 체크리스트 실전 QA 체크리스트 요약표 결론 — 체크리스트를 실제 QA에 적용하는 법 자주 묻는 질문 (FAQ) 검토 전 준비 — 목록 화면의 3가지 상태값 정의 목록 화면을 검토하기 전에 빈 상태, 로딩 상태, 에러 상태부터 정의해야 합니다. 빈 상태는 데이터가 없을 때 사용자에게 다음 행동을 안내하는 화면이고, 로딩 상태는 데이터를 불러오는 동안 스켈레톤이나 스피너로 대기 경험을 관리하는 구간입니다. 에러 상태는 요청 실패 시 재시도 버튼과 명확한 안내 문구가 있는지 확인하는 부분입니다. 이 세 상태를 먼저 잡아야 이후 체크리스트가 헛돌지 않습니다. 검색(Search) 체크리스트 검색창은 화면 상단, 엄지 손가락이 닿기 쉬운 위치에 있는지부터 확인합니다. 자동완성과 최근 검색어가 노출될 때 리스트 항목과 시각적으로 구분되는지, 검색 실행 방식이 버튼 클릭인지 실시간 필터링인지 명확한지도 확인해야 합니다. 가장 자주 놓치는 부분은 검색 결과 0건일 때 화면입니다. 빈 화면만 덩그러...