[SwiftUI] 알아두면 유용한 사소한 SwiftUI 꿀팁

SwiftUI 개발 속도를 확 끌어올리는 10가지 단축 트릭

 

SwiftUI는 아름다운 UI를 빠르게 만들 수 있는 프레임워크지만,

숨겨진 단축 기능들을 잘 활용하면 몇 시간씩 절약할 수 있다.

 

보일러플레이트 코드와 씨름하지 말고,

이런 작은 트릭들을 사용하면 더 빠르게, 더 깔끔하게, 더 완성도 높은 앱을 만들 수 있다.

 

아래는 SwiftUI 단축 트릭 10가지이다. 👇

 

---

 

1️⃣ @ViewBuilder로 더 깔끔한 조건 분기

 

여기저기 if문으로 뷰를 감싸기보다,

커스텀 함수에 @ViewBuilder를 붙이면 더 간결해진다.

@ViewBuilder
func profileImage(isLoggedIn: Bool) -> some View {
    if isLoggedIn {
        Image(systemName: "person.crop.circle.fill")
            .foregroundColor(.green)
    } else {
        Image(systemName: "person.crop.circle.badge.xmark")
            .foregroundColor(.red)
    }
}

👉 UI 로직이 더 깔끔하고 조합하기 쉬워진다.

 

 

2️⃣ 여러 기기 프리뷰를 한 번에 보기

 

매번 기기를 바꾸지 말고, 여러 기기 프리뷰를 동시에 추가하자.

#Preview {
    ContentView()
        .previewDevice("iPhone 15")
    ContentView()
        .previewDevice("iPad Air (5th generation)")
}

👉 다양한 레이아웃 문제를 초기에 잡을 수 있다.

 

 

3️⃣ 스택(HStack/VStack) 대신 Label로 단축

 

이미지 + 텍스트를 위해 HStack을 매번 쓰지 말자.

Label("Settings", systemImage: "gear")

👉 HStack 한 줄을 Label로 대체할 수 있다.

 

 

4️⃣ if로 빠른 조건부 Modifier 적용

 

뷰를 중복하지 않고 조건부로 modifier를 적용할 수 있다.

Text("Hello SwiftUI")
    .font(.title)
    .if(isHighlighted) { view in
        view.foregroundColor(.red)
    }

이 확장 한 번만 추가해두면 된다.

extension View {
    @ViewBuilder
    func `if`<Content: View>(
        _ condition: Bool,
        transform: (Self) -> Content
    ) -> some View {
        if condition { transform(self) } else { self }
    }
}

 

5️⃣ Group으로 Modifier를 깔끔하게 정리

 

여러 뷰에 같은 modifier를 적용하고 싶을 때 Group을 사용하자.

Group {
    Text("Welcome")
    Text("to SwiftUI")
}
.font(.headline)
.foregroundColor(.blue)

👉 두 텍스트 모두 같은 스타일을 공유한다.

 

 

6️⃣ Safe Area 무시를 더 간단하게

 

ZStack으로 감싸지 말고, 이렇게 바로 쓰자.

Color.blue
    .ignoresSafeArea()

👉 스플래시 스크린이나 전체 배경 처리에 유용하다.

 

 

7️⃣ GeometryReader 없이도 커스텀 정렬하기

 

항상 GeometryReader를 쓸 필요는 없다.

HStack(alignment: .firstTextBaseline) {
    Text("SwiftUI")
        .font(.largeTitle)
    Text("Shortcuts")
}

👉 코드가 더 간단하고 레이아웃 버그도 줄어든다.

 

 

8️⃣ @StateObject로 ViewModel을 안정적으로 관리

 

SwiftUI가 뷰를 리렌더링할 때 데이터를 잃지 않으려면 @StateObject를 사용하자.

struct ContentView: View {
    @StateObject private var viewModel = UserViewModel()
    var body: some View {
        Text(viewModel.name)
    }
}

👉 ViewModel이 한 번만 초기화되어, 상태가 안전하게 유지된다.

 

 

9️⃣ 올바른 방식의 애니메이션 적용

선언적(Declarative)

Text(isOn ? "ON" : "OFF")
    .padding()
    .background(isOn ? .green : .red)
    .animation(.easeInOut, value: isOn)

명시적(Explicit)

withAnimation(.spring()) {
    isOn.toggle()
}

👉 간단한 UI 변경에는 선언적 방식을, 복잡한 플로우에는 명시적 방식을 쓰는 게 좋다.

 

 

🔟 Previews에서 print()로 디버깅하기

 

미리보기에서 상태를 확인하고 싶다면 로그를 추가하자.

#Preview {
    ContentView()
        .onAppear { print("Preview loaded ✅") }
}

👉 시뮬레이터를 실행하지 않아도 미리보기에서 문제를 잡을 수 있다.

 

마무리

SwiftUI의 핵심은 적은 코드로 더 많은 것을 하는 것이다.

이 10가지 트릭은 작아 보이지만, 모두 합치면 개발 속도를 몇 배로 높이고, 코드를 훨씬 더 깔끔하게 유지할 수 있다.

 

이 중 한 가지라도 다음 프로젝트에 적용해보자.

바로 차이를 느낄 수 있을 것이다!