Dart Sass 전환 흐름
배경과 목표
기존 SCSS 환경은 오래된 Node Sass와 이전 문법에 의존하고 있었습니다. 당장 화면에 문제가 생긴 것은 아니었지만, 이후 Sass 업데이트를 이어가기 위해서는 먼저 대규모 문법 전환이 필요했습니다.
전환 대상은 약 2,384개 파일이었습니다. 자동 변환 결과를 그대로 반영하면 예외 파일이나 불필요한 수정이 운영 CSS에 섞일 수 있어, 작업 단위를 나누고 실제 산출물을 기준으로 확인했습니다.
진행 방식
- 폴더 단위로 전환 범위를 나눠 변경량 관리
- 반복되는 문법 변환에는 AI 보조 도구 활용
- 불필요한 주석 삭제와 서식 변경이 생기지 않도록 변환 규칙 보완
- 변환 전후 CSS 산출물 비교
- 빌드 결과를 확인하고 예외 파일은 개별 수정
빌드 속도 개선은 별도 작업
Dart Sass로 바꾼 것만으로 빌드가 빨라지지는 않았습니다. 이후 기존 직렬 빌드를 병렬 실행으로 바꾸면서 대표 실행 시간이 약 24초에서 14초 내외로 줄었습니다.
| 작업 | 목적 | 확인한 결과 |
|---|---|---|
| Dart Sass 문법 전환 | 이후 Sass 업데이트에 대응할 기반 마련 | 약 2,384개 파일 전환과 산출물 검증 |
| 빌드 병렬화 | 반복 빌드 대기 시간 단축 | 약 24초에서 14초 내외로 감소 |
두 작업의 목적과 결과를 구분해 기록합니다.
AI를 사용하며 확인한 점
대규모 반복 변환에서는 AI가 작업량을 줄이는 데 도움이 됐지만, 결과를 신뢰할 기준은 프롬프트가 아니라 CSS 산출물과 빌드였습니다. AI가 작업 범위를 넘어 주석과 서식을 바꾼 사례도 있어, 변환 규칙을 좁히고 사람이 마지막 결과를 확인했습니다.
남은 한계
이번 작업은 Sass 문법과 빌드 방식을 바꾼 것이며, 기존 SCSS의 복잡한 의존관계 전체를 다시 설계한 것은 아닙니다. 문법 전환과 구조 개선을 한 작업처럼 묶어 설명하지 않습니다.