Flutter tweakcn Generator

개요

tweakcn은 shadcn/ui 스타일의 CSS 테마를 커스터마이징할 수 있는 웹 도구다. 하지만 생성된 CSS 변수를 Flutter에서 그대로 쓸 수는 없다. flutter_tweakcn_generator는 이 간극을 메워준다. tweakcn에서 만든 CSS 테마 파일을 입력하면, Flutter의 ThemeData, ColorScheme, ThemeExtension 클래스를 자동으로 생성해준다.

주요 기능

• CSS 컬러 포맷 완벽 지원: hex, rgb(), hsl(), oklch() 모두 파싱 가능
• 라이트/다크 모드 자동 분리: CSS의 :root와 .dark 블록을 자동으로 인식하여 두 벌의 테마 생성
• ThemeExtension 생성: Colors, Radius, Shadows를 각각 ThemeExtension으로 생성하여 context.tweakcnColors 같은 직관적 접근 지원
• Google Fonts 자동 연동: --font-sans CSS 변수에서 폰트명을 감지하여 GoogleFonts.xxxTextTheme() 코드를 자동 생성하고, 다중 폰트 fallback도 지원
• 로컬 폰트 모드: font_mode: local 설정 시 빌드 타임에 .ttf 파일을 다운로드하여 오프라인 환경에서도 사용 가능
• CLI & build_runner: 단독 실행과 build_runner 통합 모두 지원

지원 플랫폼

Android, iOS, Web, macOS, Windows, Linux

기술적 특징

• CSS 파서 자체 구현: :root(라이트)와 .dark(다크) 블록을 파싱하여 색상, 반경, 그림자 토큰을 추출한다. oklch 같은 최신 CSS 컬러 포맷까지 지원하는 점이 눈에 띈다.
• ColorScheme 매핑 전략: tweakcn의 CSS 변수명(--background, --primary, --destructive 등)을 Material 3의 ColorScheme 속성에 체계적으로 매핑한다. 예를 들어 --background는 surface에, --destructive는 error에 대응된다.
• 폰트 관리 자동화: font_exclusive: true 옵션을 사용하면 폰트를 변경할 때 이전 폰트 파일과 pubspec.yaml 선언을 자동으로 정리해준다. 프로젝트가 깔끔하게 유지된다.
• build_runner 통합: *.tweakcn.css 확장자를 사용하면 build_runner로 자동 생성할 수 있어 기존 Flutter 빌드 파이프라인에 자연스럽게 녹아든다.

왜 주목할까?

shadcn/ui의 디자인 시스템은 웹에서 큰 인기를 끌고 있지만, Flutter 생태계에서는 이를 직접 활용하기 어려웠다. flutter_tweakcn_generator는 웹 디자이너가 tweakcn에서 만든 테마를 Flutter 개발자가 그대로 가져다 쓸 수 있게 해주는 다리 역할을 한다. CSS 변수 하나하나를 수동으로 옮기는 번거로운 작업을 완전히 자동화하면서도, Material 3의 ThemeExtension을 활용해 타입 안전한 접근을 보장한다는 점에서 실용적이다.