모바일 반응형 데이터 테이블: 필드 우선순위 정하기

모바일 데이터 테이블은 모든 열을 축소한다고 사용하기 쉬워지지 않습니다. 사용자가 내려야 할 결정을 먼저 정하고 필요한 필드, 작업, 상태의 우선순위를 정하세요. Pixso에서 데이터 테이블 컴포넌트를 검토하면 데스크톱 정보를 모바일 결정 흐름으로 정리할 수 있습니다.

먼저 필요한 결정을 정하기

행 열기, 승인, 상태 비교처럼 화면에서 완료해야 할 결정을 한 가지씩 정합니다. 열을 남길 기준은 ‘정보가 있는가’가 아니라 ‘다음 결정에 필요한가’입니다. 식별자, 상태, 기한, 금액을 우선하고 부가 정보는 상세 화면으로 이동합니다.

필드를 숨길 때는 행을 열면 같은 정보에 도달할 수 있다고 알려 주세요. 아이콘만으로 뜻을 전달하지 말고 화면 폭에 맞는 라벨과 상태명을 유지합니다.

스크롤과 상세 화면의 경계 정하기

가로 스크롤을 사용하더라도 첫 화면에서 주요 식별 정보와 결정 정보를 읽을 수 있어야 합니다. 고정 열, 줄바꿈, 카드 전환 중 무엇을 쓸지는 행 길이와 작업 빈도로 정합니다.

1. 사용자의 결정과 완료 조건을 하나씩 적는다.
2. 결정에 필요한 필드를 우선순위로 정렬한다.
3. 숨긴 필드를 상세 화면이나 펼침 행으로 옮긴다.
4. 필터, 정렬, 선택 상태를 분명히 표시한다.
5. 로딩, 빈 결과, 오류, 권한 부족 상태를 확인한다.

행 설명은 짧게 쓰고 중요한 값을 앞에 둡니다. 필터 변경 결과는 수와 조건으로 확인하게 하고, 결과가 없을 때도 검색 조건을 되돌릴 수 있게 합니다.

선택과 일괄 작업을 안전하게 만들기

체크박스를 사용한다면 선택 수, 대상 범위, 실행 결과를 같은 화면에서 확인하게 합니다. 일괄 작업 전에 대상을 미리 보고 권한이나 상태 때문에 할 수 없는 작업은 이유와 함께 표시합니다.

업데이트 충돌과 페이지 이동 다루기

다른 사람이 행을 바꾸거나 다음 페이지를 불러오는 동안 필터가 바뀔 수 있습니다. 최신 서버 상태를 기준으로 삼고 이전 값과 현재 값을 알려 주세요. 선택을 유지할 수 없다면 대상 범위를 다시 확인하게 합니다.

무한 스크롤에서는 현재 위치와 로딩 상태를 알립니다. 페이지네이션에서는 이동 후에도 필터와 정렬 조건을 유지해 돌아왔을 때 같은 행을 찾게 합니다.

빈 결과·오류·권한 상태 설계

데이터 없음, 조건 불일치, 로딩 실패, 권한 부족을 하나의 메시지로 합치지 마세요. 이유와 다음 작업을 짧게 설명하되, 오류에서 기밀 데이터의 존재를 추측할 수 없게 합니다.

일부 행만 실패했다면 성공한 행과 재시도할 행을 나눕니다. 결과가 불명확할 때 다시 보내게 하지 말고 처리 ID가 있으면 표시합니다.

실제 데이터로 결정 흐름 테스트

관리자, 담당자, 뷰어 화면을 같은 데이터로 확인합니다. 긴 이름, 여러 상태, 0건, 권한 부족, 오프라인 복귀, 키보드 조작, 화면 회전을 테스트해 첫 화면에서 잘못 판단하지 않는지 확인합니다.

Pixso에서 데스크톱과 모바일 프레임을 같은 파일로 연결하고 필드 우선순위, 펼침 행, 선택, 오류 상태를 비교하세요. 리뷰에서는 모양보다 사용자가 다음에 할 일을 확인합니다.

구현에 필요한 우선순위 전달

최종 디자인에 필수 표시 필드, 상세로 옮길 필드, 작업 대상 범위, 빈 결과·오류·권한 상태, 접근성 조건을 기록합니다. 로딩, 필터 변경, 행 열기, 작업 결과처럼 안전하게 측정할 이벤트를 정하고 개인정보나 기밀 값을 로그에 남기지 않습니다.