Flutter Operation Process

์•ฑ ๊ฐœ๋ฐœ ํ”Œ๋žซํผ์—๋Š” Android์™€ iOS๊ฐ€ ์žˆ์œผ๋ฉฐ, ๊ฐ๊ฐ ๊ณ ์œ ํ•œ ์šด์˜์ฒด์ œ ์œ„์— ๋…๋ฆฝ์ ์œผ๋กœ ๊ตฌ์ถ•๋˜์–ด ์žˆ๋‹ค. ์ด์— ๋”ฐ๋ผ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ฐ ์šด์˜์ฒด์ œ๊ฐ€ ์š”๊ตฌํ•˜๋Š” ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ๊ทœ๊ฒฉ์— ๋งž์ถฐ ๋ณ„๋„๋กœ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•ด์•ผ ํ•œ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ Flutter๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํ•˜๋‚˜์˜ ์ฝ”๋“œ๋ฒ ์ด์Šค๋กœ Android์™€ iOS ๋ชจ๋‘์—์„œ ๋™์ž‘ํ•˜๋Š” ์•ฑ์„ ํšจ์œจ์ ์œผ๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์–ด, ํ”Œ๋žซํผ๋ณ„ ๊ฐœ๋ฐœ์— ์†Œ์š”๋˜๋Š” ์‹œ๊ฐ„๊ณผ ๋น„์šฉ์„ ํฌ๊ฒŒ ์ ˆ๊ฐํ•  ์ˆ˜ ์žˆ๋‹ค.

Flutter๊ฐ€ ์–ด๋–ป๊ฒŒ ์ด๋Ÿฌํ•œ ๊ฐœ๋ฐœ ๋ฐฉ์‹์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š”์ง€ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด, ๋จผ์ € Flutter์˜ ์ž‘๋™ ์›๋ฆฌ๋ฅผ ์‚ดํŽด๋ณด์ž.


iOS์™€ Android์˜ ์ž‘๋™ ๋ฐฉ์‹

Flutter์˜ ๊ตฌ์กฐ๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด, ๋จผ์ € ๊ธฐ์กด iOS์™€ Android ์•ฑ์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€๋ฅผ ์‚ดํŽด๋ณผ ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

iOS

iOS๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์–ธ์–ด์ธ Swift(๋˜๋Š” Objective-C)๋ฅผ ์‚ฌ์šฉํ•ด ์•ฑ์„ ๊ฐœ๋ฐœํ•œ๋‹ค. ๊ฐœ๋ฐœ๋œ ์•ฑ์€ iOS๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๋„ค์ดํ‹ฐ๋ธŒ API(SwiftUI, UIKit)๋ฅผ ์ง์ ‘ ํ˜ธ์ถœํ•˜์—ฌ ํ™”๋ฉด์„ ๊ทธ๋ฆฌ๊ฑฐ๋‚˜ ์‹œ์Šคํ…œ ๊ธฐ๋Šฅ์„ ์ œ์–ดํ•œ๋‹ค.

์ž‘์„ฑ๋œ ์ฝ”๋“œ๋Š” ์ปดํŒŒ์ผ ๊ณผ์ •์„ ๊ฑฐ์ณ iOS ๋””๋ฐ”์ด์Šค ์œ„์—์„œ ์ง์ ‘ ์‹คํ–‰๋˜๋ฉฐ, ๋ชจ๋“  UI ์š”์†Œ์™€ ๋™์ž‘์€ iOS๊ฐ€ ์ž์ฒด์ ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๋ Œ๋”๋ง ์—”์ง„์— ์˜ํ•ด ์ฒ˜๋ฆฌ๋œ๋‹ค.

Android

Android๋Š” Kotlin ๋˜๋Š” Java๋ฅผ ์‚ฌ์šฉํ•ด ์•ฑ์„ ๊ฐœ๋ฐœํ•œ๋‹ค. ๊ฐœ๋ฐœ๋œ ์ฝ”๋“œ๋Š” Android SDK๋ฅผ ํ†ตํ•ด Android OS๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๋„ค์ดํ‹ฐ๋ธŒ API๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋™์ž‘ํ•œ๋‹ค.

๋นŒ๋“œ๋œ ์•ฑ์€ Dalvik ๋˜๋Š” ART(Android Runtime) ์œ„์—์„œ ์‹คํ–‰๋˜๋ฉฐ, Android OS์˜ ์ž์ฒด ๋ Œ๋”๋ง ์—”์ง„์„ ํ†ตํ•ด ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๊ณ  ์ฒ˜๋ฆฌํ•œ๋‹ค.

๐Ÿ“Œ Android SDK: Android ์•ฑ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๋„๊ตฌ ๋ชจ์Œ. API, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ๋นŒ๋“œ ๋„๊ตฌ ๋“ฑ์„ ํฌํ•จํ•œ๋‹ค. ๐Ÿ“Œ ART (Android Runtime): Android ์•ฑ์„ ์‹คํ–‰ํ•˜๋Š” ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ. Android 5.0 ์ดํ›„ Dalvik์„ ๋Œ€์ฒดํ•˜์—ฌ ๊ธฐ๋ณธ ๋Ÿฐํƒ€์ž„์œผ๋กœ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋‹ค.


์ด์ฒ˜๋Ÿผ iOS์™€ Android๋Š” ๊ฐ๊ฐ ๋…๋ฆฝ๋œ ๋ฐฉ์‹์œผ๋กœ ์•ฑ์„ ์‹คํ–‰ํ•˜๊ณ  ๋ Œ๋”๋ง์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ํ•˜๋‚˜์˜ ์•ฑ์„ ๋‘ ํ”Œ๋žซํผ์— ๋งž๊ฒŒ ๋ณ„๋„๋กœ ๊ฐœ๋ฐœํ•ด์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์กด์žฌํ–ˆ๋‹ค.

ํ•˜์ง€๋งŒ Flutter๋Š” ์ด๋Ÿฌํ•œ ๊ตฌ์กฐ์  ํ•œ๊ณ„๋ฅผ ๋„˜์–ด, ๋‹จ์ผ ์ฝ”๋“œ๋ฒ ์ด์Šค๋กœ ์–‘ ํ”Œ๋žซํผ ๋ชจ๋‘์—์„œ ๊ตฌ๋™ํ•  ์ˆ˜ ์žˆ๋Š” ์ƒˆ๋กœ์šด ์ ‘๊ทผ ๋ฐฉ์‹์„ ์ œ์‹œํ–ˆ๋‹ค.


Flutter์˜ ์ž‘๋™ ๋ฐฉ์‹

Flutter๋Š” ๊ฐ ์šด์˜์ฒด์ œ์˜ ๋„ค์ดํ‹ฐ๋ธŒ API๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , ์ž์ฒด ๋ Œ๋”๋ง ์—”์ง„์„ ํ†ตํ•ด ํ™”๋ฉด์„ ์ง์ ‘ ๊ทธ๋ฆฌ๋Š” ๋ฐฉ์‹์„ ์ฑ„ํƒํ•˜๊ณ  ์žˆ๋‹ค.

์กฐ๊ธˆ ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ๋งํ•˜๋ฉด, Flutter๋Š” Dart ์–ธ์–ด๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋ฅผ Skia ๊ทธ๋ž˜ํ”ฝ ์—”์ง„์„ ํ†ตํ•ด ๋ Œ๋”๋งํ•˜์—ฌ UI๋ฅผ ํ™”๋ฉด์— ์ง์ ‘ ๊ทธ๋ฆฐ๋‹ค. ์ด ๊ณผ์ •์„ ํ†ตํ•ด Flutter๋Š” ์šด์˜์ฒด์ œ์— ๊ด€๊ณ„์—†์ด ์ผ๊ด€๋œ UI/UX๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“Œ Skia: ๊ตฌ๊ธ€์ด ๊ฐœ๋ฐœํ•œ ์˜คํ”ˆ์†Œ์Šค 2D ๊ทธ๋ž˜ํ”ฝ ๋ Œ๋”๋ง ์—”์ง„. Chrome, Android, Flutter ๋“ฑ ๋‹ค์–‘ํ•œ ์ œํ’ˆ์—์„œ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋‹ค.


Flutter ๋‚ด๋ถ€ ์ž‘๋™ ๋ฐฉ์‹: flutter run ์ดํ›„ ๊ณผ์ •

์ด์ œ ๋ณธ๊ฒฉ์ ์œผ๋กœ Flutter๊ฐ€ ๋‚ด๋ถ€์ ์œผ๋กœ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ์ž์„ธํžˆ ์‚ดํŽด๋ณด์ž.

Flutter์—์„œ Dart๋กœ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ํ„ฐ๋ฏธ๋„์— flutter run ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณผ์ •์ด ์ˆœ์ฐจ์ ์œผ๋กœ ์ง„ํ–‰๋œ๋‹ค.

1. ํ”„๋กœ์ ํŠธ ์˜์กด์„ฑ ํ™•์ธ

Flutter CLI๋Š” ํ”„๋กœ์ ํŠธ ๋‚ด pubspec.yaml ํŒŒ์ผ์„ ํ™•์ธํ•˜์—ฌ ํ•„์š”ํ•œ ํŒจํ‚ค์ง€ ์˜์กด์„ฑ์„ ๊ฒ€ํ† ํ•œ๋‹ค.

์ด๋•Œ, ์˜์กด์„ฑ ์—…๋ฐ์ดํŠธ๋‚˜ ์„ค์น˜๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ flutter pub get ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•œ๋‹ค.

๐Ÿ“Œ pubspec.yaml: Flutter ํ”„๋กœ์ ํŠธ์˜ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ(์•ฑ ์ด๋ฆ„, ๋ฒ„์ „ ๋“ฑ)์™€ ํ•„์š”ํ•œ ํŒจํ‚ค์ง€ ์˜์กด์„ฑ์„ ์ •์˜ํ•˜๋Š” ํŒŒ์ผ.

2. ์ฝ”๋“œ ๋ถ„์„ ๋ฐ ๋นŒ๋“œ ์ดˆ๊ธฐํ™”

Flutter๋Š” Dart Analyzer๋ฅผ ์ด์šฉํ•ด ํ”„๋กœ์ ํŠธ์˜ Dart ์ฝ”๋“œ๋ฅผ ๊ฒ€์‚ฌํ•œ๋‹ค.

์ฝ”๋“œ์— ๋ฌธ์ œ๊ฐ€ ์—†์œผ๋ฉด, ๋นŒ๋“œ๋ฅผ ์ค€๋น„ํ•˜๊ธฐ ์œ„ํ•ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๊ณ , Android/iOS ๋“ฑ ๊ฐ ์šด์˜์ฒด์ œ(OS)์— ํ•„์š”ํ•œ ์„ค์ •์„ ์ ์šฉํ•œ๋‹ค.

๐Ÿ“Œ Dart Analyzer: ์ฝ”๋“œ์— ๋ฌธ๋ฒ• ์˜ค๋ฅ˜๋‚˜ ํƒ€์ž… ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋Š”์ง€ ์ •์  ๋ถ„์„์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋„๊ตฌ.

3. ์ปดํŒŒ์ผ ๋ฐ ๋ฒˆ๋“ค ํŒจํ‚ค์ง•

Debug ๋ชจ๋“œ์—์„œ๋Š” JIT(Just-In-Time) ์ปดํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜์—ฌ Dart ์ฝ”๋“œ๋ฅผ ๋น ๋ฅด๊ฒŒ ์ปดํŒŒ์ผํ•œ๋‹ค. ์ด ๋•๋ถ„์— ์•ฑ์„ ๋น ๋ฅด๊ฒŒ ์‹คํ–‰ํ•˜๊ณ , Hot Reload๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฐ˜๋ฉด, Release ๋ชจ๋“œ์—์„œ๋Š” AOT(Ahead-of-Time) ์ปดํŒŒ์ผ์„ ์‚ฌ์šฉํ•œ๋‹ค. AOT ์ปดํŒŒ์ผ์€ ์•ฑ ์‹คํ–‰ ์ „์— Dart ์ฝ”๋“œ๋ฅผ ๊ธฐ๊ณ„์–ด(native code)๋กœ ์™„์ „ํžˆ ๋ณ€ํ™˜ํ•˜์—ฌ ๋นŒ๋“œํ•˜๋ฏ€๋กœ, ์‹คํ–‰ ์†๋„๊ฐ€ ๋น ๋ฅด๊ณ  ์ตœ์ ํ™”๋œ ์„ฑ๋Šฅ์„ ๋‚ผ ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ AOT ํŠน์„ฑ์ƒ ๋นŒ๋“œ ์‹œ๊ฐ„์ด ๋” ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๊ณ , Hot Reload ๊ธฐ๋Šฅ์€ ์ง€์›๋˜์ง€ ์•Š๋Š”๋‹ค.

์ปดํŒŒ์ผ๋œ ์ฝ”๋“œ๋Š” ์•ฑ์˜ ๋ฆฌ์†Œ์Šค, ์ฝ”๋“œ, ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๋“ฑ์„ ํฌํ•จํ•˜๋Š” ๋ฒˆ๋“ค(bundle)๋กœ ํŒจํ‚ค์ง•๋œ๋‹ค.

๐Ÿ“Œ JIT (Just-In-Time) ์ปดํŒŒ์ผ: ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ ์ค‘์— ์ฝ”๋“œ๋ฅผ ์ฆ‰์‹œ(๋Ÿฐํƒ€์ž„ ์‹œ์ ) ์ปดํŒŒ์ผํ•˜์—ฌ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ์‹. ๊ฐœ๋ฐœ ๋‹จ๊ณ„์—์„œ ๋น ๋ฅธ ์‹คํ–‰๊ณผ Hot Reload๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜์ง€๋งŒ, ์ตœ์ข… ๋นŒ๋“œ(Release)๋ณด๋‹ค ์„ฑ๋Šฅ์ด ๋‹ค์†Œ ๋–จ์–ด์งˆ ์ˆ˜ ์žˆ๋‹ค.

4. Flutter ์—”์ง„ ๊ตฌ๋™

๋ฒˆ๋“ค ํŒจํ‚ค์ง•์ด ์™„๋ฃŒ๋˜๋ฉด, ๊ฐœ๋ฐœ ๋””๋ฐ”์ด์Šค(์‹ค์ œ ๋””๋ฐ”์ด์Šค ๋˜๋Š” ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ)์— Flutter ์—”์ง„์„ ๊ตฌ๋™ํ•œ๋‹ค. Flutter ์—”์ง„์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ•ต์‹ฌ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค:

  • Skia๋ฅผ ํ†ตํ•œ UI ๋ Œ๋”๋ง

  • Dart VM์„ ํ†ตํ•œ ์ฝ”๋“œ ์‹คํ–‰

  • ํ”„๋ ˆ์ž„ ์ƒ์„ฑ ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ด€๋ฆฌ

  • ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๋ฐ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ

๐Ÿ“Œ Dart VM: Dart ์–ธ์–ด๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฐ€์ƒ ๋จธ์‹ (Virtual Machine).

5. ํ”Œ๋žซํผ Shell ์—ฐ๊ฒฐ

Flutter ์—”์ง„์€ ๊ฐ ์šด์˜์ฒด์ œ์™€ ํ†ต์‹ ํ•˜๊ธฐ ์œ„ํ•ด ํ”Œ๋žซํผ ๋ณ„๋กœ Shell์„ ์ƒ์„ฑํ•œ๋‹ค.

๐Ÿ“Œ Shell: Flutter ์—”์ง„๊ณผ ๊ฐ ์šด์˜์ฒด์ œ(Android, iOS) ๊ฐ„์— ๋ฉ”์‹œ์ง€๋ฅผ ์ฃผ๊ณ ๋ฐ›๊ณ , ๋ Œ๋”๋ง ๊ฒฐ๊ณผ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ์ค‘๊ฐ„ ๊ณ„์ธต.

  • Android์—์„œ๋Š” FlutterActivity๋ฅผ ํ†ตํ•ด ๋„ค์ดํ‹ฐ๋ธŒ ํ™˜๊ฒฝ๊ณผ ์—ฐ๊ฒฐ๋œ๋‹ค.

    ๐Ÿ“Œ FlutterActivity: Android Native ์•ฑ ์•ˆ์—์„œ Flutter ์—”์ง„์„ ๊ตฌ๋™ํ•˜๊ณ  ํ™”๋ฉด์„ ํ‘œ์‹œํ•˜๋Š” ๊ธฐ๋ณธ ์—”ํŠธ๋ฆฌ ํฌ์ธํŠธ(Activity).

  • iOS์—์„œ๋Š” FlutterViewController๋ฅผ ํ†ตํ•ด ์—ฐ๊ฒฐ๋œ๋‹ค.

    ๐Ÿ“Œ FlutterViewController: iOS ์•ฑ์—์„œ Flutter ์—”์ง„์„ ํ˜ธ์ŠคํŒ…ํ•˜๊ณ , Flutter์˜ ๋ทฐ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ์ปจํŠธ๋กค๋Ÿฌ(ViewController).

6. ์•ฑ ์‹คํ–‰ ๋ฐ ์ฒซ ๋ฒˆ์งธ ํ”„๋ ˆ์ž„ ๋ Œ๋”๋ง

Flutter๋Š” ์•ฑ์˜ ์ง„์ž…์ ์ธ main() ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์‹คํ–‰์„ ์‹œ์ž‘ํ•œ๋‹ค. ๊ทธ ํ›„, ์œ„์ ฏ ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ , Skia ์—”์ง„์„ ํ†ตํ•ด ์ฒซ ๋ฒˆ์งธ ํ”„๋ ˆ์ž„์„ ํ™”๋ฉด์— ๋ Œ๋”๋งํ•œ๋‹ค.


์š”์•ฝ

Flutter๋Š” ๊ธฐ์กด iOS์™€ Android์˜ ๋ณต์žกํ•œ ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐœ๋ฐœ ๋ฐฉ์‹์„ ๋Œ€์ฒดํ•˜์—ฌ, ํ•˜๋‚˜์˜ ์ฝ”๋“œ๋ฒ ์ด์Šค๋กœ ์–‘ ํ”Œ๋žซํผ์„ ๋™์‹œ์— ์ง€์›ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค. Flutter ๋‚ด๋ถ€ ๊ตฌ์กฐ๋ฅผ ์ดํ•ดํ•˜๋ฉด, ๋‹จ์ˆœํžˆ "ํฌ๋กœ์Šค ํ”Œ๋žซํผ"์ด๋ผ๋Š” ์žฅ์ ์„ ๋„˜์–ด, ์–ด๋–ป๊ฒŒ Flutter๊ฐ€ ๋น ๋ฅธ ๊ฐœ๋ฐœ ์†๋„์™€ ์ผ๊ด€๋œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ๋ณด๋‹ค ๊นŠ์ด ์žˆ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.

Last updated