올리기 전에 알려주기

KRDS CP-408 — 파일 유형, 파일 크기, 파일 개수 제한에 대해 안내하고 있다.

0. 들어가며 — 올렸더니 “지원 안 하는 형식”이면

이번 528편은 파일 유형, 파일 크기, 파일 개수 제한에 대해 안내하라는 규칙입니다.

파일 업로드에 — 허용 형식(PDF·JPG 등), 최대 크기, 최대 개수 제한이 있는데 안 알려주면, 사용자는 파일을 고른 뒤 오류를 만나 좌절하죠. CP-408은 이 세 가지 제한을 미리 안내하라고 규정합니다. 오류 예방 정신이죠. 이번 편을 풀어 냅니다.

1. 원문 — 유형·크기·개수 제한 안내

CP-408 (컴포넌트 > 파일 업로드) “파일 유형, 파일 크기, 파일 개수 제한에 대해 안내하고 있다.”

파일 업로드의 허용 파일 유형(형식), 최대 파일 크기, 최대 파일 개수 제한을 사용자에게 안내하라는 뜻입니다.

정리: 파일 유형·크기·개수 제한을 미리 안내하라. 이게 CP-408입니다.

2. 왜 제한 안내인가

파일 업로드에는 — 보통 세 가지 제한이 있습니다:

파일 유형(형식) — 허용하는 파일 형식(PDF, JPG, PNG, HWP 등). 시스템이 — 특정 형식만 받죠.

파일 크기 — 최대 크기(예: 10MB 이하). 서버·네트워크 한계로 제한하죠.

파일 개수 — 최대 개수(예: 5개 이하). 다중 업로드 시요.

이 제한들이 있는데 — 사용자에게 안 알려주면 문제가 생깁니다.

제한 안내가 없을 때:

선택 후 오류 사용자가 제한을 모른 채 파일을 골라 올렸다가, ‘지원하지 않는 형식입니다’, ‘크기 초과’, ‘개수 초과’ 오류를 만나면 좌절합니다. 특히 파일을 스캔·촬영해 준비한 노력이 헛수고가 되죠(다른 형식으로 다시 만들어야).

반복 시행착오 — 제한을 추측하며 — 형식 바꾸고, 크기 줄이고, 개수 조절하며 여러 번 시도합니다. 짜증나죠.

준비 어려움 — 제한을 미리 모르면 — 파일을 어떻게 준비해야 할지(어떤 형식으로 스캔, 얼마나 압축) 모릅니다.

그래서 CP-408은 — 세 가지 제한을 미리 안내하라고 합니다:

유형 안내 ’허용 형식: PDF, JPG, PNG’처럼 받는 파일 형식을 명시합니다. 사용자가 맞는 형식으로 준비 하게요. 파일 선택 대화상자도 accept 속성으로 해당 형식만 보이게 하면 더 좋죠.

크기 안내 ’최대 10MB’처럼 파일당(또는 전체) 크기 제한을 명시합니다. 사용자가 크기를 맞추거나 압축 하게요(이미지 자동 압축 CP-410과 연계).

개수 안내 — ’최대 5개’처럼 — 다중 업로드의 개수 제한을 명시합니다.

입력 전 안내(예방). 핵심은 파일을 고르기 전에 제한을 보여줘 오류를 예방하는 것입니다. 파일 업로드 영역 근처에 제한 안내를 항상 보이게 두죠(‘PDF·JPG, 최대 10MB, 5개까지’). 오류 사후 메시지(CP-413)보다 사전 안내가 사용자 친화적입니다(WCAG 3.3.2 레이블/설명, 오류 예방).

accept 속성·검증. 안내(408)에 더해 파일 입력에 accept 속성을 줘 선택 대화상자에서 허용 형식만 보이게 하고, 선택 시 형식·크기·개수를 즉시 검증해 안내하면 더 좋죠. 다만 accept만으로 막지 말고(우회 가능), 서버 검증도 합니다. 그리고 안내 문구로 사용자가 미리 알게 하는 게 기본입니다.

이 규칙은 파일 업로드의 ’제한 안내·오류 예방’을 담당합니다 — 유형·크기·개수 제한을 미리 알려(408), 사용자가 맞는 파일을 준비·선택하고 오류 좌절을 피하게 하죠.

정리하면 — 파일 유형·크기·개수 제한을 안 알리면 사용자가 파일을 고른 뒤 오류에 좌절하므로, 이 세 가지 제한을 파일 선택 전에 미리 안내해 오류를 예방해야 합니다.

3. 점검 / 개선

무엇을 점검하나

유형 안내 — 허용 파일 형식(PDF·JPG 등)이 안내되는가.

크기·개수 안내 — 최대 크기·개수가 안내되는가.

사전 표시 — 제한이 파일 선택 전에 미리 보이는가(오류 사후 아님).

개선 방향

업로드 영역에 ‘허용 형식·최대 크기·최대 개수’ 항상 표시.

accept 속성 + 선택 시 즉시 검증·안내. 서버 검증 병행. 이미지는 자동 압축(CP-410).

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
콘텐츠/UX	제한 안내 문구 작성
퍼블리셔/개발	제한 안내·검증 구현

기관 유형	CP-408 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (파일 업로드 사용 시)

파일 업로드를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 허용 파일 형식(PDF·JPG 등)이 안내되나요?

□ 최대 크기·개수가 안내되나요?

□ 제한이 파일 선택 전에 미리 보이나요(오류 사후 아님)?

❓ FAQ

Q1. 오류 메시지로 알려주면 되지 않나요? 파일을 고른 뒤 오류를 만나면 좌절합니다. 고르기 전에 미리 안내해 예방하는 게 낫죠(CP-413 오류 메시지는 보조). Q2. accept 속성만으로 충분한가요? accept는 선택 대화상자를 거르지만 우회 가능합니다. 안내 문구 + 검증(클라이 언트·서버)을 함께 하죠. Q3. 크기 제한을 맞추기 어려우면요? 이미지는 자동 압축(CP-410)을 제공하면 사용자가 크기를 신경 안 쓰고 올릴 수 있습니다.

6. 마무리

CP-408의 메시지:

올리기 전에 알려주기 — 파일 유형·크기·개수 제한을 미리 안내하라.

제한을 안 알리면 사용자가 파일을 고른 뒤 오류에 좌절합니다. 유형·크기·개수 제한을 선택 전에 미리 안내해 오류를 예방하는 게 핵심이죠. 다음 편은 일반적 형식·크기 제한 자제입니다.

다음 편 예고 ▶ 「529. (CP-409) 제출을 요구하는 파일의 형식과 크기가 일반적인 경우 파일 형식과 크기를 제한 하지 않고 있다.」

ViewCheck는 파일 유형·크기·개수 제한이 안내되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 파일 업로드(File upload) 가이드 — https://www.krds.go.kr/html/site/component/component_41.html

WCAG 2.1 SC 3.3.2 Labels or Instructions — https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준