레이블과 스위치를 가까이

KRDS CP-314 — 넓은 컨테이너 내부에 스위치를 사용해야 하는 경우, 레이블을 스위치와 인접한 영역에 배치하고 있다.

0. 들어가며 — 레이블과 스위치가 멀리 떨어지면

이번 434편은 넓은 컨테이너 내부에 스위치를 쓸 때, 레이블을 스위치와 인접한 영역에 배치하라는 규칙입니다.

설정 행이 넓을 때 — 레이블은 왼쪽 끝, 스위치는 오른쪽 끝에 멀찍이 떨어뜨려 두는 경우가 많죠. 둘이 너무 멀면 — ‘이 레이블이 저 스위치의 것인지’ 헷갈리고, 시선이 먼 거리를 오가야 합니다. CP-314는 넓은 컨테이너에서도 레이블을 스위치 가까이 두라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 레이블을 스위치 인접 영역에

CP-314 (컴포넌트 > 토글 스위치) “넓은 컨테이너 내부에 스위치를 사용해야 하는 경우, 레이블을 스위치와 인접한 영역에 배치하고 있다.”

폭이 넓은 설정 영역(컨테이너) 안에 토글 스위치를 둘 때, 레이블을 스위치와 가까운 위치에 배치하라는 뜻입니다.

정리: 넓은 컨테이너에서도 레이블을 스위치 가까이 배치하라. 이게 CP-314입니다.

2. 왜 인접 배치인가

설정 화면에서 토글 스위치는 — 보통 ‘레이블 + 스위치’가 한 행을 이룹니다(’알림 [스위치]’). 그런데 — 컨테이너(행)가 넓으면, 레이블을 왼쪽 끝, 스위치를 오른쪽 끝에 멀찍이 떨어뜨려 두는 디자인이 흔하죠(양 끝 정렬). 이 거리가 너무 멀면 문제가 생깁니다.

레이블과 스위치가 멀 때:

연결 모호 넓은 행에서 레이블(왼쪽)과 스위치(오른쪽)가 멀리 떨어지면 ‘이 레이블이 저 스위치의 것인지’ 연결이 약해집니다. 여러 설정 행이 세로로 쌓이면 어느 레이블이 어느 스위치인지 더 헷갈리죠(특히 행 간격이 좁으면 위/아래 행과 혼동).

시선 이동 부담 — 레이블을 읽고 → 멀리 떨어진 스위치로 시선을 옮겨야 — 거리가 멀수록 부담이고, 중간에 다른 행으로 시선이 새기 쉽습니다.

터치 영역 분리 — 레이블과 스위치가 멀면 — 레이블을 눌러도 스위치가 토글되는 영역(클릭 영역)이 어색해지죠.

이는 — 근접성의 원리(Gestalt)입니다. 관련된 요소(레이블-스위치)는 가까이 둬야 ’한 묶음’으로 인지되죠. 멀면 별개로 보입니다.

그래서 CP-314는 — 넓은 컨테이너에서도 레이블을 스위치와 인접한 영역에 두라고 합니다:

레이블-스위치 근접 — 레이블을 스위치 바로 옆(또는 가까운 위)에 둡니다. 행이 넓어도 — 레이블과 스위치를 한쪽에 모아 가깝게요. 양 끝으로 과하게 벌리지 않습니다.

시각적 묶음 — 레이블+스위치를 — 시각적으로 한 그룹으로 묶어(가까운 간격), 어느 레이블이 어느 스위치인지 분명하게.

부가 설명은 별도 — 설정에 부가 설명(보조 텍스트)이 있으면 — 그건 레이블 아래 등에 두되, 핵심 레이블은 스위치 가까이 둡니다.

넓은 컨테이너의 맥락. 원문이 ’넓은 컨테이너’를 특정한 이유는 — 좁은 영역에선 자연히 가깝지만, 넓으면 양 끝 정렬로 멀어지기 쉽기 때문이죠. 카드·패널·전체 폭 설정 행 등 넓은 곳에서 특히 주의합니다. 레이블을 스위치 쪽으로 당기거나, 행 폭 자체를 적절히 제한하는 방법이 있죠.

프로그래밍적 연결도(CP-318). 시각적 인접 배치(314)에 더해 — 레이블이 스위치와 프로그래밍적으로 연결돼야 스크린 리더가 함께 읽습니다(CP-318). 시각 근접(314)과 코드 연결(318)이 함께 가죠.

이 규칙은 토글 스위치의 ’레이블-컨트롤 연결’을 담당합니다 — 넓은 영역에서도 레이블을 스위치 가까이 둬(314), 둘의 연결을 분명히 하고 시선 부담을 줄이죠. 라디오 CP-283·체크박스 CP-291의 레이블 인접 정신을 토글에 적용한 것입니다.

정리하면 — 넓은 컨테이너에서 레이블과 스위치를 양 끝에 멀찍이 두면 연결이 모호하고 시선 부담이 크므로, 레이블을 스위치와 인접한 영역에 배치해 한 묶음으로 인지되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

인접 배치 — 넓은 행에서 레이블이 스위치와 가까이 있는가(양 끝 과대 분리 아님).

묶음 인지 — 레이블+스위치가 한 그룹으로 보이는가(어느 게 어느 것인지 분명).

연결 — 레이블이 스위치와 프로그래밍적으로 연결됐는가(CP-318).

개선 방향

넓은 컨테이너에서 레이블을 스위치 쪽으로 당겨 인접 배치. 양 끝 과대 분리 지양.

레이블+스위치 시각 묶음. <label> 연결로 클릭 영역·스크린 리더 연결(CP-318).

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

역할	책임
디자이너	넓은 컨테이너 레이블-스위치 배치
퍼블리셔/개발	인접 배치·레이블 연결 구현

기관 유형	CP-314 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (넓은 컨테이너 토글 사용 시)

넓은 설정 패널·카드에 토글을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 넓은 행에서 레이블이 스위치와 가까이 있나요(양 끝 과대 분리 아님)?

□ 레이블+스위치가 한 그룹으로 보이나요?

□ 레이블이 스위치와 프로그래밍적으로 연결됐나요?

❓ FAQ

Q1. 양 끝 정렬(레이블 왼쪽, 스위치 오른쪽)이 깔끔하지 않나요? 행이 넓으면 둘이 너무 멀어 연결이 모호해지고 시선 부담이 큽니다. 인접 배치가 인지에 낫죠. Q2. 부가 설명은 어디 두나요? 보조 텍스트는 레이블 아래 등에 두되, 핵심 레이블은 스위치 가까이 둡니다. Q3. 좁은 영역도 해당되나요? 좁으면 자연히 가깝습니다. 이 규칙은 넓은 컨테이너에서 멀어지기 쉬운 경우를 겨냥하죠.

6. 마무리

CP-314의 메시지:

레이블과 스위치를 가까이 — 넓은 컨테이너에서도 레이블을 스위치 인접 영역에.

넓은 행에서 레이블과 스위치를 양 끝에 멀찍이 두면 연결이 모호하고 시선 부담이 큽니다. 레이블을 스위치 가까이 둬 한 묶음으로 인지되게 하는 게 핵심이죠. 다음 편은 화면 내 토글 레이아웃 일관성입니다.

다음 편 예고 ▶ 「435. (CP-315) 한 화면 내에서의 토글 스위치 표현에 동일한 레이아웃을 사용하고 있다.」

ViewCheck는 넓은 컨테이너에서 레이블이 스위치와 인접 배치됐는지를 진단합니다.

📚 참고 출처

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

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

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