이 파일을 지우는 버튼은 이 파일 옆에

KRDS CP-416 — 파일 항목과 항목 삭제 버튼을 하나의 그룹으로 제공하고 있다.

0. 들어가며 — 어느 파일을 지우는 버튼인지

이번 536편은 파일 항목과 항목 삭제 버튼을 하나의 그룹으로 제공하라는 규칙입니다.

여러 파일을 올렸을 때 — 각 파일과 그 삭제 버튼이 하나의 그룹으로 묶여야, 어느 삭제 버튼이 어느 파일을 지우는지 분명하죠. 따로 놀면 — 엉뚱한 파일을 지웁니다. CP-416은 항목과 삭제 버튼의 그룹화를 규정합니다. 이번 편을 풀어 냅니다.

1. 원문 — 파일 항목·삭제 버튼 한 그룹

CP-416 (컴포넌트 > 파일 업로드) “파일 항목과 항목 삭제 버튼을 하나의 그룹으로 제공하고 있다.”

업로드된 각 파일 항목과 그 파일을 삭제하는 버튼을, 하나의 그룹으로 묶어 제공하라는 뜻입니다.

정리: 파일 항목과 그 삭제 버튼을 한 그룹으로 묶어라. 이게 CP-416입니다.

2. 왜 항목-삭제 버튼 그룹인가

다중 파일 업로드에서는 올린 파일들이 목록으로 표시됩니다. 각 파일 항목은 파일명(CP-414), 크기, 그리고 삭제 버튼(X)으로 구성되죠. 사용자가 특정 파일을 지우려면, 그 파일의 삭제 버튼을 눌러야 합니다. 이때 각 파일 항목과 그 삭제 버튼이 하나의 그룹으로 명확히 묶여야, 어느 버튼이 어느 파일을 지우는지 분명하죠.

항목과 삭제 버튼이 따로 놀 때의 문제:

삭제 대상 혼란 파일 항목들과 삭제 버튼들이 시각적으로 명확히 묶이지 않으면(예: 파일명은 왼쪽 줄줄이, 삭제 버튼은 오른쪽 따로), 어느 삭제 버튼이 어느 파일 것인지 헷갈립니다. 특히 파일명이 길어 줄이 흐트러지면 (CP-414 위반 시) 더 심하죠.

잘못 삭제 — 엉뚱한 파일의 삭제 버튼을 눌러 — 원치 않는 파일을 지우는 실수가 생깁니다.

스크린 리더 혼란 — 항목과 삭제 버튼이 프로그래밍적으로 안 묶이면 — 스크린 리더 사용자가 ’삭제 버튼’이 어느 파일 것인지 모르죠.

그래서 CP-416은 — 각 파일 항목과 삭제 버튼을 하나의 그룹으로 제공하라고 합니다:

시각적 그룹 각 파일(파일명 + 크기 + 삭제 버튼)을 한 행·한 카드로 시각적으로 묶습니다. 삭제 버튼이 그 파일 항목 안(보통 오른쪽 끝)에 있어, ’이 줄의 삭제 버튼은 이 파일을 지운다’가 분명하게요. 근접성의 원리 (단계 표시기 CP-306, 토글 CP-314 정신)죠.

프로그래밍적 그룹 각 파일 항목을 하나의 그룹 요소(예: <li> 또는 role="group")로 묶고, 그 안에 파일명 과 삭제 버튼을 둡니다. 스크린 리더가 ’○○.pdf, 삭제 버튼’처럼 함께 인식하게요.

삭제 버튼 이름 각 삭제 버튼에 어느 파일을 지우는지 접근가능한 이름을 줍니다. aria-label="○○.pdf 삭제" 처럼요(태그 삭제 CP-310, 도움 아이콘 고유 이름 CP-345 정신). 모든 삭제 버튼이 그냥 ’삭제’면 스크린 리더 사용자가 어느 파일 삭제인지 모르죠. 파일명을 포함한 고유 이름이 필요합니다.

삭제 후 처리. 파일을 삭제하면 — 그 항목이 목록에서 사라지고, 선택 버튼(CP-411)으로 다시 올릴 수 있죠. 삭제가 즉시 반영되고, 스크린 리더에도 ‘○○ 삭제됨’ 정도로 알리면 좋습니다(라이브 영역).

왜 그룹이 중요한가. 다중 업로드(CP-406)에서 — 여러 파일을 추가·확인·삭제하며 관리합니다. 각 파일과 그 삭제 버튼이 명확히 묶여야 — 사용자가 원하는 파일을 정확히 지우죠. 잘못 삭제하면 다시 올려야 하니 부담입니다.

이 규칙은 파일 업로드의 ’항목 관리 명료성’을 담당합니다 — 파일 항목과 삭제 버튼을 한 그룹으로 묶어(416), 어느 버튼이 어느 파일을 지우는지 분명히 하죠. 시각·프로그래밍·이름 세 차원으로 연결합니다.

정리하면 — 파일 항목과 삭제 버튼이 따로 놀면 어느 파일을 지우는지 헷갈려 잘못 삭제하므로, 각 파일과 그 삭제 버튼을 하나의 그룹으로 묶고 삭제 버튼에 파일명 포함 이름을 줘야 합니다.

3. 점검 / 개선

무엇을 점검하나

시각적 그룹 — 각 파일(파일명·크기·삭제 버튼)이 한 행·카드로 묶이는가.

프로그래밍 그룹 — 각 파일 항목이 그룹 요소(li/role=group)로 묶이는가.

삭제 버튼 이름 — 각 삭제 버튼에 파일명 포함 고유 이름이 있는가.

개선 방향

파일명+크기+삭제 버튼을 한 행·카드로 시각·프로그래밍적 그룹화(li 등).

삭제 버튼에 aria-label="○○.pdf 삭제". 삭제 즉시 반영·스크린 리더 안내.

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

역할	책임
디자이너	파일 항목·삭제 버튼 그룹 레이아웃
퍼블리셔/개발	그룹 마크업·삭제 버튼 이름 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 파일(파일명·크기·삭제 버튼)이 한 행·카드로 묶이나요?

□ 각 파일 항목이 그룹 요소(li/role=group)로 묶이나요?

□ 각 삭제 버튼에 파일명 포함 고유 이름이 있나요?

❓ FAQ

Q1. 삭제 버튼을 한쪽에 모으면 안 되나요? 어느 버튼이 어느 파일 것인지 헷갈립니다. 각 파일 항목 안(옆)에 둬 그룹으로 묶죠. Q2. 삭제 버튼 이름을 다 ‘삭제’로 하면 안 되나요?** 스크린 리더에 다 ’삭제’로 들려 어느 파일 삭제인지 모릅니다.’○○.pdf 삭제’처럼 파일명을 포함하죠. Q3. 삭제하면 어떻게 되나요?** 항목이 목록에서 사라지고 선택 버튼(CP-411)으로 다시 올릴 수 있습니다. 스크린 리더에도 삭제를 알리면 좋죠.

6. 마무리

CP-416의 메시지:

이 파일을 지우는 버튼은 이 파일 옆에 — 파일 항목과 삭제 버튼을 한 그룹으로.

항목과 삭제 버튼이 따로 놀면 어느 파일을 지우는지 헷갈려 잘못 삭제합니다. 각 파일과 그 삭제 버튼을 한 그룹으로 묶고 삭제 버튼에 파일명 이름을 주는 게 핵심이죠. 다음 편은 선택 버튼 포커스링입니다.

다음 편 예고 ▶ 「537. (CP-417) 파일 선택 버튼이 초점을 가진 상태에서 포커스링이 시각적으로 명확하게 표시 되고 있다.」

ViewCheck는 파일 항목과 삭제 버튼이 한 그룹으로 제공되는지를 진단합니다.

📚 참고 출처

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

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

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