플러터 웹사이트, 다트(Dart)와 자스퍼(Jaspr)로 개발 효율 UP!
기존 플러터(Flutter) 웹사이트는 Node.js, Python 등 다양한 기술 스택(Technology Stack)을 사용하며 개발 및 유지보수 어려움
다트(Dart) 기반의 웹 프레임워크 자스퍼(Jaspr)를 도입하여 단일 기술 스택(Unified Stack) 구축 및 개발 생산성 향상
부분적 수화(Partial Hydration) 지원으로 빠른 페이지 로딩과 SEO(Search Engine Optimization) 최적화 달성
다트(Dart) 3.10의 Dot Shorthands, Null-aware Collection Elements 등 최신 기능 활용으로 개발 편의성 증대
기존 웹사이트 기술 스택의 문제점
본문에 따르면 플러터(Flutter) 웹사이트는 Eleventy(Node.js 기반 정적 사이트 생성기)와 Wagtail(Python/Django 기반 CMS) 등 여러 기술을 혼합하여 사용했다.
기술 파편화(Fragmentation): 각 사이트별로 다른 개발 환경과 도구 사용으로 개발 생산성 저하
코드 재사용(Code Reuse) 제약: Dart 생태계 밖의 기술 사용으로 코드 공유(Code Sharing) 및 유지보수(Maintenance) 어려움
상호작용(Interactivity) 구현 난이도: 새로운 인터랙티브 요소 추가 시 DOM(Document Object Model) 로직 직접 구현 필요
결과적으로 개발자들은 각기 다른 기술을 학습해야 했고, 이는 사이트 유지보수 비용 증가로 이어졌다.
자스퍼(Jaspr)를 선택한 이유
글에서는 자스퍼(Jaspr)가 플러터(Flutter) 개발자에게 친숙한 컴포넌트 모델(Component Model)을 제공하며, 클라이언트 사이드 렌더링(Client-side Rendering), 서버 사이드 렌더링(Server-side Rendering), 정적 사이트 생성(Static Site Generation)을 모두 지원한다고 설명한다.
플러터(Flutter) 개발 경험 활용: 기존 Flutter 개발자들은 Jaspr 컴포넌트(Component)를 통해 웹 개발에 쉽게 적응
부분적 수화(Partial Hydration) 지원: 빠른 페이지 로딩(Page Loading)과 SEO(Search Engine Optimization) 최적화에 기여
Jaspr Content: Markdown 기반 사이트 구축을 위한 템플릿(Template) 및 데이터 로딩(Data Loading) 기능 제공
결론적으로 자스퍼(Jaspr)는 단일 기술 스택(Unified Technology Stack) 구축을 가능하게 하며, 개발 생산성을 향상시켰다.
다트(Dart) 생태계의 발전과 자스퍼(Jaspr)
본문에 따르면 다트(Dart) 언어와 주변 도구의 개선은 자스퍼(Jaspr)를 포함한 전체 생태계에 긍정적인 영향을 미친다.
Dot Shorthands: Dart 3.10에서 도입된 Dot Shorthands를 통해 컴포넌트 트리(Component Tree) 간결화 및 API(Application Programming Interface) 일관성 확보
Null-aware Collection Elements: 조건부 렌더링(Conditional Rendering)을 위한 간결한 문법(Syntax) 제공
JS Interop 및 WebAssembly 지원: 웹 API(Web API) 접근성 향상 및 WebAssembly 컴파일을 통한 성능 개선
결과적으로 다트(Dart)의 지속적인 발전은 자스퍼(Jaspr)의 기능 향상과 개발자 경험 개선에 기여하며, 다트 생태계의 성장(Ecosystem Growth)을 이끌고 있다.
자스퍼(Jaspr) 기반 웹사이트 구축의 장점
글에서는 자스퍼(Jaspr)를 통해 얻을 수 있는 주요 이점을 다음과 같이 설명한다.
단일화된 툴체인(Unified Toolchain): Dart pub, dart format, dart analyze, dart test 등 통합된 개발 도구(Integrated Development Tools) 사용
기여(Contribution) 장벽 감소: Dart를 알고 있다면 누구나 웹사이트에 기여 가능, 커뮤니티 참여(Community Participation) 활성화 기대
기존 워크플로우(Workflow) 유지: Sass(CSS extension language) 사용으로 스타일(Style) 변경 최소화
결론적으로 자스퍼(Jaspr)는 개발 생산성 향상뿐만 아니라, 커뮤니티 기여(Community Contribution)를 활성화하여 지속 가능한 웹사이트 운영을 가능하게 한다.
자스퍼(Jaspr)와 협업 과정
본문에서는 자스퍼(Jaspr) 개발자인 Kilian과의 협업 과정을 강조하며, 커뮤니티의 중요성을 언급한다.
Kilian의 지원: Jaspr 개발자 Kilian은 문제 해결(Issue Resolution), 개발자 경험 개선(Developer Experience Improvement), Jaspr Content 개발 등 적극적인 지원
Netlight와의 파트너십: Kilian의 컨설팅 회사인 Netlight와 협력하여 웹사이트 구축 및 Jaspr 투자 지속
커뮤니티 중심: Jaspr는 오픈소스(Open Source) 프로젝트로서, 커뮤니티의 피드백(Feedback)에 적극적으로 대응
결과적으로 플러터(Flutter) 웹사이트 재구축은 Kilian과의 협업을 통해 성공적으로 진행되었으며, 오픈소스(Open Source) 생태계의 중요성을 보여준다.
