결제 화면 포함 CSS와 SCSS 원본 불일치 해소

SCSS 컴파일 결과 동기화

스타일 빌드 파이프라인이 분리돼 있다 보니, SCSS 원본 변경분과 실제 배포되는 CSS 파일이 어긋나는 일이 종종 있었음. 이번 커밋은 그 어긋남을 한 번 정리하는 작업이었음.

대상은 세 파일:
- 공통 스타일 시트
- 신규 테마 시트
- 이커머스 결제 플랫폼 화면용 시트

세 파일 모두 SCSS 원본과 컴파일 결과 CSS의 diff를 떠서 비교한 뒤, 누락된 변경분을 다시 컴파일해서 덮어썼음.

왜 이게 문제였나

원래 의도는 SCSS만 고치면 빌드 시점에 자동으로 CSS가 갱신되는 거였음. 그런데 다음 두 가지 이유로 어긋남이 누적됐음.

특히 두 번째가 골치 아팠음. 다음 빌드 한 번이면 디자이너 수정분이 통째로 사라지는 구조였기 때문.

정리 방식

작업 자체는 단순함. 그래도 순서를 잘못 지키면 변경분이 다 날아가니 신중하게 진행했음.

• SCSS 원본을 먼저 컴파일 → 임시 결과물 확보
• 현재 CSS와 줄 단위 비교
• 디자이너 직접 수정으로 추정되는 라인은 SCSS로 역포팅
• 마지막에 다시 컴파일 → 최종 CSS 동기화

역포팅 단계가 제일 시간 잡아먹었음. 셀렉터 우선순위나 변수 치환 흔적을 보고 어디서 갈라졌는지 추적했음.

TODO·작업요약 갱신

이참에 TODO 파일도 손봤음. 처리된 항목은 잘라내고, 이번 동기화에서 새로 보인 잔여 이슈를 추가했음:

• SCSS 빌드 스텝을 모든 환경에서 강제 실행
• 디자이너 워크플로 가이드(CSS 직접 수정 금지) 합의
• 다음 점검 시점 캘린더에 박기

작업요약 문서도 같은 흐름으로 갱신해서 다음 사람이 맥락 잡기 쉽게 해뒀음.

회고

chore 커밋이라 가벼워 보이지만 사실은 빌드 파이프라인 일관성 문제였음. 결과물이 원본과 어긋나기 시작하면 그 위에 쌓이는 모든 변경이 점점 깨짐. 이번 한 번의 동기화로 끝낼 게 아니라, 빌드 스텝 표준화까지 가야 진짜 마침표를 찍을 수 있을 것 같음. 다음