끌어다 놓기만으론 부족하다

KRDS CP-418 — 드래그 앤 드롭 유형은 반드시 업로더와 함께 사용하고 있다.

0. 들어가며 — 끌어다 놓기밖에 안 되면

이번 538편은 드래그 앤 드롭 유형은 반드시 업로더(파일 선택 버튼)와 함께 사용하라는 규칙입니다.

파일을 끌어다 놓는(drag and drop) 업로드는 — 편리하지만, 마우스가 있어야 하고 모바일·키보드 사용자에겐 어렵죠. 그래서 — 드래그 앤 드롭만 제공하면 안 되고, 클릭으로 파일을 고르는 일반 업로더를 함께 둬야 합니다. CP-418은 이를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 드래그 앤 드롭 + 업로더 병행

CP-418 (컴포넌트 > 파일 업로드) “드래그 앤 드롭 유형은 반드시 업로더와 함께 사용하고 있다.”

파일을 끌어다 놓는 드래그 앤 드롭 방식을 제공할 때는, 반드시 클릭으로 파일을 선택하는 업로더(파일 선택 버튼)와 함께 제공하라는 뜻입니다.

정리: 드래그 앤 드롭은 파일 선택 버튼과 함께 제공하라. 이게 CP-418입니다.

2. 왜 업로더와 함께인가

파일 업로드 방식에는 — 두 가지가 있습니다:

드래그 앤 드롭(drag and drop) — 파일을 — 마우스로 끌어다 업로드 영역에 놓아 올리는 방식. 편리하고 직관적 이죠.

업로더(파일 선택 버튼) — ‘파일 선택’/‘찾아보기’ 버튼을 클릭해 — 파일 선택 대화상자에서 파일을 고르는 방식. 전통적이고 표준적이죠.

드래그 앤 드롭은 — 마우스 사용자에게 편리하지만, 모든 사용자가 쓸 수 있는 건 아닙니다. 그래서 CP-418은 — 드래그 앤 드롭을 쓰려면 반드시 업로더(클릭 선택)도 함께 두라고 합니다.

드래그 앤 드롭만 있을 때의 문제:

마우스 필수 드래그 앤 드롭은 파일을 끌어다 놓는 마우스(또는 포인터) 조작이 필요합니다. 키보드만 쓰는 사용자는 끌어다 놓기를 할 수 없죠. 드래그 앤 드롭만 있으면 키보드 사용자가 파일을 못 올립니다(키보드 접근성 위반, KWCAG 2.1.1).

모바일 어려움 — 모바일·태블릿 터치 환경에선 — 파일을 끌어다 놓는 게 어렵거나 불가능하죠(파일 시스템에서 드래그가 안 됨). 모바일 사용자가 못 올립니다.

정밀 조작 부담 — 끌어다 정확한 영역에 놓는 건 — 손 떨림·운동 장애 사용자에게 어렵습니다.

발견성 — 드래그 앤 드롭 영역만 있으면 — ’여기에 파일을 끌어다 놓으세요’를 모르거나, 어떻게 하는지 모르는 사용자가 있죠.

그래서 CP-418은 — 드래그 앤 드롭에 반드시 업로더(파일 선택 버튼)를 함께 제공하라고 합니다:

클릭 선택 병행 드래그 앤 드롭 영역 안(또는 옆)에 ‘또는 파일 선택’ 같은 클릭 버튼을 둡니다. 마우스로 끌기 어렵거나 키보드·모바일 사용자는 그 버튼을 클릭(키보드로 Enter)해 파일 대화상자에서 고르죠.

드래그 앤 드롭은 보조 드래그 앤 드롭은 ’편의를 더하는 보조 수단’이고, 클릭 선택이 기본입니다. 모든 사용자가 적어도 클릭 선택으로는 파일을 올릴 수 있게요.

영역 안내 — 드래그 앤 드롭 영역에 — ’파일을 끌어다 놓거나 [파일 선택] 버튼을 누르세요’처럼 두 방법을 함께 안내합니다.

왜 ‘반드시’인가.** 원문이’반드시** 업로더와 함께’라 강조한 것은 드래그 앤 드롭만으로는 키보드·모바일 사용 자를 배제하기 때문이죠. 접근성·포용성상 클릭 선택은 필수입니다. 드래그 앤 드롭은 있어도 되고 없어도 되지만, 업로더(클릭 선택)는 반드시 있어야 합니다.

키보드·접근성. 함께 둔 파일 선택 버튼은 — 키보드로 접근·실행 가능하고 포커스링(CP-417)이 명확해야 하죠. 드래그 앤 드롭의 키보드 대안이 바로 이 클릭 버튼입니다.

이 규칙은 파일 업로드의 ’입력 수단 포용성’을 담당합니다 — 드래그 앤 드롭에 클릭 선택을 함께 둬(418), 마우스·키보드· 모바일 모든 사용자가 파일을 올리게 하죠. 편리한 드래그 앤 드롭을 더하되 누구도 배제하지 않는 원칙입니다.

정리하면 — 드래그 앤 드롭만 있으면 키보드·모바일·운동 장애 사용자가 파일을 못 올리므로, 반드시 클릭으로 파일을 고르는 업로더를 함께 제공해 모든 사용자가 파일을 올리게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

업로더 병행 — 드래그 앤 드롭에 클릭 선택 버튼이 함께 있는가.

클릭 기본 — 모든 사용자가 적어도 클릭 선택으로 파일을 올릴 수 있는가.

키보드 접근 — 함께 둔 파일 선택 버튼이 키보드로 접근·실행되고 포커스링이 있는가(CP-417).

개선 방향

드래그 앤 드롭 영역에 ‘또는 파일 선택’ 클릭 버튼 병행. 두 방법 안내.

클릭 선택을 기본으로, 드래그 앤 드롭은 보조. 키보드 접근·포커스링(CP-417).

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

역할	책임
기획/UX	업로드 수단 병행 설계
퍼블리셔/개발	드래그앤드롭 + 클릭 선택 구현

기관 유형	CP-418 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (드래그 앤 드롭 사용 시)

드래그 앤 드롭 업로드를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 드래그 앤 드롭에 클릭 선택 버튼이 함께 있나요?

□ 모든 사용자가 적어도 클릭 선택으로 파일을 올릴 수 있나요?

□ 함께 둔 파일 선택 버튼이 키보드로 접근·실행되고 포커스링이 있나요?

❓ FAQ

Q1. 드래그 앤 드롭만 있으면 왜 안 되나요? 마우스가 필요해 키보드·모바일·운동 장애 사용자가 못 올립니다. 클릭 선택을 반드시 함께 둬야 하죠. Q2. 드래그 앤 드롭을 빼야 하나요? 아닙니다. 편의 수단으로 둬도 됩니다. 단, 클릭 선택(업로더)을 반드시 함께 제공해야 하죠. Q3. 모바일에서 드래그 앤 드롭은요? 터치 환경에선 어렵거나 불가능합니다. 그래서 클릭 선택이 필수죠.

6. 마무리

CP-418의 메시지:

끌어다 놓기만으론 부족하다 — 드래그 앤 드롭은 반드시 클릭 선택 업로더와 함께.

드래그 앤 드롭만 있으면 키보드·모바일·운동 장애 사용자가 파일을 못 올립니다. 반드시 클릭 선택 업로더를 함께 제공해 모든 사용자가 올리게 하는 게 핵심이죠. 다음 편은 input type=file 숨김 스타일입니다.

다음 편 예고 ▶ 「539. (CP-419) 역할이 스크린 리더로 전달될 수 있도록 에 적절한 숨김 스타일을 사용하고 있다.」

ViewCheck는 드래그 앤 드롭이 업로더와 함께 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.1.1 Keyboard — https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

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

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