2026.03.04 (수)
Flutter Web이 작동하는 원리에 대해 설명
오늘의 공부 내용 이미지 💫
🍔 구조화를 해서 설명하기
크게 컴파일 과정과 렌더링 방식 두가지로 설명
🥔 컴파일 과정
-> 내가 쓴 Dart 언어를 브라우저가 알아듣는 언어로 번역하는 과정
- Dart to JavaScript
브라우저는 Dart 언어를 직접 해석할 수 없다. 따라서 Flutter는dart2js컴파일러를 사용하여 작성한 Dart 코드를 브라우저가 이해할 수 있는 JavaScript로 변환한다. - 패키징
앱의 비지니스 로직과 Flutter 프레임워크 자체를 하나의 JS 파일로 묶어 브라우저에서 실행 가능하게 만든다.
🍟 렌더링 계층
-> 번역이 끝났다면 이제 화면에 UI를 그린다.
Flutter Web은 화면을 그릴 때 두 가지 엔진 중 하나를 선택한다.
-
HTML 렌더러
(브라우저가 기본적으로 가지고 있는 재료 HTML태그, CSS 효과 들을 조합해서 화면을 만든다.)- 기술: HTML 요소, CSS, Canvas 2D 사용
- 장점: 파일 크기가 작음, 로딩 속도가 빠름
- 단점: 복잡한 그래픽에서 성능 저하 기능
- 용도: 텍스트 위주의 웹사이트, 저사양 환경
-
CanvasKit 렌더러
(브라우저의 기본 재료를 무시하고, Skia라는 강력한 그래픽 엔진을 웹으로 가져와서 픽셀을 하나씩 그린다.)- 기술: WebAssembly(Wasm) + Skia 엔진
- 장점: 모바일과 100% 동일한 품질, 성능 우수
- 단점: 엔진 다운로드로 초기 로딩이 길다
- 용도: 화려한 애니메이션, 복잡한 UI 앱
🍻 브라우저와의 통신
-
입력처리
마우스 클릭, 휠 스크롤, 키보드 입력 등 브라우저 이벤트를 Flutter 포인터 데이터로 변환 -
접근성
Flutter는 화면의 픽셀만 그리는 것이 아니라, 웹 표준에 맞게 Semantics Tree를 생성하여 스크린 리더(시각장애인용 서비스)가 작동하도록 돕는다.
🔹 Flutter Web 장점 단점
🔔 장점
브라우저의 레이아웃 엔진에 의존하지 않고 Flutter가 직접 픽셀을 제어한다.
한번의 작성으로 모든 브라우저에서 동일한 UI를 완벽하게 구현할 수 있다.
🔕 단점
❗️ 지연로딩
초기 로딩 속도가 느릴 수 있다.
❗️ 검색 엔진 최적화의 어려움
구글이나 네이버 같은 검색 엔진 로봇은 HTML 텍스트를 읽어서 정보를 수집하는데 Flutter Web은 화면을 통째로 그리기 때문에 로봇이 내용을 읽기가 매우 어려울 수 있다. 네이버나 구글 검색 결과 상단에 우리 사이트를 노출시키기가 힘들다.
🔷 단점에 대한 해결 방안은?
❗️🔔 지연로딩 활용
앱의 모든 기능을 한 번에 불러오지 않고, 사용자가 클릭할 때만 필요한 코드를 다운로드하게 설정한다.
예를 들어, 관리자 설정 페이지는 사용자가 들어갈 때만 불러오도록 코드를 쪼개는 것이 방법이다.
➕ Asset 최적화를 할 수 있다. 고용량 이미지는 외부 서버나 Firebase Storage에 두고 호출하여 초기 패키지 크기를 줄일 수 있다.
❗️🔔 검색 최적화 문제 극복
검색 노출이 중요한 랜딩 페이지나 블로그는 SEO에 강한 기존 웹 기술(HTML, React..)로 만들고, 실제 복잡한 기능을 수행하는 메인 서비스는 Flutter Web으로 개발하여 연결한다.
seo_renderer같은 라이브러리를 사용해 검색 로봇이 읽을 수 있는 최소한의 HTML텍스트를 생성하여 보완할 수 있다.
📝 핵심 요약
Flutter Web은 Dart 코드를 브라우저용 JavaScript를 번역하여 실행된다. 화면을 그릴 때는 성능과 용량 사이의 균형을 맞추기 위햐 표준 웹 기술을 쓰는 HTML 방식과 직접 픽셀을 그리는 CanvasKit 방식 중 최적의 경로를 선택해서 작동한다.
기존 웹 개발은 브라우저마다 CSS 해석 방식이 달라 크로스 브라우징 이슈가 잦았다. 하지만 Flutter Web은 브라우저의 레이아웃 엔진에 의존하지 않고 Flutter가 직접 픽셀을 제어한다. 덕분에 한번의 작성으로 모든 브라우저에서 동일한 UI를 완벽하게 구현할 수 있다는 점이 가장 큰 장점이다.
