๊ฐ์
์ด๋ฒ ์ฃผ์ ๋ Flutter web์ ๋น๋ํ ๋ ์ฌ์ฉํ๋ --web-renderer์ ๋ํ์ ์ธ ๋ ๊ฐ์ง ์ต์
html, canvaskit์ ๋ํด ์์๋ณด๋ ค๊ณ ํ๋ค.
์ด๋ฒ ์ฃผ์ ์์๋ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ๋ ๋๋ฌ๋ฅผ ์ ์ธํ wasm์ ๋ณดํต ๋ ๋๋ฌ๋ผ๊ณ ํ์ง ์์ ์ด๋ฒ ๊ธ์์๋ ๋
ผํ์ง ์๋๋ก ํ๊ฒ ๋ค.
์ผ๋ง ์ ์ ํ๋ฌํฐ์ ์ ๋๋ฉ์ด์
์ ์ต๋ํ ํ์ฉํ ํ๋ฌํฐ ์น์ ๋ง๋ค๊ณ ์์๋ค.
๊ฐ๋ฐ์ฉ PC์ ์ฑ๋ฅ์ด ์ข์ ์ต๋ํ์ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ ๋ชน์ ์๋ฆ๋ค์ด ๋์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ค๊ณ ํ๋ค.
๊ทธ๋ฆฌ๊ณ ์ค๊ฐ์ ๋ ์์ฑ์ ํ ํ ๋ฐฐํฌ ํ
์คํธ๋ฅผ ์ํด ์๋ฒ PC์ ์๋ Nginx๋ฅผ ์ด์ฉํด ๋ฐฐํฌ๋ฅผ ํ๋ค.
์์๋๋ก ๋ด๊ฐ ์ฃผ๋ก ์ฌ์ฉํ๋ ๋งฅ๋ฏธ๋์์ ๋ฐฐํฌ๋ ์น์ฌ์ดํธ๋ก ์ ๊ทผํ์ ๋ ๊ฐ๋ฐํ ๋์ ๊ฐ์ ๋ชจ์ต์ผ๋ก ์ ๋ ๋๋ง์ด ๋์๋ค.
ํ์ง๋ง ๋ด๊ฐ ๊ฐ์ง๊ณ ์๋ ๊ธฐ๊ธฐ ์ค ์ฑ๋ฅ์ด ๋น๊ต์ ๋ฎ์ ์๋๋ก์ด๋ํฐ์์ ํ๋ฌํฐ ์น์ฌ์ดํธ๋ฅผ ์ ๊ทผํ์ ๋ ์ฒ์ฐธํ ์ฑ๋ฅ์ ๋ณด์ฌ์คฌ๋ค.
๊ฐ์ฅ ๋ฌธ์ ๊ฐ ๋ ๋ถ๋ถ์ ๋ฌด๊ฑฐ์ด Gif, ์ค์๊ฐ ์ ๋๋ฉ์ด์ , ๋ธ๋ฌํจ๊ณผ์๋ค.
๋ง์ฐ์ค ์ปค์๋ฅผ ์์ง์ผ ๋ ํฌ์ง์ ์ ์์น๋ฅผ ํ์ ํด UI๊ฐ ์์ง์ด๋๋ก ๊ตฌํ์ ํด๋์๋๋ฐ, ๋๋ฌด ์ฆ์ state๋ณํ์ UI ์ฌ๊ตฌ์ฑ์ผ๋ก ์ธํด ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๋ ๋ฌธ์ ๊ฐ ์์๋ค.
๊ทธ๋ฌ๋ ์ด๋ฅผ ์ ๊ฑฐํ์ฌ๋ 9MB๊ฐ ๋์ด๊ฐ๋ Gif๋ ์ด๊ธฐ ๋ก๋ฉ์๋๋ฅผ ๋ชน์ ๋๋ฆฌ๊ฒ ๋ง๋ค์๊ณ , ๋ธ๋ฌํจ๊ณผ๋ ๋ ๊ฐ ์ด์์ ๋ธ๋ฌ๊ฐ ๊ฒน์น๊ฒ ๋ ๋ ์ต์ ์ ์ฑ๋ฅํ๋ฝ์ ๋ฐ์์์ผฐ๋ค.
ํนํ ๋ธ๋ฌ๋ฌธ์ ๋ ํ์ธ์ ํด๋ณด๋ ์น์์๋ ๋ํ๋๋ ๋ํ์ ์ธ ๋ฌธ์ ์ ์ด์๊ณ ๋ด๊ฐ html๋ก ์น ๋ ๋๋ฌ๋ฅผ ์ฌ์ฉํ์ ๋ ๋์ผํ ์ฆ์์ด ๋ํ๋ฌ์๋ค.
๊ทธ๋์ ๋ก๋ฉ์๋๊ฐ ์กฐ๊ธ ๋๋ฆฌ์ง๋ง ๋ ๋๋ง ๋ฐฉ์ ์์ฒด๊ฐ ๋ค๋ฅธ canvaskit์ผ๋ก ๊ตฌํํ๋ฉด ๋ ํธํ์ง ์์๊น?๋ผ๋ ์๊ฐ์ผ๋ก ๋ค์ ๋ฐฐํฌ๋ฅผ ํ๋๋ฐ, ์ด๋ฒ์๋ ์ ์ฌ์ ๊ธฐ๊ธฐ์์์ ํ๋ ์์ด ์ต์ ์ด์๋ ๊ฒ์ด๋ค.
๋จผ๊ฐ html์ ์ฌ์ฉํ๋ฉด ๋ธ๋ผ์ฐ์ ์ ๋ค์ดํฐ๋ธ ์ฑ๋ฅ์ ์ ํ์ฉํ๋ฉด์ ํธํ์ฑ๋ ์ข์ ๊ฒ ๊ฐ์๋ฐ UI ์ฌ์ฉ์ ์ ํ์ ์ด ๋๋ฌด ๋ง์ ๋๋์ด๊ณ , canvaskit์ ์ฌ์ฉํ๋ฉด ์ํ๋ ํํ์ UI๋ฅผ ์ ํํ๊ฒ ๊ตฌํํ๊ณ ๋ ๋ถ๋๋ฌ์ด ํ๋ฉด์ด ์์ฑ๋๋ ๋๋์ด์ง๋ง ํธํ์ฑ์ด ๋ง์ด ๋จ์ด์ง๋ ๋๋์ด์๋ค.
WebRenderer?
์ด๋ฆ์์ ์ ์ ์๋ฏ์ด, ํ๋ฌํฐ์์ WebRenderer๋ผ๋ ๊ฒ์ Web ์์์ ๋ด๊ฐ ๋น๋ํ Flutter์ Dart์ฝ๋๋ฅผ ๊ทธ๋ ค์ฃผ๋ ๋ฐฉ์์ ๋งํ๋ค. ์์ ์๊ธฐํ๋ฏ, HTML ๋ฐฉ์๊ณผ Cavaskit ๋ฐฉ์์ด ์๋ค.
๋ ๋ ๋๋ฌ ๋ฐฉ์ ๋ชจ๋ ์ฅ์ ๊ณผ ๋จ์ ์ด ๋๋๋ผ์ง๊ธฐ ๋๋ฌธ์ ์ํฉ๊ณผ ์๊ธฐ์ ์ ํ๊ฒ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ ๋ณด์ธ๋ค.
์ฐ์ ์๋์ ๊ทธ๋ฆผ์ ๋ชจ๋ฐ์ผ์ด๋ PC์์ ํ๋ฌํฐ๊ฐ ์ ํต์ ์ผ๋ก UI๋ฅผ ๊ตฌ์ฑํ๋ ๋์ํ๋ค.
IOS, Android, Mac, Windows ๋ฑ ๋ค์ดํฐ๋ธ OS์์๋ ์์ฒด ์์ง์ ํ์ฉํ์ฌ ํ๋ฌํฐ์ UI๋ฅผ ๊ทธ๋ฆฌ๋๋ก ํ๊ณ ์๋ค.
ํ์ง๋ง ์น์ ์ด๋ฌํ ๊ธฐ๋ณธ ์์ง์ ํ๊ณ๊ฐ ์์ด ๋ ๊ฐ์ง ์๋ฃจ์ ์ ์ ์ํ๊ฒ ๋์๋ค.
์ฒซ ๋ฒ์งธ๋ HTML, CSS, Canvas API๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ์์ ํตํด HTML ๋ ๋๋ฌ๋ฅผ ๊ตฌ์ถํ๋ ๊ฒ์ด์๋ค.
Dart๊ฐ Javascript๋ฅผ ๋์ฒดํ๊ธฐ ์ํ ์ธ์ด๋ก ๋์จ ๋งํผ javascript๋ก ๋ณํํ๋ ์์ ์ด ๊ฐ๋จํ๋ค๊ณ ํ๋ค.
๋ ๋ฒ์งธ๋ CanvasKit์ WASM(Web Assembly)์ ํตํด ์์ฑ๋ Skia๋ฅผ ์น์ผ๋ก ๊ฐ์ ธ์ค๋ ๊ฒ์ด์๋ค.
์ด๋ HTML ๋ ๋๋ฌ์๋ ๋ฌ๋ฆฌ, HTML, CSS์ ์์กดํ์ง ์๊ณ ๋ ๋ฆฝ์ ์ผ๋ก ๋ ๋๋ง์ ์ํํ๊ฒ ๋์๋ค.
๋ฐ๋ผ์ ๋ธ๋ผ์ฐ์ ๊ทธ๋ํฝ ์คํ์ ๊ฐ์ฅ ๋น ๋ฅธ ์ก์ธ์ค๊ฐ ๊ฐ๋ฅํด์ก๊ณ ๋ชจ๋ฐ์ผ ๋์์ผ๋ก ๋ฐ์ด๋ ๊ทธ๋ํฝ์ ๋ณด์ฌ์ค ์ ์๊ฒ ๋์๋ค.
์๋์ ๊ทธ๋ฆผ์ Flutter Web์ UI๋ฅผ ๊ตฌ์ฑํ๋ ๋์ํ์ด๋ค.
์น์์๋ ์ด์ฒ๋ผ UI๋ฅผ ๊ทธ๋ฆฌ๋ ๋ฐฉ์ ์์ฒด๊ฐ ๋ค๋ฅธ ๋ค์ดํฐ๋ธ OS๋ค๊ณผ๋ ๋ค๋ฅด๊ณ ๊ทธ ์์์๋ ๋๋ ์ง๋ ๋ชจ์ต์ ๋ณด์ธ๋ค.
๋๋ฌธ์ ๋ค์ดํฐ๋ธ OS์์ ๊ฐ์ ์ด์๋ Hot reload ์ญ์ ์ ํ ๋ค๋ฅธ ๋ ๋๋ง ๋ฐฉ์์ผ๋ก ์ธํด ์น์์๋ ์ฌ์ฉํ ์ ์๊ฒ ๋์๊ณ , ์น์์ ๋ง์ ๋ ๋ ๊ฐ์ง ๋ ๋๋ง ๋ฐฉ์์ผ๋ก ์ธํด ์ ํ์ ๊ฐ๋ฆผ๊ธธ์ ๋์ผ ์๋ฐ์ ์๋ค.
Flutter Web์ผ๋ก ๋ ๋๋ง ๋ฐฉ์์ ์ ํํ๊ธฐ ์ํด์๋ ๋ช ๋ น์ค ์ต์ ์ ์ฌ์ฉํ๋ฉด ๋๋ค.
flutter run -d chrome --web-renderer html
flutter run -d chrome --web-renderer canvaskit
๋ง์ฝ ๋ช ๋ น์ค์ ์ ๋ ฅํ์ง ์๋๋ค๋ฉด auto๋ก ๋์ํ๊ฒ ๋์ด ๋ฐ์คํฌํฑ์์๋ canvaskit, ๋ชจ๋ฐ์ผ์์๋ html๋ก ์๋๋๊ฒ ๋๋ค.
๋ช ๋ น์ค ๋ฐฉ์์ด ์๋ web/index.html์ ์์ค์ฝ๋๋ฅผ ์์ ํ์ฌ ๊ฐ์ ๋ก ์ฌ์ ์ ํ๋ ๋ฐฉ๋ฒ๋ ์๋ค.
<body>
<script>
let useHtml = true;
window.addEventListener('load', function(ev) {
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: function(engineInitializer) {
// Run-time engine configuration
let config = {
renderer: useHtml ? "html" : "canvaskit",
};
engineInitializer.initializeEngine(config).then(function(appRunner) {
appRunner.runApp();
});
}
});
});
</script>
</body>
๋ ๋๋ง ๋ฐฉ์ ์ ํ์ ๋ํ ์์ธํ ๋ด์ฉ์ ์๋ Flutter ๊ณต์ ๋ฌธ์๋ฅผ ์ฐธ์กฐ
https://docs.flutter.dev/platform-integration/web/renderers
Web renderers
Choosing build modes and renderers for a Flutter web app.
docs.flutter.dev
HTML๊ณผ CanvasKit์ ์ฅ๋จ์
HTML
์ฅ์
- ๋ฒ๋ค์ ํฌ๊ธฐ๊ฐ ์๋ค.
- ๋ ๋น ๋ฅธ ๋ก๋ฉ
- ๋ค์ดํฐ๋ธ ํ ์คํธ ๋ ๋๋ง์ ์ฌ์ฉ (ํด์๋์ ๋ง๋ ๊น๋ํ ๊ธ์จ์ฒด)
๋จ์
- SVG๋ฅผ ์ฌ์ฉํ ๋ ์ฝ๊ฐ์ ์ค๋ฅ๊ฐ ์๋ค.
- Flutter Canvas์์ ์ฌ์ฉํ๋ ๋ช๋ช API๋ฅผ ์ฌ์ฉ ๋ชป ํ ์๋ ์๋ค.
CanvasKit
์ฅ์
- Flutter ๋ชจ๋ฐ์ผ, ๋ฐ์คํฌํฑ๊ณผ ๊ฐ์ฅ ๋์ผํ UI
- ๋ธ๋ผ์ฐ์ ์ ํ๊ฒฝ๊ณผ ๋ณ๊ฐ๋ก ๋ ๋ฆฝ์ ์ผ๋ก ๊ตฌ์ฑ
๋จ์
- ๋น๊ต์ ํฐ ๋ฒ๋ค ํฌ๊ธฐ (HTML๋ณด๋ค ์ฝ 2mb ์ ๋ ๋ ํฌ๋ค)
- ๋ค์ดํฐ๋ธ ํ ์คํธ ๋ ๋๋ง์ ์ง์ํ์ง ์๋๋ค
- CORS ๋ฌธ์
๋ ๋๋ฌ ๊ฐ์ ์ฑ๋ฅ ๋น๊ต
Chrome Lighthouse๋ฅผ ํตํด ์๋์ ์ฌ์ง์ฒ๋ผ ๋ ๋ ๋๋ง ๊ฐ ์ฑ๋ฅ ์ฐจ์ด๋ฅผ ํ์ธํ ์ ์๋ค.
๋ ๋ ๋๋ฌ ๋ชจ๋ ๋์ผํ PC ์ฌ์์ผ๋ก ์ ๊ทผํ ํ ํ์ธํ ๋ชจ์ต์ด๋ค.
ํ๋ฅผ ํ์ธํ๊ธฐ์ ์์, Chrome Lighthouse์ ์ฉ์ด๋ฅผ ๋จผ์ ์ค๋ช ํ๋๋ก ํ๊ฒ ๋ค.
First Contentful Paint: ์ด๊ธฐ DOM ์ฝํ ์ธ ๋ฅผ ๋ ๋๋ง ํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋งํ๋ค. ์ด๋ flutter.js๋ฅผ ์คํํ๊ธฐ ์ ์ ์ํ๋ฅผ ๋งํ๊ณ ์๋ค.
Time to Interactive: DOM ์ฝํ ์ธ ๋ ๋๋ง ์ดํ ์ฌ์ฉ์๊ฐ ์ํธ์์ฉ์ด ๊ฐ๋ฅํ ์์ ์ ์ด์ผ๊ธฐํ๋ค.
Speed Index: ํ์ด์ง์ ์ฝํ ์ธ ๊ฐ ์๊ฐ์ ์ผ๋ก ์ผ๋ง๋ ๋นจ๋ฆฌ ์ฑ์์ง๋์ง๋ฅผ ์ธก์ ํ๋ ๊ฐ์ด๋ค. ํด๋น ๊ฐ์ ๋ฐ๋ผ ํ๋ฉด์ ํ๋ฌํฐ UI๊ฐ ๋ณด์ด๋ ์๋๊ฐ ๋ฌ๋ผ์ง๋ค.
Largest Contentful Paint: Core Web Vitals์ ์งํ์ด๋ฉฐ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์๋ฆฌ๋จผํธ๊ฐ ๋ํ๋ ๋ ์ธก์ ํ๋ค. ์๋ฅผ ๋ค์ด UI์ ๋ชจ๋ ์์๊ฐ ์๋ฒฝํ๊ฒ (ํฐ ์ด๋ฏธ์ง ๋ฑ) ํ์๋๋ ๋ฐ๊น์ง์ ์๊ฐ์ ๋งํ๋ค.
SEO Score: ๊ฒ์์์ง์ ์ผ๋ง๋ ์ต์ ํ๋์๋์ง์ ๋ํ ์ ์์ด๋ค. ์ฌ์ค์ flutter.js ์์์์ ๋ฐ์ดํฐ๊ฐ ๋ ์ค์ํ๊ธฐ ๋๋ฌธ์ DOM ์ฝํ ์ธ ์ ๋ํ SEO ์ฑ๋ฅ์ ์๋ฏธ๊ฐ ์๋ค.
์ฌ๊ธฐ์ CanvasKit์ Largest Contentful Paint๋ Error๋ก ํ์๊ฐ ๋๋๋ฐ ์ด๋ ๋ชจ๋ ํ์ด์ง ์ฝํ ์ธ ๊ฐ ์ ์ฒด ํ๋ฉด์ ๋ฎ๋ ๊ตฌ์กฐ๋ก ์ธํด LCP ์์์ ํด๋นํ์ง ์๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ๋ ํ์์ด๋ค.
์ด์ฒ๋ผ ๋จ์ํ ํ์ด์ง ๋ก๋์๋๋ฅผ ์ ์ธํ๊ณ ๋ ๋๋ง์๋๋ฅผ ์ธก์ ํ์ ๋๋ CanvasKit์ด ๋ ๋น ๋ฅธ ๊ฒ์ ๋ณผ ์ ์๋ค.
์ด๋ฒ์๋ ๋ธ๋ผ์ฐ์ ์์ ์ค์ ๋ก ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๋ชจ์ต์ ์ดํด๋ณด์๋ค.
์์๋ CanvasKit ์๋๋ HTML์ ๋ก๋ ๋ชจ๋ ๋ก๋ฉ ์๋ฃ ์๋์ด๋ค. ์ญ์๋ ํธํ์ฑ๊ณผ ๊ฐ๋ฒผ์์ ํนํ๋ HTML์ด ๋ก๋ฉ ์๋์์ ์ด์ ์ ๋๋ฆด ์ ์์๋ค.
๊ฒฐ๋ก
Flutter Web์์ ๋ ๊ฐ์ง ๋ ๋๋ง ๋ฐฉ์์ด ์๋ ์ด์ ๋ ๊ฐ์ ์ฌ์ฉ ์ฌ๋ก๊ฐ ๋ค๋ฅด๊ณ ๋ ๋ฐฉ์ ๋ชจ๋ ๋ฒ๋ฆด ์ ์๊ธฐ ๋๋ฌธ์ด๋ค.
ํธํ์ฑ๊ณผ ๋ค์ด๋ก๋ ์๋๋ HTML
์ผ๊ด์ฑ๊ณผ ์ฑ๋ฅ์ CanvasKit
๋ง์ฝ ์ต๊ณ ๋ก ์๋ฆ๋ค์ด ์ ๋๋ฉ์ด์ , ์ฝํ ์ธ ์ฌ์ง, ๊ธ๊ผด, ์ ฐ์ด๋ ๋๋ ์๊ทผ๊ฐ์ ์ ๋๋ก ํํํ๊ณ ์ถ๋ค๋ฉด ๋ฌด์กฐ๊ฑด CanvasKit์ ์ ํํ๋ ๊ฒ์ด ์ต๊ณ ์ ์ต์ ์ด๊ณ , ์ต๋ํ ๋น ๋ฅด๊ณ ๊ฐ๋ณ๊ฒ ์ฌ์ฉ์์๊ฒ ์ฝํ ์ธ ๋ฅผ ํ์ํด์ฃผ๊ณ ์ถ๋ค๋ฉด HTML์ ์ ํํ๋ผ!
์ฐธ๊ณ ๋ฌธํ :
https://geekyants.com/blog/web-renderers-which-one-to-choose-html-or-canvaskit
https://docs.flutter.dev/platform-integration/web/renderers
https://wilsonwilson.dev/articles/flutter-web-renderers
'๐ Flutter' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Flutter] Riverpod์ด๋ ์ํ๊ด๋ฆฌ๋ก Localization ์ฆ์ ๋ฐ๋๊ฒ ๋ง๋ค๊ธฐ (1) | 2024.10.07 |
|---|---|
| [Flutter] Factory๋ฅผ ํตํ Singleton ํจํด (0) | 2024.10.05 |
| [Flutter] ์์ดํจ๋์์ ํ๋ฌํฐ ์ฝ๋ฉํ๊ธฐ with Code-Server (0) | 2024.04.22 |
| [Flutter] RiverPod ์ ๋ฌธ #1 - ์ฌ๋ฌ ํ๋ฉด์์ Count ์ธ๊ธฐ (0) | 2023.07.12 |
| [Flutter Web] ์ ๋ฐ์ดํธ ํ UI๊ฐ ๋ณํ์ง ์๋ ์ค๋ฅ (0) | 2023.07.02 |