Question

Vite 설정을 보다 보니 UMD 형식으로 빌드한다는 말을 봤습니다.
일반적인 SPA 빌드와 달리 UMD는 어떤 목적을 가진 포맷인지, 왜 필요한지 잘 이해가 되지 않습니다.

• UMD가 무엇인지 기본 개념

• ES Module, CommonJS와의 차이

• Vite에서 UMD 빌드는 어떤 상황에서 사용하는지

• 라이브러리 빌드와 서비스용 빌드의 차이

• UMD를 선택할 때 주의할 점도 함께 설명해주세요.

Answer 1

UMD는 Universal Module Definition의 약자로, 실행 환경에 상관없이 동작하도록 설계된 자바스크립트 모듈 형식입니다. 브라우저, Node.js, AMD, CommonJS 환경을 모두 지원하는 “범용 배포용 포맷”이라고 이해하면 가장 쉽습니다.

일반적인 Vite 프로젝트(SPA)는 ES Module을 기준으로 빌드됩니다. 이 방식은 최신 브라우저와 번들러 환경에서 매우 효율적이지만, script 태그로 직접 불러 쓰거나, 레거시 환경에서 사용하기에는 제약이 있습니다. 반면 UMD는 실행 환경을 감지해 자동으로 맞는 방식으로 모듈을 노출합니다.

UMD의 특징을 정리하면 다음과 같습니다.

• 브라우저에서는 전역 변수(window.MyLib) 형태로 사용 가능

• Node.js 환경에서는 require()로 사용 가능

• 번들러(Webpack, Rollup 등)에서도 import 가능

• 하나의 파일로 배포하기 쉬움

그래서 UMD는 “애플리케이션”보다는 “라이브러리” 배포에 적합합니다.

Vite에서 UMD가 등장하는 대표적인 상황은 라이브러리 모드입니다.
예를 들어, 다음과 같은 경우에 UMD 빌드를 사용합니다.

• 사내 공통 UI 컴포넌트 라이브러리

• 외부 사이트에서 script 태그로 불러 쓸 SDK

• React/Vue 프로젝트가 아닌 환경에서도 사용해야 하는 유틸 라이브러리

• CMS, 레거시 웹페이지, 외부 파트너 사이트에 배포하는 JS 파일

이런 경우에는 ES Module 하나만 제공하는 것보다, UMD + ES 조합으로 빌드해 두는 편이 활용도가 훨씬 높습니다.

Vite에서 UMD 빌드는 보통 라이브러리 모드 설정을 통해 진행됩니다.
핵심 개념만 설명하면,

• entry: 라이브러리 진입 파일

• name: 브라우저 전역으로 노출될 이름

• formats: ['es', 'umd'] 처럼 여러 포맷 동시 출력
  이 구조로 설정하면, 같은 소스를 다양한 환경에서 쓸 수 있는 결과물이 만들어집니다.

다만 UMD를 선택할 때 주의할 점도 있습니다.

• 파일 크기가 ES Module보다 커지는 경우가 많음

• 트리 쉐이킹이 제한적이라 불필요한 코드가 함께 포함될 수 있음

• 최신 프론트엔드 SPA에서는 굳이 필요 없는 경우가 대부분

• 전역 네임스페이스 충돌(window.MyLib) 관리가 필요함

그래서 판단 기준은 명확합니다.

• “웹사이트 하나를 만드는 프로젝트” → UMD 거의 필요 없음

• “여러 환경에서 재사용할 JS 결과물을 배포” → UMD 매우 적합

정리하면, Vite에서 UMD는 서비스용 앱을 위한 기본 선택지가 아니라, 다양한 환경에서 사용할 라이브러리나 SDK를 배포하기 위한 선택지입니다.
내 결과물이 script 태그로도 쓰여야 한다면 UMD를, 최신 프론트엔드 앱 안에서만 쓰인다면 ES Module만으로 충분합니다.