토글 스위치

스위치라는 은유

토글은 벽의 전등 스위치를 화면으로 옮긴 거예요. 게이버(1991)는 사물의 모양이 할 수 있는 행동을 알려 주는 어포던스를 기술 설계에 적용했고, 노먼(1999)은 화면에서는 관례와 '인지된 어포던스'가 그 역할을 한다고 정리했어요. 손잡이가 한쪽으로 치우친 둥근 막대 모양은 '밀어서 바꾸는 것'이라는 관례가 되어 있어서 따로 설명이 없어도 알아봐요. 관련 개념은 어포던스 문서를 참고하세요.

토글과 체크박스는 언제 쓸까

켄드릭(2018)의 지침과 애플(n.d.)의 안내처럼 토글은 누르는 즉시 적용되는 설정에 써요. 와이파이 켜기, 알림 받기처럼요. 반대로 '저장'이나 '제출'을 눌러야 적용되는 양식의 선택에는 체크박스가 맞아요. 양식 안에 토글을 넣으면 사용자는 이미 적용된 줄 알고 저장 없이 나가 버려요. 여러 항목 중 여러 개를 고르는 목록에도 체크박스가 더 명확해요. 즉시 적용이 실패했을 때는 토글을 원래 상태로 돌리고 이유를 알려 줘야 해요.

켜짐과 꺼짐을 분명하게

가장 흔한 문제는 지금 켜진 건지 꺼진 건지 헷갈리는 거예요. 색만으로 구분하지 말고 손잡이 위치, 채움, 아이콘(Google, n.d.)을 함께 쓰세요. 레이블은 '알림 받기'처럼 켜졌을 때의 상태를 말하게 하고, 레이블이 상태에 따라 바뀌지 않게 해요. WCAG 2.2(W3C, 2023)는 컨트롤의 시각적 대비 3:1(1.4.11)과 화면낭독기에 이름·역할·상태를 알리는 것(4.1.2)을 요구해요. 손잡이보다 행 전체를 누를 수 있게 하면 터치 타깃 크기(Parhi et al., 2006) 문제도 줄어요. 색채 대비도 함께 확인하세요.

자주 묻는 질문

토글 레이블은 '켜짐/꺼짐'으로 써야 하나요?

아니에요. 기능 이름(예: '알림 받기')을 쓰고 상태는 스위치 모양으로 보여주는 게 일반적이에요.

토글 대신 체크박스를 써야 하는 경우는?

저장이나 제출을 눌러야 적용되는 양식, 여러 항목을 고르는 목록에서는 체크박스가 맞아요.

출처 검토일: 2026-10-27

참고문헌

1. Kendrick, A. (2018, July 29). Toggle-switch guidelines. Nielsen Norman Group. 토글과 체크박스를 언제 쓰는지 정리한 지침이라, 컨트롤을 고를 때 참고하면 도움이 돼요.
2. Google. (n.d.). Switch. Material Design 3. 안드로이드 스위치의 상태 표시와 아이콘 사용 지침이라, 구현 시 참고하면 도움이 돼요.
3. Apple. (n.d.). Toggles. Human Interface Guidelines. iOS 토글을 즉시 적용되는 설정에 쓰라는 지침이라, 플랫폼 관례를 맞출 때 참고하면 도움이 돼요.
4. Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 화면 요소는 관례와 인지된 어포던스로 이해된다는 글이라, 토글 모양이 무엇을 알려야 하는지 볼 때 참고하면 도움이 돼요.
5. Gaver, W. W. (1991). Technology affordances. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 79–84). ACM. 어포던스를 기술 설계에 적용한 고전이라, 물리 스위치 은유를 이해할 때 참고하면 도움이 돼요.
6. Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 토글의 누르는 영역을 정할 때 참고하면 도움이 돼요.
7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 컨트롤 대비 3:1(1.4.11)과 이름·역할·상태 제공(4.1.2) 기준이 있어, 접근 가능한 토글에 참고하면 도움이 돼요.