여러 파일은 모달에 가두지 마라

KRDS CP-406 — 다중 파일 업로드에서는 모달 레이아웃을 사용하고 있지 않다.

0. 들어가며 — 여러 파일을 올리는데 좁은 모달이면

이번 526편부터 파일 업로드(File upload) 그룹입니다. 14개 규칙으로 가장 큰 컴포넌트 그룹이죠. 첫 규칙은 다중 파일 업로드에서 모달 레이아웃을 사용하지 않게 하라는 규칙입니다.

여러 파일을 올리고 목록으로 관리해야 하는데 — 그걸 좁은 모달 창 안에서 하면, 파일 목록·진행 상태를 보기 답답하고 다른 폼 내용과 단절되죠. CP-406은 다중 업로드에 모달을 쓰지 말라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 다중 파일 업로드 모달 레이아웃 금지

CP-406 (컴포넌트 > 파일 업로드) “다중 파일 업로드에서는 모달 레이아웃을 사용하고 있지 않다.”

여러 파일을 업로드하는 다중 파일 업로드를, 화면을 덮는 모달 창 안에서 처리하지 말라는 뜻입니다.

정리: 다중 파일 업로드를 모달 안에서 하지 마라. 이게 CP-406입니다.

2. 왜 다중 업로드에 모달을 안 쓰나

파일 업로드는 단일 파일(한 개)과 다중 파일(여러 개)이 있습니다. 다중 파일 업로드는 여러 파일을 선택· 추가하고, 각 파일의 진행 상태·이름·삭제를 목록으로 관리하죠. 이 관리에는 공간과 본문 맥락이 필요한데 화면을 덮는 모달(modal) 안에서 하면 문제가 생깁니다.

다중 업로드를 모달로 할 때의 문제:

공간 부족 모달은 보통 화면 일부만 차지하는 작은 창입니다. 여러 파일 목록(파일명·크기·진행률·삭제 버튼)을 좁은 모달에 욱여넣으면, 답답하고 스크롤이 많아지죠. 파일이 많을수록 더 심합니다.

본문 맥락 단절 모달은 배경(본문 폼)을 덮고 비활성화합니다. 그런데 파일 업로드는 보통 더 큰 폼의 일부죠(신청서에 첨부 파일). 업로드를 모달에 가두면 사용자가 폼의 다른 내용(어떤 신청인지, 무슨 파일이 필요 한지)을 동시에 못 봅니다. 맥락이 끊겨, ‘내가 무슨 파일을 왜 올리는 거였지?’ 헷갈리죠.

모달 제약 모달은 초점을 가두고(focus trap) 배경을 막는 무거운 UI입니다. 여러 파일을 추가·삭제·확인하며 오래 머무는 다중 업로드에는 이 제약이 부담스럽죠. 모달은 짧은 단일 작업에 적합하지, 긴 목록 관리엔 안 맞습니다.

진행 중 닫힘 위험 — 모달을 실수로 닫으면(바깥 클릭, Esc) — 업로드 진행이 날아갈 수 있죠.

그래서 CP-406은 — 다중 파일 업로드를 모달이 아닌 인라인 레이아웃으로 하라고 합니다:

인라인 영역 파일 업로드 영역을 폼 안의 인라인 영역(페이지에 펼쳐진 영역)으로 둡니다. 모달로 띄우지 않고요. 파일 목록·진행 상태가 폼 맥락 안에서 넉넉히 보이죠.

본문과 공존 — 사용자가 — 폼의 다른 내용을 보면서 파일을 추가·관리합니다. 맥락이 유지되죠.

충분한 공간 — 여러 파일 목록(CP-414~416)을 — 넉넉한 인라인 공간에서 한눈에 봅니다.

단일 파일은? 단일 파일 업로드(한 개)는 — 간단해서 모달이 큰 문제는 아닐 수 있지만, 일반적으로도 인라인이 자연스럽죠. CP-406이 특히 ’다중’을 짚은 건 — 여러 파일 관리에 모달이 더 부적합하기 때문입니다.

이 규칙은 파일 업로드의 ’레이아웃 적정성’을 담당합니다 — 다중 업로드를 인라인으로 해(406), 충분한 공간과 폼 맥락 안에서 여러 파일을 관리하게 하죠. 이후 파일 업로드 규칙들(레이블·제한 안내·압축·버튼·제출 시점·오류·파일명·삭제· 포커스·드래그앤드롭·접근성)이 이 위에 쌓입니다.

정리하면 — 다중 파일 업로드를 모달에 가두면 공간 부족·본문 맥락 단절·모달 제약이 생기므로, 인라인 레이아웃으로 폼 맥락 안에서 여러 파일을 넉넉히 관리하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

인라인 레이아웃 — 다중 파일 업로드가 모달이 아닌 인라인 영역인가.

본문 맥락 — 업로드 중 폼의 다른 내용을 함께 볼 수 있는가.

충분한 공간 — 여러 파일 목록·진행 상태가 넉넉히 보이는가.

개선 방향

다중 파일 업로드를 폼 안 인라인 영역으로(모달 제거).

파일 목록·진행 상태를 넉넉한 공간에. 본문 맥락 유지.

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

역할	책임
기획/UX	업로드 레이아웃 설계
퍼블리셔/개발	인라인 업로드 구현

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

여러 파일 업로드를 받는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 다중 파일 업로드가 모달이 아닌 인라인 영역인가요?

□ 업로드 중 폼의 다른 내용을 함께 볼 수 있나요?

□ 여러 파일 목록·진행 상태가 넉넉히 보이나요?

❓ FAQ

Q1. 왜 모달이 안 좋나요? 좁고, 본문 맥락을 덮고, 초점을 가둡니다. 여러 파일을 관리하며 오래 머무는 다중 업로드 엔 답답하죠. 인라인이 낫습니다. Q2. 단일 파일도 모달이 안 되나요? 단일은 간단해 큰 문제는 아니지만 인라인이 자연스럽죠. CP-406이 특히 짚은 건 다중입니다. Q3. 인라인이면 공간을 많이 차지하지 않나요? 파일 목록만큼 펼쳐지되 폼 맥락 안에 있어, 모달보다 관리가 편합 니다.

6. 마무리

CP-406의 메시지:

여러 파일은 모달에 가두지 마라 — 다중 파일 업로드를 인라인 레이아웃으로.

다중 업로드를 모달에 가두면 공간 부족·맥락 단절·모달 제약이 생깁니다. 인라인 레이아웃으로 폼 맥락 안에서 여러 파일을 넉넉히 관리하게 하는 게 핵심이죠. 다음 편은 파일 업로드 레이블·필요 시 사용입니다.

다음 편 예고 ▶ 「527. (CP-407) 파일 업로드는 명확한 레이블을 제공하고, 필요한 경우에만 사용하고 있다.」

ViewCheck는 다중 파일 업로드가 모달 레이아웃을 쓰지 않는지를 진단합니다.

📚 참고 출처

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

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

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