배경과 목적
기존 SCSS 환경은 오래된 Node Sass와 문법에 의존하고 있어 이후 Sass 업데이트에 대응하기 어려운 상태였습니다. 이번 작업의 목적은 빌드 속도를 높이는 것이 아니라, 약 2,384개 SCSS 파일을 Dart Sass 문법으로 전환해 다음 업데이트를 진행할 수 있는 기반을 마련하는 것이었습니다.
전환 방식
- 전체 파일을 한 번에 바꾸지 않고 폴더 단위로 나눠 진행
- 반복되는 문법 변환에 AI 보조 도구 활용
- AI가 불필요한 주석이나 서식을 바꾼 사례를 확인하고 변환 규칙 수정
- 변환 전후의 CSS 산출물과 빌드 결과를 직접 비교
- 예외가 발견된 파일은 개별 수정 후 다시 빌드
AI는 반복되는 변환을 보조했지만, 정상 전환 여부는 생성된 코드가 아니라 실제 CSS 산출물과 빌드 결과를 기준으로 판단했습니다.
별도로 진행한 빌드 개선
Dart Sass 전환만으로 빌드 속도가 빨라지지는 않았습니다. 속도 개선은 기존 직렬 빌드를 병렬로 실행하도록 바꾼 별도의 작업에서 발생했습니다.
| 항목 | 개선 전 | 개선 후 |
|---|---|---|
| 빌드 방식 | 직렬 실행 | 병렬 실행 |
| 대표 실행 시간 | 약 24초 | 약 14초 내외 |
실행 환경에 따라 차이는 있지만, 대표 측정 기준으로 빌드 시간이 약 40% 줄었습니다.
결과
- 약 2,384개 SCSS 파일의 Dart Sass 문법 전환
- CSS 산출물과 빌드 결과를 확인하며 운영 화면에 단계적으로 반영
- 향후 Sass 업데이트에 대응할 수 있는 기반 마련
- 빌드 병렬화로 반복 빌드 대기 시간 단축
확인한 한계
문법 전환과 빌드 병렬화는 서로 다른 작업입니다. Dart Sass 전환이 빌드 성능을 높였다고 해석하지 않으며, 기존 SCSS의 모든 의존관계를 함께 재설계한 작업으로도 표현하지 않습니다.