SwiftUI에서의 마이크로 인터랙션 — 앱을 프리미엄하게 만드는 섬세한 애니메이션

SwiftUI에서 마이크로 인터랙션

마이크로 인터랙션은 앱에 생동감을 부여하는 아주 작은 애니메이션입니다. 큰 전환이나 히어로 애니메이션이 아니라, 깊이감·반응성·장인 정신을 나타내는 작은 디테일이죠.

Apple은 모든 곳에서 마이크로 인터랙션을 사용합니다:

• 버튼 탭
• 아이콘 강조
• 카드 호버 시 띄우기
• 은은한 팝
• 리플 효과
• 회전 힌트
• 글로우 펄스

이 글에서는 순수 SwiftUI만을 사용해 7가지 정교한 마이크로 인터랙션을 만들어 보겠습니다. 플러그‑인 형태로 바로 사용할 수 있어 UI가 즉시 프리미엄하게 변합니다.

Tap Pop

struct TapPop: View {
    @State private var pressed = false

    var body: some View {
        Text("Tap Me")
            .font(.headline)
            .padding(.horizontal, 26)
            .padding(.vertical, 14)
            .background(.ultraThinMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 16))
            .scaleEffect(pressed ? 0.92 : 1)
            .animation(.snappy(duration: 0.18), value: pressed)
            .onTapGesture {
                pressed = true
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.12) {
                    pressed = false
                }
            }
    }
}

iOS 버튼에서 사용되는 부드러운 “탭 피드백” 느낌을 재현합니다.

Lift Card

struct LiftCard: View {
    @State private var hover = false

    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .fill(.ultraThinMaterial)
            .frame(height: 140)
            .scaleEffect(hover ? 1.03 : 1)
            .shadow(color: .black.opacity(0.25),
                    radius: hover ? 30 : 10,
                    y: hover ? 10 : 4)
            .animation(.smooth(duration: 0.22), value: hover)
            .onHover { hover = $0 }
    }
}

iPad, Mac, Vision OS에서 즉시 동작합니다.

Ripple Button

struct RippleButton: View {
    @State private var ripple = false

    var body: some View {
        ZStack {
            Circle()
                .stroke(Color.blue.opacity(0.3), lineWidth: 3)
                .scaleEffect(ripple ? 2.8 : 0.1)
                .opacity(ripple ? 0 : 1)
                .animation(.smooth(duration: 0.55), value: ripple)

            Circle()
                .fill(.blue)
                .frame(width: 70, height: 70)
        }
        .onTapGesture {
            ripple = false
            ripple = true
        }
    }
}

확인 탭이나 액션 버튼에 딱 맞는 효과입니다.

Pulsing Icon

struct PulsingIcon: View {
    @State private var pulse = false

    var body: some View {
        Image(systemName: "bolt.fill")
            .font(.system(size: 40))
            .scaleEffect(pulse ? 1.08 : 1)
            .animation(.easeInOut(duration: 1.2).repeatForever(), value: pulse)
            .onAppear { pulse = true }
    }
}

인터랙티브 요소를 힌트할 때 이상적입니다.

Rotate Hint

struct RotateHint: View {
    @State private var rotate = false

    var body: some View {
        Image(systemName: "arrow.triangle.2.circlepath")
            .rotationEffect(.degrees(rotate ? 10 : -10))
            .animation(.smooth(duration: 0.9).repeatForever(autoreverses: true),
                       value: rotate)
            .onAppear { rotate = true }
    }
}

부드럽게 사용자를 유도합니다.

Glow Pulse

struct GlowPulse: View {
    @State private var glow = false

    var body: some View {
        Circle()
            .fill(.pink)
            .frame(width: 22, height: 22)
            .shadow(color: .pink.opacity(glow ? 0.9 : 0.3),
                    radius: glow ? 20 : 6)
            .animation(.easeInOut(duration: 1.4).repeatForever(autoreverses: true),
                       value: glow)
            .onAppear { glow = true }
    }
}

유리 UI에서 특히 멋지게 보입니다.

Slide‑In Item

struct SlideInItem: View {
    @State private var show = false

    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 12)
                .fill(.ultraThinMaterial)
                .frame(height: 80)
                .offset(x: show ? 0 : -40)
                .opacity(show ? 1 : 0)
                .animation(.spring(response: 0.4, dampingFraction: 0.75),
                           value: show)
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                show = true
            }
        }
    }
}

리스트 등장이나 온보딩 화면에 아주 좋습니다.

마이크로 인터랙션이 중요한 이유

• 개성
• 완성도
• 즐거움
• 명확성
• 반응성
• “프리미엄 느낌”

이 재사용 가능한 SwiftUI 패턴들을 활용하면 복잡한 애니메이션 코드를 작성하지 않아도 어떤 UI든 손쉽게 업그레이드할 수 있습니다.