파일명은 한 줄로 깔끔하게

KRDS CP-414 — 업로드된 파일 이름 텍스트를 한 줄로 제공하고 있다.

0. 들어가며 — 긴 파일명이 여러 줄로 접히면

이번 534편은 업로드된 파일 이름 텍스트를 한 줄로 제공하라는 규칙입니다.

업로드한 파일 목록에서 — 파일명이 길어 여러 줄로 접히면, 목록이 들쭉날쭉해지고 지저분하죠. CP-414는 파일명을 한 줄로 표시하라고 규정합니다. 태그 줄바꿈 금지(CP-305) 정신의 파일 업로드 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 파일 이름 한 줄 제공

CP-414 (컴포넌트 > 파일 업로드) “업로드된 파일 이름 텍스트를 한 줄로 제공하고 있다.”

업로드된 파일의 이름을, 여러 줄로 접히지 않고 한 줄로 표시하라는 뜻입니다.

정리: 업로드된 파일 이름을 한 줄로 표시하라. 이게 CP-414입니다.

2. 왜 파일명 한 줄인가

파일을 업로드하면 목록에 각 파일의 이름이 표시됩니다(파일명 + 크기 + 삭제 버튼, CP-416). 이 파일명이 길 수 있죠(‘2024년_1분기_사업실적보고서_최종_수정본_v3.pdf’ 같은). 이 긴 파일명을 어떻게 표시하느냐가 목록의 깔끔함을 좌우합니다.

파일명이 여러 줄로 접힐 때의 문제:

목록 들쭉날쭉 긴 파일명이 영역 너비를 넘어 여러 줄로 접히면, 그 파일 항목만 세로로 커집니다. 여러 파일이 있으면 어떤 건 한 줄, 어떤 건 세 줄로 목록 높이가 들쭉날쭉해 지저분하죠.

삭제 버튼 위치 흐트러짐 — 파일명이 여러 줄이면 — 옆의 삭제 버튼(CP-416) 위치도 흐트러져, 어느 삭제 버튼이 어느 파일 것인지 헷갈릴 수 있습니다.

스캔 어려움 — 목록이 들쭉날쭉하면 — 파일들을 또렷이 구별해 훑기 어렵죠.

그래서 CP-414는 — 파일명을 한 줄로 표시하라고 합니다:

한 줄 유지 파일명이 길어도 한 줄에 표시하고, 영역을 넘는 부분은 말줄임(…) 으로 처리합니다(CSS white-space: nowrap + text-overflow: ellipsis). 각 파일 항목이 일정한 한 줄 높이를 유지하죠.

전체 이름 확인 수단 — 한 줄로 줄이면서 — 잘린 전체 파일명을 확인할 수 있게 합니다:

말줄임 위치 — 끝을 자르되, 가능하면 확장자(.pdf)는 보이게 하면 좋죠(파일 종류 식별). 중간 말줄임 (앞부분 + …+ .pdf)도 방법입니다.

툴팁·title — 마우스 호버 시 — title로 전체 파일명을 보이거나, 별도 수단으로 확인하게요.

왜 한 줄이 중요한가:

깔끔한 목록 — 모든 파일 항목이 — 일정한 한 줄 높이로 정렬돼, 목록이 깔끔하고 스캔하기 좋죠.

레이아웃 안정 — 파일명 길이에 — 목록 레이아웃이 휘둘리지 않습니다(태그 줄바꿈 금지 CP-305 정신).

접근성 전체 이름 전달. 시각적으로 한 줄로 잘라도 스크린 리더에는 전체 파일명이 전달돼야 합니다. 잘린 시각 텍스트만 읽히면 안 되죠. 실제 파일명 텍스트를 마크업에 두고, 시각적으로만 말줄임하면 스크린 리더는 전체를 읽습니다(CSS ellipsis는 시각만 자름). 전체 이름이 접근가능해야 어느 파일인지 알죠.

이 규칙은 파일 업로드의 ’목록 정돈’을 담당합니다 — 파일명을 한 줄로 표시해(414), 업로드 목록을 깔끔하고 일정하게 유지하죠. 긴 파일명에 레이아웃이 휘둘리지 않게 합니다.

정리하면 — 긴 파일명이 여러 줄로 접히면 목록이 들쭉날쭉하고 지저분하므로, 파일명을 한 줄로 표시(말줄임 처리)하되 스크린 리더엔 전체 이름이 전달되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

한 줄 표시 — 파일명이 한 줄로 표시되고 여러 줄로 접히지 않는가.

말줄임·확장자 — 긴 파일명이 말줄임 처리되고 확장자가 식별되는가.

전체 이름 접근 — 스크린 리더·툴팁으로 전체 파일명을 확인할 수 있는가.

개선 방향

파일명을 한 줄로(white-space: nowrap + text-overflow: ellipsis). 일정한 항목 높이.

확장자 보이게(중간 말줄임 등). title·스크린 리더로 전체 이름 전달.

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

역할	책임
디자이너	파일명 한 줄·말줄임 표시 정의
퍼블리셔/개발	한 줄 표시·전체 이름 접근 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 파일명이 한 줄로 표시되고 여러 줄로 접히지 않나요?

□ 긴 파일명이 말줄임 처리되고 확장자가 식별되나요?

□ 스크린 리더·툴팁으로 전체 파일명을 확인할 수 있나요?

❓ FAQ

Q1. 긴 파일명을 다 보여주면 안 되나요? 여러 줄로 접혀 목록이 들쭉날쭉해집니다. 한 줄로 말줄임하고 전체는 호버·스크린 리더로 확인하게 하죠. Q2. 말줄임하면 확장자를 못 보지 않나요? 중간 말줄임(앞부분 + …+ .pdf)으로 확장자를 보이게 하면 파일 종류를 식별하죠. Q3. 잘린 이름만 스크린 리더가 읽으면요? CSS ellipsis는 시각만 자릅니다. 실제 텍스트는 전체가 마크업에 있어 스크린 리더가 전체를 읽죠.

6. 마무리

CP-414의 메시지:

파일명은 한 줄로 깔끔하게 — 업로드된 파일 이름을 한 줄로 표시하라.

긴 파일명이 여러 줄로 접히면 목록이 들쭉날쭉합니다. 한 줄로 말줄임 처리하되 스크린 리더엔 전체 이름을 전달하는 게 핵심이죠. 다음 편은 파일 용도 설명입니다.

다음 편 예고 ▶ 「535. (CP-415) 업로드가 필요한 파일의 용도를 이해할 수 있는 적절한 설명을 제공하고 있다.」

ViewCheck는 업로드된 파일 이름이 한 줄로 제공되는지를 진단합니다.

📚 참고 출처

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

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

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