초점은 보이게, 크기는 넉넉하게

KRDS CP-276 — 키보드 초점이 명확하게 표시되도록 하고 있으며, 적절한 크기로 제공하고 있다.

0. 들어가며 — 키보드 초점과 누를 만한 크기

이번 396편은 버튼의 키보드 초점이 명확하게 표시되고, 적절한 크기로 제공되게 하라는 규칙입니다.

앞 편(CP-275)에서 버튼을 키보드로 실행되게 했습니다. CP-276은 두 가지를 더합니다 — 키보드로 초점이 갔을 때 그 초점이 보여야 하고(focus indicator), 버튼이 누를 만큼 충분히 커야 합니다. 초점 가시성(구조화 목록 CP-149)과 적절한 크기(링크 CP-264)를 버튼에 적용한 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 키보드 초점 명확 + 적절한 크기

CP-276 (컴포넌트 > 버튼) “키보드 초점이 명확하게 표시되도록 하고 있으며, 적절한 크기로 제공하고 있다.”

버튼에 키보드 초점이 갔을 때 시각적으로 또렷이 보이게 표시하고, 버튼을 쉽게 누를 수 있는 적절한 크기로 제공 하라는 뜻입니다.

정리: 버튼의 키보드 초점을 명확히 표시하고, 적절한 크기로 제공하라. 이게 CP-276입니다.

2. 왜 초점 표시와 적절한 크기인가

이 규칙은 두 가지를 함께 다룹니다 — 키보드 초점 가시성과 적절한 크기. 둘 다 버튼을 실제로 쓸 수 있게 하는 물리적·시각적 요건이죠.

① 키보드 초점 명확 표시. 초점 표시는 키보드 사용자의 ’마우스 커서’입니다(구조화 목록 CP-149, 달력 CP-168, 탭 CP-236에서 반복). 키보드로 Tab을 눌러 버튼에 초점을 옮겼을 때 — ’지금 이 버튼에 초점이 있다’가 시각적으로 보여야, 사용자가 위치를 알고 Enter/Space로 실행하죠. 초점 표시가 없거나 흐릿하면:

키보드 사용자가 ‘지금 어느 버튼에 있는지’ 몰라 길을 잃습니다.

초점 위치를 모른 채 Enter를 누르면 의도와 다른 버튼이 실행돼 — 특히 위험한 버튼(삭제)에서 치명적이죠.

그래서 — 버튼에 또렷한 포커스 링(외곽선) 을 표시합니다. outline: none만 하고 대체 스타일을 안 주는 안티 패턴을 피하고(흔한 실수), 또렷한 외곽선·테두리·그림자로 초점을 표시하죠. 충분한 대비(비텍스트 3:1)·크기로요 (WCAG SC 2.4.13 Focus Appearance). :focus-visible로 키보드 초점 시에만 표시해 디자인과 양립시킬 수도 있고요.

② 적절한 크기. 버튼은 클릭/터치 대상이므로 — 쉽게 누를 수 있는 충분한 크기여야 합니다(링크 크기 CP-264, 페이지네이션 CP-131, 탭 바 CP-134 정신). 너무 작으면:

마우스로도 겨냥이 번거롭고, 특히 모바일 터치(손가락 약 9~10mm)에서 정확히 누르기 어렵죠.

운동 장애 사용자는 작은 버튼을 더욱 못 누릅니다.

그래서 — 버튼을 충분한 크기·터치 영역으로 제공합니다. 웹 접근성의 타깃 크기 기준(WCAG SC 2.5.5/2.5.8, 보통 최소 24×24~44×44px)을 충족하게요. 버튼 텍스트가 짧아도 충분한 패딩으로 클릭/터치 영역을 키우고, 버튼 사이 간격도 둬 오클릭을 막죠.

두 요건의 결합. CP-276이 초점 표시와 크기를 함께 다루는 이유 — 둘 다 ‘버튼을 실제로 쓸 수 있게’ 하는 사용성 요건이기 때문입니다. CP-275(키보드로 실행 가능)가 ’닿을 수 있다’면, CP-276은 ’닿은 게 보이고(초점), 누르기 좋다(크기)’를 보장하죠. 키보드 사용자(초점 가시성)와 마우스·터치 사용자(적절한 크기) 모두를 위한 물리적 사용성입니다.

위계와 크기. 버튼 크기는 — 위계(CP-267)와도 연결됩니다. 주요 버튼은 크고, 보조는 작게. 단 — 보조 버튼도 ‘너무 작아 못 누를’ 정도는 안 되죠. 위계상 작더라도 최소 타깃 크기는 지킵니다. 그룹 버튼은 동일 크기(CP-266) 이고요.

이 규칙은 버튼의 ’물리적 사용성’을 담당합니다 — 키보드 실행(275)·초점 가시+크기(276)·버튼 인지(277)가 함께 버튼을 모든 입력 환경(키보드·마우스·터치)에서 쓰게 하죠.

정리하면 — 버튼은 키보드 초점이 또렷이 보여야 키보드 사용자가 위치를 알고, 충분한 크기여야 마우스·터치로 쉽게 누르므로, 초점 표시와 적절한 크기를 함께 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

초점 표시 — 키보드 초점이 간 버튼에 또렷한 표시(외곽선 등)가 보이는가.

적절한 크기 — 버튼의 클릭/터치 영역이 충분히 큰가(최소 권장 크기, 모바일 포함).

간격 — 버튼 사이 간격이 충분해 오클릭이 없는가.

개선 방향

초점에 또렷한 포커스 링(:focus-visible). outline:none만 두지 않기. 충분한 대비·크기.

버튼에 충분한 패딩으로 타깃 크기 확보. 버튼 간 간격.

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

역할	책임
디자이너	초점 표시·버튼 크기 정의
퍼블리셔/개발	포커스 링·타깃 크기 구현

기관 유형	CP-276 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (버튼 사용 시)

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 키보드 초점이 간 버튼에 또렷한 표시(외곽선 등)가 보이나요?

□ 버튼의 클릭/터치 영역이 충분히 큰가요(모바일 포함)?

□ 버튼 사이 간격이 충분해 오클릭이 없나요?

❓ FAQ

Q1. 포커스 링이 디자인을 해쳐요. :focus-visible로 키보드 때만 표시하거나 대체 스타일을 줍니다. 그냥 지우면 키보드 사용자가 위치를 잃죠. Q2. 버튼이 작아도 텍스트가 짧으면 괜찮나요? 텍스트는 작아도 패딩으로 클릭/터치 영역을 키워야 합니다. 특히 모바일에서요. Q3. 왜 초점과 크기를 함께 다루나요? 둘 다 ‘버튼을 실제로 쓸 수 있게’ 하는 물리적 사용성 요건이라 함께 규정됩니다.

6. 마무리

CP-276의 메시지:

초점은 보이게, 크기는 넉넉하게 — 키보드 초점을 명확히 표시하고 적절한 크기로 제공하라.

버튼의 키보드 초점이 안 보이면 키보드 사용자가 길을 잃고, 너무 작으면 마우스·터치 사용자가 못 누릅니다. 또렷한 포커스 링과 충분한 타깃 크기로 모든 입력 환경에서 쓰게 하죠. 다음 편은 버튼 그룹의 마지막 — 스크린 리더 버튼 인지입니다.

다음 편 예고 ▶ 「397. (CP-277) 버튼으로 작동하는 모든 요소는 스크린 리더에서 버튼으로 인지될 수 있도록 한다.」

ViewCheck는 버튼의 키보드 초점 표시와 적절한 크기를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 버튼(Button) 가이드 — https://www.krds.go.kr/html/site/component/component_25.html

WCAG 2.2 SC 2.4.13 / 2.5.8 — https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html

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

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