카카오페이지 개발자, Next.js 빌드 속도 개선 위해 SWC 도입기 공유

카카오페이지 프론트엔드 개발자가 모노레포 도입 과정에서 겪은 빌드 속도 문제를 해결하기 위해 **SWC(Speedy Web Compiler)**를 분석하고 적용 가능성을 검토한 경험을 공유했다. 기존 Next.js 프로젝트는 Babel과 Terser를 사용해 빌드 시 5~10분이 소요되는 병목 현상을 겪고 있었다.

SWC의 성능과 원리

SWC는 Rust로 작성된 빌드 툴로, 자바스크립트의 싱글 스레드 한계를 넘어 병렬 처리가 가능하다는 점이 핵심이다. Next.js 공식 자료에 따르면 트랜스파일링은 17배, 코드 경량화는 7배 빨라질 수 있다고 소개된다. Rust의 병렬 처리 능력 덕분에 의존성이 없는 파일들을 동시에 변환할 수 있으며, 이는 자바스크립트 기반의 Babel이나 Terser보다 월등한 속도 향상을 가져온다.

실제 빌드 타임 테스트 결과

개발자는 MacBook Pro 환경에서 다양한 규모의 프로젝트로 SWC와 기존 툴의 빌드 시간을 비교했다.

• 소규모 프로젝트: SWC 사용 시 약 6초, Babel/Terser 사용 시 약 8.2초로 약 20~30%의 속도 향상을 보였다.
• 중간 규모 프로젝트(styled-components 웹사이트): SWC 사용 시 41초, Babel/Terser 사용 시 50초로 약 18% 향상되었다.
• Vercel 배포 환경: SWC 사용 시 48.35초, Babel/Terser 사용 시 86.34초로 약 2배 가까운 속도 향상을 확인했다.

외부 연구 자료에 따르면 WSL1 환경에서는 최대 74.05%의 성능 향상이 보고되기도 했다. 이는 프로젝트 규모와 운영체제 환경에 따라 SWC의 병렬 처리 이점이 극대화될 수 있음을 시사한다.

카카오페이지의 적용 현황과 한계

현재 카카오페이지 프로젝트에는 SWC를 적용하지 않았다. 프로젝트에서 사용하는 CSS-in-JS 라이브러리 emotion을 지원하는 @emotion/babel-plugin 등 주요 바벨 플러그인들이 SWC와 호환되지 않기 때문이다. Next.js 팀은 styled-components나 Jest 등 주요 라이브러리의 SWC 지원을 확대하고 있으며, emotion 지원도 가까운 시일 내에 확정된 상태다. 라이브러리 교체 비용 대비 효율성을 고려해 당장은 기존 빌드 방식을 유지하되, 향후 생태계 변화에 따라 SWC 도입을 검토할 계획이다.