SwiftUI Toggle 사이즈 조절 방법 (iOS)

SwiftUI Toggle 사이즈 조절 방법 (iOS)

SwiftUI에서 Toggle은 스위치 형태의 UI를 구현할 때 많이 사용하는 컴포넌트다. 설정 화면이나 필터 옵션, 상태 변경 기능 등 다양한 곳에서 활용된다.

하지만 기본 Toggle의 크기는 시스템에서 자동으로 결정되기 때문에 디자인에 맞게 크기를 조절하고 싶은 경우가 있다.

이 글에서는 SwiftUI에서 Toggle의 크기를 조절하는 방법을 정리한다.

SwiftUI Toggle 기본 사용 방법

먼저 기본 Toggle 사용 방법을 살펴보자.

struct ContentView: View {

    @State private var isOn = false

    var body: some View {

        Toggle("알림 받기", isOn: $isOn)

    }
}

이 코드를 실행하면 기본 iOS 스타일의 스위치 Toggle이 표시된다.

Toggle 크기 조절 (scaleEffect)

SwiftUI에서는 Toggle의 크기를 직접 지정하는 API가 따로 제공되지 않는다. 대신 scaleEffect modifier를 사용해 크기를 조절할 수 있다.

Toggle("알림 받기", isOn: $isOn)
    .scaleEffect(0.8)

scaleEffect 값에 따라 크기가 변경된다.

• 1.0 → 기본 크기
• 0.8 → 조금 작은 크기
• 0.6 → 작은 크기
• 1.2 → 큰 크기

Toggle 크기 줄이기

설정 화면처럼 좁은 공간에서 사용할 경우 크기를 줄이는 경우가 많다.

Toggle("", isOn: $isOn)
    .labelsHidden()
    .scaleEffect(0.8)

labelsHidden을 사용하면 텍스트 없이 스위치만 표시할 수 있다.

Toggle 위치 조정

scaleEffect를 사용하면 Toggle의 레이아웃 위치가 어색해질 수 있다. 이때는 frame을 함께 사용하면 좋다.

Toggle("", isOn: $isOn)
    .labelsHidden()
    .scaleEffect(0.8)
    .frame(width: 52)

이렇게 하면 스위치 크기가 줄어들면서도 정렬이 자연스럽게 유지된다.

ToggleStyle 활용하기

SwiftUI에서는 ToggleStyle을 사용해 Toggle 스타일을 변경할 수도 있다.

Toggle("알림", isOn: $isOn)
    .toggleStyle(.switch)

기본 iOS 스타일 스위치를 사용하려면 switch 스타일을 사용한다.

설정 화면에서 사용하는 Toggle 패턴

실제 앱에서는 Toggle을 다음과 같은 방식으로 많이 사용한다.

HStack {

    Text("알림 받기")

    Spacer()

    Toggle("", isOn: $isOn)
        .labelsHidden()
        .scaleEffect(0.8)
}

이 구조는 설정 화면에서 자주 사용하는 패턴이다.

실제 프로젝트에서 사용하는 경우

Toggle은 보통 다음과 같은 상황에서 사용된다.

• 설정 화면
• 알림 활성화 여부
• 필터 옵션
• 다크모드 설정
• 기능 활성화 토글

정리

• SwiftUI Toggle은 기본 크기 변경 API가 없다
• scaleEffect modifier로 크기 조절 가능
• labelsHidden으로 텍스트 숨김 가능
• frame을 함께 사용하면 레이아웃이 안정적이다

SwiftUI 관련 글

• SwiftUI NavigationStack 사용 방법 정리 (iOS 16+)
• SwiftUI List Separator 제거 방법 (iOS)
• SwiftUI Toggle 사이즈 조절 방법 (iOS)
• SwiftUI NavigationTitle 왼쪽 정렬 구현 방법 (iOS)
• SwiftUI TabView 커스텀 탭바 만들기 (iOS)