미리보기

시작 배경

• shadcn 에서 영감을 받아, CLI를 통해 디자인 시스템 구성에 필요한 코드를 제공

• shadcn의 reigstry schema와 동일한 registry를 구성한다면, CLI를 직접 구현하지 않아도 됨

  • 하지만 tailwind로 마이그레이션 필요 + CLI 변경에 직접 대응할 수 없음

  • pandacss 기반의 현재 디자인 시스템을 tailwind로 변경하기보다는, 직접 CLI를 제작하기로 결정

  • radix UI ,framer-motion 등의 라이브러리를 활용하여 작은 단위부터 큰 단위의 UI 제작

기술 스택

React, Next.js, Pandacss, AWS S3+Cloudfront, Vitest

컴포넌트 코드 저장소(registry) 사용

• 처음에는 CLI 빌드 결과물에 컴포넌트 코드를 포함하는 방식 -> 컴포넌트 코드를 변경하기 위해서 새 버전을 배포해야함

  • 컴포넌트 관련 코드를 저장하는 registry를 따로 만들어, CLI 실행 시 registry에 요청(fetch) 방식으로 변경

  • 추후 문서화 페이지도 운영 예정 -> next의 static export를 통해 정적 페이지로 같이 배포

  • aws s3 + cloudfront를 활용하여 호스팅

registry를 구성하기 위한 자동화 script 개발

• 직접 registry 파일을 작성할 경우 코드의 변경에 바로 대응하기가 어려움

• ui 패키지의 컴포넌트를 대상으로 컴포넌트가 속해있는 폴더, 파일 이름을 기반으로 registry 파일을 생성하는 스크립트 작성 (코드)

  • zod를 사용하여 유효성 검사

codemod 기능 제공

• 최근 변경된 radix-ui 설치 방식에 대응하기 위해 codemod 개발(관련 PR)

• ts-morph를 활용하여 제네릭 등 ts 타입 부분 변경 가능

효율적인 코드/테스트 방식 고민

• 개발 초기부터 코드 품질을 높이기 위해 추상화,중복제거 등 클린 코드 원칙 적용(코드)

  • 섣부른 도입이 오히려 기능을 추가하는데 어려움을 겪음

  두번째 기능에서는 빠른 기능 구현과 읽기 쉬운 코드에 중점(코드)

  • 코드 외적인 요소(주석,PR) 또한 개선

• 두 가지 방법을 통해 자연스럽게 발견한 개선 방법을 통해 나만의 클린 코드를 찾는 중

  • Ex) 4가지의 핵심 기능으로 분리 가능하다는 것을 파악. 이를 기반으로 모듈화 및 에러 처리 진행 중

• CLI 테스트

  • 사용자의 파일에 접근하고 수정하는 기능 존재 -> 의존하고 있는 환경이 많아 테스트에 어려움

    • 타 라이브러리의 테스트 코드를 분석 -> 테스트용 환경을 미리 생성 vs 테스트마다 환경 생성/삭제

  • 테스트마다 파일 생성 시 병렬로 실행되는 다른 작업에 영향을 주는 케이스 발생

    • 테스트의 안정성을 고려하여 전자의 방법으로 테스트코드 작성 및 pnpm link 를 활용하여 로컬 테스트 진행

• 기존 개발 과정에서 디자인 관련 불편함을 개선해보기 위해 학습 목적으로 시작한 프로젝트

• 개인적으로 사용하기 위한 디자인 시스템 -> 범용적 라이브러리로 리팩토링 진행 중
  github 링크
  관련 포스팅

기존 프로젝트에서 발견한 문제점

• 디자인 에셋 관리 미흡으로 재사용성 저하

• 디자인의 코드 구현 과정에서 비효율 발생

• 컴포넌트 파편화로 UI 일관성 및 유지보수성 저하

• 스타일 속성의 하드코딩 작업으로 개발 생산성 저해

  ---

기술스택

• React, Typescript, PandaCSS, Storybook

pandacss 도입

• DX 측면을 고려하여 type-safe한 디자인 시스템 구축 및 여러 문제상황(런타임 오버헤드, ssr 이슈)에 자유로운 점을 고려하여 Pandacss 도입
  (의사결정 과정 , 성능 비교)

• 디자인 토큰과 레시피 기반의 컴포넌트 스타일 체계 구축으로 개발 생산성 향상

일관성과 유연성을 고려한 공통 컴포넌트 설계

• 컴포넌트의 원칙과 재사용성을 고려하여 Headless UI 기반으로 컴포넌트 설

  계

• 컴포넌트마다 반복되는 방향키 이동처리를 custom hook으로 구현

• 접근성, 디자인 가이드라인을 참고하여 제작

배포 및 빌드 방식

• 전통적인 UI 라이브러리 방식(mui,antd) 대신 Pandacss의 특성을 고려하여 CLI를 통한 컴포넌트 copy-paste 방식 선택

• 테마,컴포넌트 스타일 등을 미리 preset으로 만들어 배포한 뒤 사용하는 다른 PandaCSS 기반 라이브러리들의 경우 스타일 커스터마이징에 일부 제약 존재

  • 컴포넌트 코드와 스타일 선언 코드를 함께 제공하는 방법을 통해 높은 커스터마이징 자유도 제공

• Turborepo 도입

  • pnpm workspace로만 패키지를 관리하기에는 각 패키지의 의존성을 고려한 빌드 순서 고려, 실행 속도 등의 문제점 발생

    • turbo.json 설정을 통한 실행 순서 관리 및 캐싱을 활용한 실행 속도 개선

    • turborepo Just-in-Time package을 활용하여 다른 패키지에서 변경사항 즉시 반영 - 생산성 향상

Storybook를 활용한 스토리북 주도 개발

• 제작부터 테스트 후 배포까지 storybook과 chromatic을 통해 진행

• storybook의 테스트 기능을 활용하여 접근성, interaction 등의 테스트 진행

• storybook 자체 test runner -> Vitest 마이그레이션을 통해 테스트 및 빌드 시간 80% 단축(4m -> 42s)

CI/CD 구축

• node_modules와 playwright 바이너리 파일에 대한 캐시 적용으로 CI 시간 약 75% 단축(3m -> 1m)

• turborepo + vercel remote cache를 통한 actions 환경에서도 turborepo 캐시 적용

• 파일 변경 감지 배포 시스템 구축

  • changeset을 통해 .changeset 파일 존재 시 npm 배포 진행

  • 각 패키지에 변경사항이 있는지 감지하여 chromatic, aws로의 배포 진행

• 협업 경험과 기본 지식을 쌓기 위해 지원

• 구현 과제, 스터디, 프로젝트를 통해 팀 차원의 협업 경험