Custom Style System 구축하기

이 게시물은 Custom Style System을 구축한 경험을 공유합니다.

스타일 시스템 구축 필요성

• styled-components를 사용하여 CSS-IN-JS 방식으로 작업
• 반복적인 스타일링 패턴 문제 해결을 위해 확장성 있는 시스템 필요

구축 원칙

• 기존 환경 위에서 동작
• 구현체의 제어권 확보
• CSS 속성을 풀네임으로 사용
• 성능 저하 방지

구축 단계

• 인터페이스 정의 및 확장성 고려
• props를 CSS에 적용하는 로직 구현
• 컴포넌트 구현 및 확장성 확보

이 과정을 통해 비슷한 패턴의 스타일 컴포넌트 선언을 줄이고 생산성을 높였습니다.