Flutter 튜토리얼 58편: iOS App Clip과 확장

Why#

NOTE

매년 Apple은 새로운 iOS 버전을 출시하며 새로운 API와 기능을 추가합니다. Flutter 앱도 이러한 최신 기능을 활용하려면 호환성을 확인하고 적절히 대응해야 합니다.

1
iOS 새 버전 출시 → Flutter 호환성 확인 → 필요시 업데이트 → 새 기능 활용

What#

NOTE

Flutter의 iOS 지원 정책입니다.

항목	내용
최소 지원 버전	iOS 12.0 (Flutter 3.x 기준)
권장 버전	최신 iOS 버전
베타 지원	iOS 베타 출시 시 Flutter 베타에서 테스트
업데이트 주기	iOS 정식 출시 전후로 Flutter 업데이트

How#

TIP

1. 최소 iOS 버전 설정

ios/Podfile:

1
# 최소 iOS 버전 지정
2
platform :ios, '12.0'

ios/Runner.xcodeproj/project.pbxproj에서도 확인:

• IPHONEOS_DEPLOYMENT_TARGET 설정

2. iOS 버전별 조건부 코드

Dart에서:

1
import 'dart:io';
2

3
void checkiOSVersion() {
4
  if (Platform.isIOS) {
5
    // iOS 버전 확인은 device_info_plus 패키지 사용
6
  }
7
}

device_info_plus 사용:

1
import 'package:device_info_plus/device_info_plus.dart';
2

3
Future<void> checkVersion() async {
4
  final deviceInfo = DeviceInfoPlugin();
5
  final iosInfo = await deviceInfo.iosInfo;
6

7
  final version = iosInfo.systemVersion; // "17.0"
8
  final majorVersion = int.parse(version.split('.').first);
9

10
  if (majorVersion >= 17) {
11
    // iOS 17 이상 기능 사용
12
  } else {
13
    // 대체 기능 사용
14
  }
15
}

3. Swift에서 버전 체크

1
import UIKit
2

3
func checkVersion() {
4
    if #available(iOS 17.0, *) {
5
        // iOS 17 이상 코드
6
        print("iOS 17 이상")
7
    } else {
8
        // 이전 버전 대체 코드
9
        print("iOS 17 미만")
10
    }
11
}

4. 새 iOS 버전 대응 체크리스트

1
1. Flutter 최신 stable 버전으로 업데이트
2
2. 모든 플러그인 업데이트
3
3. Xcode 최신 버전으로 업데이트
4
4. iOS 시뮬레이터에서 테스트
5
5. 실제 기기에서 테스트
6
6. 디자인 가이드라인 변경 확인

5. Info.plist 새 키 추가

iOS 버전이 올라가면 새로운 권한 키가 필요할 수 있습니다:

1
<!-- iOS 14+: 추적 투명성 -->
2
<key>NSUserTrackingUsageDescription</key>
3
<string>맞춤 광고를 위해 추적 권한이 필요합니다.</string>
4

5
<!-- iOS 14+: 로컬 네트워크 -->
6
<key>NSLocalNetworkUsageDescription</key>
7
<string>로컬 기기 검색을 위해 필요합니다.</string>

Watch out#

WARNING

베타 iOS에서 앱을 테스트할 때는 Flutter 베타 채널을 사용하세요. Stable 채널은 정식 iOS 버전만 지원합니다.

1
# 베타 채널로 전환
2
flutter channel beta
3
flutter upgrade
4

5
# 테스트 후 stable로 복귀
6
flutter channel stable
7
flutter upgrade

프로덕션 앱은 항상 stable 채널을 사용하세요.

결론: 최소 iOS 버전을 설정하고 버전별 조건부 코드를 사용하면 다양한 iOS 버전을 지원할 수 있습니다.

Why#

NOTE

Apple은 HealthKit, MapKit, StoreKit 등 강력한 프레임워크를 제공합니다. Flutter 플러그인을 통해 이러한 프레임워크에 접근하면 네이티브 수준의 기능을 구현할 수 있습니다.

1
Flutter 앱 → 플러그인 → Apple 프레임워크 → 시스템 기능

What#

NOTE

주요 Apple 프레임워크와 대응 Flutter 플러그인입니다.

Apple 프레임워크	Flutter 플러그인	용도
MapKit	apple_maps_flutter	Apple 지도
StoreKit	in_app_purchase	인앱 결제
HealthKit	health	건강 데이터
EventKit	device_calendar	캘린더 접근
LocalAuthentication	local_auth	Face ID/Touch ID
CoreLocation	geolocator	위치 서비스
AVFoundation	camera	카메라
Photos	photo_manager	사진 라이브러리

How#

TIP

1. Apple 지도 사용

1
dependencies:
2
  apple_maps_flutter: ^1.2.0

1
import 'package:apple_maps_flutter/apple_maps_flutter.dart';
2

3
class MapScreen extends StatelessWidget {
4
  const MapScreen({super.key});
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return AppleMap(
9
      initialCameraPosition: CameraPosition(
10
        target: LatLng(37.5665, 126.9780), // 서울
11
        zoom: 14,
12
      ),
13
      onMapCreated: (controller) {
14
        print('지도 생성됨');
15
      },
16
    );
17
  }
18
}

2. Face ID/Touch ID 인증

1
dependencies:
2
  local_auth: ^2.0.0

ios/Runner/Info.plist:

1
<key>NSFaceIDUsageDescription</key>
2
<string>로그인을 위해 Face ID를 사용합니다.</string>

1
import 'package:local_auth/local_auth.dart';
2

3
class AuthService {
4
  final LocalAuthentication _auth = LocalAuthentication();
5

6
  Future<bool> authenticate() async {
7
    // 생체 인증 가능 여부 확인
8
    final canAuthenticate = await _auth.canCheckBiometrics;
9
    if (!canAuthenticate) return false;
10

11
    // 사용 가능한 생체 인증 타입 확인
12
    final availableBiometrics = await _auth.getAvailableBiometrics();
13
    print('사용 가능: $availableBiometrics');
14

15
    // 인증 시도
16
    try {
17
      return await _auth.authenticate(
18
        localizedReason: '앱에 로그인하려면 인증하세요',
19
        options: const AuthenticationOptions(
20
          stickyAuth: true,
21
          biometricOnly: true,
22
        ),
23
      );
24
    } catch (e) {
25
      print('인증 에러: $e');
26
      return false;
27
    }
28
  }
29
}

3. 인앱 결제

1
dependencies:
2
  in_app_purchase: ^3.0.0

1
import 'package:in_app_purchase/in_app_purchase.dart';
2

3
class PurchaseService {
4
  final InAppPurchase _inAppPurchase = InAppPurchase.instance;
5

6
  Future<void> initialize() async {
7
    // 스토어 사용 가능 여부 확인
8
    final available = await _inAppPurchase.isAvailable();
9
    if (!available) {
10
      print('스토어를 사용할 수 없습니다');
11
      return;
12
    }
13

14
    // 구매 스트림 구독
15
    _inAppPurchase.purchaseStream.listen((purchases) {
16
      for (final purchase in purchases) {
17
        _handlePurchase(purchase);
18
      }
19
    });
20
  }
21

22
  Future<void> loadProducts() async {
23
    const productIds = {'premium_monthly', 'premium_yearly'};
24
    final response = await _inAppPurchase.queryProductDetails(productIds);
25

26
    if (response.notFoundIDs.isNotEmpty) {
27
      print('찾을 수 없는 상품: ${response.notFoundIDs}');
28
    }
29

30
    for (final product in response.productDetails) {
31
      print('${product.title}: ${product.price}');
32
    }
33
  }
34

35
  void _handlePurchase(PurchaseDetails purchase) {
36
    if (purchase.status == PurchaseStatus.purchased) {
37
      // 구매 완료 처리
38
      _inAppPurchase.completePurchase(purchase);
39
    }
40
  }
41
}

4. 건강 데이터 접근

1
dependencies:
2
  health: ^4.0.0

ios/Runner/Info.plist:

1
<key>NSHealthShareUsageDescription</key>
2
<string>건강 데이터를 읽기 위해 필요합니다.</string>
3
<key>NSHealthUpdateUsageDescription</key>
4
<string>건강 데이터를 기록하기 위해 필요합니다.</string>

1
import 'package:health/health.dart';
2

3
class HealthService {
4
  final HealthFactory _health = HealthFactory();
5

6
  Future<void> fetchSteps() async {
7
    final types = [HealthDataType.STEPS];
8

9
    // 권한 요청
10
    final hasPermission = await _health.requestAuthorization(types);
11
    if (!hasPermission) return;
12

13
    // 오늘의 걸음 수 가져오기
14
    final now = DateTime.now();
15
    final midnight = DateTime(now.year, now.month, now.day);
16

17
    final healthData = await _health.getHealthDataFromTypes(
18
      midnight,
19
      now,
20
      types,
21
    );
22

23
    int totalSteps = 0;
24
    for (final data in healthData) {
25
      if (data.type == HealthDataType.STEPS) {
26
        totalSteps += (data.value as NumericHealthValue).numericValue.toInt();
27
      }
28
    }
29

30
    print('오늘 걸음 수: $totalSteps');
31
  }
32
}

Watch out#

WARNING

Apple 프레임워크를 사용할 때는 반드시 Info.plist에 사용 목적을 명시해야 합니다. 그렇지 않으면 앱 심사에서 거절됩니다.

1
<!-- ❌ 누락하면 크래시 또는 심사 거절 -->
2

3
<!-- ✅ 모든 권한에 사용 목적 명시 -->
4
<key>NSCameraUsageDescription</key>
5
<string>사진 촬영을 위해 카메라가 필요합니다.</string>
6

7
<key>NSPhotoLibraryUsageDescription</key>
8
<string>사진 선택을 위해 라이브러리 접근이 필요합니다.</string>

사용자에게 명확하게 왜 이 권한이 필요한지 설명하세요.

결론: Flutter 플러그인을 통해 Apple 프레임워크에 접근하면 네이티브 수준의 iOS 기능을 구현할 수 있습니다.

Why#

NOTE

App Clip은 앱 설치 없이 앱의 일부 기능을 빠르게 체험할 수 있게 합니다. NFC 태그, QR 코드, Safari에서 App Clip을 실행하면 10MB 미만의 경량 앱이 즉시 시작됩니다.

1
NFC/QR/링크 → App Clip 다운로드 (10MB 미만) → 즉시 실행 → 전체 앱 설치 유도

What#

NOTE

App Clip의 특징입니다.

항목	내용
크기 제한	10MB 미만 (압축 후)
실행 방식	NFC, QR, App Clip 코드, Safari, 지도
기능 제한	백그라운드 실행, 푸시 알림 등 제한
데이터 공유	메인 앱과 App Group으로 데이터 공유 가능

How#

TIP

1. Xcode에서 App Clip 타겟 추가

1. Xcode에서 프로젝트 열기
2. File > New > Target 선택
3. App Clip 템플릿 선택
4. 이름 입력 (예: RunnerClip)

2. App Clip 타겟 설정

ios/RunnerClip/Info.plist:

1
<key>NSAppClip</key>
2
<dict>
3
    <key>NSAppClipRequestLocationConfirmation</key>
4
    <false/>
5
    <key>NSAppClipRequestEphemeralUserNotification</key>
6
    <false/>
7
</dict>

3. App Clip에서 Flutter 사용 (제한적)

App Clip의 크기 제한(10MB) 때문에 전체 Flutter 엔진을 포함하기 어렵습니다. 일반적으로 네이티브 SwiftUI로 App Clip UI를 구현합니다.

ios/RunnerClip/ContentView.swift:

1
import SwiftUI
2

3
struct ContentView: View {
4
    var body: some View {
5
        VStack {
6
            Image(systemName: "app.gift")
7
                .font(.system(size: 80))
8
                .foregroundColor(.blue)
9

10
            Text("App Clip 체험")
11
                .font(.largeTitle)
12
                .padding()
13

14
            Text("전체 기능을 사용하려면 앱을 설치하세요")
15
                .font(.body)
16
                .foregroundColor(.gray)
17

18
            Button("앱 설치하기") {
19
                // App Store로 이동
20
                if let url = URL(string: "https://apps.apple.com/app/id123456") {
21
                    UIApplication.shared.open(url)
22
                }
23
            }
24
            .padding()
25
            .background(Color.blue)
26
            .foregroundColor(.white)
27
            .cornerRadius(10)
28
        }
29
    }
30
}

4. App Group으로 데이터 공유

메인 앱과 App Clip 간 데이터 공유:

1. Xcode에서 두 타겟 모두에 App Group capability 추가
2. 동일한 App Group ID 사용 (예: group.com.example.myapp)

1
// 데이터 저장 (App Clip)
2
let userDefaults = UserDefaults(suiteName: "group.com.example.myapp")
3
userDefaults?.set("user123", forKey: "userId")
4

5
// 데이터 읽기 (메인 앱)
6
let userDefaults = UserDefaults(suiteName: "group.com.example.myapp")
7
let userId = userDefaults?.string(forKey: "userId")

5. App Clip URL 처리

App Clip은 URL을 통해 실행됩니다:

1
import SwiftUI
2

3
@main
4
struct RunnerClipApp: App {
5
    var body: some Scene {
6
        WindowGroup {
7
            ContentView()
8
                .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { activity in
9
                    if let url = activity.webpageURL {
10
                        handleAppClipURL(url)
11
                    }
12
                }
13
        }
14
    }
15

16
    func handleAppClipURL(_ url: URL) {
17
        // URL에서 파라미터 추출
18
        // 예: https://example.com/clip?product=123
19
        let components = URLComponents(url: url, resolvingAgainstBaseURL: false)
20
        let productId = components?.queryItems?.first(where: { $0.name == "product" })?.value
21
        print("상품 ID: \(productId ?? "없음")")
22
    }
23
}

6. App Clip 크기 최적화

1
크기 줄이기 전략:
2
1. 필요한 기능만 포함
3
2. 이미지 최적화 (WebP, HEIC 사용)
4
3. 불필요한 프레임워크 제거
5
4. bitcode 활성화
6
5. 릴리스 빌드로 테스트

Watch out#

WARNING

App Clip은 제한된 API만 사용할 수 있습니다. CallKit, 백그라운드 작업, 일부 HealthKit 기능은 사용할 수 없습니다.

1
// ❌ App Clip에서 사용 불가
2
- 백그라운드 앱 새로고침
3
- CallKit
4
- CareKit
5
- HealthKit (일부)
6
- HomeKit
7
- 모든 종류의 Extension
8

9
// ✅ App Clip에서 사용 가능
10
- Apple Pay
11
- App Attest
12
- Sign in with Apple
13
- 위치 확인 (1회성)
14
- 알림 (8시간 제한)

전체 기능이 필요하면 메인 앱 설치를 유도하세요.

결론: App Clip은 네이티브 SwiftUI로 구현하고, App Group으로 메인 Flutter 앱과 데이터를 공유합니다.

Why#

NOTE

앱 확장(App Extensions)은 메인 앱 외부에서 앱의 기능을 제공합니다. 위젯, Share Extension, Today Extension 등으로 iOS 시스템 전반에 앱을 통합할 수 있습니다.

1
메인 앱 + 위젯 Extension + Share Extension + ...

What#

NOTE

주요 앱 확장 유형입니다.

확장 유형	용도
Widget Extension	홈 화면/잠금 화면 위젯
Share Extension	공유 시트에서 앱으로 데이터 공유
Today Extension	알림 센터 위젯 (레거시)
Intents Extension	Siri 연동
Notification Content	풍부한 알림 UI
Action Extension	다른 앱에서 작업 수행

How#

TIP

1. Widget Extension 추가

1. Xcode에서 File > New > Target
2. Widget Extension 선택
3. 이름 입력 (예: MyWidget)

2. 위젯 구현

ios/MyWidget/MyWidget.swift:

1
import WidgetKit
2
import SwiftUI
3

4
// 위젯 데이터 모델
5
struct WidgetData: TimelineEntry {
6
    let date: Date
7
    let message: String
8
    let count: Int
9
}
10

11
// 데이터 제공자
12
struct Provider: TimelineProvider {
13
    func placeholder(in context: Context) -> WidgetData {
14
        WidgetData(date: Date(), message: "로딩 중...", count: 0)
15
    }
16

17
    func getSnapshot(in context: Context, completion: @escaping (WidgetData) -> Void) {
18
        let data = loadDataFromAppGroup()
19
        completion(data)
20
    }
21

22
    func getTimeline(in context: Context, completion: @escaping (Timeline<WidgetData>) -> Void) {
23
        let data = loadDataFromAppGroup()
24
        let nextUpdate = Calendar.current.date(byAdding: .hour, value: 1, to: Date())!
25
        let timeline = Timeline(entries: [data], policy: .after(nextUpdate))
26
        completion(timeline)
27
    }
28

29
    func loadDataFromAppGroup() -> WidgetData {
30
        let userDefaults = UserDefaults(suiteName: "group.com.example.myapp")
31
        let message = userDefaults?.string(forKey: "widget_message") ?? "데이터 없음"
32
        let count = userDefaults?.integer(forKey: "widget_count") ?? 0
33
        return WidgetData(date: Date(), message: message, count: count)
34
    }
35
}
36

37
// 위젯 뷰
38
struct MyWidgetEntryView: View {
39
    var entry: WidgetData
40

41
    var body: some View {
42
        VStack {
43
            Text(entry.message)
44
                .font(.headline)
45
            Text("\(entry.count)")
46
                .font(.largeTitle)
47
                .bold()
48
            Text(entry.date, style: .time)
49
                .font(.caption)
50
        }
51
        .padding()
52
    }
53
}
54

55
// 위젯 설정
56
@main
57
struct MyWidget: Widget {
58
    let kind: String = "MyWidget"
59

60
    var body: some WidgetConfiguration {
61
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
62
            MyWidgetEntryView(entry: entry)
63
        }
64
        .configurationDisplayName("내 위젯")
65
        .description("Flutter 앱 데이터를 표시합니다")
66
        .supportedFamilies([.systemSmall, .systemMedium])
67
    }
68
}

3. Flutter에서 위젯 데이터 업데이트

1
dependencies:
2
  home_widget: ^0.4.0

1
import 'package:home_widget/home_widget.dart';
2

3
class WidgetService {
4
  static const appGroupId = 'group.com.example.myapp';
5
  static const iOSWidgetName = 'MyWidget';
6

7
  Future<void> updateWidget({
8
    required String message,
9
    required int count,
10
  }) async {
11
    // App Group에 데이터 저장
12
    await HomeWidget.saveWidgetData<String>('widget_message', message);
13
    await HomeWidget.saveWidgetData<int>('widget_count', count);
14

15
    // 위젯 업데이트 요청
16
    await HomeWidget.updateWidget(
17
      iOSName: iOSWidgetName,
18
    );
19
  }
20
}
21

22
// 사용 예시
23
void main() async {
24
  final widgetService = WidgetService();
25
  await widgetService.updateWidget(
26
    message: '안녕하세요!',
27
    count: 42,
28
  );
29
}

4. Share Extension 추가

1. Xcode에서 File > New > Target
2. Share Extension 선택
3. 이름 입력 (예: ShareExtension)

ios/ShareExtension/ShareViewController.swift:

1
import UIKit
2
import Social
3
import MobileCoreServices
4

5
class ShareViewController: SLComposeServiceViewController {
6
    override func isContentValid() -> Bool {
7
        return true
8
    }
9

10
    override func didSelectPost() {
11
        // 공유된 항목 처리
12
        if let item = extensionContext?.inputItems.first as? NSExtensionItem {
13
            for attachment in item.attachments ?? [] {
14
                if attachment.hasItemConformingToTypeIdentifier(kUTTypeURL as String) {
15
                    attachment.loadItem(forTypeIdentifier: kUTTypeURL as String) { (url, error) in
16
                        if let shareURL = url as? URL {
17
                            self.saveToAppGroup(url: shareURL)
18
                        }
19
                    }
20
                }
21
            }
22
        }
23

24
        extensionContext?.completeRequest(returningItems: [], completionHandler: nil)
25
    }
26

27
    func saveToAppGroup(url: URL) {
28
        let userDefaults = UserDefaults(suiteName: "group.com.example.myapp")
29
        userDefaults?.set(url.absoluteString, forKey: "shared_url")
30
    }
31

32
    override func configurationItems() -> [Any]! {
33
        return []
34
    }
35
}

5. Flutter에서 공유된 데이터 읽기

1
import 'package:shared_preferences/shared_preferences.dart';
2
import 'package:home_widget/home_widget.dart';
3

4
class ShareService {
5
  Future<String?> getSharedUrl() async {
6
    // App Group에서 공유된 URL 읽기
7
    return await HomeWidget.getWidgetData<String>('shared_url');
8
  }
9

10
  Future<void> clearSharedUrl() async {
11
    await HomeWidget.saveWidgetData<String?>('shared_url', null);
12
  }
13
}

6. App Group 설정

메인 앱과 모든 확장이 데이터를 공유하려면:

1. 각 타겟에서 Signing & Capabilities 탭 선택
2. + Capability > App Groups 추가
3. 동일한 그룹 ID 사용 (예: group.com.example.myapp)

Watch out#

WARNING

앱 확장은 메인 앱과 별도 프로세스로 실행됩니다. 메모리 제한이 있으며, 직접적인 통신은 불가능합니다.

1
// ❌ 확장에서 직접 Flutter 코드 실행 불가
2
// Flutter 엔진은 메인 앱에서만 실행
3

4
// ✅ App Group을 통한 데이터 공유
5
let userDefaults = UserDefaults(suiteName: "group.com.example.myapp")
6

7
// 확장 → 메인 앱: 데이터 저장
8
userDefaults?.set("data", forKey: "from_extension")
9

10
// 메인 앱에서: 앱 시작 시 확인
11
// WidgetsBinding.instance.addObserver()로
12
// 앱이 포그라운드로 올 때 데이터 확인

위젯 업데이트 빈도에도 제한이 있습니다. 너무 자주 업데이트하면 시스템이 무시할 수 있습니다.

결론: 앱 확장은 네이티브 코드로 구현하고, App Group을 통해 Flutter 메인 앱과 데이터를 공유합니다.