🌟 SwiftUI에서 나만의 토글 만들기

CustomToggleStyle 구현 (macOS 앱용)

SwiftUI를 활용하면 다양한 UI 컴포넌트를 손쉽게 커스터마이징할 수 있습니다. 오늘은 macOS 앱에서 기본 Toggle 대신 직접 스타일을 정의해 나만의 디자인을 적용해보는 방법을 소개합니다.

---

✅ 목표

macOS에서 사용할 수 있는 커스텀 토글 스타일을 만들어서, 기존의 스위치 스타일이 아닌 직사각형 안에 원이 좌우로 움직이는 토글을 구현해보겠습니다.

---

📌 전체 코드 미리보기

import SwiftUI

struct CustomToggleStyle: ToggleStyle {
   func makeBody(configuration: Configuration) -> some View {
      HStack {
         configuration.label
         Rectangle()
            .foregroundColor(configuration.isOn ? .green : Color(hex: "#468284"))
            .frame(width: 40, height: 20)
            .cornerRadius(10)
            .overlay(
               Circle()
                  .foregroundColor(.white)
                  .padding(.all, 3)
                  .offset(x: configuration.isOn ? 10 : -10)
            )
            .onTapGesture {
               configuration.isOn.toggle()
            }
      }
   }
}

---

🧩 코드 구성 상세 설명

1. ToggleStyle 프로토콜 채택

ToggleStyle을 채택하면 Toggle의 시각적 표현을 우리가 직접 제어할 수 있습니다. makeBody(configuration: ) 메서드를 구현해 커스터마이징합니다.

2. configuration.label

Toggle에 전달된 라벨을 HStack의 왼쪽에 배치합니다. 예를 들어 “알림 설정” 같은 텍스트가 여기에 들어갑니다.

3. 직사각형 배경 (Rectangle)

– 크기 : 40 x 20
– 색상 : isOn 상태에 따라 다르게 표현
켜짐 (true) : 초록색 (.green)
꺼짐 (false) : 스틸블루 계열 (#4682B4)
– 둥근 모서리 : cornerRadius(10) 으로 버튼처럼 보이도록 처리

4. 원형 슬라이더 (Circle)

– 흰색 원이 내부에 위치해 있고, .offset(x:)을 사용해 좌우 이동
isOn == true 이면 오른쪽으로 이동
isOn == false 이면 왼쪽으로 이동
– .padding(.all, 3) 으로 양 끝에 여백 확보
– overlay로 Rectangle 위에 덧씌움

5. 제스처 추가 (onTapGesture)
사용자가 Rectangle을 클릭하면 isOn 상태를 반전시키도록 설정했습니다. 즉 실제 동작은 이 제스처로 트리거 됩니다.

---

🧪 실제 사용 예시

// 3.중복체크 슬라이더
Toggle(NSLocalizedString("DUPLICATE_CHECK", comment: "중복체크"), isOn: $viewModel.isDuplicate(Enabled)
   .toggleStyle(CustomToggleStyle())

---

💡 정리

SwiftUI의 ToggleStyle을 활용하면 매우 유연하게 사용자 정의 토글 UI를 만들 수 있습니다. 이번 예제처럼 macOS 앱에서도 직관적인 인터페이스를 구현해 보세요!!