켜면 무슨 일이 일어나는지

KRDS CP-312 — 레이블은 사용자가 동작을 직관적으로 이해할 수 있게 사용하고 있다.

0. 들어가며 — 켜기/끄기 스위치

이번 432편부터 토글 스위치(Toggle switch) 그룹입니다. 첫 규칙은 레이블이 동작을 직관적으로 이해할 수 있게 사용하라는 규칙입니다.

토글 스위치는 — 물리적 전등 스위치처럼 ‘켜기/끄기’를 즉시 전환하는 컨트롤입니다(알림 켜기, 다크 모드 켜기 등). 이 스위치의 레이블이 — ’켜면 무슨 일이 일어나는지’ 직관적으로 알려야, 사용자가 망설임 없이 조작하죠. CP-312는 토글 레이블의 직관성을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 동작을 직관적으로 이해하는 레이블

CP-312 (컴포넌트 > 토글 스위치) “레이블은 사용자가 동작을 직관적으로 이해할 수 있게 사용하고 있다.”

토글 스위치의 레이블을, 켜고/끄면 무슨 일이 일어나는지 사용자가 직관적으로 이해할 수 있게 작성하라는 뜻입니다.

정리: 토글 레이블로 켜기/끄기 동작을 직관적으로 알게 하라. 이게 CP-312입니다.

2. 왜 직관적 레이블인가

토글 스위치(Toggle switch)는 — ‘켜기(on)/끄기(off)’ 두 상태를 즉시 전환하는 컨트롤입니다. 물리적 전등 스위치를 은유한 거죠. 체크박스와 비슷해 보이지만, 차이가 있습니다:

토글 스위치 — 켜는 즉시 적용되는 설정에 씁니다(알림 켜기→바로 알림 작동, 다크 모드→바로 화면 전환). on/off가 분명한 단일 설정.

체크박스 — 보통 ’선택’을 표시하고, 제출 시 반영되는 경우가 많죠(약관 동의→제출 후 처리).

토글 스위치의 핵심은 — 사용자가 ’이 스위치를 켜면(끄면) 무슨 일이 일어나는지’를 직관적으로 알아야 한다는 점입니다. 그걸 알려주는 게 레이블이죠.

레이블이 직관적이지 않을 때:

동작 불명확 — 스위치 옆 레이블이 모호하면(예: ‘설정’, ‘옵션’) — 사용자는 켜면 무슨 일이 일어나는지 모릅니다. 켜기를 망설이거나, 켜고도 무엇이 바뀌었는지 모르죠.

방향 혼란 — 토글은 ‘on=좋음/켜짐’이 직관적입니다. 만약 레이블이 — ’알림 끄기’처럼 부정형이면, 사용자가 ’이걸 켜면 알림이 꺼지나? 알림 끄기가 켜지나?’ 하고 헷갈리죠. 이중 부정 같은 혼란이 생깁니다.

그래서 CP-312는 — 레이블로 동작을 직관적으로 알리라고 합니다:

기능을 명사·긍정형으로 — 레이블을 — 그 기능을 나타내는 명확한 명사·긍정형으로. ‘알림’(켜면 알림 on), ‘다크 모드’(켜면 다크 모드 on)처럼요. 스위치를 켜면 그 기능이 활성화된다는 게 직관적이게.

부정형·이중부정 지양 — ‘알림 끄기’ 같은 부정형 레이블은 — 켜기/끄기와 의미가 충돌해 혼란스럽죠. ’알림’으로 두고 스위치 on=알림 작동이 직관적입니다.

상태 명확 — 켜짐/꺼짐 상태가 시각적으로 분명하고(CP-316), 레이블과 합쳐져 ’지금 알림이 켜져 있다’를 직관적으로 알게요.

토글 vs 버튼. 토글은 — ‘상태를 유지하는 설정’입니다(켜두면 계속 켜짐). 한 번 누르고 마는 ’동작’(버튼, CP-266~277)과 다르죠. 레이블도 — 동작 명령(‘저장’)이 아니라 설정 대상(‘알림’)으로 합니다.

이 규칙은 토글 스위치의 ’동작 이해’를 담당합니다 — 레이블로 켜기/끄기가 무엇을 하는지 직관적으로 알려(312), 사용자가 망설임 없이 설정을 조작하게 하죠. 이후 토글 규칙들(레이블 일관·배치·레이아웃·대비·키보드·접근성)이 이 위에 쌓입니다.

정리하면 — 토글 스위치는 켜면 무슨 일이 일어나는지 레이블로 직관적으로 알려야 하므로, 기능을 긍정형 명사로 명확히 표현하고 부정형·모호함을 피해야 합니다.

3. 점검 / 개선

무엇을 점검하나

동작 직관성 — 레이블로 켜기/끄기 시 무슨 일이 일어나는지 직관적으로 아는가.

긍정형 — 레이블이 긍정형 명사인가(부정형·이중부정 배제).

상태 결합 — 레이블 + 시각 상태로 ’지금 켜짐/꺼짐’이 분명한가.

개선 방향

레이블을 기능 긍정형 명사로(‘알림’, ‘다크 모드’). 스위치 on=기능 활성이 직관적이게.

‘~끄기’ 부정형 레이블 지양. 상태 시각화(CP-316)와 결합.

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

역할	책임
콘텐츠/UX	토글 레이블 용어 설계
퍼블리셔/개발	레이블·상태 구현

기관 유형	CP-312 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (토글 스위치 사용 시)

설정 토글을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 레이블로 켜기/끄기 시 무슨 일이 일어나는지 직관적으로 아나요?

□ 레이블이 긍정형 명사인가요(부정형·이중부정 배제)?

□ 레이블 + 시각 상태로 ’지금 켜짐/꺼짐’이 분명한가요?

❓ FAQ

Q1. 토글과 체크박스 차이가 뭔가요? 토글은 켜는 즉시 적용되는 on/off 설정(알림·다크모드), 체크박스는 보통 선택 표시 후 제출 시 반영입니다. **Q2. ‘알림 끄기’라고 쓰면 안 되나요?** 부정형은 켜기/끄기와 충돌해 혼란스럽습니다. ’알림’으로 두고 스위치 on=알림 작동이 직관적이죠. Q3. 레이블을 동작 명령형으로 쓰나요? 아닙니다. 토글은 설정이라 대상 명사(’알림’)로 씁니다. 동작 명령(‘저장’)은 버튼이죠.

6. 마무리

CP-312의 메시지:

켜면 무슨 일이 일어나는지 — 토글 레이블로 동작을 직관적으로 알게 하라.

토글 스위치는 켜면 즉시 적용되는 설정이라, 레이블로 무슨 일이 일어나는지 직관적으로 알려야 합니다. 기능을 긍정형 명사로 표현하고 부정형·모호함을 피하는 게 핵심이죠. 다음 편은 상태에 따른 레이블 일관성입니다.

다음 편 예고 ▶ 「433. (CP-313) 스위치 상태에 상관없이 레이블을 일관되게 유지하고 있다.」

ViewCheck는 토글 레이블이 동작을 직관적으로 전달하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 토글 스위치(Toggle switch) 가이드 — https://www.krds.go.kr/html/site/component/component_30.html

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

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