React 기반 디자인 시스템 구축

프로젝트 개요

• 한 줄 소개
  전사 공통 UI 컴포넌트 및 디자인 시스템 개발

• 기간
  2022.08 ~ 2023.09 (약 1년 2개월)

• 팀 구성
  6인 팀 프로젝트

• 역할
  Frontend

---

프로젝트 설명

전사 서비스 전반에 적용 가능한 React 기반 디자인 시스템을 구축한 프로젝트입니다.

재사용 가능한 UI 컴포넌트를 설계하고,
Storybook을 활용한 UI 문서화를 통해
개발자뿐 아니라 디자이너 및 비개발자도 컴포넌트를 확인하고 활용할 수 있도록 환경을 구성했습니다.

이를 통해 개발 생산성과 디자인 일관성을 동시에 향상시키는 것을 목표로 했습니다.

---

주요 기능

• 재사용 가능한 UI 컴포넌트 라이브러리 구축
• Storybook 기반 UI 문서화
• 디자인-개발 협업 프로세스 개선
• Atomic Design 기반 컴포넌트 구조 설계

---

기술 스택

Frontend

• React
• Storybook

DevOps

• AWS
• GitHub Actions
• Jenkins
• NPM

Etc

• Slack / Jira / Notion / GitHub / Figma

---

문제 정의

• 프로젝트마다 서로 다른 UI 컴포넌트 사용으로 디자인 일관성 부족
• 공통 컴포넌트 부재로 인한 중복 개발 발생
• 디자이너와 개발자 간 결과물 확인 및 피드백 과정 비효율
• UI 변경 시 영향 범위 파악 어려움

---

해결 과정

1. Atomic Design 기반 구조 설계

• Atom / Molecule / Organism 단위로 컴포넌트 계층 분리
• 재사용성과 확장성을 고려한 컴포넌트 설계

---

2. Design Token 정의

• 색상, 타이포그래피, spacing 등 공통 스타일 요소를 토큰화
• 디자이너(Figma)와 개발 간 일관된 기준 수립

---

3. Storybook 기반 UI 문서화

문제:

• 구현된 UI를 실제 서비스에 반영하기 전까지 확인할 수 있는 환경 부재

해결:

• Storybook을 활용하여 컴포넌트 단위로 UI 문서화
• 다양한 상태(props)별 UI를 시각적으로 확인 가능하도록 구성

효과:

• 비개발자도 UI 확인 및 피드백 가능
• 커뮤니케이션 비용 감소

---

4. NPM 기반 배포 및 재사용 구조 구축

• 공통 UI 컴포넌트를 패키지화하여 배포
• 여러 프로젝트에서 동일한 컴포넌트 재사용 가능하도록 구조 설계

---

성과

• UI 컴포넌트 재사용으로 개발 생산성 향상
• 디자인 일관성 확보
• 릴리즈 이후 UI 수정 횟수 감소
• 디자이너-개발자 간 협업 효율 개선
• 신규 프로젝트 초기 개발 속도 향상

---

회고

단순히 UI를 만드는 것을 넘어,
조직 전체의 생산성과 협업 방식을 개선하는
“기반 시스템”의 중요성을 체감한 프로젝트였습니다.