커스텀 버튼에도 포커스링을

KRDS CP-417 — 파일 선택 버튼이 초점을 가진 상태에서 포커스링이 시각적으로 명확하게 표시되고 있다.

0. 들어가며 — 예쁘게 꾸민 파일 버튼에 초점이 안 보이면

이번 537편은 파일 선택 버튼이 초점을 가진 상태에서 포커스링이 시각적으로 명확하게 표시되게 하라는 규칙입니다.

파일 선택 버튼은 — 기본 <input type="file">을 숨기고 커스텀 버튼으로 꾸미는 경우가 많죠(CP-419). 이때 — 커스텀 버튼에 포커스링을 안 주면, 키보드 사용자가 초점을 못 봅니다. CP-417은 파일 선택 버튼의 포커스링을 규정합니다. 버튼 CP-274·텍스트 입력 CP-404의 파일 업로드 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 선택 버튼 초점 시 포커스링 명확

CP-417 (컴포넌트 > 파일 업로드) “파일 선택 버튼이 초점을 가진 상태에서 포커스링이 시각적으로 명확하게 표시되고 있다.”

파일 선택 버튼에 키보드 초점이 갔을 때, 포커스링(초점 표시)이 시각적으로 또렷이 표시되게 하라는 뜻입니다.

정리: 파일 선택 버튼 초점 시 포커스링을 명확히 표시하라. 이게 CP-417입니다.

2. 왜 포커스링이 중요한가

파일 선택 버튼은 — 키보드로도 조작할 수 있어야 합니다(키보드 접근성, KWCAG 2.1.1). 키보드 사용자가 — Tab으로 파일 선택 버튼에 도달했을 때, ’지금 이 버튼에 초점이 있다’를 시각적으로 알아야 길을 잃지 않죠. 그게 포커스링 (focus ring)입니다.

파일 업로드 특유의 위험 숨긴 input. 파일 업로드는 특별한 구현 사정이 있습니다. 기본 <input type="file"> 은 브라우저마다 모양이 제각각이고 못생겨서, 보통 숨기고(CP-419) 커스텀 버튼(예쁜 ‘파일 선택’ 버튼)으로 꾸밉니다. 그런데 이 과정에서 포커스링이 사라지기 쉽죠:

숨긴 input의 포커스 안 보임 — <input type="file">을 display:none이나 화면 밖으로 숨기면 — 그 자체의 포커스가 안 보입니다.

커스텀 버튼에 포커스링 누락 — 대신 보이는 커스텀 버튼(<label>이나 <button>)에 — 포커스링을 안 주면, 키보드로 도달해도 초점이 전혀 안 보이죠. outline:none으로 없애고 대체를 안 주는 흔한 실수입니다.

결과 — 키보드 사용자가 — 파일 선택 버튼에 초점이 갔는지조차 모릅니다. ‘여기서 Enter를 누르면 파일 선택이 열리나?’ 모르고 헤매죠.

그래서 CP-417은 — 파일 선택 버튼의 포커스링을 시각적으로 명확히 표시하라고 합니다:

커스텀 버튼에 포커스링 실제로 보이는 커스텀 파일 선택 버튼(<label>/<button>)에 포커스링을 줍니다. 숨긴 input에 초점이 가면 연결된 보이는 버튼에 포커스 스타일이 나타나게요(:focus-within 등 활용). 또는 보이는 요소 자체를 포커스 가능하게 하고 거기에 포커스링을요.

명확한 표시 — 포커스링이 — 또렷한 외곽선·강조로, 인접 배경과 충분한 대비(WCAG 2.4.13)로 보이게 합니다. 연한 포커스링 지양.

outline 제거 금지 — outline:none만 주고 대체를 안 주면 안 됩니다. 없앴으면 더 나은 포커스링을 줍니다 (버튼 CP-274, 텍스트 입력 CP-404 정신).

숨김 스타일과의 연계(CP-419). <input type="file">을 숨길 때 — 화면에서 안 보이게 하되 포커스·접근성은 유지하는 올바른 숨김 방법(CP-419)을 써야, 포커스가 보이는 커스텀 버튼으로 잘 전달되죠. 잘못 숨기면(display:none) — 포커스 자체가 안 가거나 안 보입니다. CP-417(포커스링)과 CP-419(올바른 숨김)가 함께 가야 합니다.

이 규칙은 파일 업로드의 ’키보드 초점 가시성’을 담당합니다 — 커스텀 파일 선택 버튼에도 포커스링을 명확히 표시해 (417), 키보드 사용자가 초점 위치를 알게 하죠. 커스텀 꾸밈 과정에서 포커스링을 잃지 않는 게 핵심입니다.

정리하면 — 파일 선택 버튼은 input을 숨기고 커스텀하는 과정에서 포커스링을 잃기 쉬우므로, 보이는 선택 버튼에 명확한 포커스링을 시각적으로 또렷이 표시해 키보드 사용자가 초점을 알게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

포커스링 표시 — 파일 선택 버튼에 초점 시 포커스링이 보이는가(커스텀 버튼 포함).

명확성·대비 — 포커스링이 또렷하고 충분한 대비인가.

outline 제거 안 됨 — outline:none만 주고 대체 없음이 아닌가.

개선 방향

보이는 커스텀 선택 버튼에 포커스링(:focus-within 등). 명확·충분한 대비(WCAG 2.4.13).

outline 제거 시 대체 표시. 올바른 input 숨김(CP-419)과 연계.

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

역할	책임
디자이너	포커스링 스타일·대비 정의
퍼블리셔/개발	커스텀 버튼 포커스링 구현
QA/접근성	키보드 초점 가시성 검증

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

웹접근성 의무 대상이며 파일 업로드를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 파일 선택 버튼에 초점 시 포커스링이 보이나요(커스텀 버튼 포함)?

□ 포커스링이 또렷하고 충분한 대비인가요?

□ outline:none만 주고 대체 없음이 아닌가요?

❓ FAQ

Q1. 왜 파일 선택 버튼이 특히 위험한가요? input을 숨기고 커스텀 버튼으로 꾸미는데, 그 과정에서 포커스링이 사라지기 쉽습니다. 숨긴 input은 포커스가 안 보이죠. Q2. 어떻게 커스텀 버튼에 포커스링을 주나요? 숨긴 input에 초점 시 보이는 버튼에 :focus-within으로 포커스 스타일을 주거나, 보이는 요소를 포커스 가능하게 합니다. Q3. CP-419와 관계가 있나요? 네. input을 올바르게 숨겨야(CP-419) 포커스가 보이는 버튼으로 전달됩니다. 함께 가야 하죠.

6. 마무리

CP-417의 메시지:

커스텀 버튼에도 포커스링을 — 파일 선택 버튼 초점 시 포커스링을 명확히 표시하라.

파일 선택 버튼은 input을 숨기고 커스텀하다 포커스링을 잃기 쉽습니다. 보이는 선택 버튼에 명확한 포커스링을 또렷이 표시해 키보드 사용자가 초점을 알게 하는 게 핵심이죠. 다음 편은 드래그 앤 드롭과 업로더 병행입니다.

다음 편 예고 ▶ 「538. (CP-418) 드래그 앤 드롭 유형은 반드시 업로더와 함께 사용하고 있다.」

ViewCheck는 파일 선택 버튼의 포커스링이 명확히 표시되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.4.7 Focus Visible — https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

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

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