๐ŸŽจ [Flutter] ๋ Œ๋”๋ง ์›๋ฆฌ์™€ ๊ณผ์ •: ํ™”๋ฉด์€ ์ด๋ ‡๊ฒŒ ๊ทธ๋ ค์ง„๋‹ค

Tygerยท2024๋…„ 9์›” 24์ผ
5

Flutter

๋ชฉ๋ก ๋ณด๊ธฐ
64/64
post-thumbnail

๐ŸŽจ ๋ Œ๋”๋ง ์›๋ฆฌ์™€ ๊ณผ์ •: ํ™”๋ฉด์€ ์ด๋ ‡๊ฒŒ ๊ทธ๋ ค์ง„๋‹ค

Flutter architectural overview | Flutter
Impeller rendering engine | Flutter

Skia

์ด๋ฒˆ ๊ธ€์—์„œ๋Š” Flutter์˜ ๋ Œ๋”๋ง ์›๋ฆฌ์™€ ๊ณผ์ • ๋“ฑ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ํ™”๋ฉด์— ๊ทธ๋ ค์ง€๋Š”์ง€์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ค„๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

โ—๏ธ์ด ๊ธ€์€ ๊ฐœ์ธ์ ์œผ๋กœ ๊ณต๋ถ€ํ•˜๋ฉฐ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์œผ๋กœ, ์ผ๋ถ€ ์ž˜๋ชป๋œ ๋ถ€๋ถ„์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜๊ฒฌ์„ ๋‚จ๊ฒจ์ฃผ์‹œ๋ฉด ๊ฒ€ํ†  ํ›„ ์ˆ˜์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค !!

Flutter๋Š” ํฌ๋กœ์Šค ํ”Œ๋žซํผ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ, ํ•˜๋‚˜์˜ ์ฝ”๋“œ๋ฒ ์ด์Šค๋กœ iOS์™€ Android ๋ชจ๋ฐ”์ผ ํ”Œ๋žซํผ์—์„œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค(์—ฌ๊ธฐ์„œ๋Š” ๋ชจ๋ฐ”์ผ ํ”Œ๋žซํผ์„ ๊ธฐ์ค€์œผ๋กœ ์ž‘์„ฑํ•จ).

Flutter๊ฐ€ ์–ด๋–ป๊ฒŒ ํ™”๋ฉด์„ ๋ Œ๋”๋งํ•˜๋ฉฐ, ์—ฌ๋Ÿฌ ํ”Œ๋žซํผ์—์„œ ์ผ๊ด€๋˜๊ฒŒ ๋ Œ๋”๋ง๋  ์ˆ˜ ์žˆ๋Š”์ง€์— ๋Œ€ํ•ด ์›๋ฆฌ์™€ ๊ณผ์ •์„ ์‚ดํŽด๋ณด๋„๋ก ํ•˜์ž.

ํ”Œ๋žซํผ๋ณ„ ๋ Œ๋”๋ง ๊ณผ์ •

Flutter์˜ ๋ Œ๋”๋ง์„ ์•Œ์•„๋ณด๊ธฐ์— ์•ž์„œ ๋„ค์ดํ‹ฐ๋ธŒ ํ”Œ๋žซํผ(Android, iOS)์€ ์–ด๋–ป๊ฒŒ ๋ Œ๋”๋ง์„ ํ•˜๋Š”์ง€์™€ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š” ํฌ๋กœ์Šคํ”Œ๋žซํผ์ธ RN(ReactNative)์€ ์–ด๋–ป๊ฒŒ ๋ Œ๋”๋งํ•˜๊ณ  Flutter์™€์˜ ์ฐจ์ด๋Š” ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

ํ•ด๋‹น ๋‚ด์šฉ์€ ์ด๋ก ์ ์ธ ์„ค๋ช…๊ณผ ๊ณต์‹ ๋ฌธ์„œ์˜ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ž‘์„ฑ ํ•˜์˜€์œผ๋‹ˆ ๊ฐ€๋ณ๊ฒŒ ํ•œ ๋ฒˆ ์ฝ์–ด๋ณด์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Native: Android

Android์˜ ๋ Œ๋”๋ง์€ ์ฃผ๋กœ View ์‹œ์Šคํ…œ์„ ํ†ตํ•ด UI๊ฐ€ ๊ตฌ์„ฑ๋˜๊ณ , ํ™”๋ฉด์— ๊ทธ๋ ค์ง€๋Š” ๋ฐฉ์‹์œผ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค. Android ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ UI์š”์†Œ๋“ค์€ ๋„ค์ดํ‹ฐ๋ธŒ View ํด๋ž˜์Šค ๊ณ„์ธต์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋ฉฐ, ๊ฐ ์š”์†Œ๋Š” ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ๊ทธ๋ฆด์ง€ ์ •์˜๋˜์–ด ์žˆ๋‹ค. View ๊ณ„์ธต์€ ๋ถ€๋ชจ-์ž์‹ ๊ด€๊ณ„์˜ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์œผ๋ฉฐ ์ด๋ฅผ ํ†ตํ•ด Android๋Š” ํ™”๋ฉด์˜ ๊ฐ UI ์š”์†Œ๋ฅผ ๊ด€๋ฆฌํ•˜๊ฒŒ ๋œ๋‹ค.

์ดํ›„ SurfaceFlinger๋ผ๋Š” Android ์‹œ์Šคํ…œ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ OpenGL/ES ๋˜๋Š” Vulkan์„ ์‚ฌ์šฉํ•ด UI๋ฅผ GPU์— ์ „๋‹ฌํ•˜๊ณ  ๊ฐ View๋ฅผ ์‹ค์ œ๋กœ ํ™”๋ฉด์— ๊ทธ๋ฆฌ๋Š” ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•˜๊ฒŒ ๋œ๋‹ค. SurfaceFlinger๋Š” ๋‹ค์–‘ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๊ทธ๋ ค์ง„ ์—ฌ๋Ÿฌ ๊ฐœ์˜ UI๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ์ตœ์ •์ ์œผ๋กœ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์งˆ ๋‹จ์ผ ํ‘œ๋ฉด์„ ์ƒ์„ฑํ•œ๋‹ค.

Hardware Composer๋Š” GPU๊ฐ€ ์ง์ ‘ ํ™”๋ฉด์— ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋„๋ก ๊ฐ UI ์š”์†Œ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋ฉฐ Choreographer๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ผ์ •ํ•œ ํ”„๋ ˆ์ž„ ์†๋„(์ผ๋ฐ˜์ ์œผ๋กœ 60fps)๋กœ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์‹คํ–‰๋˜๋„๋ก ํ”„๋ ˆ์ž„์„ ์กฐ์ •ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด Android๋Š” ๊ฐ ํ”„๋ ˆ์ž„์—์„œ UI๋ฅผ ์ตœ์ ํ™”ํ•˜์—ฌ ๋ Œ๋”๋งํ•˜๋ฉฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ถ€๋“œ๋Ÿฌ์šด ํ™”๋ฉด ์ „ํ™˜๊ณผ ์ƒํ˜ธ์ž‘์šฉ์„ ์ œ๊ณตํ•˜๊ฒŒ ๋œ๋‹ค. ์ด ๊ณผ์ •์—์„œ Android๋Š” UI ์š”์†Œ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ํ™”๋ฉด์— ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•ด ๋„ค์ดํ‹ฐ๋ธŒ UI ์‹œ์Šคํ…œ์„ ์‚ฌ์šฉํ•˜๊ณ , GPU์™€ ํ˜‘๋ ฅํ•˜์—ฌ ๋น ๋ฅธ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

Native: iOS

iOS์˜ ๋ Œ๋”๋ง์€ ์ฃผ๋กœ UIKit๊ณผ Core Animation์„ ํ†ตํ•ด UI๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค. iOS์—์„œ UI ์š”์†Œ๋“ค์€ UIView ๊ณ„์ธต ๊ตฌ์กฐ๋กœ ๊ด€๋ฆฌ๋˜๋ฉฐ, ๊ฐ ๋ทฐ๋Š” ํ™”๋ฉด์˜ ํŠน์ • ์˜์—ญ์„ ์ฐจ์ง€ํ•˜๊ณ  ํ•ด๋‹น ์˜์—ญ์— ๊ทธ๋ ค์งˆ ์ฝ˜ํ…์ธ ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ทฐ ๊ณ„์ธต ๊ตฌ์กฐ๋Š” ๋ถ€๋ชจ-์ž์‹ ๊ด€๊ณ„๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์œผ๋ฉฐ, ํ™”๋ฉด์— ๊ทธ๋ ค์งˆ ๋ชจ๋“  ์š”์†Œ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ฒŒ ๋œ๋‹ค.

iOS๋Š” Core Animation ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ†ตํ•ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ UI๋ฅผ ์ตœ์ ํ™”ํ•˜๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ฒ˜๋ฆฌํ•œ๋‹ค. Core Animation์€ ํ™”๋ฉด์˜ UI ์š”์†Œ๋“ค์„ GPU์—์„œ ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ฐ ๋ ˆ์ด์–ด๋ฅผ ๋ฏธ๋ฆฌ ๊ณ„์‚ฐํ•˜๊ณ  ๋ฐฐ์น˜ํ•˜์—ฌ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•œ๋‹ค. ์ด ๊ณผ์ •์—์„œ CALayer ๊ฐ์ฒด๊ฐ€ UI ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ, ํ…Œ๋‘๋ฆฌ, ๊ทธ๋ฆผ์ž ๋“ฑ์˜ ์‹œ๊ฐ์  ์†์„ฑ์„ ๊ด€๋ฆฌํ•˜๋ฉฐ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.

iOS๋Š” Metal ๋˜๋Š” OpenGL๊ณผ ๊ฐ™์€ ๊ทธ๋ž˜ํ”ฝ API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ GPU์— ์ง์ ‘ UI๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. WindowServer๋Š” ์•ฑ์˜ ๋ Œ๋”๋ง๋œ ๋‚ด์šฉ์„ ์ˆ˜์ง‘ํ•ด ์ตœ์ข…์ ์œผ๋กœ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๋Š” ์—ญํ• ์„ ํ•˜๋ฉฐ, ๊ฐ ํ”„๋ ˆ์ž„์ด ์ผ์ •ํ•œ ์†๋„๋กœ ๋ Œ๋”๋ง๋˜๋„๋ก ๊ด€๋ฆฌํ•œ๋‹ค.

์ด๋ฅผ ํ†ตํ•ด iOS๋Š” ๋ถ€๋“œ๋Ÿฌ์šด ํ™”๋ฉด ์ „ํ™˜๊ณผ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ œ๊ณตํ•˜๊ณ  ์ด ๋ชจ๋“  ๊ณผ์ •์—์„œ iOS๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ๋ทฐ ์‹œ์Šคํ…œ๊ณผ ๊ณ ์„ฑ๋Šฅ ๊ทธ๋ž˜ํ”ฝ API๋ฅผ ์‚ฌ์šฉํ•ด ๋งค์šฐ ์ตœ์ ํ™”๋œ UI ๋ Œ๋”๋ง์„ ์ œ๊ณตํ•˜๊ฒŒ ๋œ๋‹ค.

Cross-platform: React Native

React Native๋Š” JavaScript ์ฝ”๋“œ์™€ ๋„ค์ดํ‹ฐ๋ธŒ UI ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ์ƒํ˜ธ์ž‘์šฉ์„ ํ†ตํ•ด ์ด๋ฃจ์–ด์ง„๋‹ค. ๋จผ์ € JavaScript๋กœ ์ž‘์„ฑ๋œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ UI์™€ ๋กœ์ง์„ ์ •์˜ํ•˜๊ฒŒ ๋œ๋‹ค. ์ด JavaScript ์ฝ”๋“œ๋Š” ๋ธŒ๋ฆฟ์ง€(Bridge)๋ฅผ ํ†ตํ•ด ๋„ค์ดํ‹ฐ๋ธŒ API์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋ฉฐ, UI ์š”์†Œ์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋„ค์ดํ‹ฐ๋ธŒ ์ฝ”๋“œ์— ์ „๋‹ฌํ•œ๋‹ค.

RN์€ Virtual DOM์„ ์‚ฌ์šฉํ•˜์—ฌ UI ์—…๋ฐ์ดํŠธ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•œ๋‹ค. React๊ฐ€ ์ปดํฌ๋„ŒํŠธ ๋ณ€๊ฒฝ์„ ๊ฐ์ง€ํ•˜๋ฉด, Virtual DOM์—์„œ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„์„ ๊ณ„์‚ฐํ•˜์—ฌ ์‹ค์ œ ๋„ค์ดํ‹ฐ๋ธŒ UI ์š”์†Œ์— ํ•„์š”ํ•œ ์ตœ์†Œํ•œ์˜ ๋ณ€๊ฒฝ๋งŒ์„ ์ „๋‹ฌํ•œ๋‹ค. ์ด ๊ณผ์ •์—์„œ JavaScript์˜ UI ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋ธŒ๋ฆฟ์ง€๋ฅผ ํ†ตํ•ด Android์˜ View๋‚˜ iOS์˜ UIView์™€ ๊ฐ™์€ ๋„ค์ดํ‹ฐ๋ธŒ ์š”์†Œ๋กœ ๋ณ€ํ™˜๋˜์–ด ํ™”๋ฉด์— ๋ Œ๋”๋ง๋œ๋‹ค.

๋˜ํ•œ JavaScript์™€ ๋„ค์ดํ‹ฐ๋ธŒ ์ฝ”๋“œ ๊ฐ„์˜ ์ƒํ˜ธ์ž‘์šฉ์€ ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋“ˆ์„ ํ†ตํ•ด ์ด๋ฃจ์–ด ์ง€๋Š”๋ฐ, ์ด๋Ÿฌํ•œ ๋ชจ๋“ˆ์€ JavaScript์—์„œ ๋„ค์ดํ‹ฐ๋ธŒ ๊ธฐ๋Šฅ์„ ํ˜ธ์ถœํ•˜๊ฑฐ๋‚˜ ๋„ค์ดํ‹ฐ๋ธŒ API์˜ ๊ฒฐ๊ณผ๋ฅผ JavaScript๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ์ตœ์ข…์ ์œผ๋กœ ๋„ค์ดํ‹ฐ๋ธŒ UI ์š”์†Œ๋Š” Android์˜ SurfaceFlinger์ด๋‚˜ iOS์˜ Core Animation์„ ํ†ตํ•ด ํ™”๋ฉด์— ๊ทธ๋ ค์ ธ ์‚ฌ์šฉ์ž์—๊ฒŒ ํ‘œ์‹œ๋œ๋‹ค.

JavaScriptCore(JSC)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ JavaScript ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉฐ, ์ตœ๊ทผ์—๋Š” Hermes๋ผ๋Š” ๋‹ค๋ฅธ JavaScript ์—”์ง„๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด Fabric ์•„ํ‚คํ…์ฒ˜๋ฅผ ๋„์ž…ํ•˜์—ฌ ๋ธŒ๋ฆฌ์ง€ ์˜ค๋ฒ„ํ—ค๋“œ๋ฅผ ์ค„์ด๊ณ  ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ์ด๋ฅผ ํ†ตํ•ด ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ฑ๋Šฅ์„ ์ง€์†์ ์œผ๋กœ ํ–ฅ์ƒ์‹œํ‚ค๊ณ  ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.

Cross-platform: Flutter

๋งˆ์ง€๋ง‰์œผ๋กœ Flutter์˜ ๋ Œ๋”๋ง์— ๋Œ€ํ•ด์„œ๋„ ์„ค๋ช…์„ ๋ณด๋„๋กํ•˜์ž.

Flutter๋Š” UI๋ฅผ ์ง์ ‘ ๊ทธ๋ฆฌ๋Š” ํฌ๋กœ์Šค ํ”Œ๋žซํผ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ Dart ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•œ๋‹ค. Flutter์˜ ๋ Œ๋”๋ง ๊ณผ์ •์€ Widget, Element, RenderObject์˜ ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ํ†ตํ•ด ์ด๋ฃจ์–ด์ง€๋ฉฐ, Skia ๋˜๋Š” ์ตœ์‹  Impeller ๊ทธ๋ž˜ํ”ฝ ์—”์ง„์„ ์‚ฌ์šฉํ•˜์—ฌ ํ™”๋ฉด์— ์ตœ์ข…์ ์œผ๋กœ UI๋ฅผ ๊ทธ๋ฆฌ๊ฒŒ ๋œ๋‹ค.

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ UI๋Š” Widget์œผ๋กœ ์ •์˜๋˜๋ฉฐ ๊ฐ ์œ„์ ฏ์€ Element๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค. Element๋Š” ์œ„์ ฏ์˜ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๊ณ  ์‹ค์ œ ํ™”๋ฉด์— ๊ทธ๋ ค์งˆ UI๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ๋‹ค. Element๋Š” ๋‹ค์‹œ RenderObject๋กœ ๋ณ€ํ™˜๋˜์–ด ์œ„์น˜์™€ ํฌ๊ธฐ, ๊ทธ๋ฆฌ๊ธฐ ๊ด€๋ จ ๊ณ„์‚ฐ์„ ์ˆ˜ํ–‰ํ•˜๋ฉฐ ์‹ค์ œ๋กœ ํ™”๋ฉด์— ๊ทธ๋ ค์ง€๋Š” ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.

Skia ์—”์ง„์„ ์‚ฌ์šฉํ•˜์—ฌ UI๋ฅผ ๊ทธ๋ฆฌ๋ฉฐ Skia๋Š” 2D ๊ทธ๋ž˜ํ”ฝ์„ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์œผ๋กœ ๋ Œ๋”๋ง ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค. ์ตœ์‹  ๋ฒ„์ „์—์„œ๋Š” Impeller๋ผ๋Š” ์ƒˆ๋กœ์šด ๊ทธ๋ž˜ํ”ฝ ์—”์ง„์„ ๋„์ž…ํ•˜์—ฌ ์„ฑ๋Šฅ์„ ๋”์šฑ ํ–ฅ์ƒ์‹œํ‚ค๊ณ  ์žˆ์œผ๋ฉฐ ์—”์ง„์€ ๋ Œ๋”๋ง ๋ช…๋ น์„ GPU์— ์ „๋‹ฌํ•˜์—ฌ ์ตœ์ข…์ ์œผ๋กœ ํ™”๋ฉด์— UI๋ฅผ ํ‘œ์‹œํ•˜๊ฒŒ ํ•œ๋‹ค.

์ด ๊ณผ์ •์—์„œ Flutter๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ํ”Œ๋žซํผ์˜ UI ์š”์†Œ์™€ ๋…๋ฆฝ์ ์œผ๋กœ ๋™์ž‘ํ•˜๋ฉฐ ๋†’์€ ์ˆ˜์ค€์˜ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•๊ณผ ์ผ๊ด€๋œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๊ฒŒ ๋œ๋‹ค. ์ด๋Ÿฌํ•œ ์ ‘๊ทผ ๋ฐฉ์‹ ๋•๋ถ„์— Flutter๋Š” ๋‹ค์–‘ํ•œ ํ”Œ๋žซํผ์—์„œ ๋„ค์ดํ‹ฐ๋ธŒ ์„ฑ๋Šฅ์— ๊ฐ€๊นŒ์šด UI๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.


์•„๋งˆ๋„ ๋ฌด์Šจ๋ง์ธ์ง€ ์ดํ•ด๊ฐ€ ์ž˜ ์•ˆ๋ ํ…๋ฐ, ์ผ๋‹จ์€ "์•„! ์ด๋Ÿฐ ๊ณผ์ •์„ ํ†ตํ•ด UI๊ฐ€ ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š” ๊ตฌ๋‚˜" ์ •๋„๋กœ๋งŒ ์ฝ์—ˆ์œผ๋ฉด ๋œ๋‹ค.

ํ”Œ๋žซํผ๋ณ„ ๋ Œ๋”๋ง ์›๋ฆฌ์™€ ๊ณผ์ •์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์š”์•ฝํ•œ ๊ฒƒ์ด๋ฉฐ, ์‹ค์ œ๋กœ๋Š” ๋” ๋ณต์žกํ•˜๊ณ  ์„ธ๋ถ„ํ™”๋œ ์ ˆ์ฐจ๋ฅผ ๊ฑฐ์นœ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๊ฐ ํ”Œ๋žซํผ๋ณ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋œ๋‹ค.

์ด์ œ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๊ฐ€ ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ํ‘œ์‹œ๋˜๋Š”์ง€, Flutter์˜ ๋ Œ๋”๋ง ์›๋ฆฌ์™€ ๊ณผ์ •์„ ์ข€ ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž.

Flutter Rendering

๋ณธ๊ฒฉ์ ์œผ๋กœ Flutter์˜ ๋ Œ๋”๋ง ์›๋ฆฌ์™€ ๊ณผ์ •์— ๋Œ€ํ•ด์„œ ๋””ํ…Œ์ผํ•˜๊ฒŒ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž.

์™œ ์ค‘์š”ํ•œ๊ฐ€ ?

Flutter์˜ ๋ Œ๋”๋ง ์›๋ฆฌ์™€ ๊ณผ์ •์„ ์ดํ•ดํ•˜๋ฉฐ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์ด ์™œ ์ค‘์š”ํ• ๊นŒ ?

์‚ฌ์‹ค, ์ด๋ฅผ ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜์ง€ ๋ชปํ•ด๋„ ๊ธฐ๋Šฅ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ๊ตฌํ˜„ํ•˜๋Š” ๋ฐ๋Š” ํฐ ์–ด๋ ค์›€์ด ์—†์„ ์ˆ˜๋„ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ Flutter๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋‹ค๋ฅธ ์–ธ์–ด๋‚˜ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ๊ฐœ๋ฐœํ•  ๋•Œ๋„ ๋ Œ๋”๋ง ์›๋ฆฌ์™€ ๊ณผ์ •์— ๋Œ€ํ•œ ์ดํ•ด๋Š” ์„ฑ๋Šฅ ์ตœ์ ํ™”, ๋ณต์žกํ•œ UI ๊ตฌํ˜„, ๋ฌธ์ œ ํ•ด๊ฒฐ ๋ฐ ๋””๋ฒ„๊น…, ๊ทธ๋ฆฌ๊ณ  ๋ฆฌ์†Œ์Šค ๊ด€๋ฆฌ ์ธก๋ฉด์—์„œ ๋งค์šฐ ์ค‘์š”ํ•œ ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

  • ์„ฑ๋Šฅ ์ตœ์ ํ™”
    Flutter๋Š” ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ํ™”๋ฉด์„ ๊ฐฑ์‹ ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ํ”„๋ ˆ์ž„์ด 16ms ์ด๋‚ด(60fps)๋กœ ์ฒ˜๋ฆฌ๋˜์ง€ ์•Š์œผ๋ฉด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ํ”„๋ ˆ์ž„ ๋“œ๋กญ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋œ๋‹ค. ๋ Œ๋”๋ง ๊ณผ์ •์—์„œ ๋ถˆํ•„์š”ํ•œ ์œ„์ ฏ์˜ ์žฌ๋นŒ๋“œ, ๋ ˆ์ด์•„์›ƒ, ํŽ˜์ธํŒ…์ด ๋ฐœ์ƒํ•˜๋ฉด ์„ฑ๋Šฅ ์ €ํ•˜๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์–ธ์ œ ์œ„์ ฏ ํŠธ๋ฆฌ๊ฐ€ ์žฌ๊ตฌ์„ฑ๋˜๊ณ , ๋ ˆ์ด์•„์›ƒ๊ณผ ํŽ˜์ธํŠธ ๋‹จ๊ณ„๊ฐ€ ๋ฐœ์ƒํ•˜๋Š”์ง€ ์ดํ•ดํ•˜๊ณ  ์žˆ์–ด์•ผ ์ตœ์ ํ™”๋œ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋ณต์žกํ•œ UI
    ๋ณต์žกํ•œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌํ˜„ํ•  ๋•Œ, ๋ Œ๋”๋ง ํŒŒ์ดํ”„๋ผ์ธ์˜ ๊ฐ ๋‹จ๊ณ„(build, layout, paint, composition)๋ฅผ ์ดํ•ดํ•˜๋ฉด ์–ด๋–ป๊ฒŒ UI๊ฐ€ ๊ทธ๋ ค์ง€๋Š”์ง€์— ๋Œ€ํ•œ ๋ช…ํ™•ํ•œ ์ดํ•ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ๋” ๋ณต์žกํ•œ UI ์„ค๊ณ„๊ฐ€ ๊ฐ€๋Šฅํ•  ๊ฒƒ์ด๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋งŽ์€ UI๋‚˜ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ์—…ํ…Œ์ดํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒฝ์šฐ, ํšจ์œจ์ ์ธ ๋ Œ๋”๋ง ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค.
  • ๋ฌธ์ œ ํ•ด๊ฒฐ ๋ฐ ๋””๋ฒ„๊น…
    ๋ Œ๋”๋ง ๊ณผ์ •์—์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ(ํ”„๋ ˆ์ž„ ๋“œ๋กญ, UI ์ง€์—ฐ, ๋ ˆ์ด์•„์›ƒ ์ด์ƒ ๋“ฑ)๋ฅผ ํ•ด๊ฒฐํ•  ๋•Œ์—๋„ ํŒŒ์ดํ”„๋ผ์ธ์˜ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค. Flutter์—์„œ๋Š” Performance Overlay๋‚˜ DevTools ๊ฐ™์€ ํˆด์„ ํ†ตํ•ด ์–ด๋–ค ๋‹จ๊ณ„์—์„œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š”์ง€ ๋ถ„์„ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ์ดํ•ดํ•˜๊ณ  ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค.
  • ๋ฉ”๋ชจ๋ฆฌ์™€ GPU ๋ฆฌ์†Œ์Šค ๊ด€๋ฆฌ
    ๋ Œ๋”๋ง์€ UI ์Šค๋ ˆ๋“œ์™€ GPU ์Šค๋ ˆ๋“œ๊ฐ€ ์ƒํ˜ธ์ž‘์šฉํ•˜์—ฌ ์ด๋ฃจ์–ด์ง€๋Š”, ์ด ๋•Œ UI๊ฐ€ ๋ณต์žกํ• ์ˆ˜๋ก ๋ฉ”๋ชจ๋ฆฌ์™€ GPU ๋ฆฌ์†Œ์Šค์˜ ํšจ์œจ์  ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ๊ณผ์ •์ด ๋น„ํšจ์œจ์ ์ด๋ผ๋ฉด ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜๋‚˜ GPU ์˜ค๋ฒ„๋กœ๋“œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์–ด, ํ™”๋ฉด์ด ๋Š๋ฆฌ๊ฒŒ ๊ทธ๋ ค์ง€๊ฑฐ๋‚˜ ๋ถˆ์•ˆ์ •ํ•œ ์ƒํƒœ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค.

๊ฒฐ๋ก ์ ์œผ๋กœ ๋ Œ๋”๋ง ๊ณผ์ •์„ ์ดํ•ดํ•จ์œผ๋กœ์จ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ  ๋ณต์žกํ•œ UI๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉฐ ๋ฌธ์ œ ๋ฐœ์ƒ์‹œ ์‹ ์†ํ•˜๊ฒŒ ํ•ด๊ฒฐํ•˜์—ฌ ์ตœ์ ํ™”๋œ ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ  ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.

์›๋ฆฌ์™€ ๊ณผ์ •

Flutter ๊ณต์‹ ๋ฌธ์„œ์˜ ๋ Œ๋”๋ง ํŒŒ์ดํ”„๋ผ์ธ(Pipeline)์— ๋Œ€ํ•œ ๋ถ€๋ถ„์„ ๋ณด๋„๋ก ํ•˜์ž.

์œ„์˜ ๊ทธ๋ฆผ์€ ๊ณต์‹๋ฌธ์„œ์—์„œ ํ‘œํ˜„๋œ ๋ Œ๋”๋ง ํŒŒ์ดํ”„๋ผ์ธ(Pipeline)์„ 7๋‹จ๊ณ„์˜ ๊ณผ์ •์œผ๋กœ ํ‘œํ˜„ํ•œ ๊ฒƒ์ด๋‹ค.

User input, Animation, Build, Layout, Paint, Composition, Rasterize ์ด๋ ‡๊ฒŒ 7๋‹จ๊ณ„์˜ ๊ณผ์ •์„ ๊ฑฐ์น˜๊ฒŒ ๋œ๋‹ค.

์ด์ œ ๊ฐ ๋‹จ๊ณ„๊ฐ€ ์–ด๋–ค ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๊ณ  ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž.

1. User input

์ด ๋‹จ๊ณ„๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ํ™”๋ฉด๊ณผ ์ƒํ˜ธ์ž‘์šฉํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๋ชจ๋“  ์ž…๋ ฅ ์ด๋ฒคํŠธ(Input)๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ณผ์ •์ด๋‹ค.
Touch, gesture, click ๊ฐ™์€ ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ๋ฐ›์•„ ์•ฑ์€ ์ด๋ฅผ ๊ฐ์ง€ํ•˜๊ณ  ์ž…๋ ฅ์— ๋งž๋Š” ์ ์ ˆํ•œ ๋ฐ˜์‘์„ ์‹œ์ž‘ํ•˜๊ฒŒ ๋œ๋‹ค. ์ž…๋ ฅ์— ๋”ฐ๋ผ ์œ„์ ฏ ํŠธ๋ฆฌ์˜ ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋˜๊ฑฐ๋‚˜, ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์‹คํ–‰๋˜๋Š” ๋“ฑ ํ™”๋ฉด์— ๋ณ€ํ™”๋ฅผ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

2. Animation

์ž…๋ ฅ์— ๋”ฐ๋ฅธ ๋ณ€ํ™”๋‚˜ ๋‚ด๋ถ€ ์ƒํƒœ ๋ณ€ํ™”๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜(Animation)์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.
AnimationController์™€ ๊ฐ™์€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํด๋ž˜์Šค๋“ค์ด ํ”„๋ ˆ์ž„๋งˆ๋‹ค UI ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋ฉฐ, ์ด ๋‹จ๊ณ„์—์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ์ƒํƒœ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜๊ณ , ์‹œ๊ฐ„์— ๋”ฐ๋ผ UI์˜ ์‹œ๊ฐ์  ๋ณ€ํ™”๋ฅผ ์ผ์œผํ‚จ๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒ๋˜๋ฉด ์ƒˆ๋กœ์šด Build ๋‹จ๊ณ„๊ฐ€ ํŠธ๋ฆฌ๊ฑฐ๋˜์–ด UI๊ฐ€ ์—…๋ฐ์ดํŠธ ๋œ๋‹ค.

3. Build

build() ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด Flutter ์œ„์ ฏ ํŠธ๋ฆฌ๊ฐ€ ์ƒ์„ฑ๋˜๋Š” ๋‹จ๊ณ„์ด๋‹ค.
์œ„์ ฏ(Widget)์€ Flutter์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ํ™”๋ฉด์— ํ‘œ์‹œํ•  ๊ตฌ์กฐ์™€ ๋ ˆ์ด์•„์›ƒ์„ ์ •์˜ํ•˜๋Š” ๊ธฐ๋ณธ ๋‹จ์œ„์ด๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ๋ณ€ํ™”๋‚˜ ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ๊ธฐ๋ฐ˜์œผ๋กœ UI๊ฐ€ ๋ณ€๊ฒฝ๋  ํ•„์š”๊ฐ€ ์žˆ์„ ๊ฒฝ์šฐ ์ด ๋‹จ๊ณ„์—์„œ ์œ„์ ฏ ํŠธ๋ฆฌ(Widget Tree)๊ฐ€ ๋‹ค์‹œ ๋นŒ๋“œ๋˜๊ฒŒ ๋œ๋‹ค. Flutter๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์งˆ ์œ„์ ฏ๋“ค์„ ๊ฒฐ์ •ํ•˜๊ณ , ๊ฐ ์œ„์ ฏ์˜ ์†์„ฑ๊ณผ ๋ถ€๋ชจ-์ž์‹ ๊ด€๊ณ„๋ฅผ ์„ค์ •ํ•œ๋‹ค.

4. Layout

๋นŒ๋“œ(Build)๋œ ์œ„์ ฏ ํŠธ๋ฆฌ(Widget Tree)๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ๊ฐ ์œ„์ ฏ์˜ ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ ๊ณ„์‚ฐํ•˜๋Š” ๋‹จ๊ณ„๋กœ, ๋ถ€๋ชจ ์œ„์ ฏ์€ ์ž์‹ ์œ„์ ฏ์—๊ฒŒ ๊ณต๊ฐ„์„ ํ• ๋‹นํ•˜๊ณ  ์ž์‹ ์œ„์ ฏ์€ ๊ทธ ๊ณต๊ฐ„์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ• ์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๊ฒŒ ๋œ๋‹ค. ์ด ๊ณผ์ •์—์„œ Flutter๋Š” ๊ฐ ์œ„์ ฏ์ด ํ™”๋ฉด์—์„œ ์ฐจ์ง€ํ•  ์ •ํ™•ํ•œ ์ขŒํ‘œ์™€ ํฌ๊ธฐ๋ฅผ ์„ค์ •ํ•˜์—ฌ ๋ ˆ์ด์•„์›ƒ(Layout)์„ ๊ฒฐ์ •ํ•œ๋‹ค.

5. Paint

์œ„์ ฏ์˜ ๋ ˆ์ด์•„์›ƒ(Layout)์ด ๊ฒฐ์ •๋˜๋ฉด, ๋ณธ๊ฒฉ์ ์œผ๋กœ ํ™”๋ฉด์— ๊ทธ๋ฆด ์ค€๋น„๋ฅผ ํ•˜๋Š” ๋‹จ๊ณ„์ด๋‹ค. ๊ฐ ์œ„์ ฏ์˜ ์‹œ๊ฐ์  ์š”์†Œ์™€ ์‹ค์ œ๋กœ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์งˆ์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๊ณ  Flutter๋Š” Canvas๋ฅผ ์‚ฌ์šฉํ•ด ์œ„์ ฏ์„ ํ™”๋ฉด์— ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋„๋ก ๋ช…๋ น์„ ์ƒ์„ฑํ•œ๋‹ค.
ํ…์ŠคํŠธ, ๊ทธ๋ฆผ์ž, ์„ , ์ด๋ฏธ์ง€ ๋“ฑ์˜ ์š”์†Œ๊ฐ€ ํ•ด๋‹น ๋‹จ๊ณ„์—์„œ ๊ทธ๋ ค์งˆ ์ˆ˜ ์žˆ๋„๋ก ์ค€๋น„๋˜๋Š”๋ฐ ์‹ค์ œ๋กœ ๊ทธ๋ ค์ง€์ง€๋Š” ์•Š์ง€๋งŒ ์ค€๋น„๋ฅผ ํ•˜๋Š” ๋‹จ๊ณ„๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

6. Composition

Paint ๋‹จ๊ณ„์—์„œ ์ค€๋น„๋œ ๊ฐ ์š”์†Œ๋Š” ์—ฌ๋Ÿฌ ๋ ˆ์ด์–ด(Layer)๋กœ ๋ถ„ํ• ๋˜๊ณ , ๋ถ„ํ• ๋œ Layer๋“ค์ด ์ตœ์ข…์ ์œผ๋กœ ์–ด๋–ป๊ฒŒ ๊ฒฐํ•ฉ๋ ์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋‹จ๊ณ„์ด๋‹ค.
Flutter๋Š” ๋ ˆ์ด์–ด ํŠธ๋ฆฌ๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉฐ, ๋ ˆ์ด์–ด๋“ค์ด ์–ด๋–ป๊ฒŒ ๊ฒฐํ•ฉ๋ ์ง€๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ณ„์‚ฐํ•ด ํ™”๋ฉด์— ํ‘œ์‹œํ•  ์ตœ์ข… ์ฝ˜ํ…์ธ (๊ฒฐํ•ฉ๋œ ๋ ˆ์ด์–ด ๋˜๋Š” ๋ Œ๋”๋ง ๊ฒฐ๊ณผ)๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋œ๋‹ค. ์ด ๊ณผ์ •์—์„œ ์—ฌ๋Ÿฌ ์š”์†Œ๋“ค์„ GPU๊ฐ€ ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ์ตœ์ ํ™”๋œ ๋ฐ์ดํ„ฐ๋กœ ๋ณ€ํ™˜์‹œํ‚จ๋‹ค.

7. Rasterize

๋งˆ์ง€๋ง‰ 7๋ฒˆ ์งธ ๋‹จ๊ณ„๋กœ GPU๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌ ๋ฐ›์•„ ํ™”๋ฉด์— ํ”ฝ์…€๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋‹จ๊ณ„์ด๋‹ค.
์ปดํฌ์ง€์…˜๋œ ์š”์†Œ๋“ค์€ ์‹ค์ œ ํ™”๋ฉด์— ๊ทธ๋ ค์ง€๊ธฐ ์œ„ํ•ด GPU๊ฐ€ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ํ”ฝ์…€ ๋‹จ์œ„๋กœ ๋ณ€ํ™˜๋˜๋Š”๋ฐ, ์ฃผ๋กœ Skia, Impeller ์—”์ง„์ด ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ฒŒ ๋˜๋ฉฐ ํ”ฝ์…€ ๋ฐ์ดํ„ฐ๋ฅผ GPU์— ๋ณด๋‚ด ํ™”๋ฉด์— ์ถœ๋ ฅ๋˜๋„๋ก ํ•œ๋‹ค.

์ฆ‰, Flutter์˜ ๋ Œ๋”๋ง ํŒŒ์ดํ”„๋ผ์ธ(Pipeline)์€ ์‚ฌ์šฉ์ž ์ž…๋ ฅ(User input)์„ ์ฒ˜๋ฆฌํ•˜๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜(Animation)์„ ์—…๋ฐ์ดํŠธํ•œ ํ›„, ์œ„์ ฏ ํŠธ๋ฆฌ๋ฅผ ๋นŒ๋“œ(Build)ํ•˜์—ฌ ๋ ˆ์ด์•„์›ƒ(Layout)์„ ๊ฒฐ์ •ํ•˜๊ณ , ์‹œ๊ฐ์  ์š”์†Œ๋ฅผ ๊ทธ๋ฆด ์ค€๋น„(Paint)๋ฅผ ํ•˜๋ฉฐ, ๋ ˆ์ด์–ด๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ (Composition) ์ตœ์ข…์ ์œผ๋กœ GPU๋ฅผ ํ†ตํ•ด ํ”ฝ์…€๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ํ™”๋ฉด์— ํ‘œ์‹œ(Rasterize)ํ•˜๋Š” ์ผ๋ จ์˜ ๊ณผ์ •์„ ๊ฑฐ์น˜๋Š” ๊ฒƒ์ด๋‹ค.

๊ณต์‹ ๋ฌธ์„œ์˜ ๋ Œ๋”๋ง ํŒŒ์ดํ”„๋ผ์ธ(Pipeline)์— ๋Œ€ํ•ด์„œ ๊ฐ ๋‹จ๊ณ„๊ฐ€ ์–ด๋–ค ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๊ณ  ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ ์‚ดํŽด๋ดค๋Š”๋ฐ, ๊ณผ์ •์ด ๋‹จ์ˆœํ•˜๊ฒŒ ํ‘œํ˜„๋˜์–ด ์žˆ์–ด ๊ตฌ์ฒด์ ์ด๊ณ  ์ƒ์„ธํ•œ ๋ฉ”์ปค๋‹ˆ์ฆ˜์— ๋Œ€ํ•ด์„œ ์ข€ ๋” ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

Flutter ๋ Œ๋”๋ง ๊ณผ์ •์— ๋Œ€ํ•œ ๊ธ€์„ ์ฐพ์•„๋ณด๋ฉด ๊ฑฐ์˜ ๋ชจ๋“  ๊ธ€์—์„œ ์‚ฌ์šฉ๋˜์–ด ์ง€๊ณ  ์žˆ๋Š” Flutter Rendering Pipeline์„ ์ƒ์„ธํ•˜๊ฒŒ ํ‘œํ˜„ํ•œ ๋ชจํ˜•์ด ์žˆ๋‹ค.

๊ณต์‹ ๋ฌธ์„œ์—์„œ ์„ค๋ช…ํ•˜๋Š” ๋‹จ์ˆœํ•œ ํ๋ฆ„์„ ์ƒ์„ธํ•˜๊ฒŒ ํ‘œํ˜„ํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

์œ„์˜ Flutter Rendering Pipeline ๋ชจํ˜•์„ ํ†ตํ•ด ๋ Œ๋”๋ง ๊ณผ์ •์„ ์ข€ ๋” ์ž์„ธํžˆ ์‚ดํŽด๋ณด์ž.

๋ชจํ˜•์„ ๋ณด๋ฉด ์ƒ๋‹จ์— Tree ์ƒ์„ฑ ๋‹จ๊ณ„๊ฐ€ ์žˆ๊ณ , ๊ทธ ์•„๋ž˜๋กœ Rendering Pipeline > Layer Tree > Graphics Pipeline > GPU๋กœ ์ด์–ด์ง€๋Š” ์ˆœํ™˜์ ์ธ ํ๋ฆ„์ด ๋‚˜ํƒ€๋‚œ๋‹ค.

์—ฌ๊ธฐ์„œ ์˜๋ฌธ์ ์ด ํ•˜๋‚˜ ์ƒ๊ธฐ๋Š”๋ฐ, Flutter๋Š” ์™œ 3๊ฐœ์˜ Tree๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ด๋ฉฐ, ๊ฐ๊ฐ์˜ ์—ญํ• ์ด ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•ด์ง„๋‹ค.

Widget Tree
Widget Tree๋Š” Flutter์—์„œ UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์š”์†Œ๋“ค์„ ๊ณ„์ธต์ ์œผ๋กœ ๋‚˜์—ดํ•œ ํŠธ๋ฆฌ๊ตฌ์กฐ๋กœ, UI๋ฅผ ์„ ์–ธ์ ์œผ๋กœ ์ •์˜ํ•˜๋ฉฐ, ํ™”๋ฉด์— ์–ด๋–ค ์œ„์ ฏ๋“ค์ด ๋‚˜ํƒ€๋‚˜์•ผ ํ•˜๋Š”์ง€๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค. ๋ถˆ๋ณ€(immutable)ํ•œ ํŠน์„ฑ์„ ์ง€๋‹ˆ๊ณ  ์žˆ์–ด, ์ƒํƒœ๋‚˜ ๋ Œ๋”๋ง์˜ ์„ธ๋ถ€ ์‚ฌํ•ญ์€ ํฌํ•จ๋˜์ง€ ์•Š๋Š”๋‹ค. ๋Œ€์‹  UI์˜ ๋ ˆ์ด์•„์›ƒ, ์Šคํƒ€์ผ, ๊ตฌ์กฐ ๋“ฑ์„ ์ถ”์ƒ์ ์œผ๋กœ ์ •์˜ํ•˜๋Š” ์—ญํ• ์„ ํ•˜๋ฉฐ, build ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ ์ƒ์„ฑ๋˜๊ฑฐ๋‚˜ ์—…๋ฐ์ดํŠธ ๋œ๋‹ค.
ํ™”๋ฉด์— ๋ณ€ํ™”๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ์ด๋ฅผ ๋ฐ˜์˜ํ•˜์—ฌ ๋‹ค์‹œ ๋นŒ๋“œ๋˜๊ฒŒ ๋œ๋‹ค.

Element Tree
Widget Tree์˜ ์œ„์ ฏ ์ธ์Šคํ„ด์Šค์™€ ์‹ค์ œ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ํŠธ๋ฆฌ๋กœ ์œ„์ ฏ์˜ ์ƒ๋ช…์ฃผ๊ธฐ์™€ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๋ฉฐ, ํ™”๋ฉด์— ๊ตฌ์ฒด์ ์œผ๋กœ ์—ฐ๊ฒฐํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.
์œ„์ ฏ์ด ๋นŒ๋“œ๋  ๋•Œ ๊ฐ ์œ„์ ฏ์˜ ๊ตฌ์ฒด์ ์ธ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ์œผ๋ฉฐ, ์ƒํƒœ๊ฐ€ ์žˆ๋Š” ์œ„์ ฏ(Stateful)์˜ ๊ฒฝ์šฐ ๊ทธ ์ƒํƒœ๋„ ํ•จ๊ป˜ ๊ด€๋ฆฌ๋œ๋‹ค. ์ฆ‰, ์œ„์ ฏ์ด ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ์ ์šฉ๋˜๊ณ  ์žˆ๋Š”์ง€๋ฅผ ์ถ”์ ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
Widget Tree๊ฐ€ ๋นŒ๋“œ๋  ๋•Œ ํ•จ๊ป˜ ์ƒ์„ฑ๋˜๋ฉฐ, ์ดํ›„ ์ƒํƒœ ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚˜๋ฉด ํ•ด๋‹น ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

RenderObject Tree
์‹ค์ œ๋กœ ํ™”๋ฉด์— ์œ„์ ฏ์„ ๋ฐฐ์น˜ํ•˜๊ณ  ๊ทธ๋ฆฌ๋Š” ์ž‘์—…์„ ๋‹ด๋‹นํ•œ๋‹ค.
์œ„์ ฏ๋“ค์ด ํ™”๋ฉด์—์„œ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์„ ๊ณ„์‚ฐํ•˜๋ฉฐ, ๋ ˆ์ด์•„์›ƒ๊ณผ ํŽ˜์ธํŒ… ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜์—ฌ ์‹ค์ œ๋กœ ๊ทธ๋ ค์งˆ ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ •ํ•˜๊ฒŒ ๋˜๋ฉฐ, ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ์ตœ์ ํ™” ๊ธฐ๋ฒ•์ด ์ด ๋‹จ๊ณ„์—์„œ ์ ์šฉ๋œ๋‹ค.
Layout ๋‹จ๊ณ„์—์„œ ๊ตฌ์„ฑ๋˜๋ฉฐ, ํ™”๋ฉด์— ๊ทธ๋ฆด ์ค€๋น„๋ฅผ ์™„๋ฃŒํ•œ ํ›„ Paint ๋‹จ๊ณ„์—์„œ ์ด ํŠธ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์‹ค์ œ ๋ Œ๋”๋ง ์ž‘์—…์ด ์ด๋ฃจ์–ด์ง„๋‹ค.

Widget Tree๋Š” UI์˜ ๊ตฌ์กฐ์™€ ๋ ˆ์ด์•„์›ƒ์„ ์„ ์–ธ์ ์œผ๋กœ ์ •์˜ํ•˜๋Š” ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•˜๊ณ , Element Tree๋Š” Widget Tree์˜ UI ์ƒํƒœ๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ๋‹ค๋ฆฌ ์—ญํ• ๋กœ, ์œ„์ ฏ์˜ ์ธ์Šคํ„ด์Šค์™€ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ ์œ„์ ฏ์˜ ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ์ถ”์ ํ•œ๋‹ค. RenderObject Tree๋Š” ํ™”๋ฉด์— ์‹ค์ œ๋กœ ๊ทธ๋ ค์ง€๋Š” ๋ถ€๋ถ„์„ ๋‹ด๋‹นํ•˜์—ฌ ์–ด๋Š ์œ„์น˜์—, ์–ด๋–ค ํฌ๊ธฐ๋กœ ๋ Œ๋”๋ง ๋˜์–ด์•ผ ํ•˜๋Š”์ง€ ๊ณ„์‚ฐํ•˜๋Š” ์—ญํ• ์„ ๋‹ด๋‹นํ•˜๊ธฐ์— ์„ธ ๊ฐ€์ง€ ํŠธ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ UI๋ฅผ ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ณ  ๋ณ€๊ฒฝ์— ๋”ฐ๋ฅธ ๋ถˆํ•„์š”ํ•œ ์žฌ๊ณ„์‚ฐ์„ ์ค„์—ฌ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค.

๋‹ค์‹œ ๋ Œ๋”๋ง ๋ชจํ˜•์„ ๋ณด๋ฉด, UI Thread์—์„œ Animate > Build > Layout > Paint > Submit์˜ ์ˆœ์„œ๋กœ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•œ๋‹ค. ์ด ๊ณผ์ •์—์„œ ์œ„์ ฏ ํŠธ๋ฆฌ๊ฐ€ ๋นŒ๋“œ๋˜๊ณ , ์œ„์น˜์™€ ํฌ๊ธฐ๊ฐ€ ๊ฒฐ์ •๋œ ํ›„ ํ™”๋ฉด์— ๊ทธ๋ฆด ์ค€๋น„๊ฐ€ ์ด๋ฃจ์–ด์ง€๊ฒŒ ๋˜๋ฉฐ ์ตœ์ข…์ ์œผ๋กœ Layer Tree๋ฅผ ์ƒ์„ฑํ•ด GPU์— ์ „๋‹ฌํ•˜๊ฒŒ ๋œ๋‹ค.

Layer Tree๋Š” ๋ Œ๋”๋ง ์‹œ์Šคํ…œ์—์„œ ์‹œ๊ฐ์  ์š”์†Œ๋“ค์„ ๊ณ„์ธต์ ์œผ๋กœ ๊ตฌ์„ฑํ•˜๋Š” ๊ตฌ์กฐ๋กœ, ๊ฐ ๋ ˆ์ด์–ด๋Š” UI ์š”์†Œ์˜ ๋ Œ๋”๋ง ์ •๋ณด๋ฅผ ํฌํ•จํ•˜๋ฉฐ, ์—ฌ๋Ÿฌ ์œ„์ ฏ์˜ ๋ Œ๋”๋ง ์ •๋ณด๋ฅผ ํ†ตํ•ฉํ•˜์—ฌ GPU์—์„œ ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•˜๋Š” ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•œ๋‹ค.

GPU Thread๋Š” UI Thread์—์„œ ์ „๋‹ฌ๋ฐ›์€ Layer Tree๋ฅผ ์ฒ˜๋ฆฌํ•œ๋‹ค. ์ด ๊ณผ์ •์—์„œ Layer Tree์˜ ๊ฐ ๋ ˆ์ด์–ด๋ฅผ ํ•ฉ์„ฑ(Composition)ํ•˜๊ณ  ๋ž˜์Šคํ„ฐํ™”(Rasterize)ํ•˜์—ฌ ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ๊ทธ๋ฆด์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๊ฒŒ ๋œ๋‹ค. ์‹ค์ œ๋กœ GPU์™€ ์ง์ ‘ ์ƒํ˜ธ์ž‘์šฉํ•˜์ง€ ์•Š์œผ๋ฉฐ, ๋ Œ๋”๋ง ์š”์†Œ๋ฅผ ์ตœ์ ํ™”๋œ ๋ฐ์ดํ„ฐ๋กœ ๋ณ€ํ™”ํ•˜์—ฌ GL/Vulkan API์— ์ „๋‹ฌํ•œ๋‹ค.

์ตœ์ข…์ ์œผ๋กœ GPU๋Š” ์ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ™”๋ฉด์— ํ”ฝ์…€์„ ์ถœ๋ ฅํ•˜๊ฒŒ ๋œ๋‹ค.


* ํ•ฉ์„ฑ(Composition) : ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ ˆ์ด์–ด๋ฅผ ํ•œ ์ด๋ฏธ์ง€๋กœ ๊ฒฐํ•ฉํ•˜๋Š” ๊ณผ์ •. ๊ฐ ๋ ˆ์ด์–ด๋Š” ๋…๋ฆฝ์ ์œผ๋กœ ๊ทธ๋ ค์ง€๊ณ , ํ•ฉ์„ฑ ๋‹จ๊ณ„์—์„œ ์ด๋“ค์„ ์˜ฌ๋ฐ”๋ฅธ ์ˆœ์„œ์™€ ๋ฐฉ์‹์œผ๋กœ ์กฐํ•ฉํ•˜์—ฌ ์ตœ์ข… ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑ.

* ๋ž˜์Šคํ„ฐํ™”(Rasterize) : ํ•ฉ์„ฑ๋œ ์ด๋ฏธ์ง€๋ฅผ ์‹ค์ œ ํ™”๋ฉด์— ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋Š” ํ”ฝ์…€๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •. ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ์ด๋‚˜ ๋””์ž์ธ ์š”์†Œ๋ฅผ ํ”ฝ์…€ ๋‹จ์œ„๋กœ ๋ฐ”๊ฟ”์„œ ํ™”๋ฉด์— ์ถœ๋ ฅ.

* GL/Vulkan API : GL(OpenGL)๊ณผ Vulkan์€ GPU์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ๊ทธ๋ž˜ํ”ฝ API. GL(OpenGL)์€ ๊ณ ์ˆ˜์ค€ API๋กœ ์‚ฌ์šฉ์ด ๊ฐ„ํŽธํ•˜์ง€๋งŒ ์„ฑ๋Šฅ ์ตœ์ ํ™”์— ์ œํ•œ์ด ์žˆ๊ณ , Vulkan์€ ์ €์ˆ˜์ค€ API๋กœ ๋” ์„ธ๋ฐ€ํ•œ ์ œ์–ด์™€ ๋†’์€ ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•˜์—ฌ ๋ณต์žกํ•œ ๊ทธ๋ž˜ํ”ฝ ์ž‘์—…์—์„œ ํšจ์œจ์ ์œผ๋กœ CPU์™€ GPU๋ฅผ ํ™œ์šฉ.


๋ชจํ˜•์„ ๋ณด๋ฉด VSync๋ผ๋Š” ์ด๋ฒคํŠธ ํ๋ฆ„์ด ๋ณด์ด๋Š”๋ฐ, VSync ๋ฌด์—‡์ธ์ง€๋„ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

VSync(Vertical Synchronization)๋Š” ๋””์Šคํ”Œ๋ ˆ์ด์˜ ์ฃผ์‚ฌ์œจ๊ณผ ๊ทธ๋ž˜ํ”ฝ ์นด๋“œ์˜ ํ”„๋ ˆ์ž„ ๋ Œ๋”๋ง ์†๋„๋ฅผ ๋™๊ธฐํ™”ํ•˜๋Š” ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด๋‹ค. ์ด ๊ธฐ์ˆ ์€ ํ™”๋ฉด ๊นœ๋นก์ž„์ด๋‚˜ ์Šคํฌ๋ฆฐ ํ…Œ์–ด๋ง(Screen Tearing) ๊ฐ™์€ ํ˜„์ƒ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋„์ž…๋˜์—ˆ์œผ๋ฉฐ, Flutter๋ฅผ ํฌํ•จํ•œ ๋งŽ์€ ๊ทธ๋ž˜ํ”ฝ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ VSync ์‹ ํ˜ธ๋Š” ํ”„๋ ˆ์ž„ ๋ Œ๋”๋ง์˜ ํƒ€์ด๋ฐ์„ ์ œ์–ดํ•˜๋Š” ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•œ๋‹ค.

Flutter์—์„œ๋„ VSync๋Š” ํ”„๋ ˆ์ž„ ๋ Œ๋”๋ง ์ฃผ๊ธฐ๋ฅผ ์ œ์–ดํ•˜๋Š” ์ค‘์š”ํ•œ ๋ฉ”์ปค๋‹ˆ์ฆ˜์œผ๋กœ, ์ƒˆ ํ”„๋ ˆ์ž„์„ ๊ทธ๋ฆด ํƒ€์ด๋ฐ์„ ๊ฒฐ์ •ํ•˜๋ฉฐ ์ด ๊ณผ์ •์—์„œ UI ์—…๋ฐ์ดํŠธ์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ฒ˜๋ฆฌ๊ฐ€ ์ด๋ฃจ์–ด์ง„๋‹ค.

Rendering Engine

Flutter์˜ ๋ Œ๋”๋ง ์—”์ง„์— ๋Œ€ํ•ด์„œ๋„ ๊ฐ€๋ณ๊ฒŒ ์‚ดํŽด๋ณด๋„๋ก ํ•˜์ž.

Flutter์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ Œ๋”๋ง ์—”์ง„์€ Skia์™€ Impeller๊ฐ€ ์žˆ๋‹ค.

์™œ Skia๋ฅผ ์„ ํƒํ•œ ๊ฒƒ์ด๋ฉฐ, ๋ฌด์Šจ ์ด์Šˆ๋“ค๋กœ ์ธํ•˜์—ฌ ์ƒˆ๋กœ์šด ์—”์ง„์ธ Impeller๋ฅผ ์ ์šฉํ•˜๊ฒŒ ๋˜๋Š”๊ฑธ๊นŒ ?

Skia

Skia๋Š” ๊ตฌ๊ธ€์—์„œ ๊ฐœ๋ฐœํ•œ ์˜คํ”ˆ์†Œ์Šค 2D ๊ทธ๋ž˜ํ”ฝ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ๋‹ค์–‘ํ•œ ํ”Œ๋žซํผ์—์„œ ๊ณ ์„ฑ๋Šฅ์˜ ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ๊ณผ ์ด๋ฏธ์ง€ ๋ Œ๋”๋ง์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋ฏธ ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €์™€ ์•ˆ๋“œ๋กœ์ด๋“œ ์‹œ์Šคํ…œ์—์„œ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์„ ๋งŒํผ ๊ฒ€์ฆ๋œ ๊ทธ๋ž˜ํ”ฝ ์—”์ง„์œผ๋กœ ์‹ ๋ขฐ์„ฑ๊ณผ ์„ฑ๋Šฅ์ด ์ž…์ฆ๋œ ์—”์ง„์œผ๋กœ, Flutter ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์—ฌ๋Ÿฌ ํ”Œ๋žซํผ(Android, iOS, Web, Windows, macOS, Linux)์—์„œ ๋™์ผํ•œ ์ฝ”๋“œ๋กœ ๋นŒ๋“œํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•˜๋Š” ํŠน์ง•๊ณผ ์ž˜ ๋ถ€ํ•ฉํ•˜์—ฌ ์„ ํƒ์„ ๋ฐ›๊ฒŒ ๋˜์—ˆ๋‹ค.

์ฃผ๋กœ ๋ฒกํ„ฐ ๊ธฐ๋ฐ˜์˜ 2D ๊ทธ๋ž˜ํ”ฝ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐ ํŠนํ™”๋˜์–ด ์žˆ์œผ๋ฉฐ, ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ, ๊ธ€๊ผด ๋ Œ๋”๋ง, ๋น„ํŠธ๋งต ์ด๋ฏธ์ง€๋ฅผ ๋น ๋ฅด๊ฒŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด ๋ณต์žกํ•œ UI ๊ตฌ์„ฑ์„ ๋†’์€ ์„ฑ๋Šฅ์œผ๋กœ ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ CPU ๊ฐ€์†์„ ์ง€์›ํ•˜์—ฌ ๋ณต์žกํ•œ ๊ทธ๋ž˜ํ”ฝ ์ž‘์—…๋„ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์ธ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜์—ฌ ์‹ค์‹œ๊ฐ„ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ๋†’์ด๋Š” ๋ฐ ํฐ ์—ญํ• ์„ ํ•˜๊ณ  ์žˆ๋‹ค.

OpenGL๊ณผ Vulkan API์™€ ๊ฐ™์€ ๊ทธ๋ž˜ํ”ฝ API๋ฅผ ํ†ตํ•ด GPU์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋ฉฐ, ๊ทธ๋ž˜ํ”ฝ ์—ฐ์‚ฐ์„ GPU์— ๋งก๊น€์œผ๋กœ์จ CPU์˜ ๋ถ€ํ•˜๋ฅผ ์ค„์ด๊ณ  ์„ฑ๋Šฅ์„ ๊ทน๋Œ€ํ™”ํ•  ์ˆ˜ ์žˆ๊ณ , ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ธฐ๋ฐ˜์˜ ๋งค์šฐ ์œ ์—ฐํ•œ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด ๋‹ค์–‘ํ•œ ํ”Œ๋žซํผ์—์„œ ์‰ฝ๊ฒŒ ํ†ตํ•ฉํ•˜์—ฌ ์›ํ•˜๋Š” ์Šคํƒ€์ผ์˜ UI๋ฅผ ๊พธ๋ฐ€ ์ˆ˜ ์žˆ๋‹ค๋Š” ํŠน์ง•๋„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ Skia๋Š” ๋ณต์žกํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด๋‚˜ ํŠน์ • GPU ์ตœ์ ํ™” ์ž‘์—…์—์„œ ์ผ๊ด€๋œ ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•˜์ง€ ๋ชปํ•ด ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋Š๊ธฐ๊ฑฐ๋‚˜ ์„ฑ๋Šฅ ์ €ํ•˜๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ, ์…ฐ์ด๋”(Shader)๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํŠน์ • ํ”Œ๋žซํผ์—์„œ ํ™”๋ฉด ์ง€์—ฐ(Jank)์ด ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋„ ์žˆ์—ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋“ค์€ iOS ํ”Œ๋žซํผ์—์„œ ์ฃผ๋กœ ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๋ฉด์„œ ์ข‹์ง€ ๋ชปํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ๋ฐ–์— ์—†์—ˆ๋‹ค.

Impeller

Impeller ์—”์ง„์€ Skia๋ฅผ ๋Œ€์ฒดํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ๋œ ์ตœ์‹  ๋ Œ๋”๋ง ์—”์ง„์ด๋‹ค.

Skia ์—”์ง„์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ์ ๋“ค์„ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด Flutter ํŒ€์ด ์ง์ ‘ ๋งž์ถคํ˜•์œผ๋กœ Flutter์—์„œ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ฐœ๋ฐœํ•˜์˜€๋‹ค๊ณ  ํ•œ๋‹ค.

Flutter๊ฐ€ iOS ํ”Œ๋žซํผ์—์„œ ๋” ๋‚˜์€ ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด iOS์— ์ฒ˜์Œ ๋„์ž…ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , Flutter 3.10 ๋ฒ„์ „๋ถ€ํ„ฐ ๊ธฐ๋ณธ ๋ Œ๋”๋ง ์—”์ง„์œผ๋กœ ์ ์šฉํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

Impeller ์—”์ง„์€ GPU ์ž์›์„ ๋” ํšจ์œจ์ ์œผ๋กœ ํ™œ์šฉํ•˜๋„๋ก ์„ค๊ณ„ํ•˜์˜€๊ณ , Metal(iOS)๋ฐ Vulkan(Andoird) ์ €์ˆ˜์ค€ ๊ทธ๋ž˜ํ”ฝ API๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์ถ•ํ•˜์—ฌ ๋” ์„ธ๋ฐ€ํ•œ ๊ทธ๋ž˜ํ”ฝ ์ž‘์—…๊ณผ ์ตœ์ ํ™”๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

ํŠนํžˆ, Skia์˜ ๋ฌธ์ œ๋กœ ์•Œ๋ ค์ง„ ์…ฐ์ด๋”(Shader) ์ด์Šˆ๋ฅผ ์‚ฌ์ „์— ๋ฏธ๋ฆฌ ์ปดํŒŒ์ผํ•˜์—ฌ Jank ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์—ฌ ์‹ค์‹œ๊ฐ„ ์…ฐ์ด๋” ์ปดํŒŒ์ผ ์ง€์—ฐ ๋ฌธ์ œ๋ฅผ ๊ฐœ์„ ํ•˜์˜€๋‹ค. ๋‹ค๋งŒ, ์…ฐ์ด๋”๋ฅผ ๋ฏธ๋ฆฌ ์ปดํŒŒ์ผํ•˜๊ฒŒ ๋˜๋ฉด์„œ ์ดˆ๊ธฐํ™” ์‹œ ์„ฑ๋Šฅ ์ด์Šˆ๋‚˜ ์•ฑ ํฌ๊ธฐ ์ฆ๊ฐ€ ๋“ฑ์˜ ์šฐ๋ ค๊ฐ€ ์žˆ์—ˆ์ง€๋งŒ ์ด ๋ฌธ์ œ๋ฅผ ์ตœ์†Œํ™”ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ„์†Œํ™”๋œ ์…ฐ์ด๋” ์„ธํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ตœ์ ํ™” ํ•˜์˜€๋‹ค๊ณ  ํ•œ๋‹ค.

์ดˆ๊ธฐ์—๋Š” iOS ํ”Œ๋žซํผ์—์„œ๋งŒ ์šฐ์„  ์ ์šฉ๋˜์—ˆ์ง€๋งŒ, Android ํ”Œ๋žซํผ์—์„œ๋„ Impeller ์—”์ง„์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

Flutter vs React Native

๋งˆ์ง€๋ง‰์œผ๋กœ, ํฌ๋กœ์Šคํ”Œ๋žซํผ ์•ฑ ๊ฐœ๋ฐœ์˜ ์–‘๋Œ€ ์‚ฐ๋งฅ์ธ Flutter์™€ React Native์˜ ๋ Œ๋”๋ง ๋ฐฉ์‹์— ์–ด๋–ค ์ฐจ์ด์ ์ด ์žˆ๋Š”์ง€ ๊ฐ„๋‹จํžˆ ์‚ดํŽด๋ณด์ž.

Flutter๋Š” ์ž์ฒด ๋ Œ๋”๋ง ์—”์ง„(Skia, Impeller)์„ ์‚ฌ์šฉํ•˜์—ฌ, ๋„ค์ดํ‹ฐ๋ธŒ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์šฉํ•˜์ง€ ์•Š๊ณ  ์Šค์Šค๋กœ UI๋ฅผ ๊ทธ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ํ”Œ๋žซํผ์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š๋Š” ๋ฐฉ์‹์œผ๋กœ ๋ Œ๋”๋งํ•œ๋‹ค. ๋ฐ˜๋ฉด, React Native๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์šฉํ•ด ๊ฐ ํ”Œ๋žซํผ์˜ ํ™”๋ฉด์„ ๊ทธ๋ฆฌ๋Š” ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•œ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด React Native์—๋Š” ์ž์ฒด ๋ Œ๋”๋ง ์—”์ง„์ด ์—†๋Š”๊ฑธ๊นŒ? ๊ทธ๋ ‡๋‹ค. ์ž์ฒด ๋ Œ๋”๋ง ์—”์ง„ ์—†์ด ์•ฑ์˜ UI๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ, ๊ฐ ํ”Œ๋žซํผ(iOS, Android ๋“ฑ)์˜ ๋„ค์ดํ‹ฐ๋ธŒ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค.

React Native๊ฐ€ ๋„ค์ดํ‹ฐ๋ธŒ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ JavaScript ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ํ”Œ๋žซํผ์— ๋งž๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ๋ทฐ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋ธŒ๋ฆฟ์ง€(Bridge)๋ฅผ ํ†ตํ•ด JavaScript ์ฝ”๋“œ์™€ ๋„ค์ดํ‹ฐ๋ธŒ ์ฝ”๋“œ ์‚ฌ์ด์˜ ํ†ต์‹ ์„ ์ฒ˜๋ฆฌํ•œ๋‹ค.

์—ฌ๊ธฐ์„œ ๋ธŒ๋ฆฟ์ง€(Bridge)๋Š” JavaScript์—์„œ ๋„ค์ดํ‹ฐ๋ธŒ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ , ๋„ค์ดํ‹ฐ๋ธŒ ์ฝ”๋“œ์—์„œ ๊ทธ ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•œ ํ›„ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ JavaScript๋กœ ๋‹ค์‹œ ์ „๋‹ฌํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ํ†ต์‹ ์€ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ด๋ฃจ์–ด์ ธ, JavaScript์™€ ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐ„์˜ ์ƒํ˜ธ์ž‘์šฉ์—์„œ ์„ฑ๋Šฅ ์ €ํ•˜๋‚˜ ์ง€์—ฐ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.

๋„ค์ดํ‹ฐ๋ธŒ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด์„œ ํ”Œ๋žซํผ๋งˆ๋‹ค UI ์Šคํƒ€์ผ์ด ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์–ด ๋™์ผํ•œ UI๋ฅผ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•œ ์ถ”๊ฐ€์ ์ธ ์ž‘์—…์ด ํ•„์š”ํ•˜๊ธฐ๋„ ํ•˜๋‹ค.

์ด์ฒ˜๋Ÿผ Flutter์™€ React Native๋Š” ํฌ๋กœ์Šคํ”Œ๋žซํผ ์•ฑ ๊ฐœ๋ฐœ์ด๋ผ๋Š” ๋™์ผํ•œ ๋ชฉํ‘œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์ง€๋งŒ, ๊ฐ๊ธฐ ๋‹ค๋ฅธ ๋ Œ๋”๋ง ๋ฐฉ์‹์„ ํ†ตํ•ด ๊ทธ ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” ํฐ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.

โ—๏ธ์ฐธ๊ณ ๋กœ ์ด ๊ธ€์€ ๋ Œ๋”๋ง ๋ฐฉ์‹์˜ ๊ด€์ ์—์„œ ์ž‘์„ฑ๋œ ๊ฒƒ์ด๋ฉฐ, ํŠน์ • ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋ฌด์กฐ๊ฑด ์šฐ์œ„์— ์žˆ๋‹ค๋Š” ์˜๋ฏธ๋Š” ์•„๋‹ˆ๋‹ค. ๊ฐ ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ๊ฐ๊ธฐ ๋‹ค๋ฅธ ์žฅ๋‹จ์ ์ด ์žˆ์œผ๋ฉฐ, ์‚ฌ์šฉ ๋ชฉ์ ์— ๋”ฐ๋ผ ์ ํ•ฉํ•œ ์„ ํƒ์ด ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๋‹ค.

๋งˆ๋ฌด๋ฆฌ

Flutter์˜ ๋ Œ๋”๋ง ์›๋ฆฌ์™€ ๊ณผ์ •์„ ํ†ตํ•ด ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๊ฐ€ ํ™”๋ฉด์— ์–ด๋–ค ํ๋ฆ„์œผ๋กœ ๊ทธ๋ ค์ง€๋Š”์ง€์— ๋Œ€ํ•ด์„œ ๊ธ€์„ ์ž‘์„ฑํ•ด ๋ณด์•˜๋‹ค.

์„ธ๋ถ€์ ์œผ๋กœ๋Š” ๋” ์ž์„ธํ•œ ๊ณผ์ •๋“ค์ด ์žˆ๊ณ  ์ตœ๋Œ€ํ•œ ๊ธ€๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„๊นŒ์ง€๋งŒ ์ž‘์„ฑํ•˜์˜€๊ธฐ์— ์ถ”๊ฐ€์ ์œผ๋กœ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์‚ดํŽด๋ณด๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

Skia, Impeller ๋ Œ๋”๋ง ์—”์ง„์— ๋Œ€ํ•ด์„œ๋Š” ์ถ”ํ›„ ์ž์„ธํ•œ ๋‚ด์šฉ์„ ์ž‘์„ฑํ•ด ๋ณผ ์˜ˆ์ •์ด๋‹ค.

์ž˜๋ชป๋œ ๋‚ด์šฉ์ด ์žˆ๊ฑฐ๋‚˜ ์ถ”๊ฐ€์ ์œผ๋กœ ๊ถ๊ธˆํ•˜์‹  ๋ถ€๋ถ„์€ ํŽธํ•˜๊ฒŒ ๋Œ“๊ธ€ ๋‚จ๊ฒจ์ฃผ์‹œ๋ฉด ํ™•์ธ ํ›„ ๋‹ต๋ณ€ ๋“œ๋ฆฌ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค !

profile
Flutter Developer

0๊ฐœ์˜ ๋Œ“๊ธ€