손가락으로 누를 만큼

KRDS CP-347 — 아이콘 버튼의 크기는 CSS 픽셀을 기준으로 44px x 44px 이상으로 제공하고 있다.

0. 들어가며 — 작은 도움 아이콘을 못 누르면

이번 467편은 도움 아이콘 버튼의 크기를 CSS 픽셀 기준 44px × 44px 이상으로 제공하라는 규칙입니다.

도움 아이콘(?)이 — 너무 작으면, 손가락으로 정확히 누르기 어렵죠. 특히 손 떨림이 있거나 모바일 터치 사용자에게요. CP-347은 아이콘 버튼을 최소 44×44px로 제공하라고 규정합니다. 버튼 크기 CP-276, 페이지네이션 컨트롤 CP-130의 도움 패널 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 44px × 44px 이상

CP-347 (컴포넌트 > 도움 패널) “아이콘 버튼의 크기는 CSS 픽셀을 기준으로 44px x 44px 이상으로 제공하고 있다.”

도움 아이콘 버튼의 터치/클릭 영역을 CSS 픽셀 기준 최소 44×44px 이상으로 제공하라는 뜻입니다.

정리: 도움 아이콘 버튼을 44×44px 이상으로 제공하라. 이게 CP-347입니다.

2. 왜 44×44px인가

도움 아이콘 버튼(?·ⓘ)은 — 사용자가 눌러 도움말을 여는 컨트롤입니다. 이 버튼이 — 너무 작으면 정확히 누르기 어렵죠. CP-347은 최소 크기를 44×44px로 정합니다.

버튼이 작을 때의 문제:

터치 부정확 손가락 끝은 마우스 포인터보다 넓고 부정확합니다. 아이콘 버튼이 작으면(예: 16×16px) 손가락으로 정확히 누르기 어렵고, 옆 요소를 잘못 누르죠. 특히 도움 아이콘은 작은 ‘?’ 모양이라 작아지기 쉽습니다.

손 떨림·운동 장애 — 손 떨림이 있거나 정밀한 조작이 어려운 사용자는 — 작은 버튼을 더욱 못 누릅니다.

모바일 부담 — 모바일에선 — 화면도 작고 손가락 터치라, 작은 버튼이 더 누르기 어렵죠. 도움 패널이 모바일에선 열기 버튼으로 축약되는데(CP-343), 그 버튼도 충분히 커야 합니다.

그래서 CP-347은 — 아이콘 버튼을 44×44px 이상으로 제공하라고 합니다. 이 44px는 — 접근성 표준의 권장 최소 터치 타깃 크기입니다:

WCAG 2.5.5 / 2.5.8 — 포인터 타깃(터치/클릭 대상)의 최소 크기를 권장합니다. WCAG 2.5.5(AAA)는 44×44px, 2.5.8(AA, WCAG 2.2)은 24×24px를 기준으로 하죠. KRDS는 — 더 엄격한 44×44px를 도움 아이콘 버튼에 적용해, 손가락으로 편히 누르게 합니다.

CSS 픽셀 기준 — 물리 픽셀이 아니라 CSS 픽셀(논리 픽셀) 기준이라 — 고해상도 화면에서도 일관된 물리적 크기를 보장하죠.

시각 크기 vs 터치 영역. 44×44px는 — 터치/클릭 영역입니다. 아이콘 그림(?) 자체는 작아도(예: 20px), 그 주위에 충분한 패딩을 둬 — 버튼의 클릭 가능 영역을 44×44px로 키울 수 있죠. 즉 시각적 아이콘은 작아도, 누를 수 있는 영역을 44px로 확보합니다.

간격도 함께. 여러 도움 아이콘이 가까이 있으면(여러 항목) — 크기뿐 아니라 버튼 간 간격도 충분해야 오선택이 없죠(라디오 간격 CP-283 정신). 44×44px 영역이 서로 겹치지 않게 배치합니다.

대비와 별개(CP-344). 크기(347)는 ‘누르기 충분한가’, 대비(CP-344)는 ’보이는가’입니다. 둘 다 필요하죠 — 보이고 (344), 누를 만큼 크게(347).

이 규칙은 도움 패널의 ’조작 용이성’을 담당합니다 — 아이콘 버튼을 44×44px 이상으로 해(347), 손가락·손 떨림 사용자도 정확히 누르게 하죠. 버튼 크기 CP-276, 페이지네이션 CP-130의 일관된 터치 타깃 정신입니다.

정리하면 — 도움 아이콘 버튼이 작으면 손가락으로 정확히 누르기 어려우므로, 터치/클릭 영역을 CSS 픽셀 기준 44×44px 이상으로 제공해 모든 사용자가 편히 누르게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

44×44px 이상 — 도움 아이콘 버튼의 터치 영역이 44×44px 이상인가.

패딩 확보 — 작은 아이콘에 패딩을 둬 클릭 영역을 44px로 키웠는가.

간격 — 여러 아이콘이 충분히 떨어져 오선택이 없는가.

개선 방향

아이콘 버튼 터치 영역을 44×44px 이상으로(패딩으로 영역 확대).

버튼 간 충분한 간격. 모바일 열기 버튼(CP-343)도 44px+.

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

역할	책임
디자이너	아이콘 버튼 크기·간격 정의
퍼블리셔/개발	44×44px 터치 영역 구현

기관 유형	CP-347 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (도움 패널 사용 시)

웹접근성 의무 대상이며 도움 패널을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 도움 아이콘 버튼의 터치 영역이 44×44px 이상인가요?

□ 작은 아이콘에 패딩을 둬 클릭 영역을 44px로 키웠나요?

□ 여러 아이콘이 충분히 떨어져 오선택이 없나요?

❓ FAQ

Q1. 아이콘 그림이 작아도 되나요? 네. 시각적 아이콘(?)은 작아도, 주위 패딩으로 클릭 영역을 44×44px로 키우면 됩니다. 터치 영역이 기준이죠. Q2. 왜 44px인가요? 손가락으로 편히 누를 수 있는 최소 크기입니다. WCAG 2.5.5(AAA) 기준이고, KRDS가 도움 아이콘에 적용하죠. Q3. CSS 픽셀이 뭔가요? 물리 픽셀이 아닌 논리 픽셀입니다. 고해상도 화면에서도 일관된 물리적 크기를 보장하죠.

6. 마무리

CP-347의 메시지:

손가락으로 누를 만큼 — 도움 아이콘 버튼을 44×44px 이상으로 제공하라.

도움 아이콘이 작으면 손가락으로 정확히 누르기 어렵습니다. 터치 영역을 44×44px 이상으로(패딩으로 확대) 확보해 모든 사용자가 편히 누르게 하는 게 핵심이죠. 다음 편은 패널의 DOM 순서(본문 다음)입니다.

다음 편 예고 ▶ 「468. (CP-348) 키보드·스크린 리더 사용자가 본문 정보·컨트롤 개요를 파악한 후 도움 패널 사용 여부를 결정할 수 있도록 본문 다음 요소로 제공하고 있다.」

ViewCheck는 도움 아이콘 버튼이 44×44px 이상인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 도움 패널(Help panel) 가이드 — https://www.krds.go.kr/html/site/component/component_33.html

WCAG 2.1 SC 2.5.5 Target Size — https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

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

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