배경
모바일 상품상세의 React 컴포넌트와 운영 스타일이 서로 다른 저장소에서 관리되고 있었습니다. 화면을 수정하려면 컴포넌트 코드와 기존 SCSS를 따로 찾아야 했고, 개발자와 AI 보조 도구 모두 변경에 필요한 맥락을 한 번에 확인하기 어려웠습니다.
파일을 단순히 옮기는 것보다 React의 컴포넌트 구조에 맞는 스타일 관리 단위를 다시 정하는 것이 먼저 필요했습니다.
직접 맡은 범위
- React 기반 신규 UI 블록 약 18개 구현
- 공통 스타일을 제외한 기존 운영 블록 SCSS 약 108개 내재화
- 기존 SCSS를 React 컴포넌트 구조에 맞춰 화면 블록 단위로 재구성
- 신규 UI는 컴포넌트와 스타일 블록이 대응하도록 구성
- Storybook에서 주요 상태와 화면 결과 확인
- 상품상세 첫 화면(ATF) 개선에 반영
약 108개라는 숫자는 공통 SCSS를 제외한 운영 블록 기준입니다. 신규 UI 블록 약 18개와는 분류 기준이 다르므로 두 숫자를 합산하지 않습니다.
구조를 결정한 기준
기존 SCSS의 구분 방식과 React 컴포넌트의 분리 기준은 서로 달랐습니다. 모든 스타일을 컴포넌트와 강제로 1:1 매칭하면 기존 의존관계를 억지로 복제하거나 같은 스타일을 여러 곳에 나눠야 할 수 있었습니다.
그래서 기존 스타일은 화면 블록을 기준으로 관련 SCSS를 모아 관리하고, 새로 만든 UI 블록은 컴포넌트와 스타일 블록이 대응하도록 구성했습니다. 공통 SCSS는 이번 내재화 범위에서 제외했습니다.
구현한 UI
- 상품 정보 카드와 수평 스크롤 목록
- 장바구니 추천 레이어와 안내 UI
- 하단 고정 버튼과 선물하기 버튼
- 리뷰 요약 UI와 그라데이션, Lottie 애니메이션
- 모바일 WebView에서 사용하는 화면 상태
기존 SCSS를 그대로 복사하지 않고 컴포넌트의 구조와 상태에 맞게 선택자와 스타일 적용 위치를 조정했습니다.
결과와 확인
- 내재화 대상이었던 운영 블록 SCSS를 React 저장소로 모두 옮겼습니다.
- 컴포넌트 코드와 관련 스타일을 같은 저장소에서 확인할 수 있게 됐습니다.
- AI 보조 도구도 컴포넌트와 스타일의 맥락을 함께 읽고 작업할 수 있게 됐습니다.
- 신규 UI 블록과 내재화된 스타일은 상품상세 첫 화면 개선에 반영했습니다.
내재화 자체로 개발 속도나 오류가 얼마나 줄었는지는 별도로 측정하지 않았습니다. 이 작업에서 확인한 결과는 분리돼 있던 작업 맥락을 React 저장소로 모으고 실제 운영 화면에 반영한 것까지입니다.