SwiftUI에서 기본적인 제스처 처리하기

SwiftUI는 앱을 빠르고 직관적으로 개발할 수 있는 강력한 프레임워크입니다. SwiftUI에서 제스처는 터치, 스와이프, 드래그 등의 입력을 인식하고 반응하는 도구로 사용됩니다. 이 글에서는 기본적인 제스처를 SwiftUI에서 처리하는 방법을 살펴보겠습니다.

탭 제스처

탭 제스처는 가장 기본적인 터치 이벤트 중 하나입니다. SwiftUI에서는 TapGesture를 사용하여 탭 이벤트를 처리할 수 있습니다. 예제 코드를 통해 이를 알아봅니다.

swift
struct ContentView: View {
    @State private var isTapped = false
    
    var body: some View {
        Text(isTapped ? "Tapped!" : "Tap me")
            .padding()
            .background(isTapped ? Color.green : Color.red)
            .onTapGesture {
                isTapped.toggle()
            }
    }
}

위 코드에서는 Text 뷰에 onTapGesture를 사용하여 탭 이벤트를 처리합니다. 사용자가 텍스트를 탭하면 isTapped 상태 변수가 토글되고, 그에 따라 텍스트와 배경색이 변경됩니다.

롱 프레스 제스처

롱 프레스는 사용자가 화면을 길게 누르는 동작을 인식하는 제스처입니다. 다소 복잡하게 느껴질 수 있는 제스처이지만, SwiftUI에서는 LongPressGesture 로 쉽게 구현할 수 있습니다.

swift
struct ContentView: View {
    @State private var isPressed = false
    
    var body: some View {
        Text(isPressed ? "Long Pressed!" : "Long Press me")
            .padding()
            .background(isPressed ? Color.blue : Color.gray)
            .onLongPressGesture(minimumDuration: 2) {
                isPressed.toggle()
            }
    }
}

위 코드에서는 Text 뷰에 onLongPressGesture를 적용하여 롱 프레스 이벤트를 처리합니다. 사용자가 텍스트를 2초 이상 길게 누르면 isPressed 변수의 값이 토글됩니다.

드래그 제스처

드래그 제스처는 사용자가 화면에서 객체를 드래그하는 동작을 인식합니다. SwiftUI에서는 DragGesture를 사용하여 드래그 이벤트를 처리할 수 있습니다.

swift
struct ContentView: View {
    @State private var offset = CGSize.zero
    
    var body: some View {
        Circle()
            .fill(Color.purple)
            .frame(width: 100, height: 100)
            .offset(offset)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        offset = value.translation
                    }
                    .onEnded { _ in
                        offset = .zero
                    }
            )
    }
}

여기서는 Circle 뷰에 DragGesture 를 적용하여 드래그 이벤트를 처리합니다. 사용자가 원을 드래그하면 onChanged 클로저가 호출되어 원의 위치가 업데이트됩니다.

스와이프 제스처

SwiftUI에서 스와이프 제스처를 처리하는 것은 DragGesture와 유사합니다. 사용자는 화면을 특정 방향으로 빠르게 스와이프하는 경우를 인식합니다.

swift
struct ContentView: View {
    @State private var isSwiped = false
    
    var body: some View {
        Text(isSwiped ? "Swiped!" : "Swipe me")
            .padding()
            .background(isSwiped ? Color.orange : Color.yellow)
            .gesture(
                DragGesture(minimumDistance: 50)
                    .onEnded { value in
                        if value.translation.width > 50 {
                            isSwiped = true
                        } else {
                            isSwiped = false
                        }
                    }
            )
    }
}

여기서는 DragGesture를 사용하여 스와이프 제스처를 감지합니다. 사용자가 특정 거리 이상으로 스와이프하면 isSwiped 변수가 설정됩니다.

제스처 조합하기

SwiftUI에서는 여러 제스처를 동시에 적용할 수도 있습니다. 예를 들어, 탭 제스처와 롱 프레스 제스처를 동시에 적용하려면 아래와 같이 작성할 수 있습니다.

swift
struct ContentView: View {
    @State private var actionMessage = ""
    
    var body: some View {
        Text(actionMessage)
            .padding()
            .background(Color.gray)
            .gesture(
                TapGesture()
                    .onEnded {
                        actionMessage = "Tapped!"
                    }
                    .simultaneously(with:
                        LongPressGesture(minimumDuration: 2)
                            .onEnded { _ in
                                actionMessage = "Long Pressed!"
                            }
                    )
            )
    }
}

여기서는 TapGesture와 LongPressGesture를 함께 적용하여 동시에 사용할 수 있는 방법을 보여줍니다. 사용자가 간단히 누르면