-
디자인 시스템을 빠르게 효율적으로 구축하기카테고리 없음 2024. 4. 21. 14:21
매번 새로운 프로젝트 구축 시 반복해서 처음부터 만들어야 하는 지루한 작업들.. (Button, Modal, 기본 스타일…)
서비스마다 심지어 페이지 마다 다른 일관되지 않는 Component의 기본 스타일…
font-size, padding, margin, border-radius 등… 규칙적이지 않은 수치 값들…
매번 블록들을 하나하나 처음부터 다시 만들기 보다는 만들어진 블록들로 조립만 할 수 있다면, 분명 효율적인 작업이 되어 생산성이 오르고, 시간을 아낄 수 있어 다른 중요한 부분 및 기능들에 시간을 투자할 수 있을 것이다.
Benefit.
- 생산성 향상: 미리 만들어진 UI 구성 요소를 재 사용하여 생산성 및 작업 효율을 향상 시킨다.
- 일관성 유지: 동일한 UI 구성요소로 사용자 경험의 일관성을 유지한다.
- 협업 강화: UI Library 문서를 작성하여 다른 팀원들이 작업 시 이해할 수 있도록 한다.
지금 회사의 환경에서는..
- 현재 회사의 서비스들은 React 혹은 Jsp 환경으로 나뉘어 있기 때문에 특정 환경에 제한이 없어야 한다. (특정 프레임워크에 의존하지 않는지)
- Jsp 환경 내에서는 CDN으로 import 할 수 있어야 한다. (Jsp 환경에서 작업 시 프로젝트 내 프론트엔드 빌드환경을 세팅 하는것 보다 편리하다)
- 회사의 스케줄 상 component 하나 하나 zero부터 만들어 나가는 것이 어려울 뿐만 아니라, UI Library 문서 구축하는 데에도 많은 시간이 소요될 수 없으므로 시간과 비용을 최소화하는 효율성 있는 방법을 고려해야 한다.
Shoelace Ui Library를 베이스로 하자.
왜 디자인 시스템을 처음부터 한땀 한땀 만들어가는데 수백시간 혹은 그 이상을 들여야 하나?
왜 한 프레임워크의 환경에 제한적으로 ui 라이브러리를 만들어 사용해야 하나?
라고 shoelace는 말하고 있다. (https://shoelace.style/#what-problem-does-this-solve)
Shoelace는 다음과 같은 이점이 있다.
- 컴포넌트 구성요소를 하나씩 from scratch로 작업하지 않아도 되므로 디자인 시스템을 빠른 시간에 구축할 수 있다.
- 다양한 프레임워크(React, Vue)에서도 같은 UI component 공유 가능하다.
- 모든 컴포넌트를 쉽게 커스텀 할 수 있고 지원하는 컴포넌트 수 또한 많다. 기본 디자인 또한 최소한으로 되어있다.
- CDN 으로 사용 가능하다. (별도의 빌드환경 셋팅 없이 script 한줄로 사용가능)
- Lit을 사용한다.
- Lit은 Web Component를 기반으로 하는 보일러 플레이트를 줄여주고 상태 업데이트, 스타일링 캡슐화, 선언형 템플릿 시스템을 제공하는 작고 빠른 Web Component 라이브러리이다. - esbuild 기반 (webpack의 약 100배)
- Web Component Library 중 압도적인 사용수 (github ★ 12k)
- 기존 shoelace repository를 fork 하여 회사의 디자인 시스템 문서 개발 가능
Stratege and CI/CD
https://github.com/shoelace-style/shoelace를 fork 하고 회사 내 디자인 시스템은 main브랜치 에 개별적으로 개발한다.
origin/next브랜치(shoelace 라이브러리의 브랜치)에 업데이트 사항이 있으면 해당 브랜치를 pull 받고 rebae한다.
일단 프로젝트 초기과정 이므로 Netlify로 배포하였다.
URL: https://main--design-medigate.netlify.app/
Repository: https://github.com/MEDICNC/design-system
Netlify는 설정도 간단하고 repository에 코드가 푸쉬 되면 자동으로 빌드 되는 webook 기능을 지원한다.
JS Deliver로 CDN 서버를 무료로 사용할 수 있다.
github repository에 올라와 있으면 별도의 설정이 필요 없다.
pnpm build를 실행하면 design-system/cdn 폴더에 생성되고 이대로 origin에 푸쉬하면 js deliver로 접근가능하다.
URL
https://cdn.jsdelivr.net/gh/[사용자명]/[레포지토리명@브랜치이름]/[파일경로]
ex) https://cdn.jsdelivr.net/gh/MEDICNC/design-system@main/cdn/shoelace-autoloader.js
⚠️주의⚠️
CDN은 캐시 서버이므로 파일 변경 시 CDN 서버에 실시간 반영되진 않고 캐시 만료시간 후에 변경된 파일이 적용되니 주의해서 소스 변경 시 유의해야 한다.
도입 1개월 후...
Web Component의 치명적인 단점 2가지로 인하여 현재 디자인 시스템을 엎을 수 밖에 없었다.
첫번째 이유.
웹페이지 첫 진입 로딩시 스타일 되지않은 UI 요소들이 깜빡이는 현상이다. Web component 사용시 커스텀 태그들이 자바스크립트에 의해 로드, 처리, 렌더링 되는데 ms단위의 시간들이 소요될 수밖에 없다. 이로인해 사용자에게 좋지 않은 사용자 경험을 줄 수 있다.
두번째 이유.
MVC 환경 jsp 에서 script로 해당 web component요소를 jquery로 처리할때 select 는 되나 특정 jquery method 들이 실행되지 않는다.. 기존에 알고있던 jquery api들이 실현되지 않을 수 있다. web component api에 방식에 맞춰야한다.
물론 학습하여 순수 js 로 처리하면 되지만... 다른 개발 팀원에게 학습을 강제해야하니.. 부담이 될 수 있다.
(참조: https://dev.to/emileperron/web-components-in-2021-the-good-the-bad-and-the-ugly-3kg)
새로운 Plan...
UI 라이브러리를 최대한 적용하지 않고(용량 최적화, 성능, 확장성 고려) 순수하게 style.scss로 작성 한 후
esbuild 나 vite 로 css나 js 파일을 번들링 한 후 jsdelivr로 cdn에 배포한다.
리액트 환경에서는,
postcss-to-cva library(https://medium.com/@qq1324318532/use-postcss-cva-to-generate-cva-method-5626fa3e2dca)로 작성한 css파일을 cva(https://cva.style/docs)로 변환한다음 react 환경에서는 cva로 컴포넌트를 작업할 계획이다.
docs에 대한 구축은 next + velite (mark down builder)를 활용할 예정이다.
Reference.
- 5 Reasons to use web components in your design system
https://backlight.dev/blog/5-reasons-to-use-web-components-in-your-design-system - Button Component with CVA and Tailwind https://dev.to/shubhamtiwari909/button-component-with-cva-and-tailwind-1fn8
- Will Web Components Replace React? https://www.foo.software/posts/will-web-components-replace-react
- Web components in 2021: the Good, the Bad and the Ugly https://dev.to/emileperron/web-components-in-2021-the-good-the-bad-and-the-ugly-3kg
- 깃헙 개발자들이 React 안쓰는 이유: Web Component https://www.youtube.com/watch?v=RtvSgptpfnY&t=221s
반응형