손가락으로 누를 만큼

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

0. 들어가며 — 작은 ⓘ·?를 못 누르면

이번 485편은 맥락적 도움말 아이콘 버튼의 크기를 CSS 픽셀 기준 44px × 44px 이상으로 제공하라는 규칙입니다. 이로써 맥락적 도움말 11개 규칙이 마무리됩니다.

ⓘ·? 아이콘은 — 작은 모양이라 자칫 너무 작아지기 쉽죠. 작으면 손가락으로 정확히 누르기 어렵습니다. CP-365는 아이콘 버튼을 최소 44×44px로 제공하라고 규정합니다. 도움 패널 CP-347과 같은 터치 타깃 규칙이죠. 이번 편을 풀어냅니다.

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

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

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

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

2. 왜 44×44px인가

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

버튼이 작을 때의 문제:

터치 부정확 ⓘ·? 아이콘은 작은 원형 모양이라 자칫 매우 작아지기 쉽습니다(예: 16×16px). 손가락 끝은 넓고 부정확해 작은 아이콘을 정확히 누르기 어렵고, 옆 요소(입력 필드 등)를 잘못 누르죠.

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

모바일 부담 — 모바일 터치에선 — 작은 아이콘이 더 누르기 어렵죠.

그래서 CP-365는 — 아이콘 버튼을 44×44px 이상으로 제공하라고 합니다. 44px는 — 접근성 표준(WCAG 2.5.5 AAA)의 권장 최소 터치 타깃 크기죠(도움 패널 CP-347, 버튼 CP-276, 페이지네이션 CP-130과 일관):

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

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

간격도 함께. 여러 도움 아이콘이 가까이 있거나(여러 요소), 아이콘이 입력 필드 옆에 있으면 — 크기뿐 아니라 간격도 충분해야 인접 요소 오선택이 없죠. 44×44px 영역이 옆 요소와 겹치지 않게 배치합니다.

대비와 별개(CP-361). 크기(365)는 ‘누르기 충분한가’, 대비(CP-361)는 ’보이는가’입니다. 둘 다 필요하죠 — 보이고 (361), 누를 만큼 크게(365). 작은 아이콘이 흐릿하기까지 하면 더욱 못 누르니, 둘을 함께 챙깁니다.

이 규칙은 맥락적 도움말의 ’조작 용이성’을 담당합니다 — 아이콘 버튼을 44×44px 이상으로 해(365), 손가락·손 떨림 사용자도 정확히 누르게 하죠. 도움 패널 CP-347, 버튼 CP-276의 일관된 터치 타깃 정신입니다. 맥락적 도움말 11개 규칙이 이로써 마무리됩니다.

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

3. 점검 / 개선

무엇을 점검하나

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

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

간격 — 인접 요소(필드·다른 아이콘)와 충분히 떨어져 오선택이 없는가.

개선 방향

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

인접 요소와 충분한 간격. 대비(CP-361)도 함께 확보.

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

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

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

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

□ 인접 요소와 충분히 떨어져 오선택이 없나요?

❓ FAQ

Q1. ⓘ·? 아이콘이 작아도 되나요? 시각적 아이콘은 작아도, 주위 패딩으로 클릭 영역을 44×44px로 키우면 됩니다. 터치 영역이 기준이죠. Q2. 왜 44px인가요? 손가락으로 편히 누르는 최소 크기입니다. WCAG 2.5.5(AAA) 기준이고, 도움 패널 CP-347과 일관되죠. Q3. 입력 필드 옆에 있으면 주의할 점은? 아이콘 44px 영역이 필드와 겹쳐 오선택되지 않게 충분한 간격을 둡니다.

6. 마무리

CP-365의 메시지:

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

ⓘ·? 아이콘이 작으면 손가락으로 정확히 누르기 어렵습니다. 터치 영역을 44×44px 이상으로(패딩으로 확대) 확보해 모든 사용자가 편히 누르게 하는 게 핵심이죠. 이로써 맥락적 도움말 11개 규칙이 마무리됩니다. 다음 편부터는 코치마크 (Coach mark)입니다.

다음 편 예고 ▶ 「486. (CP-366) 코치마크 — 새 기능·UI를 처음 안내하는 데 사용하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 맥락적 도움말(Contextual help) 가이드 — https://www.krds.go.kr/html/site/component/component_35.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컴포넌트,웹표준