Pockit
Back

2026년 Turbopack 완전 정복: Next.js의 Rust 기반 번들러 가이드

최근 Next.js 16으로 업데이트했다면 뭐가 다른 걸 느꼈을 거예요. 개발 서버가 1초도 안 되어서 뜨고, HMR이 눈 깜빡할 사이에 적용되고. 그리고 가장 큰 변화: Turbopack이 이제 기본 번들러예요—플래그 없이도 돼요.

자바스크립트 번들링이 드디어 바뀌고 있어요.

Turbopack은 2022년 Vercel이 "Webpack의 후계자"로 발표한 이후 계속 개발 중이었어요. Next.js 15에서 dev용으로 stable이 되고, **Next.js 16 (2025년 10월)**에서 모든 애플리케이션의 기본 번들러가 됐어요. 최신 **Next.js 16.1 (2025년 12월)**에서는 File System Caching이 stable이 되어서 더 빨라졌어요.

알아보겠습니다.

Turbopack이 뭐예요?

Turbopack은 Vercel이 만든 Rust 기반 JavaScript/TypeScript 번들러예요. 원래는 Next.js 전용으로 설계됐지만 나중에 다른 프레임워크에서도 쓸 수 있게 할 계획이에요. Webpack 그냥 갈아 끼우는 게 아닙니다—2026년에 번들링이 어떻게 돌아가야 하는지 처음부터 다시 생각해서 만든 거예요.

Webpack의 문제

Webpack은 2012년 출시됐을 때 자바스크립트 번들링에 혁명을 일으켰어요. 근데 그때 시대에 맞게 설계됐죠:

  • 프로젝트에 파일이 수백 개였지, 수만 개가 아니었어요
  • Node.js가 유일한 런타임이었어요
  • TypeScript랑 JSX가 메인스트림이 아니었어요
  • HMR은 있으면 좋은 거지 필수가 아니었어요

2026년으로 오면 Webpack의 아키텍처가 한계를 보여요:

# 일반적인 Next.js 14 프로젝트 (Webpack)
콜드 스타트: 12-45초
HMR 업데이트: 1-5초
전체 리빌드: 30-120초

Webpack 잘못이 아니에요—자바스크립트가 번들링 같은 연산 집약적 작업에 근본적으로 느린 거예요. 아무리 최적화해도 V8의 성능 한계를 넘을 수 없어요.

Rust의 장점

Turbopack은 Rust로 작성됐어요. 덕분에 여러 장점이 있어요:

  1. 네이티브 성능: Rust는 머신 코드로 컴파일되서 V8 오버헤드가 없어요
  2. 진짜 병렬 처리: Rust의 소유권 모델로 GC 멈춤 없이 안전한 멀티스레딩 가능
  3. 메모리 효율: 수동 메모리 관리로 가비지 컬렉션 스파이크 없음
  4. 설계부터 점진적: Rust의 타입 시스템이 올바른 점진적 계산 구축을 쉽게 해줌

근데 Rust만이 비밀 무기가 아니에요. Turbopack은 아예 다른 방식으로 설계됐어요.

터보 엔진

Turbopack 핵심에는 "터보 엔진"이 있어요. 메모이제이션과 점진적 계산 시스템이에요. 똑똑한 캐시라고 생각하면 돼요:

  1. 다 기억함: 모든 함수 호출 결과가 캐시됨
  2. 의존성 추적: 어떤 출력이 어떤 입력에 의존하는지 앎
  3. 최소한만 무효화: 파일 바뀌면 영향받는 계산만 다시 실행
기존 번들러:
  파일 변경 → 번들 전체 다시 빌드 → 브라우저에 전송

Turbopack:
  파일 변경 → 영향받는 모듈만 재계산 → 델타만 브라우저에 전송

그래서 Turbopack의 HMR이 순간이동처럼 느껴지는 거예요—진짜로 일을 덜 하거든요.

성능 벤치마크

숫자를 보겠습니다. 실제 Next.js 15 이커머스 애플리케이션에서 측정했어요.

테스트 환경

  • 프로젝트: TypeScript 파일 2,847개, React 컴포넌트 156개
  • 하드웨어: M3 MacBook Pro, 36GB RAM
  • Node.js: v22.1.0
  • Next.js: 16.1.0

콜드 스타트 (개발 서버)

번들러시간vs Turbopack
Webpack 518.4초23배 느림
Turbopack0.8초기준

HMR (Hot Module Replacement)

번들러시간vs Turbopack
Webpack 51.2초60배 느림
Turbopack20ms기준

페이지 컴파일 (새 라우트)

번들러시간vs Turbopack
Webpack 53.1초15배 느림
Turbopack0.2초기준

메모리 사용량 (개발 서버 실행 중)

번들러RAMvs Turbopack
Webpack 51.8GB1.5배 더 많음
Turbopack1.2GB기준

숫자가 말해주죠. Turbopack은 개발할 때 압도적으로 빠르다니까요.

Turbopack 시작하기

Turbopack 활성화

Next.js 16+에서는 Turbopack이 기본 활성화예요—설정 필요 없어요. 그냥 실행하면 돼요:

# Turbopack이 이제 기본!
next dev

# 구버전 Next.js 15.x라면:
next dev --turbopack

작동 확인

터미널에서 확인할 수 있어요:

$ next dev
   ▲ Next.js 16.1.0 (Turbopack)
   - Local:        http://localhost:3000
   - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 412ms

16.1의 File System Caching 덕분에 다음 시작은 더 빨라요—캠시된 프로젝트는 Ready in 412ms가 200ms 미만으로 떨어질 수 있어요.

설정 심층 분석

Turbopack은 next.config.js에 자체 설정 섹션이 있어요. 커스터마이징할 수 있는 것들:

기본 설정

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // Turbopack 전용 옵션
    }
  }
};

module.exports = nextConfig;

커스텀 로더

Webpack의 가장 큰 기능 중 하나가 커스텀 로더예요. Turbopack은 다른 문법으로 지원해요:

// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        // SVG를 React 컴포넌트로
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
        // GraphQL 파일
        '*.graphql': {
          loaders: ['graphql-tag/loader'],
          as: '*.js',
        },
        // YAML 지원
        '*.yaml': {
          loaders: ['yaml-loader'],
          as: '*.json',
        },
      },
    },
  },
};

참고: 모든 Webpack 로더가 Turbopack에서 작동하지는 않아요. Turbopack 팀이 호환성 목록을 관리하고 있어요.

경로 별칭

경로 별칭 쓴다면 tsconfig.json과 Turbopack 둘 다 설정하세요:

// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        // @components를 src/components로 매핑
        '@components': './src/components',
        '@utils': './src/utils',
        '@hooks': './src/hooks',
        // 구 패키지 호환용
        'underscore': 'lodash',
      },
    },
  },
};

확장자 해석

Turbopack이 고려할 파일 확장자 제어:

// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      resolveExtensions: [
        '.tsx',
        '.ts',
        '.jsx',
        '.js',
        '.mjs',
        '.cjs',
        '.json',
      ],
    },
  },
};

Webpack에서 마이그레이션

프로젝트에 커스텀 Webpack 설정이 있다면 마이그레이션에 작업이 필요해요.

일반적인 마이그레이션 시나리오

커스텀 Webpack 플러그인

이전 (Webpack):

// next.config.js
const nextConfig = {
  webpack: (config, { isServer }) => {
    config.plugins.push(new MyCustomPlugin());
    return config;
  },
};

이후 (Turbopack):
대부분의 Webpack 플러그인은 아직 Turbopack 대안이 없어요. 옵션:

  1. 그 기능이 Turbopack에 내장됐는지 확인
  2. 호환되는 로더를 대신 사용
  3. 그 특정 기능은 Webpack 계속 사용

CSS 처리

Turbopack은 다음을 내장 지원해요:

  • CSS Modules ✅
  • Sass/SCSS ✅
  • PostCSS ✅
  • Tailwind CSS ✅

내장 설정:

// postcss.config.js (Turbopack에서도 그대로 작동)
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

아직 안 되는 것들

2026년 1월 (Next.js 16.1) 기준, 대부분 기능이 stable이에요:

기능상태
개발 빌드✅ Stable (16+에서 기본)
프로덕션 빌드✅ Stable
File System Caching✅ Stable (16.1+)
Standalone 출력✅ 지원
Edge Runtime✅ 지원
커스텀 Webpack 플러그인❌ 미지원
webpack() 설정 함수❌ 미지원
일부 서드파티 로더⚠️ 부분 지원

Turbopack으로 프로덕션 빌드

Next.js 16부터 Turbopack이 프로덕션 빌드도 기본으로 처리해요.

프로덕션 빌드 명령어

# Next.js 16+에서 기본 (Turbopack 사용)
next build

# 명시적 플래그 (구버전이나 명확히 하고 싶을 때)
next build --turbopack

프로덕션 벤치마크

같은 이커머스 프로젝트에서:

번들러빌드 시간번들 크기vs Turbopack
Webpack 5142초2.1MB기준
Turbopack38초2.0MB3.7배 빠름

Turbopack 프로덕션 빌드는 상당히 빠르면서 개선된 트리 쉐이킹 덕분에 약간 더 작은 번들을 생성해요.

Vercel 배포

Vercel이 자동으로 Turbopack을 감지해요:

# 배포 로그
Detected Next.js 16.1.0
Using Turbopack for build
Build completed in 38s

설정 필요 없이 그냥 돼요.

Turbopack vs 다른 번들러

다른 번들러들이랑 비교하면 어떨까요?

Turbopack vs Vite

측면TurbopackVite
아키텍처점진적 Rust네이티브 ESM + esbuild
개발 서버~800ms 콜드 스타트~300ms 콜드 스타트
HMR~20ms~50ms
프로덕션Turbopack 사용Rollup 사용
프레임워크Next.js 특화프레임워크 무관
성숙도안정 (2025)안정 (2020)

결론: Vite가 콜드 스타트는 더 빠르지만 Turbopack이 HMR은 더 빨라요. Vite가 더 유연하고 Turbopack은 Next.js에 더 최적화됐어요.

Turbopack vs esbuild

측면Turbopackesbuild
언어RustGo
HMR내장플러그인 필요
점진적완전 지원제한적
Next.js네이티브 지원설정 필요
커스터마이징제한적광범위

결론: esbuild가 단순한 빌드에서는 더 빠르지만 대규모 프로젝트에서 Turbopack을 빛나게 하는 점진적 아키텍처가 없어요.

Turbopack vs Rspack

측면TurbopackRspack
언어RustRust
Webpack 호환제한적높음
HMR우수양호
생태계성장 중Webpack 호환
집중Next.js범용

결론: Webpack 플러그인 호환성이 필요하면 Rspack이 더 나은 선택이에요. Next.js 올인이면 Turbopack이 더 좋아요.

일반적인 문제 해결

"Module not found" 에러

Turbopack 전환 후 모듈 해석 에러가 보이면:

Error: Cannot find module '@/components/Button'

해결: Turbopack에서 별칭이 설정됐는지 확인:

// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        '@': './src',
      },
    },
  },
};

로더 호환성 문제

Webpack 로더가 안 되면:

Error: Turbopack does not support the 'raw-loader' loader

옵션:

  1. 내장 ?raw 임포트 쿼리 사용: 
    import content from './file.txt?raw';
  2. Turbopack 호환 대안 찾기
  3. 개발용으로 임시로 Webpack 폴백

메모리 문제

Turbopack이 메모리를 너무 많이 쓰면:

// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      memoryLimit: 4096, // MB, 기본값은 자동 감지
    },
  },
};

HMR이 안 될 때

HMR이 멈추면:

  1. 순환 의존성 체크
  2. 모듈 레벨 상태를 변경하고 있지 않은지 확인
  3. next/dynamic 올바르게 쓰고 있는지 확인:
// ✅ HMR 작동
const DynamicComponent = dynamic(() => import('./Component'));

// ❌ HMR 깨짐
const DynamicComponent = dynamic(() => import('./Component'), { ssr: false });

언제 Webpack을 유지할까

Turbopack의 장점에도 불구하고 이런 경우 Webpack이 여전히 맞는 선택일 수 있어요:

  1. 특정 Webpack 플러그인에 의존하는데 Turbopack 대안이 없을 때
  2. 번들 크기 최대 최적화가 필요하고 모든 Webpack 최적화 플러그인을 원할 때
  3. Next.js를 안 쓰고 독립형 Turbopack을 기다리기 싫을 때
  4. 커스텀 Webpack 설정이 방대해서 마이그레이션 비용이 높을 때

하이브리드 접근법

개발은 Turbopack, 프로덕션은 Webpack 쓸 수 있어요:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build"  // 16+에서는 둘 다 Turbopack
  }
}

프로덕션에서 Webpack을 꼭 써야 한다면 15.x에 머무르거나 설정을 조정하세요.

Turbopack의 미래

이미 출시된 것들 (2026년 1월 기준)

  • ✅ Next.js 16 (2025년 10월): Turbopack 기본 번들러로
  • ✅ Next.js 16.1 (2025년 12월): File System Caching stable
  • ✅ 프로덕션 빌드: 완전 stable
  • ✅ 5-10배 빠른 Fast Refresh, 2-5배 빠른 빌드

2026년 로드맵

Vercel 발표 기준:

  • Q1 2026: 독립형 Turbopack (Next.js 전용 아님)
  • Q2 2026: 커스텀 변환용 플러그인 API
  • Q3 2026: 완전한 Webpack 설정 마이그레이션 도구
  • 진행 중: Build Adapters API, 모노레포 지원 개선
  1. 빌드 캐싱: 빌드 간 영구 캐싱
  2. 분산 빌드: 원격 캐싱과 분산 컴파일

결론

Turbopack은 자바스크립트 번들링에 대한 생각 자체를 바꿀 놓은 거예요. "빠른 Webpack"이 아니라—요즘 웹 애플리케이션 규모에 맞게 설계된 새로운 구조예요.

써야 할까요?

  • 개발용: 네, 무조건. 속도 차이가 진짜 커요.
  • 프로덕션용: 네, Next.js 16.1+면요. 안정적이고 빨라요.
  • 마이그레이션 복잡하면: 개발만 Turbopack 쓰고 프로덕션은 Webpack 유지하는 것도 방법이에요.

자바스크립트 생태계가 Rust 기반 도구로 이동하고 있어요. SWC가 Babel을 대체했어요. Biome이 ESLint에 도전하고 있어요. 이제 Turbopack이 Webpack에 도전해요. 오늘 바꾸든 내년에 바꾸든, 생태계는 이 방향으로 가고 있어요.

next dev로 시작해서 직접 차이를 느껴보세요. 0.5초 HMR을 경험하면 다신 안 돌아가게 될 거예요. 🚀

TurbopackNext.jsWebpackRustBundlerJavaScriptPerformanceWeb Development

관련 도구 둘러보기

Pockit의 무료 개발자 도구를 사용해 보세요

PDF 잠금 해제
비밀번호를 몰라도 PDF를 열고 싶으신가요? (비번을 아는 경우) 보안을 해제하여 다음번엔 편하게 열람하세요.
사용하기
PDF 암호 설정
중요한 문서를 보호하세요. 비밀번호로 PDF를 잠그고 권한 없는 사용자의 열람을 방지합니다. 모든 작업은 내 기기에서 처리됩니다.
사용하기
코드 정리/압축
한 줄로 뭉개진 압축 코드를 읽기 좋게 펼치거나, 배포 전 용량을 확 줄여보세요. JS, CSS, HTML 모두 지원하고 서버로 전송되지 않아 안심하고 쓸 수 있어요.
사용하기
JSON 포맷터
일렬로 늘어선 복잡한 JSON, 보기 좋게 정렬해 드립니다. 문법 오류는 없는지 검사하고 들여쓰기를 맞춰 깔끔하게 변환하세요.
사용하기
CSS 애니메이션 생성기
CSS 애니메이션 만들기, 코드 없이 시각적으로! fade, slide, bounce 등 프리셋 선택하고 속도/이징 조절하면 바로 쓸 수 있는 @keyframes 코드가 생성돼요.
사용하기
CSS Grid 생성기
CSS Grid 레이아웃 만들기, 문법 외울 필요 없어요! 열, 행, 간격, 정렬을 설정하고 1fr/minmax 크기도 조절—실시간 미리보기 후 깔끔한 CSS 복사.
사용하기