더 올릴 수 있게 버튼은 그대로

KRDS CP-411 — 파일 선택 버튼을 적절한 강조 수준으로 표현하고 있으며, 파일이 업로드된 후에도 파일 선택 버튼을 기본 상태로 유지하고 있다.

0. 들어가며 — 파일을 올렸더니 버튼이 사라지면

이번 531편은 파일 선택 버튼을 적절한 강조 수준으로 표현하고, 파일 업로드 후에도 선택 버튼을 기본 상태로 유지 하라는 규칙입니다.

파일 선택 버튼이 — 적절한 강조여야 사용자가 찾고, 파일을 올린 뒤에도 — 버튼이 사라지거나 비활성되지 않아야 추가 파일을 올리거나 교체하죠. CP-411은 선택 버튼의 강조와 상태 유지를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 적절한 강조 + 업로드 후 기본 상태 유지

CP-411 (컴포넌트 > 파일 업로드) “파일 선택 버튼을 적절한 강조 수준으로 표현하고 있으며, 파일이 업로드된 후에도 파일 선택 버튼을 기본 상태로 유지하고 있다.”

파일 선택 버튼을 적절한 강조로 표현하고, 파일을 올린 후에도 그 버튼을 기본 상태(사용 가능)로 유지하라는 뜻입니다.

정리: 파일 선택 버튼을 적절히 강조하고, 업로드 후에도 기본 상태로 유지하라. 이게 CP-411입니다.

2. 왜 강조·상태 유지인가

CP-411은 두 가지를 다룹니다: ①선택 버튼의 적절한 강조, ②업로드 후 버튼 상태 유지.

① 적절한 강조 수준. 파일 선택 버튼(‘파일 선택’, ‘찾아보기’)은 — 사용자가 파일 업로드를 시작하는 진입점입니다. 이 버튼이 — 적절히 강조돼야 사용자가 찾고 누르죠.

찾을 수 있게 선택 버튼이 너무 약하면(연한 색, 작은 텍스트 링크) 사용자가 못 찾습니다. ‘어디서 파일을 올리지?’ 헤매죠. 적절한 버튼 형태·강조로 ’여기서 파일을 선택한다’를 분명히요.

과하지 않게 반대로 너무 과한 강조(가장 강한 primary)는, 폼의 진짜 주요 동작(‘제출’)과 위계가 헷갈릴 수 있죠. 파일 선택은 보통 secondary 정도의 적절한 강조가 맞습니다(폼 제출이 primary). 버튼 강조 위계(버튼 CP-266~277 정신)를 맞추죠.

② 업로드 후 기본 상태 유지. 파일을 올린 후에도 — 선택 버튼을 기본 상태(사용 가능)로 유지합니다.

추가/교체 가능 파일을 하나 올린 뒤에도 사용자가 다른 파일을 추가(다중 업로드)하거나 교체하고 싶을 수 있죠. 그런데 업로드 후 선택 버튼이 사라지거나 비활성되면, 추가·교체를 못 합니다. 잘못 올린 파일을 바꿀 수도 없죠.

버튼 유지 그래서 파일을 올려도 선택 버튼은 그대로 기본 상태로 남습니다. 사용자가 언제든 추가 파일을 선택하거나, 기존 파일을 교체할 수 있게요.

상태 변화 금지 업로드했다고 버튼이 ’업로드 완료’로 바뀌거나, 회색 비활성이 되거나, 숨겨지면 안 됩니다. 기본 상태로 계속 사용 가능해야 하죠.

왜 상태 유지가 중요한가:

다중 업로드 — 여러 파일을 — 하나씩 추가하려면 선택 버튼이 계속 살아 있어야 합니다(CP-406의 다중 업로드).

실수 교정 — 잘못된 파일을 올렸을 때 — 선택 버튼으로 다시 올려 교체하거나(또는 삭제 후 재선택, CP-416). 버튼이 죽으면 교정이 어렵죠.

파일 목록과 함께. 업로드된 파일은 목록으로 보이고(파일명 CP-414, 삭제 버튼 CP-416), 선택 버튼은 그 목록과 별개로 계속 살아 있죠. ’올린 파일 목록 + 항상 사용 가능한 선택 버튼’이 다중 업로드의 표준 구조입니다.

이 규칙은 파일 업로드의 ’진입점·지속성’을 담당합니다 — 선택 버튼을 적절히 강조해 찾게 하고(411 강조), 업로드 후 에도 유지해(411 상태) 추가·교체하게 하죠. 파일 관리의 연속성을 보장합니다.

정리하면 — 파일 선택 버튼이 약하면 사용자가 못 찾고 업로드 후 사라지면 추가·교체를 못 하므로, 적절한 강조로 표현하고 업로드 후에도 기본 상태로 유지해 언제든 추가·교체하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

적절한 강조 — 파일 선택 버튼이 찾기 쉬운 적절한 강조인가(약하지도 과하지도 않게).

업로드 후 유지 — 파일을 올린 후에도 선택 버튼이 기본 상태(사용 가능)인가.

추가·교체 — 추가 파일 선택·교체가 버튼으로 가능한가.

개선 방향

선택 버튼을 적절한 강조(보통 secondary)로. 폼 제출(primary)과 위계 구별.

업로드 후 선택 버튼 사라짐·비활성 제거, 기본 상태 유지. 파일 목록과 별개로.

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

역할	책임
디자이너	선택 버튼 강조·상태 정의
퍼블리셔/개발	버튼 강조·상태 유지 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 파일 선택 버튼이 찾기 쉬운 적절한 강조인가요(약하지도 과하지도 않게)?

□ 파일을 올린 후에도 선택 버튼이 기본 상태(사용 가능)인가요?

□ 추가 파일 선택·교체가 버튼으로 가능한가요?

❓ FAQ

Q1. 파일 선택 버튼을 가장 강하게 강조하면 안 되나요? 폼의 주요 동작(‘제출’)과 위계가 헷갈립니다. 파일 선택은 보통 secondary 정도가 적절하죠. Q2. 파일을 올리면 선택 버튼을 숨겨도 되지 않나요? 안 됩니다. 추가 파일을 올리거나 교체하려면 버튼이 계속 살아 있어야 하죠. Q3. 잘못 올린 파일을 어떻게 바꾸나요? 선택 버튼으로 다시 올려 교체하거나, 삭제(CP-416) 후 재선택합니다. 버튼이 유지돼야 가능하죠.

6. 마무리

CP-411의 메시지:

더 올릴 수 있게 버튼은 그대로 — 선택 버튼을 적절히 강조하고 업로드 후에도 유지하라.

선택 버튼이 약하면 못 찾고 업로드 후 사라지면 추가·교체를 못 합니다. 적절한 강조로 표현하고 업로드 후에도 기본 상태로 유지하는 게 핵심이죠. 다음 편은 제출 시점 업로드입니다.

다음 편 예고 ▶ 「532. (CP-412) 사용자가 입력폼을 제출할 때까지 파일을 서버에 업로드하거나 저장하고 있지 않다.」

ViewCheck는 파일 선택 버튼의 강조와 업로드 후 상태 유지를 진단합니다.

📚 참고 출처

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

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

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