AI 요약
루이싱 커피(Luckin Coffee)의 UI 디자인 가이드를 기반으로 개발된 'lkcn_ui' 패키지가 Flutter 공식 패키지 저장소인 pub.dev에 공개되었습니다. 이 프로젝트는 기존에 공개된 위챗 미니 프로그램 전용 UI 라이브러리인 'lkcn-ui'(npm)의 자매 프로젝트로, 22개의 핵심 컴포넌트를 Flutter 환경에서 완벽하게 구현했습니다. 개발자는 'DESIGN.md' 파일을 '단일 진실 공급원(Single Source of Truth)'으로 정의하여 서로 다른 런타임 환경인 위챗 미니 프로그램과 Flutter에서 동일한 디자인 언어를 유지할 수 있음을 증명했습니다. 기술적으로는 CSS 변수를 Dart의 const 클래스로 변환하고, 미니 프로그램의 rpx 단위를 Flutter의 논리적 픽셀로 매핑하는 등의 세밀한 이식 과정을 거쳤습니다. 이를 통해 iOS, Android, macOS, Web 등 4개 플랫폼에서 루이싱 커피 특유의 사용자 경험을 일관되게 제공할 수 있게 되었습니다.
핵심 인사이트
- 22개 컴포넌트의 완벽 이식: 버튼, 스테퍼, 가격 표시기 등 루이싱 커피 앱의 핵심 디자인 요소를 담은 22개 컴포넌트가 Flutter 버전으로 제작되었습니다.
- 플랫폼별 배포 채널: 위챗 미니 프로그램용은 npm(
lkcn-ui)을 통해, Flutter용은 pub.dev(lkcn_ui)를 통해 배포됩니다. Dart 생태계 관례에 따라 'lkcn_ui'라는 스네이크 케이스 명칭을 채택했습니다. - 디자인 규격 공유 및 버전 전략: 두 프로젝트는 하나의 'DESIGN.md' 파일을 공유합니다. 버전 관리 시 MAJOR.MINOR는 일치시켜 API 호환성을 유지하고, 버그 수정을 위한 PATCH 버전만 독립적으로 관리합니다.
- 오픈소스 리포지토리: GitHub의
qwfy5287/lkcn-ui-flutter경로를 통해 전체 소스 코드가 공개되어 누구나 접근 및 기여가 가능합니다.
주요 디테일
- 단위 변환 공식 적용: 위챗 미니 프로그램의 750 디자인 가이드 기준인
rpx단위를 Flutter의 논리적 픽셀(lpt)로 변환하기 위해 'rpx = lpt × 2' 공식을 적용했습니다. (예: 폰트 28rpx → 14lpt, 여백 24rpx → 12lpt) - 타입 안전성 강화: 문자열 기반의 미니 프로그램 속성(type="primary")을 Flutter의 강한 타입 시스템인
enum(LkcnButtonType.primary)으로 변경하여 컴파일 단계에서 오류를 검출하도록 설계했습니다. - 애니메이션 정밀도 구현: 루이싱 커피 앱의 특징적인 '장바구니 추가' 인터랙션을 구현한
LkcnStepper컴포넌트에는 WXSS의 cubic-bezier 값과 동일한LkcnMotion.bounce애니메이션을 적용했습니다. - 컴포넌트 구조의 논리적 변환: 미니 프로그램의
<slot>구조를 Flutter의 명명된 위젯 매개변수(Named Widget Parameters)로 변환하여 코드의 가독성과 IDE 자동 완성 기능을 극대화했습니다. - 멀티 플랫폼 데모: example 앱을 통해 iOS, Android, macOS, Web 4단 환경에서 컴포넌트를 즉시 확인할 수 있으며, 이는 위챗 개발자 도구에 의존하던 기존 환경보다 접근성이 높습니다.
향후 전망
- 디자인 시스템의 확장성: 단일 디자인 규격(DESIGN.md)이 서로 다른 기술 스택(JavaScript/Dart)을 성공적으로 구동함에 따라, 향후 기업용 크로스 플랫폼 UI 라이브러리 개발의 주요 사례가 될 것으로 보입니다.
- Flutter 생태계 기여: 고도로 정제된 상업용 앱의 UI를 Flutter 패키지로 제공함으로써, 루이싱 커피와 유사한 서비스 모델을 가진 앱 개발자들의 개발 속도가 대폭 향상될 전망입니다.
출처:juejin