CSS 내재화 아키텍처 전환
시리즈 개요
모바일 상품 상세 페이지의 CSS가 React 컴포넌트 저장소와 별도의 정적 리소스 저장소(CDN)에 이원화되어 관리되고 있었습니다. 이로 인해 배포 순서 의존성, 스타일 충돌, 이중 관리 부담 등의 기술 부채가 누적되어 있었습니다.
이 시리즈에서는 CDN에서 제공하던 CSS를 React 번들에 점진적으로 내재화하는 전 과정을 7편에 걸쳐 기록했습니다.
시리즈 구성
| 편 | 주제 | 핵심 내용 |
|---|---|---|
| 1편 | 현황 분석 | CSS 이원화 구조의 문제점과 기술 부채 분석 |
| 2편 | 전략 수립 | 점진적 내재화 전략과 로드맵 설계 |
| 3편 | 번들링 구조 | Critical CSS / Rest CSS 2분할 번들링 구조 설계 |
| 4편 | 컴포넌트별 전환 | 블록 단위 CSS 이관 실행 및 검증 |
| 5편 | 충돌 해결 | 기존 CDN CSS와의 스타일 우선순위 충돌 해결 |
| 6편 | 성능 검증 | 내재화 후 성능 지표 측정 및 비교 |
| 7편 | 마무리/회고 | 전환 완료 정리 및 향후 개선 방향 |
핵심 기술 결정
- Critical / Rest 2분할 — ATF(Above The Fold) 영역 CSS를 Critical로 분리하여 초기 렌더링 속도 확보
- 점진적 전환 — 한 번에 모든 CSS를 이관하지 않고, 블록(컴포넌트) 단위로 순차 이관
- CSS Modules 활용 — React 컴포넌트와 스타일의 결합도를 높여 스코프 격리
- 기존 CDN CSS fallback — 이관 완료 전까지 CDN CSS를 유지하여 안정성 확보
성과
- CSS 관리 포인트를 2개 → 1개 저장소로 통합
- 배포 순서 의존성 제거로 독립적 배포 가능
- 스타일 충돌 이슈 감소 및 컴포넌트별 스타일 캡슐화
- Critical/Rest 분리로 초기 렌더링 성능 유지