토글(Toggle)

토글(Toggle)은 디지털 세상의 '전등 스위치'와 같습니다. 켜짐(On)과 꺼짐(Off) 두 가지 상태를 즉각적으로 전환할 수 있는 인터페이스입니다.

토글 이미지 예시

토글의 핵심 개념: "즉각적인 실행"

토글은 사용자의 특정 설정을 '즉시' 변경할 때 사용합니다. 체크박스와 비슷해 보이지만, 목적과 사용성이 완전히 다릅니다.

• 즉시성 (Instant Result): 토글을 누르면 별도의 '저장' 버튼을 누르지 않아도 시스템이 바로 반응해야 합니다. (예: 다크 모드 전환, 알림 설정 켜기/끄기)
• 상태 명확성: 사용자가 지금 무엇을 선택했는지(On인지 Off인지) 시각적으로 한눈에 알아야 합니다.

토글 vs 체크박스 vs 라디오 버튼

많은 주니어 개발자가 이 셋을 혼용하곤 합니다. UX적으로 구분하는 법을 기억하세요.

UX를 높이는 토글 디자인 원칙

• 시각적 변화: 단순히 색상만 바꾸지 마세요. 스위치가 이동하는 애니메이션(Slide)을 추가하여 물리적인 움직임을 표현하는 것이 사용성을 높입니다.
• 명확한 레이블: 토글 옆에 '알림 설정'과 같이 설명 텍스트를 배치하고, 토글이 켜졌을 때와 꺼졌을 때 색상을 브랜드 컬러를 활용해 확실히 구분하세요.
• 접근성: 토글의 기반은 input type="checkbox"여야 합니다. 그래야 스크린 리더 사용자가 상태를 올바르게 인식할 수 있습니다.

실전 코드 예시

HTML

<label class="toggle-switch">
  <input type="checkbox" id="toggleInput">
  <span class="slider"></span>
</label>

CSS (핵심 스타일)

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px; height: 34px;
}

.toggle-switch input { display: none; } /* 실제 체크박스는 숨김 */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

/* 원형 스위치 부분 */
.slider:before {
  position: absolute;
  content: "";
  height: 26px; width: 26px;
  left: 4px; bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* 켜졌을 때 배경색과 이동 */
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider:before { transform: translateX(26px); }

jQuery (상태 확인)

$(document).ready(function() {
  $('#toggleInput').on('change', function() {
    if ($(this).is(':checked')) {
      console.log("기능이 활성화되었습니다.");
      // 여기에 API 호출 등의 로직을 넣습니다.
    } else {
      console.log("기능이 비활성화되었습니다.");
    }
  });
});

실제 데모

교수님의 실전 팁

"토글은 '기능'을 켜고 끄는 것이지, '데이터'를 선택하는 것이 아닙니다. 예를 들어, '개인정보 동의'는 데이터 선택이므로 체크박스가 맞고, '다크 모드'는 설정 기능이므로 토글이 맞습니다. 사용자에게 혼란을 주지 않으려면 이 원칙을 꼭 지키세요."