React SVG Icon from Figma
figma > react, react native
5인 규모의 개발팀에서 첫 버전의 제품 개발과 디자인 시스템을 병행해 출시해 현재까지 운영과 개편을 진행해나가면서 많은 변화가 있었고 UIKit (react, react native)은 react는 총 3번 그리고 react native는 첫 개편을 현재 마무리해 각 프로덕트에 UIKit V2적용을 2분기내 목표로하고 있습니다. react에는 많은 우여곡절이 있었지만 현재 제가 다시 정리하는 작업을 진행 중이고 총 소요기간은 2주 정도 걸린 것 같습니다
https://brunch.co.kr/@fifthsage/3
react와 react native라는 같으면서도 다른 UIKit 작업을 진행하면서 가장 많이 고민했던 부분이 반응형과 공유 자원 (assets, components)에 대한 내용이었습니다. 함께 코드를 셰어 할 수 있을 듯하면서도 결국 플랫폼별 환경변수가 다르고 렌더링 되는 방식이 다르기 때문에 코드를 전부 함께 쓰기보다는 함께 쓸 수 있는 영역(ThemeProvider에 주입되는 theme객체를 기준)을 최대한 공통 모듈화 하는 것으로 방향을 잡았습니다.
공통 모듈에 포함되는 것들
- constants (colors, sizes, space 등을 styled-component의 theme에 형식에 맞게)
- icon
UI는 constants들을 기준으로 형태가 결정되고 플랫폼별로 따로 대응하는 방식을 선택했습니다. 반응형에 대한 대응은 styled-system을 기준으로 쉽게 구축했습니다. (다음 글에 다루어질 예정입니다) 하지만 icon을 공용화하다 보니 많은 시행착오를 겪게 되었습니다 SVG를 이용해 간단히 사용할 수 있으리라 생각했었지만 svg를 직접 사용하기에는 많은 이슈가 있기에 component로 변환을 해서 사용하기로 결정했습니다.
공통 모듈에 대한 maintainer
Figma UI 디자인에 대한 최종 관리와 해당 상수들을 코드화 해 npm publishing이 가능한 사람이어야 합니다 현재는 CTO인 제가 맡고 있습니다.
Workflow
1. Figma에서 SVG 추출
2. 추출한 SVG 파일들을 react, react native component로 변환
3. ui-master package publishing
4. 각 UIKit에서 dependency update
Figma
Figma Icon Variations
figma에서 Icon을 assets 라이브러리로 사용하기 위해서는 사이즈에 대한 variations이 필요합니다 UI component들의 경우 figma에서 variation 된 대로 코드 구현을 하면 되지만 Icon SVG를 component로 변환을 하게 되면 SVG props를 이용해서 사이즈를 조절해야 하기 때문에 기준 Icon을 vector화 해 constraints를 scale로 설정해 주고 export용 frame Icon을 만들어 줍니다.
Icon instance를 export name convention에 맞춰서 frame으로 감쌉니다이렇게 추출된 svg들은 공용 모듈화를 위해 ui-master package로 이동/복사합니다. (향 후 이 부분에 대한 자동화에 대한 고민 해결이 글로 나올 수 있기를... feat. figma API)
ui-master package
export 된 SVG들을 이동/복사했다면 이제는 component로 만들어야 합니다. 이 작업을 진행하기 위해
svgr과 svgo 그리고 약간의 스크립트가 필요합니다. svgr과 svgo는 SVG file을 react component로 만들어주는 라이브러리입니다. 해당 라이브러리를 as-is에서는 프로덕트 빌드 시 webpack, rollup, metro에서 loader로 활용을 했었지만 각 프로덕트 별로 굳이 webpack이나 rollup 등을 추가 설정하기보다는 공통 모듈에서 미리 component로 만들어놓으면 관리 이슈가 파편화되지 않고 SVG transpiling에 대해 신경을 쓰지 않아도 됩니다
icon-generator.js
component로 변환한 SVG에 대한 type과 index 파일을 만드는 스크립트svgr을 이용해 component를 만들어 줬다면 component들을 약속된 name convention에 맞게 불러서 쓸 수 있게 하기 위해 index.ts와 types.ts를 만드는 스크립트입니다.
gulp.ts
svgr과 스크립트를 조합해 실행할 수 있게 도와줍니다gulp를 이용해 svgr과 스크립트를 조합해 react, react native component를 만들고 빌드할 수 있는 task를 만들어 줍니다 build나 iconSync 스크립트를 이용해 손쉽게 Icon SVG들을 react와 react native component들로 만들 수 있습니다. 끝으로 npm publish를 통해 다른 프로덕트 패키지 UIKit에서 참조할 수 있게 만들어 줍니다.
프로덕트 패키지에서 사용디자인 시스템의 목표는 콘텐츠, 프로덕트 디자인의 일관성 유지입니다. 또 한 권한과 제한은 공유를 강제하는 순기능을 하며 특정 UIKit에서 발생한 이슈는 이유를 충분히 설명하고 협의해 공유한 다음 기준이 되는 문서를 편집하는 것이 가장 올바른 방법이라고 믿고 있습니다. figma와의 sync를 하나의 공통 모듈로 제한하면 파편화로 인한 수많은 부작용을 방지할 수 있습니다. 또 한 제안에 대해서는 구성원들이 이해하기까지 충분한 도움을 준다면 언제든지 반영되어 개선될 수 있습니다.
