같은 화면엔 같은 모양으로

KRDS CP-315 — 한 화면 내에서의 토글 스위치 표현에 동일한 레이아웃을 사용하고 있다.

0. 들어가며 — 토글마다 모양이 다르면

이번 435편은 한 화면 내에서 토글 스위치 표현에 동일한 레이아웃을 사용하라는 규칙입니다.

설정 화면에 토글이 여러 개일 때 — 어떤 건 레이블이 왼쪽, 어떤 건 오른쪽; 어떤 건 스위치가 크고, 어떤 건 작으면 — 사용자는 매번 새로 파악해야 하죠. CP-315는 한 화면의 토글들을 동일한 레이아웃으로 통일하라고 규정합니다. 페이지네이션 일관 순서(CP-132), 캐러셀 일관 위치(CP-215)의 토글 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 동일한 레이아웃

CP-315 (컴포넌트 > 토글 스위치) “한 화면 내에서의 토글 스위치 표현에 동일한 레이아웃을 사용하고 있다.”

같은 화면 안의 여러 토글 스위치를, 레이블 위치·스위치 크기·정렬 등 레이아웃을 통일해 일관되게 표현하라는 뜻입니다.

정리: 한 화면의 토글들을 동일한 레이아웃으로 통일하라. 이게 CP-315입니다.

2. 왜 레이아웃 일관성인가

설정 화면에는 — 토글 스위치가 여러 개 모여 있는 경우가 많습니다(알림 설정, 개인정보 설정 등 줄줄이). 이 토글들이 — 제각각 다른 레이아웃이면 사용자가 혼란스럽죠. CP-315는 일관성을 요구합니다.

레이아웃이 제각각일 때:

반복 학습 부담 — 첫 토글은 ‘레이블 왼쪽 + 스위치 오른쪽’인데, 다음 토글은 ’스위치 왼쪽 + 레이블 오른쪽’ 이면 — 사용자가 매 토글마다 구조를 새로 파악해야 합니다. 한 번 익힌 패턴을 반복 적용 못 하죠.

레이블-스위치 혼동 — 정렬·위치가 들쭉날쭉하면 — 어느 레이블이 어느 스위치인지 헷갈립니다(특히 여러 행이 쌓일 때).

스캔 어려움 — 토글들의 스위치 위치가 행마다 다르면 — ’지금 무엇이 켜져 있나’를 세로로 훑어보기 어렵죠. 스위치가 모두 같은 위치(예: 오른쪽 정렬)면 한눈에 켜짐/꺼짐을 스캔할 수 있습니다.

시각적 산만 — 크기·간격·스타일이 제각각이면 화면이 산만하고 비전문적으로 보입니다.

그래서 CP-315는 — 한 화면의 토글들을 동일한 레이아웃으로 통일하라고 합니다:

레이블 위치 통일 — 모든 토글에서 레이블 위치를 동일하게(예: 모두 스위치 왼쪽). 섞지 않죠.

스위치 정렬 통일 — 스위치를 모두 같은 위치에 정렬(예: 모두 오른쪽 끝, 또는 모두 레이블 옆). 세로로 스위치 열이 정렬되면 — 켜짐/꺼짐을 한눈에 스캔하죠.

크기·간격·스타일 통일 — 스위치 크기, 행 간격, 색·스타일을 동일하게.

일관성의 효과. 토글들이 동일 레이아웃이면 — 사용자가 한 번 패턴을 익히면 나머지 토글에 그대로 적용하죠 (학습 전이). ’레이블 보고 → 오른쪽 스위치 확인’을 모든 토글에서 반복하면 됩니다. 빠르고 편하죠.

CP-314와의 관계. CP-314(레이블 인접 배치)와 CP-315(레이아웃 일관)는 함께 갑니다 — 각 토글의 레이블을 스위치 가까이 두고(314), 그 배치를 모든 토글에서 일관되게(315) 하면, 명확하고 일관된 설정 화면이 되죠.

이 규칙은 토글 스위치의 ’화면 일관성’을 담당합니다 — 한 화면의 토글들을 동일 레이아웃으로 통일해(315), 사용자가 패턴을 반복 적용하며 빠르게 조작·스캔하게 하죠. 디자인 일관성·예측 가능성의 토글 적용입니다.

정리하면 — 한 화면의 토글들이 제각각 레이아웃이면 반복 학습 부담과 혼동·스캔 어려움이 생기므로, 레이블 위치· 스위치 정렬·크기·스타일을 동일하게 통일해야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 위치 통일 — 모든 토글의 레이블 위치가 동일한가.

스위치 정렬 통일 — 스위치가 모두 같은 위치에 정렬되는가(세로 스캔 가능).

크기·스타일 통일 — 스위치 크기·간격·스타일이 일관되는가.

개선 방향

한 화면 토글의 레이블 위치·스위치 정렬·크기·스타일 통일.

스위치를 같은 열에 정렬해 켜짐/꺼짐 세로 스캔 가능하게.

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

역할	책임
디자이너	토글 레이아웃 표준 정의
퍼블리셔/개발	일관 레이아웃 구현

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

설정 화면에 토글을 여럿 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 토글의 레이블 위치가 동일한가요?

□ 스위치가 모두 같은 위치에 정렬되나요(세로 스캔 가능)?

□ 스위치 크기·간격·스타일이 일관되나요?

❓ FAQ

Q1. 토글마다 다르게 디자인하면 다채롭지 않나요? 설정 화면에선 일관성이 중요합니다. 제각각이면 매번 새로 파악해야 해 피로하죠. Q2. 스위치를 왜 같은 열에 두나요? 모두 같은 위치(예: 오른쪽)면 켜짐/꺼짐을 세로로 한눈에 스캔할 수 있습니다. Q3. CP-314와 뭐가 다른가요? CP-314는 ‘각 토글의 레이블이 스위치와 가까운가’, CP-315는 ’여러 토글의 레이아 웃이 서로 일관된가’입니다.

6. 마무리

CP-315의 메시지:

같은 화면엔 같은 모양으로 — 한 화면 토글들을 동일한 레이아웃으로 통일하라.

토글들이 제각각 레이아웃이면 반복 학습 부담과 혼동·스캔 어려움이 생깁니다. 레이블 위치·스위치 정렬·크기·스타일을 통일해 사용자가 패턴을 반복 적용하게 하는 게 핵심이죠. 다음 편은 토글 시각 요소의 명도 대비입니다.

다음 편 예고 ▶ 「436. (CP-316) 경로, 핸들, 상태 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.」

ViewCheck는 한 화면 토글들의 레이아웃 일관성을 진단합니다.

📚 참고 출처

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

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

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