디자인 시스템 구축check_circle(주)한싹, 2024.06 ~ 2024.12
HTML
CSS
Javascript
React
Typescript
Tailwindcss
Google material icon
Storybook
Npm
Eslint
Prettier
Git
Jira
Confluence
Slack개요
공통 웹 플랫폼에서 사용하던 Javascript, Material-UI 기반의 공통 컴포넌트에서 Runtime Error가 빈번하게 발생하고, 디자인 단계에서 제약사항이 있는 문제점을 발견했습니다. 이를 개선하기 위해 Typescript, TailwindCSS로의 전환과 동시에 효율적인 유지보수를 위해 Atomic Design Pattern을 바탕으로 사내 Nexus 저장소에서 NPM Package에 의해 버전 관리가 가능한 사내 디자인 시스템 구축을 목표로 진행한 프로젝트입니다.
역할
CRA(Create React App)를 활용해 개발 환경을 구축하고, 사내 Nexus 저장소 NPM Packaging 배포 가이드를 작성하였습니다. 또한, Atomic Design Pattern을 바탕으로 컴포넌트의 설계 및 개발과 더불어 Storybook을 활용한 컴포넌트 Story를 작성했습니다.
성과
1. 공통 컴포넌트 설계 및 개발.
check_boxAtomic Design Pattern (Atom, Molecules, Organisms, Pages)을 기준으로 컴포넌트를 세분화하고, 기존 컴포넌트의 UI와 Logic 관심사를 분리하여 재사용성 및 유지보수성 개선.
check_boxTypeScript로 약 20개의 컴포넌트를 개발하고 Props의 명시적 타입 선언을 통해 런타임 에러 감소 및 코드 품질 개선.
check_boxMaterial UI 의존성을 제거하고 Tailwind CSS를 적용해 디자인 유연성 강화 및 컴포넌트 크기 감소로 성능 최적화.
2. 개발 환경 구축 및 문서화
check_boxCRA (Create React App), ESLint, Prettier를 활용하여 프로젝트 초기 개발 환경을 구축하고, 코드 품질을 위한 규칙 정의.
check_boxStorybook 프로젝트 설정 후, 공통 컴포넌트 Story를 작성하여 컴포넌트 문서화.
check_box사내 NPM 저장소 대상으로 Npm packaging 배포 환경 구축 및 버전 관리 전략 수립.
check_box프로젝트 빌드, 배포 및 설치 가이드 문서를 작성하고 관리.