코드와 스타일의 작업 맥락 통합
시작한 이유
모바일 상품상세의 React 코드와 운영 SCSS가 서로 다른 저장소에 있었습니다. 화면을 바꿀 때 관련 코드와 스타일을 따로 찾아야 했고, AI 보조 도구를 사용하더라도 두 저장소의 맥락을 함께 제공해야 했습니다.
개발자와 AI가 컴포넌트 코드와 스타일을 한 작업 범위에서 확인할 수 있도록 운영 SCSS를 React 저장소로 옮기기로 했습니다.
실제 범위
- 공통 SCSS를 제외한 기존 운영 블록 SCSS 약 108개
- React 기반 신규 UI 블록 약 18개
- 신규 UI와 내재화된 스타일을 상품상세 첫 화면(ATF) 개선에 반영
기존 운영 블록 수와 신규 UI 블록 수는 서로 다른 기준이므로 합산하지 않습니다.
구조를 결정한 방식
React 컴포넌트는 기존 SCSS보다 더 작은 단위로 나뉘어 있어 모든 파일을 강제로 1:1 매칭하지 않았습니다. 기존 스타일은 화면 블록을 기준으로 관련 SCSS를 모아 React 저장소에 배치하고, 신규 UI는 컴포넌트와 스타일 블록이 대응하도록 구성했습니다.
공통 SCSS는 여러 화면이 함께 사용하는 범위이므로 이번 작업에서는 제외했습니다.
진행 순서
| 단계 | 확인한 내용 |
|---|---|
| 1 | 별도 저장소의 운영 블록 SCSS 범위 확인 |
| 2 | React 컴포넌트와 기존 화면 블록의 관계 정리 |
| 3 | 기존 스타일을 화면 블록 단위로 재구성 |
| 4 | 신규 UI 블록은 컴포넌트와 스타일을 대응시켜 구현 |
| 5 | Storybook에서 주요 상태와 스타일 확인 |
| 6 | 빌드 결과와 실제 화면 확인 |
| 7 | 상품상세 첫 화면 개선에 반영 |
결과
- 내재화 대상으로 정한 운영 블록 SCSS를 React 저장소로 모두 이동
- 컴포넌트 코드와 관련 스타일을 한 저장소에서 확인할 수 있는 구조 마련
- AI 보조 도구가 코드와 스타일의 맥락을 함께 읽을 수 있도록 작업 범위 정리
- 신규 UI 블록과 내재화된 스타일을 실제 서비스에 반영
개발 시간이나 오류 감소율은 별도로 측정하지 않았기 때문에 성과 수치로 사용하지 않습니다.