GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

CSS 토글 스위치 9종 — 한 줄 복붙으로

· Godrich · 9종 · 9분 읽기

피드백SCSSCSS만클릭폼·입력

CSS 토글 스위치는 <input type="checkbox"> 하나로 실제 켜고 끌 수 있으면서 트랙과 노브의 위치·색·아이콘만 다르게 꾸민 컨트롤입니다.

기본 슬라이드01 toggle-switch-basic-slide iOS 스타일02 toggle-switch-ios-style ON/OFF 라벨 내장03 toggle-switch-label-inside-onoff 아이콘 전환04 toggle-switch-icon-swap 눌림 스퀴시 효과05 toggle-switch-squish-press 배경색 채움 전환06 toggle-switch-color-fill-bg 해/달 아이콘 토글07 toggle-switch-day-night-icon 크기 변형 믹스인08 toggle-switch-size-variants 비활성 상태 스타일09 toggle-switch-disabled-state

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개는 화려한 순서가 아니라 트랙 위에서 실제로 무엇을 바꾸는가 순으로 놓았습니다. 위치만 옮기는 기본형(01~02)에서 시작해, 트랙 안쪽 내용이 바뀌는 것(03~04), css 버튼 클릭 효과처럼 눌림이나 채움 연출이 들어간 것(05~07)을 지나, 구조 자체가 여럿이거나 아예 손댈 수 없는 두 개(08~09)로 끝납니다. 코드 블록엔 각 스위치의 핵심 선택자만 남겼고, 그대로 붙이면 돌아가는 완결본은 zip 안에 있습니다. 03 라벨 글자에까지 색을 흘리고 싶다면 CSS 글자 그라데이션 반짝이는 텍스트가, 같은 <input> 마크업으로 체크박스와 라디오까지 맞추려면 CSS 체크박스 커스텀 라디오 애니메이션이 짝이 됩니다.

01기본 슬라이드

어떻게 움직이나

체크박스에 checked가 걸리면 원형 노브가 트랙 오른쪽까지 미끄러지고, 트랙은 두 겹을 겹쳐 배경색만 opacity로 바꿉니다. 도착 직전 노브가 목표 지점을 살짝 지나쳤다가 되돌아오는 스프링 오버슛에 잠깐 납작해지는 squash까지 얹혀 있고, 노브가 자리를 잡는 순간 트랙 그림자도 얕아졌다가 깊어지며 눌린 깊이를 같이 보여줍니다.

어디에 쓰나

설정 화면의 옵션 스위치나 체크박스를 대체할 가장 기본형입니다.

기본 슬라이드
새 창에서 열기

01 · 기본 슬라이드 — 측정 누적면적 0.917% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateX:checked0.25초
.switch__bg--off { background: rgba(255, 255, 255, .18); opacity: 1; }
.switch__bg--on  { background: $color; opacity: 0; }
.switch__knob { transform: translateX(0); transition: transform $duration $easing; }

.switch__input:checked ~ .switch__track .switch__bg--off { opacity: 0; }
.switch__input:checked ~ .switch__track .switch__bg--on  { opacity: 1; }
.switch__input:checked ~ .switch__track .switch__knob    { transform: translateX(24px); }

02iOS 스타일

어떻게 움직이나

iOS 설정 앱처럼 둥근 트랙과 흰 노브 조합에, 노브가 도착 지점에서 스프링 이징으로 한 번 더 튕기고 멈춥니다. 튕기는 순간 노브가 세로로 좁아지는 squash가 같이 들어가 탄성이 눈에 보이고, 트랙 안쪽 그림자도 노브가 붙어 있을 때 깊었다가 떨어질 때 얕아지며 손맛을 더합니다.

어디에 쓰나

모바일 웹 설정 화면처럼 손끝의 반응감이 중요한 자리에 씁니다.

iOS 스타일
새 창에서 열기

02 · iOS 스타일 — 측정 누적면적 1.118% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

cubic-bezier 스프링그림자0.3초
@keyframes knob-loop {
  0%, 15%   { transform: translateX(0); }
  38%       { transform: translateX(28px); }   // 스프링 오버슈트
  40%, 60%  { transform: translateX(24px); }
  85%, 100% { transform: translateX(0); }
}

03ON/OFF 라벨 내장

어떻게 움직이나

트랙 양 끝에 ON·OFF 글자를 고정해 두고, 노브가 이동하며 반대쪽 글자를 z-index로 덮습니다. 이동 끝에서 노브가 한 번 튀어 올라갔다가 눌리며 납작해지는 스프링+squash 마무리가 붙고, 그 사이 트랙 그림자가 깊어졌다가 되돌아와 글자 위에 노브가 착 지압하는 느낌을 줍니다.

어디에 쓰나

관리자 대시보드의 상태 스위치처럼 지금 값이 뭔지 글자로도 보여야 하는 곳에 씁니다.

ON/OFF 라벨 내장
새 창에서 열기

03 · ON/OFF 라벨 내장 — 측정 누적면적 1.507% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

z-indexoverflow:hidden0.25초
.switch__text--on  { left: 10px; }
.switch__text--off { right: 10px; }
.switch__knob {
  position: absolute; top: 3px; left: 3px; z-index: 1;
  transition: transform $duration $easing;
}
.switch__input:checked ~ .switch__track .switch__knob {
  transform: translateX(44px);
}

04아이콘 전환

어떻게 움직이나

노브 안 체크·엑스 아이콘이 opacity로 자리를 바꾸는 사이 노브 자체도 옆으로 이동합니다. 목표 위치를 살짝 넘겼다가 돌아오는 스프링 오버슛과 함께 노브가 한순간 납작해지는데, 이때 트랙 그림자가 짙어졌다가 풀리며 아이콘이 바뀌는 타이밍을 눈으로 잡아줍니다.

어디에 쓰나

권한 허용·거부처럼 결과가 아이콘 하나로 설명되는 스위치에 씁니다.

아이콘 전환
새 창에서 열기

04 · 아이콘 전환 — 측정 누적면적 1.05% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

opacity 크로스페이드SVG 아이콘0.2초
.switch__knob { transform: translateX(0); transition: transform $duration $easing; }
.switch__icon--x     { opacity: 1; }
.switch__icon--check { opacity: 0; }

.switch__input:checked ~ .switch__track .switch__knob        { transform: translateX(26px); }
.switch__input:checked ~ .switch__track .switch__icon--x     { opacity: 0; }
.switch__input:checked ~ .switch__track .switch__icon--check { opacity: 1; }

05눌림 스퀴시 효과

어떻게 움직이나

누르는 동안 노브가 scaleX로 가로로 퍼졌다가 손을 떼면 원래 원으로 돌아옵니다. 돌아올 때 목표 크기를 한 번 넘겼다가 settling하는 스프링 튐이 붙어 있고, 눌린 만큼 깊어진 트랙 그림자가 손을 떼는 순간 함께 풀려나갑니다.

어디에 쓰나

터치 중심 모바일 폼에서 눌렀다는 촉감을 화면으로 대신 전달할 때 씁니다.

눌림 스퀴시 효과
새 창에서 열기

05 · 눌림 스퀴시 효과 — 측정 누적면적 0.917% · 움직인 프레임 13/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scaleX:active0.15초
.switch__knob {
  --x: 0px; --sx: 1; --sy: 1;
  transform: translateX(var(--x)) scaleX(var(--sx)) scaleY(var(--sy));
  transition: transform $duration $easing;
}
.switch__input:checked ~ .switch__track .switch__knob { --x: 24px; }
.switch:active .switch__knob { --sx: 1.35; --sy: .8; }

06배경색 채움 전환

어떻게 움직이나

트랙 배경이 한 번에 바뀌지 않고, 노브가 있던 자리에서 clip-path 원이 점점 커지며 서서히 채웁니다. 채움이 끝나는 순간 노브가 한 번 튀며 squash되어 색이 다 찬 것을 확인시켜 주고, 트랙 그림자도 채움 전 얕은 상태에서 채움 후 깊은 상태로 넘어가 두 상태의 깊이 차이를 만듭니다.

어디에 쓰나

프리미엄 플랜 전환처럼 전환 자체를 연출로 보여주고 싶은 카드에 씁니다.

배경색 채움 전환
새 창에서 열기

06 · 배경색 채움 전환 — 측정 누적면적 1.033% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

clip-path:circle()번짐0.4초
.switch__fill {
  background: $color;
  clip-path: circle(0% at 18% 50%);
  transition: clip-path $duration $easing;
}
.switch__input:checked ~ .switch__track .switch__fill {
  clip-path: circle(75% at 82% 50%);
}

07해/달 아이콘 토글

어떻게 움직이나

노브가 움직이는 트랙 자체를 하늘로 만들어, 배경 그러데이션이 밝은 낮 하늘색에서 짙은 밤하늘색으로 넘어가고 그 위로 별 세 개가 opacity로 돋아납니다. 노브는 밤으로 넘어갈 때 스프링 오버슛으로 한 번 튕기며 달 모양으로 납작해졌다가 돌아오고, 낮 트랙의 그림자가 깊었다가 밤이 되면 엷어져 시간대의 입체감까지 바뀝니다.

어디에 쓰나

테마 전환 스위치를 아이콘 하나보다 크게 보여주고 싶을 때 씁니다.

해/달 아이콘 토글
새 창에서 열기

07 · 해/달 아이콘 토글 — 측정 누적면적 1.343% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

background-position별 opacity0.5초
.switch__track {
  background-image: linear-gradient(90deg, $stage-yellow 0%, $stage-yellow 50%, $color 50%, $color 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: background-position $duration $easing;
}
.switch__input:checked ~ .switch__track { background-position: 100% 0%; }
.switch__input:checked ~ .switch__track .switch__star { opacity: 1; }

08크기 변형 믹스인

어떻게 움직이나

SCSS 믹스인 하나가 트랙 폭·높이·노브 크기·이동 거리를 계산해 작게·보통·크게 세 스위치를 만들고, 셋 다 같은 translateX 애니메이션을 공유합니다. 크기가 달라도 스프링 오버슛·squash 비율과 트랙 그림자 깊이 변화는 같은 곡선으로 스케일돼, 08 세 개 모두에서 눌리는 손맛이 동일하게 느껴집니다.

어디에 쓰나

디자인 시스템 컴포넌트처럼 크기마다 값을 다시 재지 않아도 되는 구조가 필요할 때 씁니다.

크기 변형 믹스인
새 창에서 열기

08 · 크기 변형 믹스인 — 측정 누적면적 2.444% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

@mixinem 단위0.25초
@mixin switch-size($track-w, $track-h, $knob) {
  --travel: #{$track-w - $knob - 6px};
  .switch__track { width: $track-w; height: $track-h; }
  .switch__knob  { width: $knob; height: $knob; }
}
.switch--sm { @include switch-size(36px, 20px, 14px); }
.switch--md { @include switch-size(48px, 26px, 20px); }
.switch--lg { @include switch-size(60px, 32px, 26px); }

09비활성 상태 스타일

css 버튼 비활성화와 무엇이 같나

disabled 속성이 붙은 스위치는 filter: grayscale과 opacity 트랜지션으로 흐려지고 커서가 not-allowed로 바뀝니다. 흐려지는 전환에도 노브가 살짝 오버슛했다가 멈추는 스프링 한 겹과 트랙 그림자가 얕아지는 변화가 남아 있어, 비활성 상태로 넘어가는 순간까지는 다른 여덟 개와 같은 질감을 유지합니다.

어디에 쓰나

권한이 없는 설정 항목처럼 손댈 수 없다는 사실 자체를 알려야 하는 자리에 씁니다.

비활성 상태 스타일
새 창에서 열기

09 · 비활성 상태 스타일 — 측정 누적면적 1.517% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

filter:grayscaleopacitycursor:not-allowed
.switch__input:disabled ~ .switch__track { filter: grayscale(1); opacity: .45; }
.switch__input:disabled ~ .switch__label { opacity: .55; }

@keyframes fade-loop {
  0%, 20%  { filter: grayscale(0); opacity: 1; }
  50%, 70% { filter: grayscale(1); opacity: .45; }
  100%     { filter: grayscale(0); opacity: 1; }
}

어디서 깨지는가 — 함정 하나

색 대신 투명도로 바꾼다

아홉 개 중 절반 이상이 background-color를 직접 건드리지 않고 두 레이어를 겹쳐 opacity로 교차시킵니다. 색 자체를 애니메이션하면 중간값이 브라우저마다 다르게 보간돼 탁한 회색을 거쳐 가지만, 겹친 레이어를 투명도로만 바꾸면 각 레이어의 원래 색이 그대로 유지됩니다. MDN의 애니메이션 성능 문서가 transform·opacity를 우선하라고 권하는 것도 같은 이유입니다.

두 가지 예외

06의 clip-path와 07의 background-position은 이 규칙의 예외인데, 둘 다 리페인트만 요구할 뿐 레이아웃을 다시 계산하지 않아 넣었습니다 — caniuse.com에서 clip-path를 찾아보면 주요 브라우저 전부 오래전부터 지원합니다.

트랙 폭과 글자

함정은 아니지만 짚어둘 점이 하나 있습니다. 03의 ON·OFF 글자는 노브 지름보다 트랙이 넉넉히 넓어야 글자가 절반만 가려지는 어색한 순간이 안 생깁니다. 이 트랙 색과 노브 색을 설정 화면 전체와 맞추려면 다크 SaaS 랜딩의 리니어 디자인 시스템이 쓰는 토큰 표를 그대로 가져다 쓰는 편이 빠릅니다. 여기 적힌 트랙 폭과 이동 거리를 그대로 담아 압축한 파일은 a2ejkfw2을 입력해야 열리며, 버튼은 바로 아래에 있습니다.

접근성

키보드로 쓸 수 있나

아홉 개 모두 <input type="checkbox">에 role="switch"를 얹은 네이티브 컨트롤이라 Tab으로 초점이 오고 Space로 값을 바꿀 수 있습니다(09는 disabled라 애초에 초점 순서에서 빠집니다). :focus-visible에는 아래처럼 링을 그렸고, 01~08은 change 이벤트마다 aria-checked를 JS로 맞춰 오래된 스크린리더까지 상태를 놓치지 않게 했으며, 다시 켜질 일이 없는 09는 aria-checked="false"를 마크업에 고정해 뒀습니다.

<label class="switch">
  <input type="checkbox" class="switch__input" role="switch" aria-checked="false">
  <span class="switch__track"><span class="switch__knob"></span></span>
</label>

.switch__input:focus-visible ~ .switch__track {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

동작 줄이기에서

prefers-reduced-motion: reduce가 켜진 화면에서는 아홉 개 전부 전환 애니메이션만 꺼지고 켜짐·꺼짐 상태 자체는 그대로 드러납니다. 09는 원래도 손댈 수 없는 상태라 이 설정과 무관하게 항상 흐려진 모습입니다. 지원 범위는 MDN의 prefers-reduced-motion 문서에서 확인할 수 있습니다.

체크박스형 컨트롤을 더 보고 싶다면 CSS 애니메이션 모음 목록을 훑어보시고, 이 사이트가 어떤 곳인지 궁금하면 운영자 소개 페이지를 먼저 읽어 보십시오.

FAQ

css 스위치 버튼과 체크박스는 뭐가 다른가요?

마크업은 같은 <input type="checkbox">지만 role="switch"를 얹으면 스크린리더가 "체크박스" 대신 "스위치"로 읽어 줍니다. 즉시 반영되는 설정(알림 켜기 등)에는 스위치, 저장 버튼을 눌러야 반영되는 항목에는 체크박스가 더 맞는 신호입니다.

09처럼 disabled인데 왜 움직이나요?

실제 컨트롤은 항상 비활성 상태로 고정돼 있고, 화면에 반복 재생되는 흐려짐은 disabled가 켜질 때의 전환을 보여주려는 데모용 루프일 뿐입니다. 사람이 직접 클릭해 켜고 끄는 동작은 애초에 불가능합니다.

React에서는 클래스 토글 대신 뭘 쓰나요?

zip 안 react/ 폴더의 컴포넌트는 checked를 useState로 들고, 변수 세 개는 props로 받아 CSS 변수로 넘깁니다. SCSS 모듈은 var()만 읽으므로 값 몇 개만 바꿔 다른 색·속도의 스위치를 바로 만들 수 있습니다. 스위치 옆에 놓일 버튼까지 같은 손맛으로 맞추려면 수상작에서 반복되는 css 버튼 hover 기법에서 05 눌림 스퀴시와 같은 cubic-bezier 곡선을 골라 쓰십시오.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.