고르기 쉽게
휴대폰 사용자는 '파일'보다 '사진'을 먼저 떠올려요. 갤러리, 카메라 촬영, 파일 앱을 분명한 선택지로 보여주세요. 웹은 input file의 accept로 형식을 좁히고(MDN, n.d.-a), 영수증처럼 찍어야 하는 경우 capture로 카메라를 바로 열어요(MDN, n.d.-b). 앱은 시스템 사진 선택기(Android Developers, n.d.)를 쓰면 권한 요청이 필요 없어요. 버튼 옆에 'JPG·PDF, 최대 10MB'를 미리 적는 것이 모바일 폼 사용성의 기본이에요.
진행과 실패
마이어스(1985)는 진행률이 보이면 사람들이 기다림을 더 잘 견딘다고 했어요. 파일마다 썸네일과 진행 표시기, 취소 버튼을 두고, 해리슨과 동료들(2010)처럼 막대 모양을 다듬으면 체감 시간도 줄어요. 지하철에서 연결이 끊기면 처음부터 다시가 아니라 이어 올리기와 '다시 시도'를 제공해요. 큰 사진은 올리기 전에 기기에서 줄이면 데이터와 시간을 아껴요.
오류와 보안
너무 크거나 형식이 틀리면 고르자마자 인라인 유효성 검사로 알려줘요. WCAG 2.2(W3C, 2023) 3.3.1처럼 '파일이 12MB예요. 10MB 이하로 올려 주세요'라고 구체적으로 써요. 브라우저 검사는 쉽게 우회되니 서버에서 확장자, 실제 내용, 크기를 다시 검사하고 파일 이름을 바꿔 저장해요(OWASP Foundation, n.d.). 사진의 위치 정보(EXIF)는 공개 전에 지울지 알려줘요.
자주 묻는 질문
- 업로드 형식과 용량은 언제 알려야 하나요?
- 버튼 옆에 미리 적고, 파일을 고른 직후 다시 확인해 바로 안내해요.
- 브라우저에서 형식을 막으면 충분한가요?
- 아니요. 쉽게 우회되므로 서버에서 다시 검사해야 해요.
출처 검토일: 2026-10-27
참고문헌
- MDN Web Docs. (n.d.-a). <input type="file">. accept·multiple 속성과 파일 선택 동작 문서라, 웹 업로드 버튼을 만들 때 참고하면 도움이 돼요.
- MDN Web Docs. (n.d.-b). HTML attribute: capture. 모바일에서 카메라를 바로 여는 속성이라, 영수증·서류 촬영 업로드에 참고하면 도움이 돼요.
- OWASP Foundation. (n.d.). File upload cheat sheet. 확장자·크기·내용 검사 같은 서버 보안 수칙이라, 업로드 제한을 정할 때 참고하면 도움이 돼요.
- Android Developers. (n.d.). Photo picker. 권한 없이 사진·영상을 고르는 선택기라, 앱에서 갤러리 업로드를 만들 때 참고하면 도움이 돼요.
- Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–17). ACM. 진행률 표시가 기다림을 견디게 한다는 고전 연구라, 업로드 진행 막대의 근거로 참고하면 도움이 돼요.
- Harrison, C., Yeo, Z., & Hudson, S. E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1545–1548). ACM. 진행 막대 모양이 체감 시간을 바꾼다는 실험이라, 큰 파일 업로드 막대 디자인에 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 오류 식별(3.3.1) 기준이 있어, 너무 큰 파일·잘못된 형식 안내 문구를 쓸 때 참고하면 도움이 돼요.