Custom Style System 구축하기
프론트엔드
Custom Style System 구축하기
두줄요약
styled-components 기반 프로젝트에서 반복되는 레이아웃 스타일을 줄이기 위해 Custom Style System을 구축했습니다. props 매핑과 반응형 인터페이스로 VStack, HStack 같은 재사용 컴포넌트를 만들었습니다.
핵심 내용
- styled-components 기반 프로젝트에서 반복되는 flex, grid 레이아웃 스타일 패턴을 줄이기 위한 Custom Style System 구축 경험
- 기존 환경 위에서 동작, 인터페이스 제어권 확보, 축약 표현 지양, 성능 영향 최소화라는 원칙 설정
- props를 css 속성으로 매핑하는 로직과 VStack, HStack, Center, Grid 같은 컴포넌트 구현으로 스타일 선언을 단순화
- 동료와 인터페이스 범위를 논의하며 확장성과 유지보수성을 함께 고려