디자인 시스템으로 UX-FE 협업 UP!
by DD
1년 전
조회수 20
Design System 도입으로 UI/UX 일관성을 확보하고, 디자인과 개발 간 협업 효율성을 높임
Figma를 활용한 Hand-off 과정을 통해 개발 생산성을 극대화하고, 불필요한 커뮤니케이션을 감소시킴
Storybook과 NPM 라이브러리 통합으로 컴포넌트 재사용성을 높이고, 유지보수 및 확장성을 향상시킴
Hand-off 최적화: Figma와 Design Token
Figma를 활용한 Hand-off는 디자인과 개발 간의 간극을 줄이는 핵심 전략이다. 구체적으로 디자인 Token을 활용하여 색상, 폰트 등 UI 스타일을 정의하고, 개발자는 이를 코드로 변환한다. 따라서 Human Error를 최소화하고, UI 개발 속도 향상을 달성한다.
Design System 아키텍처: Foundation, Component, Template
Design System은 Foundation, Component, Template의 세 가지 요소로 구성된다. 은 UI의 기본 스타일과 규칙을 정의하며, 는 재사용 가능한 UI 요소, 은 컴포넌트 조합으로 페이지 레이아웃을 구성한다. 따라서 를 제공하고, 을 향상시킨다.
