design-system-team94

TEAM94

😎 서비스 소개 (디자인부터 npm 배포까지! 🚃)

Figma를 사용하여 직접 UI를 디자인한 후, 디자인 시스템 개발하여 스토리북과 라이브러리에 배포하였습니다.
프로젝트마다 반복되는 컴포넌트 사용이 비효율적인 작업으로 생각되어 디자인 시스템을 만들어 npm에 라이브러리 형태로 배포하여 생산성을 향상하고자 하였습니다.
앞으로 지속적인 업데이트와 피드백을 통해 디자인 시스템을 더욱 발전시키고자 합니다.

🚅 적용 방법

먼저, 라이브러리를 다운 받아주세요.

npm i design-system-team94

그리고 tailwind.config 파일에 아래의 설정을 추가한 후 사용해주세요!

module.exports = {
  presets: [require('design-system-team94/tw-config/preset')],

  content: [
    ...,
    './node_modules/design-system-team94/**/*.js'
  ],
}

🏷️ 라이브러리 사용법 (StoryBook)

📖 스토리북 URL

스토리북 CI / CD 적용하기

🏷️ UI 디자인 (Figma)

🎨 피그마 URL

🏷️ 프로젝트 소개서 (Notion)

📎 노션 URL

🏷️ NPM

📖 NPM URL

NPM 라이브러리 배포하기

라이브러리 스타일 이슈 해결하기

🐶 팀원 소개

박건우	강경서
🔗 GitHub	🔗 GitHub

⚙️ 가이드라인

컨벤션 설립

협업 툴

기술 스택

🤔 회고

👨🏻‍💻박건우: 스토리북을 사용하며 디자인 시스템과 문서화의 중요성에 대해 배웠습니다. 팀원분과 함께 디자인부터 배포까지 진행하며 다채로운 경험을 할 수 있었습니다. 향후 프로젝트에서는 발전된 디자인 시스템을 활용하여 더 나은 결과물을 만들어 나갈 것입니다.

🧑🏻‍💻강경서: 처음 경험해보는 라이브러리 배포, 개발을 하면서 마주친 이슈들을 팀원분과 해결하면서 많이 배웠습니다. 스프린트 프로젝트를 통해 짧은 기간에 집중된 노력으로 보다 빠르게 프로젝트를 완료할 수 있었습니다. 해당 디자인 시스템을 더욱 발전시켜 앞으로 진행하게 될 많은 프로젝트에서 사용하고싶습니다.