![](https://blog.kakaocdn.net/dn/b13Ups/btsMjpFPB8G/RdLErsgFJHJLmhqa8DklB1/img.png)
โ . ์๋ก : Flutter๋ ๋ฌด์์ธ๊ฐ?
๐ 1. ํฌ๋ก์ค ํ๋ซํผ ๊ฐ๋ฐ์ ํ์์ฑ
๐ 2. ๊ธฐ์กด ๊ฐ๋ฐ ๋ฐฉ์๊ณผ Flutter์ ์ฐจ์ด
โ ก. ๋ณธ๋ก : Flutter์ ์ฃผ์ ํน์ง
๐ 1. ํ ๋ฒ์ ์ฝ๋๋ก ๋ชจ๋ ํ๋ซํผ ๊ฐ๋ฐ
๐ 2. ๋น ๋ฅธ ๊ฐ๋ฐ์ ๊ฐ๋ฅํ๊ฒ ํ๋ Hot Reload
๐ 3. ๊ฐ๋ ฅํ UI ๋์์ธ ์์คํ : ์์ ฏ ๊ธฐ๋ฐ ๊ตฌ์กฐ
๐ 4. ์ฐ์ํ ์ฑ๋ฅ: ๋ค์ดํฐ๋ธ ์ฑ๋ฅ์ ๊ทผ์
โ ข. ๊ฒฐ๋ก : Flutter๊ฐ ๊ฐ์ ธ์ค๋ ๋ณํ
๐ 1. Flutter๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ์ด์
๐ 2. ์์ผ๋ก์ ์ ๋ง
โ . ์๋ก : Flutter๋ ๋ฌด์์ธ๊ฐ? ๐ง
ํฌ๋ก์ค ํ๋ซํผ ๊ฐ๋ฐ์ ํ์์ฑ
๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ์ ํ๋ ค๋ฉด
Android์ iOS
๋ ๊ฐ์ ํ๋ซํผ์
์ง์ํด์ผ ํฉ๋๋ค.
์ ํต์ ์ผ๋ก๋
Android๋ Java/Kotlin,
iOS๋ Swift/Objective-C๋ฅผ
์ฌ์ฉํด์ผ ํ์ฃ .
ํ์ง๋ง ์ด๋ ๊ฒ ํ๋ฉด
๊ฐ ํ๋ซํผ๋ง๋ค
์ฝ๋๋ฅผ ๋ฐ๋ก ์์ฑํด์ผ ํ๊ณ ,
๊ฐ๋ฐ ๋น์ฉ๊ณผ
์ ์ง๋ณด์ ๋น์ฉ์ด ์ฆ๊ฐํฉ๋๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ
ํด๊ฒฐํ๊ธฐ ์ํด ๋์จ ๊ฒ์ด
ํฌ๋ก์ค ํ๋ซํผ ๊ฐ๋ฐ ํ๋ ์์ํฌ์ ๋๋ค.
๋ํ์ ์ผ๋ก
React Native,
Xamarin, Flutter
๋ฑ์ด ์์ผ๋ฉฐ,
์ด ์ค์์๋
Flutter๋ ๋น ๋ฅธ ์๋์
๋ค์ดํฐ๋ธ ์ฑ๋ฅ์ ์ ๊ณตํ์ฌ
๋ง์ ๊ฐ๋ฐ์๋ค์๊ฒ
์ฃผ๋ชฉ๋ฐ๊ณ ์์ต๋๋ค.
๊ธฐ์กด ๊ฐ๋ฐ ๋ฐฉ์๊ณผ Flutter์ ์ฐจ์ด
Flutter๋
๋จ์ผ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ฌ์ฉํ์ฌ
Android, iOS, ์น,
๋ฐ์คํฌํฑ๊น์ง
์ฌ๋ฌ ํ๋ซํผ์์
์ฑ์ ์คํํ ์ ์์ต๋๋ค.
๊ธฐ์กด์ ํฌ๋ก์ค ํ๋ซํผ
ํ๋ ์์ํฌ์ ๋ฌ๋ฆฌ,
Flutter๋
๋ค์ดํฐ๋ธ ๋ธ๋ฆฟ์ง๋ฅผ ์ฌ์ฉํ์ง ์๊ณ
์์ฒด ๋ ๋๋ง ์์ง(Skia)์ ํ์ฉํ์ฌ
๋์ฑ ๊ฐ๋ ฅํ ์ฑ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
โ ก. ๋ณธ๋ก : Flutter์ ์ฃผ์ ํน์ง ๐
1) ํ ๋ฒ์ ์ฝ๋๋ก ๋ชจ๋ ํ๋ซํผ ๊ฐ๋ฐ
Flutter์ ๊ฐ์ฅ ํฐ ์ฅ์ ์
ํ๋์ ์ฝ๋๋ก
Android, iOS, ์น, ๋ฐ์คํฌํฑ๊น์ง
๊ฐ๋ฐ ๊ฐ๋ฅํ๋ค๋ ์ ์ ๋๋ค.
์ฆ, ๊ฐ๋ฐ์๋
ํ ๋ฒ๋ง ์ฝ๋๋ฅผ ์์ฑํ๋ฉด
๋ชจ๋ ํ๋ซํผ์์ ์คํํ ์ ์์ด,
๊ฐ๋ฐ ์๋๋ฅผ ํฌ๊ฒ ํฅ์ํ ์ ์์ต๋๋ค.
โ ๊ธฐ์กด ๋ค์ดํฐ๋ธ ๊ฐ๋ฐ๊ณผ ๋น๊ต
๊ฐ๋ฐ ๋ฐฉ์์ฝ๋ ๊ณต์ ์ฌ๋ถ๊ฐ๋ฐ ์๋์ ์ง๋ณด์
๊ฐ๋ฐ ๋ฐฉ์ | ์ฝ๋ ๊ณต์ ์ฌ๋ถ | ๊ฐ๋ฐ ์๋ | ์ ์ง๋ณด์ |
๋ค์ดํฐ๋ธ(Android/iOS) | X (๊ฐ ํ๋ซํผ๋ง๋ค ๋ฐ๋ก ๊ฐ๋ฐ) | ๋๋ฆผ | ๋ณต์ก |
React Native | ์ผ๋ถ ์ฝ๋ ๊ณต์ ๊ฐ๋ฅ (๋ค์ดํฐ๋ธ ๋ธ๋ฆฟ์ง ํ์) | ์ค๊ฐ | ์ค๊ฐ |
Flutter | โ 100% ์ฝ๋ ๊ณต์ ๊ฐ๋ฅ | โ ๋น ๋ฆ | โ ๊ฐ๋จ |
Flutter๋
์์ ํ ํฌ๋ก์ค ํ๋ซํผ ์ง์์
์ ๊ณตํ๋ฉด์๋,
๋ค์ดํฐ๋ธ์ ๊ฐ๊น์ด ์ฑ๋ฅ์
๋ผ ์ ์๋ ๊ฐ๋ ฅํ ํ๋ ์์ํฌ์ ๋๋ค.
2) ๋น ๋ฅธ ๊ฐ๋ฐ์ ๊ฐ๋ฅํ๊ฒ ํ๋ Hot Reload
Flutter์
Hot Reload ๊ธฐ๋ฅ์
์ฌ์ฉํ๋ฉด
์ฑ์ ๋ค์ ์คํํ์ง ์๊ณ ๋
์ฝ๋ ๋ณ๊ฒฝ ์ฌํญ์
์ฆ์ ๋ฐ์ํ ์ ์์ต๋๋ค.
โ Hot Reload์ ์ฅ์
- ์ฑ์ ๋ค์ ์คํํ ํ์ ์์ → ์ฆ์ ์ฝ๋ ๋ฐ์
- UI ๋ณ๊ฒฝ์ ์ค์๊ฐ์ผ๋ก ํ์ธ ๊ฐ๋ฅ
- ๊ฐ๋ฐ ์๋ ํฅ์ & ์์ฐ์ฑ ์ฆ๊ฐ
์๋ฅผ ๋ค์ด,
๋ฒํผ์ ์์์ ๋ฐ๊พธ๊ณ ์ ์ฅํ๋ฉด,
์ฆ์ UI์ ๋ฐ์๋ฉ๋๋ค.
์ด ๊ธฐ๋ฅ ๋๋ถ์
Flutter์ ๊ฐ๋ฐ ํ๊ฒฝ์
๋งค์ฐ ๋น ๋ฆ ๋๋ค.
3) ๊ฐ๋ ฅํ UI ๋์์ธ ์์คํ : ์์ ฏ ๊ธฐ๋ฐ ๊ตฌ์กฐ
Flutter์์๋
๋ชจ๋ UI ์์๊ฐ
"์์ ฏ"์ผ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
๋ฒํผ, ํ ์คํธ, ์ด๋ฏธ์ง๋ฟ๋ง ์๋๋ผ
์ฑ์ ์ ์ฒด ๋ ์ด์์๊น์ง๋
์์ ฏ์ผ๋ก ๊ตฌํ๋ฉ๋๋ค.
โ Flutter์ UI ํน์ง
- ๋ชจ๋ ๊ฒ์ด ์์ ฏ์ด๋ค! → ์ธ๋ฐํ ์ปค์คํฐ๋ง์ด์ง ๊ฐ๋ฅ
- Material Design & Cupertino ์ง์ → Android, iOS ์คํ์ผ ์๋ ์ ์ฉ
- ๋น ๋ฅด๊ณ ์ ์ฐํ UI ๊ตฌ์ฑ ๊ฐ๋ฅ
Flutter์
์์ ฏ ๊ธฐ๋ฐ ์์คํ ๋๋ถ์,
๋ณต์กํ UI๋
์ฝ๊ฒ ๊ตฌํํ ์ ์์ผ๋ฉฐ,
๊ธฐ์กด UI ํ๋ ์์ํฌ๋ณด๋ค
์ ์ฐํ ๋์์ธ์ด ๊ฐ๋ฅํฉ๋๋ค.
4) ์ฐ์ํ ์ฑ๋ฅ: ๋ค์ดํฐ๋ธ ์ฑ๋ฅ์ ๊ทผ์
Flutter๋
๋ค๋ฅธ ํฌ๋ก์ค ํ๋ซํผ
ํ๋ ์์ํฌ์ ๋ฌ๋ฆฌ,
๋ค์ดํฐ๋ธ ๋ธ๋ฆฟ์ง๋ฅผ ์ฌ์ฉํ์ง ์๊ณ
์์ฒด ๋ ๋๋ง ์์ง(Skia)์ ์ด์ฉํฉ๋๋ค.
โ ๋ค์ดํฐ๋ธ ์ฑ๋ฅ์ ์ ๊ณตํ๋ ์ด์
- Skia ์์ง ์ฌ์ฉ → UI๋ฅผ ์ง์ ๋ ๋๋งํ์ฌ ๋น ๋ฆ
- Dart ์ธ์ด์ Just-In-Time (JIT) & Ahead-Of-Time (AOT) ์ปดํ์ผ ์ง์
- ์ ๋๋ฉ์ด์ ๋ฐ ๊ทธ๋ํฝ ์ฑ๋ฅ ์ต์ ํ
์ด ๋๋ถ์ Flutter ์ฑ์
๋ค์ดํฐ๋ธ ์ฑ๊ณผ
๊ฑฐ์ ๋์ผํ ์๋๋ก ์คํ๋๋ฉฐ,
ํนํ ์ ๋๋ฉ์ด์ ์ด
๋ถ๋๋ฝ๊ฒ ๋์ํ๋ ์ฅ์ ์ด ์์ต๋๋ค.
โ ข. ๊ฒฐ๋ก : Flutter๊ฐ ๊ฐ์ ธ์ค๋ ๋ณํ ๐
Flutter๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ์ด์
Flutter๋ ๋น ๋ฅธ ๊ฐ๋ฐ,
๊ฐ๋ ฅํ UI, ๋ค์ดํฐ๋ธ ์ฑ๋ฅ์ ๊ฐ์ถ
ํ๋์ ์ธ ํฌ๋ก์ค ํ๋ซํผ
ํ๋ ์์ํฌ์ ๋๋ค.
โ
ํ ๋ฒ์ ์ฝ๋ ์์ฑ์ผ๋ก ๋ชจ๋ ํ๋ซํผ ์ง์
โ
๋น ๋ฅธ UI ์์ ์ด ๊ฐ๋ฅํ Hot Reload ๊ธฐ๋ฅ
โ
๊ฐ๋ ฅํ ์์ ฏ ๊ธฐ๋ฐ ๋์์ธ ์์คํ
โ
๋ค์ดํฐ๋ธ์ ๊ฐ๊น์ด ์ฑ๋ฅ ์ ๊ณต
์ด๋ฐ ์ฅ์ ๋๋ถ์
์คํํธ์ ๋ถํฐ ๋๊ธฐ์ ๊น์ง
Flutter๋ฅผ
์ ๊ทน์ ์ผ๋ก ๋์ ํ๊ณ ์์ผ๋ฉฐ,
์์ผ๋ก๋ Flutter์ ์ธ๊ธฐ๋
๋์ฑ ์ฆ๊ฐํ ๊ฒ์ ๋๋ค.
๐ฅ ์์ผ๋ก์ ์ ๋ง: Flutter๋ ๋ฏธ๋์ ํ์ค์ด ๋ ๊น?
Google์
์ง์์ ์ผ๋ก
Flutter๋ฅผ ๋ฐ์ ์ํค๊ณ ์์ผ๋ฉฐ,
์ต๊ทผ์๋
Flutter Web๊ณผ
Flutter Desktop๋
์ง์ํ๊ธฐ ์์ํ์ต๋๋ค.
์์ผ๋ก๋ Flutter๊ฐ
๋ชจ๋ฐ์ผ ์ฑ๋ฟ๋ง ์๋๋ผ
์น, ๋ฐ์คํฌํฑ,
์๋ฒ ๋๋ ์์คํ ๊น์ง
ํ์ฅ๋ ๊ฐ๋ฅ์ฑ์ด ํฝ๋๋ค.
์ง๊ธ ์์ํด๋ ๋ฆ์ง ์์ Flutter! ๐
์ ๋ ์์ผ๋ก ์ด์ฌํ ๊ณต๋ถํ๋ฉด์
์ ๋ณด ๊ณต์ ํฌ์คํ ์ผ๋ก
์ ๋ฆฌํ๋ ค๊ณ ํฉ๋๋ค.
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/005.gif)