![](https://blog.kakaocdn.net/dn/bC7vst/btsMkvyqs0I/tIhaRZZKhktXd0NlKI3Jyk/img.png)
โ . ์๋ก : Flutter๊ฐ ๋์ธ์ธ ์ด์
๐ 1. ๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ ๋ฐฉ์์ ๋ณํ
๐ 2. ํฌ๋ก์ค ํ๋ซํผ์ ํ์์ฑ ์ฆ๊ฐ
โ ก. ๋ณธ๋ก : ๋ค์ดํฐ๋ธ ์ฑ ๊ฐ๋ฐ๊ณผ Flutter์ ์ฐจ์ด์
๐ 1. ๊ฐ๋ฐ ๋ฐฉ์ ๋น๊ต: ๋ค์ดํฐ๋ธ vs ํฌ๋ก์ค ํ๋ซํผ
๐ 2. Flutter์ ๊ฐ์ 1: ๋จ์ผ ์ฝ๋๋ก ๋ฉํฐ ํ๋ซํผ ์ง์
๐ 3. Flutter์ ๊ฐ์ 2: ๋น ๋ฅธ ๊ฐ๋ฐ ์๋ (Hot Reload)
๐ 4. Flutter์ ๊ฐ์ 3: ๋์ ์ฑ๋ฅ๊ณผ ๋ค์ดํฐ๋ธ ์์ค์ UI
๐ 5. Flutter์ ๊ฐ์ 4: ๊ฐ๋ ฅํ UI ๊ตฌ์ฑ (์์ ฏ ์์คํ )
โ ข. ๊ฒฐ๋ก : ์ Flutter๋ฅผ ์ ํํด์ผ ํ ๊น?
๐ 1. Flutter์ ํ์ฌ์ ๋ฏธ๋
๐ 2. Flutter๋ฅผ ๋ฐฐ์์ผ ํ๋ ์ด์
Flutter๊ฐ ์ธ๊ธฐ ์๋ ์ด์
๋ค์ดํฐ๋ธ ์ฑ ๊ฐ๋ฐ๊ณผ์ ์ฐจ์ด์ ๐ฑ๐
Flutter๋
Google์ด ๊ฐ๋ฐํ
๊ฐ๋ ฅํ UI ํ๋ ์์ํฌ๋ก,
ํ ๋ฒ์ ์ฝ๋ ์์ฑ์ผ๋ก
Android, iOS, ์น, ๋ฐ์คํฌํฑ๊น์ง
์คํํ ์ ์๋
ํฌ๋ก์ค ํ๋ซํผ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ ๊ณตํฉ๋๋ค.
๊ทธ๋ ๋ค๋ฉด
์ ๋ง์ ๊ฐ๋ฐ์๋ค์ด
Flutter๋ฅผ ์ ํํ๋ ๊ฑธ๊น์? ๐ค
์ด๋ฒ ํฌ์คํ
์์๋
๋ค์ดํฐ๋ธ ์ฑ ๊ฐ๋ฐ๊ณผ
Flutter์ ์ฐจ์ด์ ์ ๋น๊ตํ๋ฉฐ,
Flutter๊ฐ ์ธ๊ธฐ ์๋ ์ด์ ๋ฅผ
๋ถ์ํด ๋ณด๊ฒ ์ต๋๋ค!
โ . ์๋ก : Flutter๊ฐ ๋์ธ์ธ ์ด์ ๐
๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ ๋ฐฉ์์ ๋ณํ
์ด๊ธฐ ๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ์์๋
๊ฐ ํ๋ซํผ(Android, iOS)๋ณ๋ก
๋ณ๋ ๊ฐ๋ฐํด์ผ ํ์ต๋๋ค.
ํ์ง๋ง ์ด ๋ฐฉ์์
๋น์ฉ์ด ๋ง์ด ๋ค๊ณ
์ ์ง๋ณด์๊ฐ ์ด๋ ค์ด ๋จ์ ์ด
์์์ต๋๋ค.
โ ๊ธฐ์กด ๋ค์ดํฐ๋ธ ๊ฐ๋ฐ ๋ฐฉ์
- Android: Java/Kotlin
- iOS: Swift/Objective-C
- ๊ฐ ํ๋ซํผ๋ง๋ค ๋ณ๋์ ์ฝ๋ ์์ฑ ํ์
ํ์ง๋ง ์ต๊ทผ์๋
Flutter, React Native ๊ฐ์
ํฌ๋ก์ค ํ๋ซํผ ๊ฐ๋ฐ ๋ฐฉ์์ด
์ ์ ์ธ๊ธฐ๋ฅผ ์ป๊ณ ์์ต๋๋ค.
ํฌ๋ก์ค ํ๋ซํผ์ ํ์์ฑ ์ฆ๊ฐ
์ ํฌ๋ก์ค ํ๋ซํผ์ด ํ์ํ ๊น์?
- ๐ ๋น์ฉ ์ ๊ฐ: ํ๋์ ์ฝ๋๋ก ์ฌ๋ฌ ํ๋ซํผ์์ ์คํ ๊ฐ๋ฅ
- โก ๋น ๋ฅธ ๊ฐ๋ฐ ์๋: ์ฝ๋ ์ฌ์ฌ์ฉ์ ํตํด ๊ฐ๋ฐ ์๊ฐ์ ๋จ์ถ
- ๐ ์ ์ง๋ณด์ ์ฉ์ด: ํ๋์ ์ฝ๋๋ฒ ์ด์ค๋ง ๊ด๋ฆฌํ๋ฉด ๋จ
์ด์ ๋ค์ดํฐ๋ธ ์ฑ ๊ฐ๋ฐ๊ณผ
Flutter ๊ฐ๋ฐ ๋ฐฉ์์ ์ฐจ์ด์ ์
๋น๊ตํด ๋ณด๊ฒ ์ต๋๋ค
โ ก. ๋ณธ๋ก : ๋ค์ดํฐ๋ธ ์ฑ ๊ฐ๋ฐ๊ณผ Flutter์ ์ฐจ์ด์ ๐
1) ๊ฐ๋ฐ ๋ฐฉ์ ๋น๊ต: ๋ค์ดํฐ๋ธ vs ํฌ๋ก์ค ํ๋ซํผ
Flutter๋
๊ธฐ์กด ๋ค์ดํฐ๋ธ ๊ฐ๋ฐ ๋ฐฉ์๊ณผ
๋น๊ตํ์ ๋
์๋์ ๊ฐ์ ์ฐจ์ด์ ์ด ์์ต๋๋ค.
๋น๊ต ํญ๋ชฉ | ๋ค์ดํฐ๋ธ ๊ฐ๋ฐ (Android/iOS) | Flutter ๊ฐ๋ฐ |
๊ฐ๋ฐ ์ธ์ด | Java/Kotlin (Android), Swift/Objective-C (iOS) | Dart |
๊ฐ๋ฐ ๋ฐฉ์ | ํ๋ซํผ๋ณ ๋ณ๋ ์ฝ๋ ์์ฑ | ๋จ์ผ ์ฝ๋๋ก ๋ชจ๋ ํ๋ซํผ ์ง์ |
UI ๋ ๋๋ง | ๋ค์ดํฐ๋ธ UI ์ปดํฌ๋ํธ ์ฌ์ฉ | ์์ฒด ๋ ๋๋ง ์์ง(Skia) ์ฌ์ฉ |
์ฑ๋ฅ | ์ต์ ํ๋ ๋ค์ดํฐ๋ธ ์ฑ๋ฅ | ๋ค์ดํฐ๋ธ์ ๊ฐ๊น์ด ์ฑ๋ฅ ์ ๊ณต |
๊ฐ๋ฐ ์๋ | ๋๋ฆผ (ํ๋ซํผ๋ณ ์ฝ๋ ์์ฑ ํ์) | ๋น ๋ฆ (Hot Reload ์ง์) |
์ ์ง๋ณด์ | ํ๋ซํผ๋ณ๋ก ๊ฐ๊ฐ ๊ด๋ฆฌ ํ์ | ํ๋์ ์ฝ๋๋ก ์ ์ง๋ณด์ ๊ฐ๋ฅ |
โก๏ธ Flutter๋ ๋ค์ดํฐ๋ธ ๊ฐ๋ฐ๋ณด๋ค ์ ์ง๋ณด์๊ฐ ์ฝ๊ณ , ๋น ๋ฅธ ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค.
2) Flutter์ ๊ฐ์ 1: ๋จ์ผ ์ฝ๋๋ก ๋ฉํฐ ํ๋ซํผ ์ง์
๋ค์ดํฐ๋ธ ๊ฐ๋ฐ์์๋
Android์ iOS ๊ฐ๊ฐ์
์ฝ๋ ์์ฑ์ด ํ์ํ์ง๋ง,
Flutter๋ ๋จ ํ๋์ ์ฝ๋๋ก
Android, iOS, ์น, ๋ฐ์คํฌํฑ๊น์ง
์ง์ํ ์ ์์ต๋๋ค.
โ Flutter์ ํฌ๋ก์ค ํ๋ซํผ ์ง์ ๋ฒ์
โ ๋ชจ๋ฐ์ผ ์ฑ (Android, iOS)
โ ์น ์ ํ๋ฆฌ์ผ์ด์
(Flutter Web)
โ ๋ฐ์คํฌํฑ ์ฑ (Windows, macOS, Linux)
โก๏ธ ํ๋์ ์ฝ๋๋ฒ ์ด์ค๋ก ๋ชจ๋ ํ๋ซํผ์์ ๋์ ๊ฐ๋ฅํ๋ฏ๋ก, ๊ฐ๋ฐ ์๊ฐ๊ณผ ๋น์ฉ์ ์ ๊ฐํ ์ ์์ต๋๋ค.
3) Flutter์ ๊ฐ์ 2: ๋น ๋ฅธ ๊ฐ๋ฐ ์๋ (Hot Reload)
Flutter๋
Hot Reload ๊ธฐ๋ฅ์ ์ ๊ณตํ์ฌ
์ฑ์ ๋ค์ ์คํํ์ง ์๊ณ ๋
์ฝ๋ ๋ณ๊ฒฝ ์ฌํญ์
์ฆ์ ๋ฐ์ํ ์ ์์ต๋๋ค.
โ Hot Reload์ ์ฅ์
- ๐ ๋น ๋ฅธ UI ์ ๋ฐ์ดํธ: ๊ฐ๋ฐ ์ค์๋ ์ฆ๊ฐ์ ์ธ UI ๋ฐ์
- ๐ ๋๋ฒ๊น ์๋ ์ฆ๊ฐ: ์ค์๊ฐ์ผ๋ก ์ฝ๋ ์์ ํ์ธ ๊ฐ๋ฅ
- ๐ ์์ฐ์ฑ ํฅ์: ์ฑ์ ๋ค์ ๋น๋ํ ํ์ ์์
โก๏ธ Flutter๋ ๋ค์ดํฐ๋ธ๋ณด๋ค ํจ์ฌ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐํ ์ ์๋ ํ๊ฒฝ์ ์ ๊ณตํฉ๋๋ค!
4) Flutter์ ๊ฐ์ 3: ๋์ ์ฑ๋ฅ๊ณผ ๋ค์ดํฐ๋ธ ์์ค์ UI
Flutter๋
์์ฒด ๋ ๋๋ง ์์ง(Skia)์ ์ฌ์ฉํ์ฌ
๋ค์ดํฐ๋ธ์ ๊ฐ๊น์ด ์ฑ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
โ Flutter ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์ด์
- ๋ค์ดํฐ๋ธ ๋ธ๋ฆฟ์ง ์์ด ์์ฒด UI ๋ ๋๋ง
- Dart์ JIT & AOT ์ปดํ์ผ ๋ฐฉ์์ผ๋ก ์ต์ ํ
- ์ ๋๋ฉ์ด์ ์ฑ๋ฅ์ด ๋ฐ์ด๋๊ณ , ๋ถ๋๋ฌ์ด UI ์ ๊ณต
โก๏ธ React Native๋ณด๋ค ์ฑ๋ฅ์ด ๋ฐ์ด๋๋ฉฐ, ๋ค์ดํฐ๋ธ ์ฑ๊ณผ ๊ฑฐ์ ๋์ผํ ์๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
5) Flutter์ ๊ฐ์ 4: ๊ฐ๋ ฅํ UI ๊ตฌ์ฑ (์์ ฏ ์์คํ )
Flutter๋
๋ชจ๋ UI ์์๋ฅผ ์์ ฏ(Widget)
๊ธฐ๋ฐ์ผ๋ก ๊ตฌ์ฑํฉ๋๋ค.
โ Flutter์ UI ํน์ง
- ๋ชจ๋ ๊ฒ์ด ์์ ฏ → UI ์ปค์คํฐ๋ง์ด์ง์ด ์ฉ์ด
- Material Design & Cupertino ์ง์ → Android & iOS ๋ค์ดํฐ๋ธ ์คํ์ผ ์ ์ฉ ๊ฐ๋ฅ
- ๋ฐ์ํ UI ๊ตฌํ์ด ์ฌ์
โก๏ธ Flutter๋ ๊ธฐ์กด ๋ค์ดํฐ๋ธ UI๋ณด๋ค ๋ ์์ ๋กญ๊ณ ๊ฐ๋ ฅํ UI ๋์์ธ์ด ๊ฐ๋ฅํฉ๋๋ค!
โ ข. ๊ฒฐ๋ก : ์ Flutter๋ฅผ ์ ํํด์ผ ํ ๊น? ๐
Flutter์ ํ์ฌ์ ๋ฏธ๋
Google์ด ์ ๊ทน์ ์ผ๋ก ์ง์ํ๋
Flutter๋
์ด๋ฏธ ๋ง์ ๊ธ๋ก๋ฒ ๊ธฐ์ ์์ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ,
์์ผ๋ก๋ ๊ณ์ ๋ฐ์ ํ ์์ ์ ๋๋ค.
โ Flutter๋ฅผ ์ ํํด์ผ ํ๋ ์ด์
โ ๋จ ํ๋์ ์ฝ๋๋ก ์ฌ๋ฌ ํ๋ซํผ ๊ฐ๋ฐ ๊ฐ๋ฅ
โ ๋น ๋ฅธ ๊ฐ๋ฐ ์๋ (Hot Reload)
โ ๋ค์ดํฐ๋ธ ์์ค์ ์ฑ๋ฅ ์ ๊ณต
โ ๊ฐ๋ ฅํ UI ๋์์ธ ์์คํ
Flutter๋ฅผ ๋ฐฐ์์ผ ํ๋ ์ด์
ํ์ฌ ๋ชจ๋ฐ์ผ & ์น & ๋ฐ์คํฌํฑ์
๋ชจ๋ ์ง์ํ๋ ํฌ๋ก์ค ํ๋ซํผ ๊ฐ๋ฐ์ด
์ค์ํด์ง๊ณ ์์ต๋๋ค.
โก๏ธ ๊ฐ๋ฐ ์๋๋ฅผ ๋์ด๊ณ , ์ ์ง๋ณด์๋ฅผ ์ฝ๊ฒ ํ๊ณ ์ถ๋ค๋ฉด?
๐ Flutter๊ฐ ์ต๊ณ ์ ์ ํ์ด ๋ ๊ฒ์
๋๋ค! ๐