일괄 작업 UX: 선택 범위와 처리 결과를 명확하게 보여 주기

일괄 작업에서 먼저 알려야 할 것은 버튼의 개수가 아니라 작업 대상입니다. 선택한 레코드 수, 선택 범위, 실행 결과와 실패한 항목을 구분해 보여 주세요. 특히 표의 페이지나 필터를 바꾼 뒤에는 ‘현재 화면에서 선택한 항목’과 ‘조건에 맞는 모든 항목’이 쉽게 혼동됩니다. 체크 표시만으로 이 차이를 추측하게 해서는 안 됩니다.

운영팀이 공급업체 목록을 정리하는 상황을 예로 들어 보겠습니다. 담당자는 필터 결과 86건 중 오래된 업체 14건을 보관 처리하려고 합니다. 표, 선택 상태, 확인 화면, 결과를 Pixso에서 설계하는 UI 흐름으로 연결하면 단계마다 대상이 어떻게 바뀌는지 검토할 수 있습니다. 공급업체 관리 화면은 디자인 과제이며 Pixso의 기본 관리 기능을 뜻하지 않습니다.

체크박스를 배치하기 전에 선택 범위를 정하기

페이지로 나뉜 표에서 ‘전체 선택’은 충분한 설명이 아닙니다. 현재 보이는 25건인지, 필터에 맞는 86건인지, 목록의 모든 건인지 정해야 합니다. 이 예에서는 헤더 체크박스가 현재 페이지만 선택합니다. 86건 전체로 확장하는 동작은 별도의 명시적 링크로 제공합니다. 한 페이지를 선택한 클릭이 추가 확인 없이 전체 결과에 적용되어서는 안 됩니다.

‘현재 페이지의 공급업체 25건 선택’ 다음에는 ‘이 필터에 맞는 공급업체 86건 모두 선택’을 보여 주고, 확장 후 상태도 ‘조건에 맞는 86건 선택’으로 바꿉니다. 헤더 체크박스의 중간 상태는 정해진 그룹의 일부만 선택되었다는 뜻이지, 작업이 일부 완료되었다는 뜻이 아닙니다. W3C 체크박스 패턴은 선택, 미선택, 혼합 상태와 키보드 조작을 설명합니다.

서버에서 ‘조건에 맞는 전체’를 검색 조건으로 보관한다면, 새 레코드가 결과에 들어왔을 때 어떻게 할지도 정해야 합니다. 선택 시점의 목록을 고정할지, 실행 시점의 검색 결과를 사용할지에 따라 처리 대상이 달라집니다. 화면에 보이지도 않았던 업체가 보관되지 않도록 이 기준을 사용자에게 알려 주세요.

페이지와 필터가 바뀌어도 선택 상태를 추적하기

담당자가 1페이지에서 6건을 고르고 2페이지에서 8건을 추가했다면 작업 막대에는 현재 화면의 8건이 아니라 총 14건이 표시되어야 합니다. 다시 1페이지로 돌아가도 처음 고른 6건의 체크가 남아 있어야 합니다. 페이지 간 선택을 지원하지 않는 제품이라면 이동 전에 해제된다는 사실을 알리세요.

필터 변경은 더 까다롭습니다. 담당자가 14건을 선택한 뒤 ‘비활성’ 필터를 ‘전체’로 바꾸었다고 합시다. 선택한 ID를 유지하거나 안내 후 해제할 수 있습니다. 어느 쪽이든 가능하지만, 화면에 보이지 않는 선택 항목을 조용히 남겨 두면 위험합니다. ‘14건 선택, 이 필터에서 6건은 숨겨짐’처럼 표시하고 숨겨진 항목을 확인하거나 선택을 해제할 수 있게 합니다.

선택 상태는 표의 일곱 번째 행이 아니라 업체 ID에 연결됩니다. 정렬 순서가 바뀌어도 같은 업체가 선택된 상태여야 합니다. 작업명 역시 ‘14건 보관’보다 ‘공급업체 14건 보관’이 명확합니다.

실행 가능한 작업과 예외를 함께 보여 주기

하나라도 선택하면 일괄 작업 막대를 보여 주되, 막대가 나타날 때 표가 갑자기 밀려 다른 행을 잘못 누르게 해서는 안 됩니다. ‘보관’과 ‘삭제’가 모두 있다면 나누어 표시하세요. 하나는 활성 목록에서 숨기는 일이고, 다른 하나는 데이터를 없앨 수 있습니다. ‘제거’라는 한 단어로 묶으면 결과를 예측하기 어렵습니다.

14건 중 2건에 진행 중인 주문이 있어 보관할 수 없다고 합시다. 전체 작업을 막거나 가능한 12건만 처리할 수 있지만, 어떤 정책을 택하든 실행 전에 ‘12건 보관 가능, 2건은 진행 중인 주문으로 제외’라고 알려야 합니다. 되돌릴 수 없는 작업이라면 확인 화면에 대상과 결과를 다시 적으세요. 되돌릴 수 있는 보관 작업에는 매번 대화상자를 띄우는 것보다 명확한 실행 취소가 나을 수 있습니다. 자세한 판단 기준은 삭제 확인 UX 가이드에서 다룹니다.

확인 화면에서 구체적인 결과를 미리 보여 주기

이 예의 확인 문구는 ‘공급업체 12건을 보관합니다. 활성 목록에서 제외되며, 진행 중인 주문이 있는 2건은 변경하지 않습니다’처럼 쓸 수 있습니다. 잘못 처리했을 때의 영향이 크다면 대상 이름의 목록도 펼쳐 볼 수 있게 하세요. ‘정말 계속하시겠습니까?’만으로는 무엇을 승인하는지 알 수 없습니다.

작업 막대에는 ‘14건 선택’, 확인 화면에는 ‘12건 처리’가 나온다면 차이를 바로 설명해야 합니다. 여러 페이지에 흩어져 있어도 확인 화면이 현재 페이지에만 의존해서는 안 됩니다. 대상이 너무 많아 이름을 모두 나열할 수 없다면 정확한 수, 필터 조건, 대표 항목과 전체 선택을 확인하는 경로를 제공하세요. 오래 걸리는 작업이라면 완료와 실패를 어디서 확인할 수 있는지도 알려 줍니다.

일부 성공과 재시도 대상을 분리하기

처리 가능한 12건 중 11건이 보관되고 한 건이 일시적인 서버 오류로 실패했다고 합시다. 처음부터 제외된 2건도 있습니다. 결과는 ‘11건 보관 완료, 1건 미처리, 2건 변경 없음’으로 구분해야 합니다. 실패한 업체를 다시 열거나 선택할 수 있게 하고, 재시도는 그 한 건에만 적용합니다. 전체 작업을 다시 실행하면 이미 성공한 항목에 작업이 중복될 수 있습니다.

결과가 확정되기 전에 선택 상태를 지우지 마세요. 처리 중에는 중복 제출을 막으면서 어떤 목록을 처리하는지 보여 줍니다. 완료 안내는 보조 기술도 인식할 수 있어야 합니다. W3C의 상태 메시지 안내는 성공, 진행 상태와 오류를 현재 작업을 가로막지 않으면서 전달하는 방법을 설명합니다. 잠깐 나타났다 사라지는 알림에 실패 내역을 모두 맡기지 마세요.

담당자의 전체 흐름을 프로토타입으로 확인하기

Pixso에서 네 가지 화면을 만듭니다. 1페이지에서 6건을 선택한 표, 2페이지에서 8건을 추가한 표, 12건 가능·2건 제외를 보여 주는 확인 화면, 11건 성공·1건 실패를 보여 주는 결과 화면입니다. 업체 이름과 숫자는 모든 화면에서 일치해야 합니다. 이 디자인 파일은 업무용 화면을 검토하기 위한 것이며, 실제 서버의 처리 가능 여부 판정은 별도로 구현해야 합니다.

검토자에게 ‘진행 중인 주문이 있는 업체를 제외하고 비활성 업체를 보관하세요’라는 과제만 줍니다. 페이지를 넘긴 뒤 선택 범위를 이해하는지, 실행 전에 제외된 2건을 발견하는지, 나중에 실패한 1건을 찾는지 살펴보세요. 첫 페이지만 문제없이 작동하는 화면으로는 실제 일괄 업무를 감당하기 어렵습니다.

좋은 일괄 작업은 레코드, 선택, 결과 사이의 연결을 끝까지 유지합니다. 실행 전에는 정확한 대상 집합을, 실행 후에는 그 안의 각 항목에 일어난 일을 설명합니다.