ⓘ는 정보, ?는 도움

KRDS CP-355 — 정보 제공 버튼을 정보(i), 도움 제공 버튼은 물음표(?) 아이콘으로 표현하고 있다.

0. 들어가며 — ⓘ와 ?의 차이

이번 475편부터 맥락적 도움말(Contextual help) 그룹입니다(11개). 첫 규칙은 정보 제공 버튼은 ⓘ, 도움 제공 버튼은 ? 아이콘으로 표현하라는 규칙입니다.

맥락적 도움말은 — 입력 항목 옆 작은 아이콘을 누르면 팝오버(말풍선)로 도움말이 뜨는 컴포넌트입니다. 이 아이콘이 — ’정보’인지 ’도움’인지에 따라 ⓘ와 ? 두 관습 아이콘을 구분해 쓰라는 거죠. CP-355는 아이콘 의미 약속을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 정보(ⓘ)·도움(?) 아이콘 구분

CP-355 (컴포넌트 > 맥락적 도움말) “정보 제공 버튼을 정보(i), 도움 제공 버튼은 물음표(?) 아이콘으로 표현하고 있다.”

정보를 제공하는 버튼은 ‘ⓘ’(information) 아이콘으로, 도움을 제공하는 버튼은 ‘?’(question) 아이콘으로 구분해 표현 하라는 뜻입니다.

정리: 정보는 ⓘ, 도움은 ? 아이콘으로 구분하라. 이게 CP-355입니다.

2. 왜 아이콘을 구분하나

맥락적 도움말(Contextual help)은 입력 항목·UI 요소 옆의 작은 아이콘 버튼을 누르면, 그 자리에서 팝오버(작은 말풍선)로 관련 도움말이 뜨는 컴포넌트입니다. 도움 패널(옆에 펼쳐지는 큰 영역)과 달리 그 자리에서 작게 뜨는 인라인 도움이죠. 이 아이콘이 무엇을 제공하는지(정보냐 도움이냐)에 따라 두 관습 아이콘을 구분합니다.

ⓘ와 ?의 관습적 의미. 웹·앱에서 — 두 아이콘은 오래 쓰여 의미가 굳어졌습니다:

ⓘ (정보, information) — 원 안에 ‘i’. 부가 정보·설명을 제공한다는 신호죠. ‘이 항목은 무엇이다’, ‘이 값은 이런 의미다’ 같은 — 정보를 알려줄 때 씁니다.

? (물음표, question) — 원 안에 ‘?’. 도움·안내를 제공한다는 신호입니다. ‘이걸 어떻게 하나요?’, ‘무엇을 입력해야 하나요?’ 같은 — 사용자의 의문을 풀어주는 도움일 때 씁니다.

사용자는 — 이 두 아이콘을 보면 관습적으로 ’아, ⓘ는 정보, ?는 도움말’을 직관적으로 압니다. 그래서 CP-355는 — 이 관습을 따라 용도에 맞는 아이콘을 쓰라고 합니다:

정보 제공 → ⓘ — 부가 정보·설명을 주는 버튼은 ⓘ로.

도움 제공 → ? — 사용법·안내·도움을 주는 버튼은 ?로.

왜 구분이 중요한가:

예측 가능성 — 아이콘 의미가 일관되면 — 사용자는 누르기 전에 ‘이걸 누르면 뭐가 나올지’를 예측합니다. ?를 보면 ’도움말이 나오겠구나’, ⓘ를 보면 ‘정보가 나오겠구나’ 하죠. 예측이 맞으면 신뢰가 쌓입니다.

혼용의 혼란 만약 정보인데 ?를 쓰거나, 도움인데 ⓘ를 쓰거나, 둘을 뒤섞어 쓰면, 사용자는 아이콘으로 내용을 예측 못 하죠. 또 같은 사이트에서 같은 용도에 다른 아이콘을 쓰면 일관성이 깨집니다.

관습 활용 — 새 아이콘을 만들기보다 — 이미 사용자가 아는 관습 아이콘(ⓘ·?)을 쓰면, 학습 없이 바로 이해되죠.

일관성. 핵심은 — 사이트 전체에서 이 약속을 일관되게 지키는 것입니다. 정보엔 항상 ⓘ, 도움엔 항상 ?로요. 한 곳에선 ?로 정보를, 다른 곳에선 ⓘ로 도움을 주면 약속이 무너지죠.

이 규칙은 맥락적 도움말의 ’아이콘 의미 약속’을 담당합니다 — 정보(ⓘ)·도움(?)을 구분해(355), 사용자가 아이콘만 보고 무엇이 나올지 예측하게 하죠. 이후 맥락적 도움말 규칙들(배치·팝오버·중첩 금지·링크·대비·이름·요청 시 실행·순서· 크기)이 이 위에 쌓입니다.

정리하면 — 정보와 도움은 성격이 다른데 아이콘을 안 구분하면 사용자가 내용을 예측 못 하므로, 정보 제공은 ⓘ, 도움 제공은 ? 관습 아이콘으로 일관되게 구분해야 합니다.

3. 점검 / 개선

무엇을 점검하나

정보=ⓘ — 정보 제공 버튼이 ⓘ 아이콘인가.

도움=? — 도움 제공 버튼이 ? 아이콘인가.

일관성 — 사이트 전체에서 이 약속이 일관되는가(혼용 없음).

개선 방향

정보 제공 버튼을 ⓘ, 도움 제공 버튼을 ?로 통일.

혼용·반대 사용 교정. 같은 용도엔 같은 아이콘.

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

역할	책임
디자이너	ⓘ·? 아이콘 약속 정의
퍼블리셔/개발	용도별 아이콘 적용

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

인라인 도움말 아이콘을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 정보 제공 버튼이 ⓘ 아이콘인가요?

□ 도움 제공 버튼이 ? 아이콘인가요?

□ 사이트 전체에서 이 약속이 일관되나요(혼용 없음)?

❓ FAQ

Q1. 맥락적 도움말과 도움 패널 차이가 뭔가요? 맥락적 도움말은 그 자리에서 작게 뜨는 팝오버(말풍선), 도움 패널은 옆에 펼쳐지는 큰 영역입니다. 둘은 함께 안 씁니다(CP-360). Q2. ⓘ와 ?를 꼭 구분해야 하나요? 정보와 도움은 성격이 다릅니다. 관습 아이콘으로 구분하면 사용자가 내용을 예측하죠. 혼용하면 예측이 깨집니다. Q3. 다른 아이콘을 써도 되나요? 관습 아이콘(ⓘ·?)이 학습 없이 이해됩니다. 새 아이콘은 사용자가 모르죠. 관습을 따르는 게 안전합니다.

6. 마무리

CP-355의 메시지:

ⓘ는 정보, ?는 도움 — 용도에 맞는 관습 아이콘으로 구분하라.

정보와 도움은 성격이 다른데 아이콘을 안 구분하면 사용자가 내용을 예측 못 합니다. 정보는 ⓘ, 도움은 ?로 일관되게 구분해 예측 가능성을 주는 게 핵심이죠. 다음 편은 아이콘 버튼 배치입니다.

다음 편 예고 ▶ 「476. (CP-356) 아이콘 버튼은 도움 정보를 제공하고자 하는 요소 주변에 배치하고 있다.」

ViewCheck는 정보(ⓘ)·도움(?) 아이콘이 구분되어 사용되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 맥락적 도움말(Contextual help) 가이드 — https://www.krds.go.kr/html/site/component/component_35.html

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

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