์ด๋ฒ์๋ Flutter์ ํน์ง๊ณผ ์ฅ๋จ์ ์ ๋ํด์ ๊ณต๋ถ๋ฅผ ํ์๊ณ ์ฌ๋ฌ๋ถ๋ค๊ณผ ๊ณต์ ํ๊ณ ์ ํฉ๋๋ค. Flutter์ ๋ํด์ ๊ณต๋ถ๋ฅผ ํด๋ณด๋ ์ฅ์ ๋ ์ถฉ๋ถํ ๋งค๋ ฅ์ ์ด์ง๋ง ๋จ์ ๋ ๋ช ํํ๋๋ฐ์. ์์ผ๋ก Google์ด ์ด๋ป๊ฒ ์ด๋ฐ ๋จ์ ์ ๊ทน๋ณตํด๋๊ฐ๊ณ ์ฅ์ ์ ๊ทน๋ํ์์ผ๋๊ฐ์ง ๊ถ๊ธํฉ๋๋ค. ๋ง์ฝ ์ด ๊ธ์ ์ฝ๊ณ Flutter๋ฅผ ๊ณต๋ถํด๋ณด์ค ๋ง์์ด ์๊ธฐ์ จ๋ค๋ฉด.
์๋์ ๊ธ์ ํตํด Flutter๋ฅผ์ค์นํด๋ณด์ธ์!
Flutter / 1ํ : Flutter ์์, ์ค์นํ๊ธฐ
๋ชฉ์ฐจ
1. Flutter์ ํน์ง
2. Flutter์ ์ฅ์
3. Flutter์ ๋จ์
4. ๋ง์น๋ฉด์
Flutter์ ํน์ง
1. Flutter๋
Flutter๋ Google์์ ๋ฐํํ ํฌ๋ก์ค ํ๋ซํผ SDK์ ๋๋ค. Flutter๋ฅผ ํตํด ์๋๋ก์ด๋์ IOS ์ต๊ทผ์๋ ์น๊น์ง ๋์์ ๊ฐ๋ฐ์ด ๊ฐ๋ฅํฉ๋๋ค. ํฌ๋ก์ค ํ๋ซํผ์ Xamarin, React Native์ ๊ฐ์ด ๋ค๋ฅธ ํ๋ซํผ๋ ์กด์ฌํ๋๋ฐ์. ๊ทธ๋ผ์๋ Flutter๊ฐ ์ฃผ๋ชฉ์ ๋ฐ๋ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๊ธฐ๋ณธ์ ์ผ๋ก ๊ตฌ๊ธ์ด ๋ง๋ค์๊ธฐ ๋๋ฌธ์ ์ ๋ขฐ๋์ ๋ฐ์ ์ ๊ฐ๋ฅ์ฑ์ด ๋๋ค.
- ์ปดํ์ผ์ ์ธ ํน์ง๋๋ถ์ ๋ค๋ฅธ ํฌ๋ก์ค ํ๋ซํผ๋ณด๋ค ์๋๊ฐ ๋น ๋ฅด๋ค.
- ๊ตฌ๊ธ์ ์๋ก์ด OS (ํจ์์) ์์ ์ค์ถ์ ์ธ ์ญํ ์ ํ ๊ฐ๋ฅ์ฑ์ด ๋๋ค.
2. ๋ค์ดํฐ๋ธ ARM ์ฝ๋๋ก ๋ฏธ๋ฆฌ ์ปดํ์ผ ๋๋ค.
React Native๋ ๋ฐํ์์ JS Bridge๋ฅผ ํตํด์ ์ปดํ์ผ์ ํ์์ต๋๋ค. ํ์ง๋ง Flutter์๋ Bridge๊ฐ ์กด์ฌํ์ง ์์ผ๋ฉฐ Native ์ฝ๋๋ก ๋ฏธ๋ฆฌ ์ปดํ์ผ ๋ฉ๋๋ค. ๋ฐ๋ผ์ Flutter๋ React Native๋ณด๋ค๋ ์ฑ๋ฅ์ด ํฅ์๋์ต๋๋ค.
๊ธฐ์กด ํฌ๋ก์คํ๋ซํผ์ ์ํฌ๋ ์ค๊ฑด์ธ ์ฑ๋ฅ ๋ถ๋ถ์ด ์ด๋์ ๋ ํฅ์๋ ๊ฒ ์ ๋๋ค.๊ทธ๋๋ ์ฌ์ ํ ํด๋ํฐ ์ฑ๋ฅ์ด ์ค์ํ ์ฑ(AR ์ฑ)์์๋ Native(Android, IOS)๊ฐ ์ ๋์ ์ผ๋ก ์ฐ์ธํฉ๋๋ค. ํ์ง๋ง ํด๋ํฐ ์ฑ๋ฅ์ด ๊ทธ๋ ๊ฒ ์ค์ํ ์ฑ์ด ์๋๋ผ๋ฉด, ๋ค๋ฅธ ํฌ๋ก์ค ํ๋ซํผ์ ๋นํด์๋ ์ฐ์ํ ์ฑ๋ฅ์ ๋ฝ๋ผ ์ ์์ต๋๋ค.
3. ๋จ๋ฐํฅ ๋ฐ์ดํฐ ํ๋ฆ ์ํคํ ์ฒ, ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ค.
Flutter๋ ์ํ๋ณ๊ฒฝ์ ๊ธฐ๋ฐ์ผ๋ก ์ฝ๋ฉํฉ๋๋ค. ์ฆ Reactive ํ๋ก๊ทธ๋๋ฐ, ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ์ ๊ธฐ๋ฐ์ผ๋ก ํฉ๋๋ค.์์ผ๋ก Flutter๋ก ๊ฐ๋ฐํ์ค๋StatelessWidget, StatefulWidget, State ๋ฑ์ ํด๋์ค๋ค์ ์์ฃผ ์ฌ์ฉํ์๊ฒ ๋ ๊ฒ ์ ๋๋ค.
๊ธฐ์กด์ Android๋ IOS๋ฅผ ํตํด Reactive Programing์ ๊ฒฝํํด๋ณด์ ๋ถ๋ค์ด๋ผ๋ฉด, ์ด๋ฐ ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ์ด ์ผ๋ง๋ ์ฆ๊ฒ๊ณ ์ ์ฉํ์ง ์์ค ๊ฒ ์ ๋๋ค. Flutter๋ฅผ ์ฌ์ฉํ์๋ฉด ์ด๋ฐ ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ์ ์ง๋ฆด๋๊น์ง ํ์ค ์ ์์ ๊ฒ ์ ๋๋ค.
Flutter์ ์ฅ์
1. ๊ฐ๋ฐ ๋น์ฉ ์ ๊ฐ
๋น์ฐํ ์๋ฆฌ์ด์ง๋ง Flutter๋ ํฌ๋ก์ค ํ๋ซํผ์ด๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฐ๋น์ฉ์ ์๋นํ ์ค์ผ ์ ์์ต๋๋ค. ํนํ ์๋ด๊ธฐ ์คํํธ์ ์ด๋ผ๋ฉด ์ด ์ ์ด ๊ต์ฅํ ๋งค๋ ฅ์ ์ผ๋ก ๋ค๊ฐ์ต๋๋ค. Android๋ฅผ ๊ธฐ์ค์ผ๋ก ์ฑ์ ์ ์ํ๋ ค๋ฉด ์๋นํ ๋ง์ ์ฝ๋๋ค์ ์์ฑํด์ผ ํฉ๋๋ค. ์ด๋ฅผ IOS๋ก ์ถ๊ฐ์ ์ธ ๊ฐ๋ฐ์ ํ ๊ฒ์ ์๊ฐํ๋ฉด ๋ ์ด ํจ์ผ์ ๋๋ก ๊น์ ํ์จ์ด ๋์ต๋๋ค. ๊ฐ๋ฐ์ ๋์งธ์น๊ณ Android, IOS ๋ ๊ฐ์ ์ฑ์ ์ ์ง๋ณด์ํ ๊ฒ์ ์๊ฐํ๋ฉด ์๊ฐ๋งํด๋ ๋์ฐํฉ๋๋ค.
ํ์ง๋ง Flutter๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ฐ ๊ณ ๋ฏผ์ ์ค์ผ ์ ์์ต๋๋ค. Google์ด ๋ง๋ค์๊ธฐ ๋๋ฌธ์ ์ฑ๋ฅ์ ์์ ์ฑ๋ ๋ณด์ฅ๋๊ณ Dart์ ์ปดํ์ผ์ ํน์ง์ ํตํด ์ฑ๋ฅ๋ ๋ณด์ฅ๋ฐ์ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ฌด์๋ณด๋ค๋ Android, IOS๋ฅผ ํ ๋ฒ๋ง ๊ฐ๋ฐํ๋ฉด ๋ฉ๋๋ค.์ ์ง๋ณด์๋ ํ๋์ ์ฝ๋๋ง ์ ์ง๋ณด์ํ๋ฉด ๋ฉ๋๋ค.
Flutter๊ฐ ์๋ฌด๋ฆฌ ๋จ์ ์ด ์กด์ฌํด๋ ์ฌ์ ํ ๋งค๋ ฅ์ ์ธ ๊ฐ์ฅ ํฐ ์ด์ ์ ๋๋ค!
2. ํซ ๋ฆฌ๋ก๋
์ด ๊ธฐ๋ฅ์ React Native์๋ ์๋ ๊ธฐ๋ฅ์ธ๋ฐ์ ๋ง๊ทธ๋๋ก ๋น ๋ฅด๊ฒ ๋ฆฌ๋ก๋๊ฐ ๊ฐ๋ฅํ ๊ธฐ๋ฅ์ ๋๋ค. Flutter์์๋ ์ฝ๋๋ฅผ ํตํด UI๋ฅผ ์์ฑํ๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ์๊ฐ์ ์ธ UI ํธ์ง๊ธฐ๊ฐ ์กด์ฌํ์ง ์์ต๋๋ค. ๊ทธ๋ ๊ธฐ์ ์ฝ๋๋ฅผ ๊ณ ์น ํ์ ๋ค์ compile์ ํตํด UI๋ฅผ ํ์ธํด์ผ ํฉ๋๋ค.
ํซ ๋ฆฌ๋ก๋๋ Flutter์ ์ด๋ฐ ํน์ง์ ๋ณด์ํด์ค๋๋ค. ์ฝ๋๋ฅผ ๊ณ ์น ํ ํซ๋ฆฌ๋ก๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ฉด, ๊ธฐ๋๊ธด ์ปดํ์ผ ๊ณผ์ ์ ๊ฑฐ์น์ง ์๊ณ ๋ ๋น ๋ฅด๊ฒ UI๋ฅผ ํด๋ํฐ์์ ํ์ธํ ์ ์์ต๋๋ค. ์ด๋ฐ ํซ ๋ฆฌ๋ก๋๋ Flutter๊ฐ ์ฌ์ฉํ๋ Dart๋ผ๋ ์ธ์ด๋ฅผ ํตํด์ ๊ฐ๋ฅํ๋ฐ ์ด๋ ๋์ค์ ๋ค๋ค๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
3. UI ์์ ์ฑ
Flutter๋ ๋ค๋ฅธ ํฌ๋ก์ค ํ๋ซํผ์ธ React Native, Xamarin์ด ์ฌ์ฉํ๋ UI ๋ฐฉ์ (UI ๊ตฌ์ฑ ์์์ ๋ํผ ํ์ฉ)๊ณผ๋ ๋ค๋ฆ ๋๋ค. Flutter๋ C++ ๊ทธ๋ํฝ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(Skia)๋ฅผ ์ฌ์ฉํ์ฌ UI๋ฅผ ์ง์ Screen Canvas์์ ๊ทธ๋ฆฝ๋๋ค.
์ด ๋ป์ Flutter๊ฐ ๊ณ ์ ํ UI ๋๋ก์(Skia)์ ๊ฐ์ง๊ณ ์๋ค๋ ๋ป์ด๊ณ , ์ฌ๋ฌ๊ฐ์ง ํ๋ซํผ์ ๋ํด์ ์์ ์ ์ธ UI๋ฅผ ์์ฑํ ์ ์๋ค๋ ๋ป์ ๋๋ค. ๋ง์ฝ Xamarin์ด๋ React Native์๋ค๋ฉด ์ฌ์ฉํ๋ ๋ํผ๊ฐ ํน์ ํ๋ซํผ์์๋ง ์ง์๋๋ ๋ถ์์ฌ๊ฐ ์๊ธธ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ๋ ๋ค๋ฅธ ํ๋ซํผ์ ๋์ฒํ๋ ์ฝ๋๋ฅผ ์ถ๊ฐ์ ์ผ๋ก ์์ฑํด์ผ ํ๊ณ , ์ถ๊ฐ์ ์ผ๋ก ์์ฑํ๋ ์ฝ๋ ํ ์ค๋ง๋ค ์์ค์ด ๊ฐ์ด ๋์ค๊ฒ ๋ ๊ฒ ์ ๋๋ค.
๋คํ์ด๋ Flutter๋ ๊ณ ์ ํ UI ๋๋ก์์ ๊ฐ์ง์ผ๋ก์จ ์ด๋ฐ ๋ฌธ์ ์์ ๋น๊ต์ ์์ ์ ์ ๋๋ค.
Flutter์ ๋จ์
1. Dart๊ฐ ๋ชป์๊ฒผ๋ค.
Dart๊ฐ ๋ง์ ๊ฐ์ ์ ์ด๋ฃจ์ด๋ด๊ธด ํ์ง๋ง ๊ทธ๋๋ ์ฌ์ ํ ์์๋ค๊ณ ๋งํ ์ ๋ ์์ต๋๋ค. ์ฌ๋ฌ๊ฐ์ง์ ์ธ์ด๊ฐ ์์ธ ๋ฏํ ํผ์กํจ์ ์์ง ์ ๋ฆฌ๋์ง ์์๊ณ , ๊น๋ํ๊ณ ์๋ฆ๋ค์ด ์ฝ๋๋ฅผ ์ข์ํ๋ ํ๋ก๊ทธ๋๋จธ์๊ฒ๋ ์์ง ํ๋ ๋์ ์ด๋ผ๊ณ ์๊ฐ๋ฉ๋๋ค. Google์ด ๋ฐ์ด์ฃผ๋ ์ธ์ด์ธ ๋งํผ ์ข ๋ ๊ฐ์ ๋์ผ๋ฉด ํ๋ ๋ฐ๋์ ๋๋ค.
2. ํ๋ฌ๊ทธ์ธ์ด ์ ๋ค.
Flutter๋ 2017๋ 5์์ ์ต์ด ์ถ์๋ฅผ ํ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฌ๋๋ค์๊ฒ ๋๋์ ์ผ๋ก ์๋ ค์ง๊ฒ ๋ ๊ฒ์ Google I/O 2018 ์ ๋๋ค. ์ฆ ๋ง๋ค์ด์ง์ง ์ผ๋ง ์๋๋ค๋ ๊ฒ ์ ๋๋ค. ๋ฐ๋ผ์ ์์ง ์ปค๋ฎค๋ํฐ๋ ํฌ๊ฒ ํ์ฑ๋์ง ์์๊ณ , PlugIn์ ๋ง๋๋ ์ฌ๋๋ ๊ทธ๋ ๊ฒ ๋ง์ง ์์ต๋๋ค. ๊ทธ๋ ๋ค๊ณ PlugIn์ด ์ ๋ค๊ณ ๋ ๋งํ ์ ๋ ์์ง๋ง ์ถฉ๋ถํ๋ค๊ณ ํ ์ ๋๋ก ๋ง์ง๋ ์์ต๋๋ค. Flutter๋ก ๊ฐ๋ฐ์ ํ์ค ๋ ์ด ์ ์ ์ ์ ์ํด์ฃผ์ ์ผ ํ ๊ฒ ๊ฐ์ต๋๋ค.
3. ์ํคํ ์ฒ์ ๊ฐ์ ๋ ํผ๋ฐ์ค๊ฐ ์ ๋ค.
๊ธฐ์กด์ Android, IOS์์๋ ๋์ธ๋ฅผ ์ด๋ฃจ๋ Architrcture๋ค์ด ์กด์ฌํ์ต๋๋ค. Android์ ๊ฐ์ ๊ฒฝ์ฐ์๋ (MVP, MVVM, Clear Architecture) ๋ฑ์ด ์กด์ฌํ์ฃ IOS์ ๊ฐ์ ๊ฒฝ์ฐ์๋ (MVC, MVVM, Viper)๋ฑ์ด ์กด์ฌํ๊ตฌ์
ํ์ง๋ง Flutter๋ ์์ง ์ด๋ ๋คํ ๋งํ ์ํคํ ์ฒ๊ฐ ์์ต๋๋ค. ๊ทธ ์ธ์๋ ๊ฐ๋ฐ ์ปจ๋ฐด์ ์ ์ธ ๋ถ๋ถ์ด๋ ๊ท์น๋ค ๋ํ ์์ง ๋ง์ด ๋ฏธ์ฝํฉ๋๋ค. ๋ฐ๋ผ์ Flutter๋ฅผ ๊ฐ๋ฐํ ๋๋ ์ํคํ ์ฒ์ ๊ท์น๋ค์ ์ง์ ์ ์คํ๊ฒ ๊ณจ๋ผ์ ๊ฐ๋ฐํ์ ์ผ ํฉ๋๋ค.
์ด๋ป๊ฒ ๋ณด๋ฉด ์๋กญ๊ฒ ๋ง๋ค ์ ์์ด์ ํฅ๋ฏธ๋ก์ธ ์ ์๊ฒ ์ง๋ง
์ด๋ป๊ฒ ๋ณด๋ฉด ์ด๋ ต๊ณ ํ๊ฒจ์ด ์ฌ์ ์ด ๋ ์ ์์ต๋๋ค.
๋ง์น๋ฉด์
Flutter๋ฅผ ๊ณต๋ถํ๋ค๋ ๊ฒ์ ์ฐธ ํฅ๋ฏธ๋ก์ด ์ผ์ธ ๊ฒ ๊ฐ์ต๋๋ค.
์์ง ์ด ์ธ์์ด ํ์ํ์ง ์ผ๋ง ์๋๊ธฐ ๋๋ฌธ์ ๋ถ์์ ํ ๋ถ๋ถ๋ ์์ง๋ง
์คํ๋ ค ๊ทธ๋ฐ ๋ถ๋ถ์ด ์ ์๊ฒ๋ ๋์ฑ ๋ ๋งค๋ ฅ์ผ๋ก ๋ค๊ฐ์ค๋ ๊ฒ ๊ฐ์ต๋๋ค.
์ด๋ป๊ฒ ๋ณด๋ฉด ์ง๊ธ Flutter๋ฅผ ์์ํ๋ฉด ์ด ๋๋ผ์ด ๊ธฐ์ ์ ์ ๊ฐ ๋์์ ์ค ์ ์๋ ๊ธฐํ๊ฐ ์์ผ๋๊น์.
์ ๋ ์์ผ๋ก๋ Flutter๋ฅผ ๊ณต๋ถํ๊ณ ์ฌ๋ฌ๋ถ๋ค๊ณผ ๊ณต์ ํ ์๊ฐ์ ๋๋ค.
๊ทธ๋ฆฌ๊ณ ๊ทธ๋ฐ ๊ณผ์ ์ ํตํด์ Flutter์ ๋ฐ์ ์ ๊ธฐ์ฌํ ์ ์๋ ๊ธฐํ๊ฐ ์์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค.
์ฝ์ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค :)
์์ผ๋ก๋ ๊ฐ๋์ฉ ๋ค๋ ค์ ๊ธ์ ์ฝ์ด์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค ใ ใ
'Flutter' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Flutter Provider + '?' ํจํด (feat. ChangeNotifier, Mobx, BLoC, etc..) (0) | 2020.09.12 |
---|---|
Flutter / 4ํ : Flutter์ ์ํ๊ด๋ฆฌ (0) | 2020.08.01 |
Dart / 1ํ : Dart์ ์ค์ํ ๊ฐ๋ (0) | 2020.07.26 |
Flutter / 3ํ : Flutter์ UI์ ๊ดํ์ฌ (0) | 2020.07.24 |
Flutter / 1ํ : Flutter ์์, ์ค์นํ๊ธฐ (Window, Android Studio) (0) | 2020.07.24 |