Flutter 튜토리얼 57편: iOS 플랫폼 통합

Why#

NOTE

Flutter 앱을 iOS 시뮬레이터나 실제 기기에서 실행하려면 Xcode와 iOS 개발 도구가 필요합니다. macOS에서만 iOS 앱을 빌드할 수 있습니다.

1
macOS → Xcode → iOS SDK → 시뮬레이터/기기

What#

NOTE

iOS 개발에 필요한 구성 요소입니다.

구성 요소	역할
macOS	iOS 개발을 위한 운영체제
Xcode	Apple의 IDE와 개발 도구
iOS SDK	iOS 앱 빌드에 필요한 라이브러리
CocoaPods	iOS 의존성 관리 도구

How#

TIP

1. Xcode 설치

App Store에서 Xcode를 설치합니다. 또는 터미널에서:

1
xcode-select --install

2. Xcode 명령줄 도구 설정

1
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
2
sudo xcodebuild -runFirstLaunch

3. iOS 시뮬레이터 확인

Xcode 실행 후 Window > Devices and Simulators에서 시뮬레이터를 확인합니다.

또는 터미널에서:

1
open -a Simulator

4. CocoaPods 설치

1
sudo gem install cocoapods

Apple Silicon Mac의 경우:

1
sudo gem install cocoapods
2
# 또는
3
brew install cocoapods

5. 라이선스 동의

1
sudo xcodebuild -license accept

6. 설정 확인

1
flutter doctor

Xcode 항목이 녹색 체크로 표시되어야 합니다.

1
flutter devices

iOS 시뮬레이터가 목록에 표시됩니다.

7. 실제 기기에서 테스트

실제 iOS 기기에서 테스트하려면:

1. Apple ID로 Xcode에 로그인
2. Xcode에서 프로젝트 열기: open ios/Runner.xcworkspace
3. Signing & Capabilities에서 Team 선택
4. 기기를 USB로 연결하고 신뢰 설정

Watch out#

WARNING

무료 Apple ID로는 7일마다 앱을 다시 설치해야 합니다. 실제 기기 배포를 계속하려면 Apple Developer Program($99/년)에 가입하세요.

1
무료 Apple ID:
2
- 시뮬레이터 무제한
3
- 실제 기기 7일 제한
4
- App Store 배포 불가
5

6
Apple Developer Program:
7
- 시뮬레이터/기기 무제한
8
- App Store 배포 가능
9
- TestFlight 베타 테스트

결론: macOS에 Xcode를 설치하고 명령줄 도구를 설정하면 Flutter 앱을 iOS 시뮬레이터나 실제 기기에서 실행할 수 있습니다.

Why#

NOTE

iOS 앱이 시작될 때 Flutter 엔진이 초기화되는 동안 빈 화면이 보이면 사용자 경험이 나빠집니다. 런치 스크린을 설정하면 앱 로고나 브랜드 이미지를 표시하며 자연스럽게 앱을 시작할 수 있습니다.

1
앱 실행 → 런치 스크린 표시 → Flutter 엔진 초기화 → 앱 화면

What#

NOTE

iOS 런치 스크린은 Storyboard로 구현합니다.

파일	역할
LaunchScreen.storyboard	런치 스크린 UI 정의
Assets.xcassets	이미지 에셋 저장
Info.plist	런치 스크린 설정 참조

How#

TIP

1. Xcode에서 프로젝트 열기

1
open ios/Runner.xcworkspace

2. LaunchScreen.storyboard 편집

프로젝트 네비게이터에서 Runner > Runner > LaunchScreen.storyboard를 선택합니다.

기본 구성:

• View Controller 안에 View가 있음
• 기본적으로 Flutter 로고와 텍스트가 포함됨

3. 이미지 에셋 추가

Runner > Assets.xcassets를 선택합니다. 우클릭하여 Import를 선택하고 런치 스크린 이미지를 추가합니다.

이미지 크기 권장:

1
@1x: 기본 크기
2
@2x: 2배 크기
3
@3x: 3배 크기

4. Storyboard에서 UI 구성

LaunchScreen.storyboard에서:

1. 기존 요소 삭제 (또는 수정)
2. + 버튼으로 Image View 추가
3. 이미지 에셋 선택
4. Auto Layout 제약 조건 설정

Auto Layout 예시 (중앙 정렬):

1
이미지 선택 → Editor > Align > Horizontally in Container
2
이미지 선택 → Editor > Align > Vertically in Container

5. 배경색 설정

View를 선택하고 Attributes Inspector에서 Background 색상을 변경합니다.

6. Safe Area 고려

1
// storyboard에서 Use Safe Area Layout Guides 체크
2
// 노치가 있는 기기에서 콘텐츠가 잘리지 않도록

코드로 런치 스크린 커스터마이징 (선택)

ios/Runner/AppDelegate.swift:

1
import Flutter
2
import UIKit
3

4
@main
5
@objc class AppDelegate: FlutterAppDelegate {
6
    override func application(
7
        _ application: UIApplication,
8
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
9
    ) -> Bool {
10
        // 런치 스크린 표시 시간 연장 (선택)
11
        // Thread.sleep(forTimeInterval: 1.0)
12

13
        GeneratedPluginRegistrant.register(with: self)
14
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
15
    }
16
}

Watch out#

WARNING

런치 스크린에는 동적 콘텐츠를 넣을 수 없습니다. 네트워크 호출, 애니메이션, 사용자 데이터 등은 불가능합니다.

1
// ❌ 런치 스크린에서 불가능
2
- 네트워크 요청
3
- 복잡한 애니메이션
4
- 사용자별 맞춤 콘텐츠
5
- 로딩 프로그레스 바
6

7
// ✅ 런치 스크린에서 가능
8
- 정적 이미지
9
- 단순 배경색
10
- 앱 로고

복잡한 시작 화면이 필요하면 Flutter에서 별도의 스플래시 위젯을 구현하세요.

결론: LaunchScreen.storyboard에서 이미지와 배경색을 설정하면 앱 시작 시 런치 스크린이 표시됩니다.

Why#

NOTE

지도, 웹뷰, 카메라 프리뷰 등 기존 iOS 네이티브 뷰를 Flutter 위젯 트리에 직접 포함해야 할 때가 있습니다. Platform Views를 사용하면 네이티브 UIView를 Flutter 앱에 임베드할 수 있습니다.

1
Flutter 위젯 트리 ← Platform View ← iOS UIView/UIViewController

What#

NOTE

iOS Platform Views는 UIView를 Flutter에 임베드합니다.

클래스	역할
FlutterPlatformViewFactory	플랫폼 뷰 생성 팩토리
FlutterPlatformView	플랫폼 뷰 프로토콜
UiKitView (Flutter)	iOS 네이티브 뷰 표시 위젯

How#

TIP

1. 플랫폼 뷰 클래스 생성

ios/Runner/NativeView.swift:

1
import Flutter
2
import UIKit
3

4
class NativeViewFactory: NSObject, FlutterPlatformViewFactory {
5
    private var messenger: FlutterBinaryMessenger
6

7
    init(messenger: FlutterBinaryMessenger) {
8
        self.messenger = messenger
9
        super.init()
10
    }
11

12
    func create(
13
        withFrame frame: CGRect,
14
        viewIdentifier viewId: Int64,
15
        arguments args: Any?
16
    ) -> FlutterPlatformView {
17
        return NativeView(
18
            frame: frame,
19
            viewIdentifier: viewId,
20
            arguments: args,
21
            binaryMessenger: messenger
22
        )
23
    }
24

25
    func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
26
        return FlutterStandardMessageCodec.sharedInstance()
27
    }
28
}
29

30
class NativeView: NSObject, FlutterPlatformView {
31
    private var _view: UIView
32

33
    init(
34
        frame: CGRect,
35
        viewIdentifier viewId: Int64,
36
        arguments args: Any?,
37
        binaryMessenger messenger: FlutterBinaryMessenger?
38
    ) {
39
        _view = UIView()
40
        super.init()
41
        createNativeView(view: _view, arguments: args)
42
    }
43

44
    func view() -> UIView {
45
        return _view
46
    }
47

48
    func createNativeView(view: UIView, arguments args: Any?) {
49
        view.backgroundColor = UIColor.systemBlue
50

51
        let label = UILabel()
52
        label.text = "iOS 네이티브 뷰"
53
        label.textColor = UIColor.white
54
        label.textAlignment = .center
55
        label.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
56
        label.center = view.center
57

58
        if let params = args as? [String: Any],
59
           let text = params["text"] as? String {
60
            label.text = text
61
        }
62

63
        view.addSubview(label)
64
    }
65
}

2. AppDelegate에서 팩토리 등록

ios/Runner/AppDelegate.swift:

1
import Flutter
2
import UIKit
3

4
@main
5
@objc class AppDelegate: FlutterAppDelegate {
6
    override func application(
7
        _ application: UIApplication,
8
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
9
    ) -> Bool {
10
        GeneratedPluginRegistrant.register(with: self)
11

12
        // Platform View 팩토리 등록
13
        let factory = NativeViewFactory(
14
            messenger: registrar(forPlugin: "native-view")!.messenger()
15
        )
16
        registrar(forPlugin: "native-view")!.register(
17
            factory,
18
            withId: "native-view"  // viewType 식별자
19
        )
20

21
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
22
    }
23
}

3. Flutter에서 Platform View 사용

1
import 'package:flutter/material.dart';
2
import 'package:flutter/services.dart';
3

4
class NativeViewExample extends StatelessWidget {
5
  const NativeViewExample({super.key});
6

7
  @override
8
  Widget build(BuildContext context) {
9
    // viewType은 iOS에서 등록한 것과 일치해야 함
10
    const String viewType = 'native-view';
11

12
    // creationParams로 초기 데이터 전달
13
    final Map<String, dynamic> creationParams = {
14
      'text': 'Flutter에서 전달한 텍스트',
15
    };
16

17
    return Scaffold(
18
      appBar: AppBar(title: const Text('iOS Platform View 예제')),
19
      body: Column(
20
        children: [
21
          const Text('Flutter 위젯'),
22

23
          // iOS Platform View 임베드
24
          SizedBox(
25
            height: 100,
26
            child: UiKitView(
27
              viewType: viewType,
28
              creationParams: creationParams,
29
              creationParamsCodec: const StandardMessageCodec(),
30
            ),
31
          ),
32

33
          const Text('Flutter 위젯 계속'),
34
        ],
35
      ),
36
    );
37
  }
38
}

4. 플랫폼별 분기

1
import 'dart:io';
2
import 'package:flutter/foundation.dart';
3

4
Widget buildPlatformView() {
5
  const viewType = 'native-view';
6
  const creationParams = {'text': '네이티브 뷰'};
7

8
  if (Platform.isIOS) {
9
    return UiKitView(
10
      viewType: viewType,
11
      creationParams: creationParams,
12
      creationParamsCodec: const StandardMessageCodec(),
13
    );
14
  } else if (Platform.isAndroid) {
15
    return AndroidView(
16
      viewType: viewType,
17
      creationParams: creationParams,
18
      creationParamsCodec: const StandardMessageCodec(),
19
    );
20
  }
21

22
  return const Text('지원하지 않는 플랫폼');
23
}

Watch out#

WARNING

Platform Views는 성능 오버헤드가 있습니다. 특히 스크롤 리스트 안에서 사용하면 성능이 크게 저하됩니다.

1
// ❌ 성능 문제: 리스트 아이템마다 Platform View
2
ListView.builder(
3
  itemCount: 50,
4
  itemBuilder: (context, index) => UiKitView(
5
    viewType: 'native-view',
6
  ),
7
)
8

9
// ✅ Platform View 최소화
10
Column(
11
  children: [
12
    Expanded(child: FlutterListView()),
13
    SizedBox(
14
      height: 250,
15
      child: UiKitView(viewType: 'map-view'),
16
    ),
17
  ],
18
)

가능하면 Flutter 위젯으로 구현하고, 네이티브 뷰가 꼭 필요한 경우에만 Platform Views를 사용하세요.

결론: FlutterPlatformViewFactory를 구현하고 등록하면 UiKitView 위젯으로 네이티브 UIView를 Flutter에 임베드할 수 있습니다.

Why#

NOTE

Flutter 앱에서 iOS 특화 문제가 발생하면 Xcode의 디버깅 도구를 사용해야 합니다. 메모리 문제, 네이티브 크래시, 성능 문제 등은 Xcode Instruments로 진단할 수 있습니다.

1
문제 발생 → Xcode 도구로 분석 → 원인 파악 → 해결

What#

NOTE

iOS 디버깅에 사용하는 도구입니다.

도구	용도
Xcode Debugger	브레이크포인트, 변수 확인
Instruments	성능, 메모리, 네트워크 프로파일링
Console.app	시스템 로그 확인
lldb	저수준 디버깅

How#

TIP

1. Xcode에서 디버깅

1
# Xcode에서 프로젝트 열기
2
open ios/Runner.xcworkspace

Xcode에서 Product > Run을 선택하면 디버거가 연결됩니다.

2. 네이티브 코드에 브레이크포인트 설정

Xcode에서 Swift/Objective-C 코드에 브레이크포인트를 설정할 수 있습니다.

1
// AppDelegate.swift에서
2
override func application(...) -> Bool {
3
    // 여기에 브레이크포인트 설정
4
    print("앱 시작")  // ← 클릭하여 브레이크포인트
5
    return super.application(...)
6
}

3. 콘솔 로그 확인

Flutter 로그와 네이티브 로그를 모두 확인:

1
# 터미널에서 Flutter 로그
2
flutter logs
3

4
# Xcode Console에서 네이티브 로그 확인
5
# View > Debug Area > Activate Console

4. Instruments로 성능 분석

Xcode에서 Product > Profile (Cmd+I)을 선택합니다.

주요 Instruments:

• Time Profiler: CPU 사용량 분석
• Allocations: 메모리 할당 추적
• Leaks: 메모리 누수 탐지
• Network: 네트워크 활동 모니터링

5. 메모리 문제 디버깅

1
// 메모리 경고 수신
2
override func applicationDidReceiveMemoryWarning(_ application: UIApplication) {
3
    print("메모리 경고 수신")
4
}

Instruments의 Allocations 도구로 메모리 사용량을 확인합니다.

6. 크래시 로그 분석

크래시가 발생하면:

1. Window > Devices and Simulators 열기
2. 기기 선택
3. View Device Logs 클릭
4. 크래시 로그 확인

7. 네트워크 디버깅

1
// Info.plist에 ATS 예외 추가 (개발용)
2
// App Transport Security Settings > Allow Arbitrary Loads = YES

Instruments의 Network 도구로 네트워크 요청을 분석합니다.

8. Flutter와 네이티브 간 통신 디버깅

Method Channel 디버깅:

1
// Flutter 측
2
const channel = MethodChannel('com.example/channel');
3

4
try {
5
  final result = await channel.invokeMethod('someMethod');
6
  print('결과: $result');
7
} on PlatformException catch (e) {
8
  print('에러: ${e.message}');
9
}

1
// iOS 측
2
let channel = FlutterMethodChannel(
3
    name: "com.example/channel",
4
    binaryMessenger: controller.binaryMessenger
5
)
6

7
channel.setMethodCallHandler { call, result in
8
    print("메서드 호출: \(call.method)")
9
    print("인수: \(String(describing: call.arguments))")
10

11
    if call.method == "someMethod" {
12
        result("성공")
13
    } else {
14
        result(FlutterMethodNotImplemented)
15
    }
16
}

Watch out#

WARNING

Release 빌드에서는 디버거를 연결할 수 없습니다. 프로덕션 크래시를 분석하려면 크래시 리포팅 서비스를 사용하세요.

1
// Firebase Crashlytics 등 사용
2
dependencies:
3
  firebase_crashlytics: ^3.0.0

1
void main() async {
2
  WidgetsFlutterBinding.ensureInitialized();
3
  await Firebase.initializeApp();
4

5
  // Flutter 에러 캡처
6
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError;
7

8
  runApp(const MyApp());
9
}

결론: Xcode Debugger와 Instruments를 사용하면 iOS 특화 문제를 진단하고 해결할 수 있습니다.