파일 업로드 UX에서 놓치기 쉬운 상태들

먼저 던질 질문

업로드 전후에 사용자는 무엇을 알아야 할까

핵심 관점

파일 업로드 UX는 파일 선택 버튼이 아니라 파일별 상태 관리다. 업로드 전 제한, 진행률, 실패, 재시도, 완료 확인이 모두 필요하다.

입력이 매끄러운 장면

업로드 전 허용 형식과 최대 용량을 명확히 보여준다.

업로드 실패 시 실패한 파일만 다시 시도할 수 있게 한다.

업로드가 멈추는 흐름

파일 선택 후 아무 반응이 없어 업로드 중인지 알 수 없다.

용량 초과를 서버 응답 후에야 알려준다.

입력 흐름 사례와 근거

파일 업로드는 선택 이후의 상태가 더 중요하다

파일 업로드 UX는 파일 선택 버튼만 만들면 끝나지 않는다. 선택됨, 업로드 중, 진행률, 성공, 실패, 재시도, 삭제, 형식 오류, 용량 초과가 모두 필요하다.

GOV.UK의 File upload 컴포넌트는 명확한 라벨, 힌트, 오류 메시지를 함께 고려한다. 실제 제품에서는 여기에 드래그 앤 드롭, 다중 파일, 미리보기, 바이러스 검사 대기 같은 상태가 추가된다.

실무 해석

실패 원인을 구분해야 사용자가 고칠 수 있다. 용량 제한, 허용 형식, 네트워크 오류, 서버 검증 실패는 서로 다른 복구 경로를 가져야 한다.

업로드 설계 기준

• 제한 조건을 선택 전에 알려준다
• 파일별 상태를 분리해 보여준다
• 실패한 파일만 다시 시도할 수 있게 한다

자주 빠지는 함정

업로드 실패를 전체 실패로 처리하면 사용자는 성공한 파일까지 다시 올려야 한다. 여러 파일 업로드에서는 부분 성공과 부분 실패를 기본으로 생각해야 한다.

추가로 비교할 업로드 사례

• 클라우드 파일 업로드, 이미지 업로드 폼, 이력서 PDF 업로드 사례를 비교한다
• 업로드 전 제한 조건을 명확히 보여주는 사례를 찾는다
• 여러 파일 중 일부만 실패한 처리 사례를 모은다

업로드 상태 질문

• 업로드 전, 중, 후 상태를 모두 나눴는가
• 실패한 파일만 재시도하는 흐름을 다뤘는가

출처

• GOV.UK Design System, File upload: https://design-system.service.gov.uk/components/file-upload/
• Nielsen Norman Group, Error-Message Guidelines: https://www.nngroup.com/articles/error-message-guidelines/
• W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
• Material Design 3, Progress indicators: https://m3.material.io/components/progress-indicators/overview