Introduction
이 문서는 레포지토리 내 다양한 패키지에 대한 간략한 소개를 제공합니다.
해당 레포지토리는 Bezier React 라이브러리 패키지를 포함하는 모노레포로서 Bezier React 외에도 제품 팀의 생산성을 높이기 위한 다른 패키지도 함께 제공하고 있습니다.
각 패키지의 사용법 등 자세한 내용은 해당 패키지의 README.md 를 참고해 주세요.
채널코퍼레이션의 디자인 시스템, 베지어를 React로 구현한 오픈 소스 라이브러리입니다. 적절한 설계를 통해 디자인과 코드 사이의 간극을 최소화하고, 베지어의 핵심 가치를 사용자에게 일관되게 전달하는 것을 목표로 합니다.
이 레포지토리 변경 사항의 대부분을 차지합니다.
베지어에서 사용되는 아이콘을 제공하는 라이브러리입니다. 기본적으로 React 컴포넌트 형태의 아이콘을 제공하며, 필요하다면 svg 에셋을 그대로 사용할 수도 있습니다.
디자이너가 Bezier Figma Plugin을 통해 레포지토리에 변경 사항을 담은 PR을 생성하고, 개발자는 변경 사항을 확인하여 반영하는 방식으로 업데이트가 이루어집니다. 아이콘이 업데이트되는 과정을 요약하면 아래와 같습니다. 자세한 구현 방법은 Bezier Figma Plugin을 참고해주세요.
- 디자이너가 피그마에서 아이콘 세트를 선택 후 PR 생성 버튼 클릭
- 아이콘 세트로부터 아이콘 이름과 아이콘의 svg 문자열을 키 밸류로 하는 json 객체 생성
- Github API를 이용하여 이 json 객체을 변경사항으로 하는 한 개의 커밋을 만들고 PR을 생성
- PR이 생성되면 깃헙 액션이 트리거 되어 json 객체로부터 아이콘 파일을 만드는 스크립트를 실행
- 생성된 아이콘 파일을 커밋
- json 객체 삭제 후 커밋
- PR에 개발자가 changeset을 추가 한 다음 머지
향후에는 changeset을 추가하는 작업을 자동화하고, PR에 아이콘 변경사항을 설명하는 내용까지 추가되도록 개선할 예정입니다. 또한, 모바일 팀도 함께 사용하여 베지어 아이콘의 단일 진실 공급원이 되기를 목표로 하고 있습니다.
제품 팀 전체의 생산성을 높이기 위한 피그마 플러그인입니다. 디자이너가 베지어를 쉽게 구축하고 활용할 수 있도록 하며, 디자이너와 개발자 사이를 이어 불필요한 리소스를 낭비하지 않도록 돕는 것을 목표로 합니다.
현재는 피그마에서 아이콘을 자동으로 연동하는 기능이 구현되어 있습니다. 디자이너가 피그마 플러그인을 작동시키면 아이콘 에셋을 업데이트하는 PR이 생성됩니다. 이전에는 bezier-react 레포에 직접 만들어졌으나, 현재는 bezier-asset 레포지토리에(private) PR이 올라가고, 이 PR이 머지되고 이후에 개발 브랜치가 마스터 브랜치에 머지되면 bezier-react에 PR이 올라가게 됩니다. 아이콘 연동 기능 개선 외 다른 기능들도 추가될 예정입니다. 자세한 내용은 관련 이슈를 참고해 주세요. 직접 기여도 얼마든지 가능하니, 적극적인 기여를 기대합니다!
개발하기에 앞서 How Plugins Run?와 Quickstart Guide를 읽어보는 걸 추천합니다.
로컬로 개발하면서 플러그인을 동작시키려면 피그마 데스크탑앱에서 우클릭해서 보여지는 아래 이미지처럼 bezier-figma-plugin 패키지 아래에 있는 manifest.json을 로드합니다. 변경된 코드가 적용되는 것을 바로 확인하기 위해, 아래 이미지에서 Hot reload plugin 옵션을 체크합니다. 단, 코드를 변경하고 나서 index.html 에서 한 번 저장을 해줘야 제대로 리로딩이 됩니다.
채널팀 내부용으로 사용하기 위한 플러그인을 배포하기 위해 디자이너에게 피그마 에디터 권한을, 플러그인 개발자에게 플러그인 배포 권한을 요청해야 합니다. 권한을 부여받았다면, 빌드된 피그마 플러그인의 manifest.json 을 로드해서 플러그인을 실행시킨 뒤 아래 이미지처럼 publish 버튼을 눌러서 배포를 진행하면 됩니다.
- 채널톡 기술 블로그 - 피그마 플러그인으로 아이콘 업데이트 자동화하기
- Implement the figma plugin for Bezier (#842)
- Enhance bezier-figma-plugin by using github action (#1596)
Bezier React의 호환되지 않는 대규모 변경 사항을 거대한 코드 베이스에 쉽게 적용하기 위한 라이브러리입니다. 자동 마이그레이션 코드를 제공하며 npx 명령어를 통해 실행할 수 있습니다.
Bezier React에 변경 사항을 추가해 주시는 분께서 책임감을 가지고 자동 마이그레이션 코드를 함께 작성해 주시기를 기대합니다.