CSS 스위치 생성기

이 도구는 무엇인가요?

CSS 토글 스위치는 물리적인 온/오프 스위치처럼 보이고 동작하도록 스타일링한 체크박스입니다. 알약 모양의 트랙 위에서 동그란 썸이 좌우로 미끄러지는 형태죠. 겉모습과 달리 내부적으로는 진짜 체크박스 input이라는 점이 중요합니다. 그 덕분에 클릭 가능한 div만으로 만든 스위치와 달리, 키보드로 조작할 수 있고 스크린 리더에서도 인식되며 폼 제출에도 그대로 쓸 수 있습니다.

이 도구는 그 패턴을 자동으로 만들어줍니다. 숨겨진 체크박스, :checked 상태에 따라 색이 바뀌는 트랙, CSS transform으로 미끄러지는 썸까지요. 슬라이더와 색상 선택기를 조절하고 미리보기를 클릭해 실제 토글 애니메이션을 테스트한 뒤, CSS와 함께 필요한 최소한의 HTML 마크업도 복사할 수 있습니다.

출처: WAI-ARIA Authoring Practices, W3C — 스위치 컨트롤의 접근성 기반으로 실제 체크박스 input을 사용할 것을 권장하며, 이 생성기의 결과물이 기본 input 요소를 그대로 유지하는 이유이기도 합니다.

왜 사용해야 할까요?

• 미리보기는 정적인 이미지가 아니라 실제로 클릭 가능한 토글이라, 사용하기 전에 정확한 애니메이션을 미리 테스트할 수 있습니다.
• CSS가 의존하는 접근성 HTML 구조(체크박스 input + label)까지 함께 출력합니다.
• 트랙 너비/높이, 꺼짐 상태 색상, 켜짐 상태 색상, 썸 색상, 모서리 둥글기, 전환 속도를 자유롭게 조절할 수 있습니다.
• 표준 체크박스 + :checked 셀렉터 패턴을 사용하므로 키보드 탐색이 가능하고 실제 폼 안에서도 정상 동작합니다.
• 모든 처리가 브라우저 안에서 이루어지며, 설정한 내용이 어디로도 업로드되지 않습니다.
• 무료, 가입 불필요, 모바일에서도 사용 가능합니다.

사용 방법

1. 너비와 높이를 설정해 트랙 크기를 정하세요. 썸은 안쪽에 약간의 여백을 두고 자동으로 크기가 맞춰집니다.
2. 꺼짐 상태(체크 해제)일 때 트랙의 기본 색상과, 켜졌을 때의 색상을 각각 선택하세요.
3. 썸 색상을 고르세요. 흰색이나 밝은 중성색을 쓰면 대개 트랙과 대비가 가장 뚜렷합니다.
4. 테두리 반경을 50%로 두면 클래식한 알약 모양 스위치가 되고, 값을 낮추면 살짝 둥근 사각형 형태가 됩니다.
5. 전환 속도를 조절해 썸이 미끄러지는 속도와 트랙 색상이 바뀌는 속도를 함께 조정하세요.
6. 미리보기 토글을 클릭해 애니메이션이 원하는 대로인지 확인한 뒤, CSS와 HTML을 프로젝트에 복사하세요.

예시

입력

너비: 52px · 높이: 28px · 꺼짐 색상: #cbd5e1 · 켜짐 색상: #ea580c · 반경: 50% · 속도: 200ms

결과

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

이 패턴의 핵심은 체크박스의 :checked 상태와 일반 형제 셀렉터(~)를 조합해 트랙 배경색과 썸이 이동하는 거리를 동시에 제어하는 것입니다.

클릭 핸들러 달린 div 대신 체크박스를 쓰는 이유

<div> 두 개와 클릭 시 클래스를 바꿔주는 자바스크립트 몇 줄로 토글을 만들고 싶은 유혹이 있지만, 이 방식은 대개 키보드 탐색, 스크린 리더 안내, 폼 제출을 모두 깨뜨립니다. 반면 진짜 체크박스는 이 세 가지를 별다른 작업 없이 다 해결해줍니다. 이 도구가 생성하는 패턴은 <input type="checkbox">를 시각적으로만 숨기고(포커스는 유지한 채) 실제 상호작용 요소로 남겨두며, 자바스크립트 없이 순수 CSS만으로 체크박스의 네이티브 :checked 상태를 기준으로 트랙과 썸을 스타일링합니다.

자주 쓰는 스위치 스타일

• 클래식 알약 스위치: 테두리 반경 50%, 적당한 크기(너비 48~56px), 온/오프 사이 색상 대비가 뚜렷함.
• 설정 패널용 스위치: 작은 크기(너비 36~44px), 은은한 회색 꺼짐 상태에 브랜드 컬러의 켜짐 상태.
• 살짝 둥근 스위치: 완전한 알약 모양 대신 테두리 반경 20~30% 정도로 좀 더 각진, 앱스러운 느낌.
• 빠르고 경쾌한 스위치: 전환 속도 100~150ms로 즉각적이고 반응성이 좋게 느껴집니다.
• 느긋한 스위치: 전환 속도 300~400ms로 좀 더 부드럽고 세련되게 느껴지며, 눈에 띄는 단일 설정 토글에 적합합니다.

다른 CSS 도구와 함께 사용하기

생성된 트랙과 썸은 내부적으로 이미 border-radius를 사용하고 있어서, 슬라이더가 제공하는 범위를 넘어 각진 형태나 다르게 둥근 형태를 원한다면 Border Radius Generator로 각 모서리를 따로 미세 조정한 뒤 값을 붙여넣으면 됩니다. 썸에 은은한 그림자를 더해 입체감을 주고 싶다면 Box Shadow Generator가 유용합니다.

→ Border Radius 생성기 · 박스 섀도우 생성기

자주 묻는 질문