FlutterJS: 실제 HTML을 출력하는 Flutter 컴파일러를 만들었습니다 (Canvas가 아님)

Source: Dev.to

아무도 이야기하지 않는 문제

Flutter Web에는 비밀이 있습니다: 실제로 “웹”이 아니라는 점이죠.
Flutter Web 앱을 빌드하면 모든 것이 <canvas> 요소에 렌더링됩니다. 복잡한 앱에는 괜찮지만, 웹사이트에서는 심각한 문제가 발생합니다:

• SEO 부재 – Google이 캔버스 픽셀을 색인화할 수 없음
• 거대한 번들 – 간단한 앱이라도 최소 2–5 MB
• 접근성 저하 – 스크린 리더를 위한 의미론적 HTML이 없음
• 느린 첫 페인트 – 콘텐츠가 보이기까지 3–8 초 소요

클라이언트가 마케팅 사이트를 Flutter로 만들라고 요청했을 때 이 벽에 부딪혔습니다. 디자인은 멋졌지만 Google Search Console에선 노출이 전혀 없었습니다. 사이트가 보이지 않았습니다.

Flutter가 실제 HTML로 컴파일된다면?

그것을 제가 만들었습니다. FlutterJS는 일반 Flutter/Dart 코드를 받아서:

Scaffold(
  appBar: AppBar(title: Text('My Site')),
  body: Center(
    child: Text('Hello, World!'),
  ),
)

다음과 같은 의미론적 HTML을 출력합니다:

<div class="my-site">
  <h1>My Site</h1>
  <p>Hello, World!</p>
</div>

작동 방식

• 일반 Flutter 코드를 작성 – 특별한 문법 필요 없음.
• Dart CLI가 전체 타입 해석을 포함한 AST를 분석합니다.
• 가벼운 VNode 런타임을 가진 JavaScript를 생성합니다.
• 검색 엔진이 색인할 수 있는 의미론적 HTML을 출력합니다.
• JavaScript 런타임이 diff와 업데이트를 처리하며, React의 가상 DOM과 비슷하지만 Flutter 위젯 모델에 최적화되어 있습니다.

지표 비교

로드맵

• 애니메이션
• 고급 Material 위젯 (Tabs, Dialog, BottomSheet)
• Cupertino 위젯
• CustomPainter

아키텍처는 이미 이를 지원하지만 아직 구현되지 않았습니다.

시작하기

# Clone the repository
git clone --recursive https://github.com/flutterjsdev/flutterjs.git
cd flutterjs

# Activate the Dart CLI
dart pub global activate --source path .
dart pub get
dart run tool/init.dart

# Use the flutterjs commands
flutterjs --help

http://localhost:3000을 열고 페이지를 검사해 보세요—실제 HTML 요소가 보일 것입니다.

• 웹사이트:
• GitHub:
• pub.dev:

여러분의 도움이 필요합니다

이 프로젝트는 오픈 소스이며, 기여자를 찾고 있습니다. Flutter를 웹에서 사용하고 싶다면:

• 테스트하고 버그를 보고
• 누락된 위젯을 기여
• 문서 작업을 도와

당신이 필요로 하는 위젯은 무엇인가요? 댓글로 알려 주세요.