@State와 @ObservedObject의 차이는?

@State는 뷰가 소유하는 값 타입 상태이고, @ObservedObject는 외부에서 주입·공유되는 ObservableObject 참조입니다.

MVVM에서 ViewModel은 어디에 두나요?

ObservableObject 클래스로 두고, 뷰에서는 @StateObject(생성) 또는 @ObservedObject(주입)로 연결합니다.

NavigationView와 NavigationStack은?

iOS 16+에서는 NavigationStack이 권장되며, 이전 API는 NavigationView로도 동작합니다.

SwiftUI 입문 | 선언적 UI, 상태, MVVM

2026년 3월 29일 · 28분 읽기 · 수정 2026년 3월 30일 중급 튜토리얼

이 글의 핵심

SwiftUI 입문: 선언적 UI, 상태, MVVM. SwiftUI 기본·State, Binding, ObservableObject 차이.

시리즈 안내

#09 | 📋 전체 목차 | 이전: #08 비동기 · 다음: #10 Combine

들어가며

SwiftUI는 뷰를 상태의 함수처럼 기술합니다. `@State`·`@Binding` 등 상태 바인딩으로 바뀐 값에 맞춰 다시 그릴 범위를 좁힐 수 있습니다.

실전 경험에서 배운 교훈

이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수 없었던 많은 함정들이 있었습니다. 특히 프로덕션 환경에서 발생하는 엣지 케이스들은 로컬 개발 환경에서는 재현조차 되지 않았죠.

가장 어려웠던 점은 성능 최적화였습니다. 처음엔 “동작만 하면 되겠지”라고 생각했지만, 실제 사용자 트래픽이 몰리면서 병목 지점들이 하나씩 드러났습니다. 특히 데이터베이스 쿼리 최적화, 캐싱 전략, 에러 핸들링 구조 등은 여러 번의 장애를 겪으면서 개선해 나갔습니다.

이 글에서는 그런 시행착오를 통해 얻은 실전 노하우와, “이렇게 하면 안 된다”는 교훈들을 함께 정리했습니다. 특히 트러블슈팅 섹션은 실제 장애 대응 경험을 바탕으로 작성했으니, 비슷한 문제를 마주했을 때 참고하시면 도움이 될 것입니다.

1. SwiftUI 기본

import SwiftUI
struct HelloView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.title)
    }
}

`View` 프로토콜의 `body`는 한 화면의 설명이며, `@ViewBuilder`로 자식 뷰를 조합합니다.

2. State, Binding, ObservableObject 차이

래퍼	용도	소유
`@State`	뷰 내부의 값 타입 상태 (Int, String, struct 등)	SwiftUI가 저장소 소유
`@Binding`	부모의 `@State` 등을 읽고 쓰기로 넘길 때	원본은 부모가 소유
`@StateObject`	뷰가 처음 생성하는 `ObservableObject` 수명 관리	뷰가 소유(생성 시 한 번)
`@ObservedObject`	주입된 `ObservableObject` (부모·환경에서 전달)	외부에서 수명 결정
`@EnvironmentObject`	상위에서 `.environmentObject`로 내려준 공유 객체	앱/모듈 전역에 가깝게 공유
`@State` 예시: 카운터는 뷰만의 로컬 상태입니다.

struct CounterView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("\(count)")
            Button("증가") { count += 1 }
        }
    }
}

Binding 예시: 자식이 부모 상태를 직접 수정해야 할 때 Binding으로 넘깁니다.

struct EditorView: View {
    @Binding var text: String
    var body: some View {
        TextField("입력", text: $text)
    }
}
struct ParentView: View {
    @State private var name = ""
    var body: some View {
        EditorView(text: $name)
    }
}

ObservableObject 예시: 화면 밖에서도 유지되는 비즈니스 상태·비동기 로딩에 적합합니다.

final class UserSettings: ObservableObject {
    @Published var username: String = ""
}
struct SettingsView: View {
    @StateObject private var settings = UserSettings()
    var body: some View {
        TextField("이름", text: $settings.username)
    }
}

`@Published`가 바뀌면 `objectWillChange`가 알리고, 해당 객체를 구독하는 뷰가 갱신됩니다.

3. 실전 앱 구조 (MVVM)

Model: 순수 데이터·도메인 규칙 (보통 struct 또는 서비스)
View: SwiftUI View, 표현만 담당
ViewModel: ObservableObject, UI에 필요한 상태·액션·비동기 호출

// 타입 정의
struct Item: Identifiable {
    let id: UUID
    var title: String
}
final class ItemListViewModel: ObservableObject {
    @Published private(set) var items: [Item] = []
    func add(_ title: String) {
        items.append(Item(id: UUID(), title: title))
    }
}
struct ItemListView: View {
    @StateObject private var viewModel = ItemListViewModel()
    var body: some View {
        List(viewModel.items) { item in
            Text(item.title)
        }
        .toolbar {
            Button("추가") { viewModel.add("새 항목") }
        }
    }
}

미리 만든 ViewModel을 뷰에 주입할 때는 `@ObservedObject var viewModel: ItemListViewModel`을 쓰고, 상위에서 `ItemListView(viewModel: vm)`처럼 넘깁니다. 뷰 안에서 매번 `StateObject`로 새로 만들면 탭 전환 시 상태가 초기화될 수 있어 주의합니다.

4. List와 NavigationView / NavigationStack

List: Identifiable 모델 배열 또는 ForEach와 조합해 행을 그립니다.

// 타입 정의
struct City: Identifiable {
    let id = UUID()
    let name: String
}
struct CityListView: View {
    let cities = [City(name: "서울"), City(name: "부산")]
    var body: some View {
        NavigationStack {
            List(cities) { city in
                NavigationLink(value: city) {
                    Text(city.name)
                }
            }
            .navigationTitle("도시")
            .navigationDestination(for: City.self) { city in
                Text("\(city.name) 상세")
            }
        }
    }
}

iOS 16 미만이나 간단한 스택만 필요하면 NavigationView와 NavigationLink(destination:) 조합을 쓸 수 있습니다.

NavigationView {
    List(0..<10, id: \.self) { i in
        NavigationLink("항목 \(i)", destination: Text("상세 \(i)"))
    }
    .navigationTitle("목록")
}

5. 네트워크 통신 (URLSession + Combine)

URLSession의 data task를 Combine의 Future 또는 dataTaskPublisher로 감싸 ViewModel에서 구독합니다.

// 필요한 모듈 import
import Combine
import Foundation
final class PostViewModel: ObservableObject {
    @Published var titles: [String] = []
    @Published var errorMessage: String?
    private var cancellables = Set<AnyCancellable>()
    func loadPosts() {
        guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else { return }
        URLSession.shared.dataTaskPublisher(for: url)
            .map(\.data)
            .decode(type: [PostDTO].self, decoder: JSONDecoder())
            .receive(on: DispatchQueue.main)
            .sink(
                receiveCompletion: { [weak self] completion in
                    if case .failure(let err) = completion {
                        self?.errorMessage = err.localizedDescription
                    }
                },
                receiveValue: { [weak self] posts in
                    self?.titles = posts.map(\.title)
                }
            )
            .store(in: &cancellables)
    }
}
struct PostDTO: Decodable {
    let title: String
}

`[weak self]`로 ViewModel ↔ 클로저 순환 참조를 끊는 것이 안전합니다. async/await를 쓰면 `swift-series-08-async`의 패턴과 조합할 수 있습니다.

6. 프리뷰 활용법

#Preview(Xcode 15+): 여러 기기·다크 모드를 한 파일에서 확인합니다.

#Preview("기본") {
    ItemListView()
}
#Preview("다크") {
    ItemListView()
        .preferredColorScheme(.dark)
}

PreviewProvider: 구버전 호환 시 static var previews: some View에 동일하게 구성합니다.
프리뷰 전용 데이터: UserSettings에 mock을 넣거나, #if DEBUG에서만 쓰는 샘플 ViewModel을 두어 실제 API 없이 UI를 검증합니다.
라이브 프리뷰가 느리면 해당 뷰만 분리해 의존성을 줄이면 빨라집니다.

7. 실전 예제: 목록 + 상세 + 로딩

ViewModel 하나에 목록 로딩과 선택 상태를 묶는 패턴입니다.

final class CityExplorerViewModel: ObservableObject {
    @Published var cities: [City] = []
    @Published var isLoading = false
    func refresh() {
        isLoading = true
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { [weak self] in
            self?.cities = [City(name: "서울"), City(name: "부산")]
            self?.isLoading = false
        }
    }
}
struct CityExplorerView: View {
    @StateObject private var vm = CityExplorerViewModel()
    var body: some View {
        NavigationStack {
            Group {
                if vm.isLoading {
                    ProgressView()
                } else {
                    List(vm.cities) { city in
                        NavigationLink(value: city) { Text(city.name) }
                    }
                }
            }
            .navigationTitle("도시")
            .navigationDestination(for: City.self) { city in
                Text(city.name)
            }
            .onAppear { vm.refresh() }
        }
    }
}

정리

핵심 요약

@State: 뷰 로컬 값 타입 상태
Binding: 부모 상태를 자식이 수정할 때
ObservableObject + @Published: 공유·지속 상태, MVVM의 ViewModel에 적합
MVVM: View는 얇게, 상태와 비동기는 ViewModel
List + NavigationStack: 목록과 스택 내비게이션
URLSession + Combine: 비동기 스트림으로 API 연동
프리뷰: 시나리오별로 쪼개서 UI 반복 검증

다음 단계

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「SwiftUI 입문 | 선언적 UI, 상태, MVVM」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「SwiftUI 입문 | 선언적 UI, 상태, MVVM」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. SwiftUI 입문: 선언적 UI, 상태, MVVM. SwiftUI 기본·State, Binding, ObservableObject 차이로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. Start now. 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

이 글에서 다루는 키워드 (관련 검색어)

Swift, SwiftUI, iOS, MVVM, Combine 등으로 검색하시면 이 글이 도움이 됩니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.