켜든 끄든 같은 이름

KRDS CP-313 — 스위치 상태에 상관없이 레이블을 일관되게 유지하고 있다.

0. 들어가며 — 켜면 레이블이 바뀌면

이번 433편은 스위치 상태에 상관없이 레이블을 일관되게 유지하라는 규칙입니다.

토글 스위치를 켜고/끌 때 — 레이블 텍스트가 상태에 따라 바뀌면(꺼짐일 땐 ‘알림 켜기’, 켜짐일 땐 ‘알림 끄기’), 사용자는 ‘이 레이블이 현재 상태인지, 누르면 될 동작인지’ 헷갈리죠. CP-313은 상태와 무관하게 레이블을 고정하라고 규정합니다. CP-312(직관적 레이블)의 짝이죠. 이번 편을 풀어냅니다.

1. 원문 — 상태 무관 레이블 일관

CP-313 (컴포넌트 > 토글 스위치) “스위치 상태에 상관없이 레이블을 일관되게 유지하고 있다.”

토글 스위치가 켜짐이든 꺼짐이든, 레이블 텍스트를 바꾸지 않고 동일하게 유지하라는 뜻입니다.

정리: 토글 레이블은 켜짐/꺼짐에 상관없이 동일하게 유지하라. 이게 CP-313입니다.

2. 왜 상태 무관 레이블 일관인가

토글 스위치에는 두 가지가 있습니다: ①레이블(이 스위치가 무엇인가 ‘알림’)과 ②상태(지금 켜짐/꺼짐). 이 둘은 역할이 다른데 레이블을 상태에 따라 바꾸면 둘이 뒤섞여 혼란을 낳죠.

레이블이 상태 따라 바뀔 때의 문제:

현재 상태인지 동작인지 혼란 만약 레이블이 꺼짐일 땐 ‘알림 켜기’, 켜짐일 땐 ‘알림 끄기’로 바뀐다고 합시다. 사용자가 ’알림 켜기’를 보면 ’지금 알림이 켜져 있다는 건가? 아니면 누르면 켜진다는 건가?’ 헷갈리죠. 이는 버튼 레이블(‘켜기’=누르면 켜짐)과 토글이 뒤섞인 혼란입니다.

상태 판단 어려움 — 레이블이 동작(‘알림 끄기’)을 가리키는지, 상태(‘알림 꺼짐’)를 가리키는지 모호해져 — 사용자가 현재 알림이 켜졌는지 꺼졌는지 헷갈립니다.

스크린 리더 혼란 — 동적으로 바뀌는 레이블은 — 스크린 리더에도 일관성 없이 전달돼 혼란스럽죠.

토글 스위치의 올바른 모델은 — 레이블은 고정, 상태는 스위치 모양으로 입니다:

레이블(고정) — ‘알림’이라는 레이블은 — 켜짐이든 꺼짐이든 항상 ’알림’. 이 스위치가 ’무엇’에 대한 것인지만 알리죠. 바뀌지 않습니다.

상태(스위치 모양) — 켜짐/꺼짐은 — 스위치의 시각적 위치·색(핸들이 오른쪽=켜짐, 왼쪽=꺼짐)으로 표현 합니다(CP-316). 그리고 스크린 리더엔 ‘on/off’ 상태로 전달되죠(CP-318, role="switch" + aria-checked).

이렇게 — 레이블은 ‘무엇인가’를 고정으로 알리고, 상태는 스위치 모양·aria로 알리면, 둘이 명확히 분리돼 혼란이 없죠. 사용자는 ’알림’(레이블)이 ‘켜져 있다’(스위치 위치)를 직관적으로 읽습니다.

버튼과의 차이 재확인. 버튼은 동작 명령이라 레이블이 동작을 가리킵니다(‘저장’). 토글은 설정 상태라 레이블이 ‘대상’을 가리키고(고정), 상태는 별도로 표시하죠. CP-313은 이 토글의 모델을 지킵니다 레이블을 동작 (’켜기/끄기’)으로 바꾸지 말라는 것입니다.

CP-312와의 연계. CP-312(직관적 레이블, 긍정형 명사)와 CP-313(상태 무관 일관)은 함께 갑니다 — 레이블을 긍정형 명사(‘알림’)로 고정하면(312), 자연히 상태와 무관하게 일관되죠(313). 부정형·동작형 레이블을 피하면 둘 다 충족됩니다.

이 규칙은 토글 스위치의 ’레이블·상태 분리’를 담당합니다 — 레이블은 대상을 고정으로, 상태는 스위치 모양으로 분리해, 사용자가 ’무엇이 켜졌는지’를 혼란 없이 읽게 하죠.

정리하면 — 토글 레이블이 상태에 따라 바뀌면 현재 상태인지 동작인지 헷갈리므로, 레이블은 대상을 가리키며 켜짐/ 꺼짐에 상관없이 일관되게 유지하고 상태는 스위치 모양으로 표현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 고정 — 켜짐/꺼짐에 따라 레이블 텍스트가 바뀌지 않는가.

상태 별도 표현 — 상태가 스위치 모양·색(CP-316)과 aria(CP-318)로 표현되는가.

대상 명사 — 레이블이 동작(‘켜기’)이 아니라 대상(‘알림’)인가.

개선 방향

레이블을 대상 명사로 고정. 상태 따라 텍스트 변경 제거.

켜짐/꺼짐은 스위치 위치·색 + aria-checked로 표현.

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

역할	책임
콘텐츠/UX	고정 레이블 정의
퍼블리셔/개발	레이블 고정·상태 분리 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 켜짐/꺼짐에 따라 레이블 텍스트가 바뀌지 않나요?

□ 상태가 스위치 모양·색과 aria로 표현되나요?

□ 레이블이 동작(‘켜기’)이 아니라 대상(‘알림’)인가요?

❓ FAQ

**Q1. 켜짐일 때 ‘끄기’로 바꾸면 직관적이지 않나요?** 그건 버튼 모델입니다. 토글에선 ’알림 켜기/끄기’로 바뀌면 현재 상태인지 동작인지 헷갈리죠. 레이블 고정 + 스위치 모양으로 상태 표현이 맞습니다. Q2. 그럼 상태는 어떻게 알리나요? 스위치의 위치·색(핸들 오른쪽=켜짐)과 스크린 리더의 aria-checked로 알립니다. Q3. CP-312와 뭐가 다른가요? CP-312는 ’레이블이 직관적인가’, CP-313은 ’상태 따라 안 바뀌고 일관된가’입니다. 함께 적용하죠.

6. 마무리

CP-313의 메시지:

켜든 끄든 같은 이름 — 토글 레이블을 상태와 무관하게 일관되게 유지하라.

레이블이 상태에 따라 바뀌면 현재 상태인지 동작인지 헷갈립니다. 레이블은 대상(‘알림’)을 가리키며 고정하고, 상태는 스위치 모양·aria로 표현하는 게 핵심이죠. 다음 편은 넓은 컨테이너 내 레이블 배치입니다.

다음 편 예고 ▶ 「434. (CP-314) 넓은 컨테이너 내부에 스위치를 사용해야 하는 경우, 레이블을 스위치와 인접한 영역에 배치하고 있다.」

ViewCheck는 토글 레이블이 상태와 무관하게 일관 유지되는지를 진단합니다.

📚 참고 출처

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

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

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