Custom Style System 구축하기

간단 소개

크리에이트립 프론트엔드 개발자가 Custom Style System 구축 경험을 공유하며, 필요성, 원칙, 구축 과정 및 결과를 설명합니다.

AI Summary

Custom Style System 구축 배경
- styled-components 사용 시 반복적인 스타일링 패턴 문제 발생
- 확장성 있는 스타일 시스템 구축 필요성 인식, 특히 레이아웃 스타일링에서
Style System 구축 원칙
- 기존 환경과의 호환성 유지, 추가 의존성 최소화
- 인터페이스 및 구현체의 제어권 확보, 필요한 기능만 구현
- CSS 속성명 축약 지양, 풀네임 사용으로 혼동 방지
- 성능에 영향 최소화, 기존 방식 대비 성능 저하 방지
Custom Style System 구축 과정
- 인터페이스 정의 시 확장성 고려, 연관 속성 그룹화
- props를 CSS로 변환하는 로직 구현, 매퍼 활용
- 컴포넌트 구현 시 역할과 책임 기반으로 인터페이스 조합, getCssObjectFromProps 함수 활용
- VStack, HStack, Center, Grid 등 컴포넌트 구현 및 활용