번들러는 최적화여야 한다: 웹 의존성 해석을 플랫폼으로 돌려놓기

**한 문장 결론:** 브라우저는 모듈을 URL로 로드하므로, 지정자(specifier)를 URL로 해석하는 규칙이 제품 수준으로 정리되지 않으면 번들러가 ‘필수 레이어’가 된다.

배경/문제

브라우저의 ESM은 `import`가 결국 URL로 해석되어야 모듈을 가져올 수 있다. 반면 많은 개발 경험은 “패키지 이름 같은 지정자”로 의존성을 표현한다. 이 간극이 커질수록 번들러는 최적화 도구를 넘어 **의존성 해석 레이어**까지 맡게 된다.

핵심 개념

지정자(specifier) → URL 해석이 병목이다

브라우저는 모듈을 URL로 요청한다. 그래서 `import "pkg"`처럼 URL이 아닌 문자열을 쓰려면, 그 문자열을 어떤 URL로 매핑할지 규칙이 필요하다.

```mermaid

flowchart LR

A["App 코드<br/>import 'pkg'"] -->|"specifier"| B["해석 필요<br/>pkg → URL"]

B --> C["브라우저 ESM 로더<br/>fetch(URL)"]

C --> D["모듈 그래프<br/>transitive deps"]

B -->|"옵션"| E["Import Map<br/>런타임 매핑"]

B -->|"옵션"| F["번들러<br/>빌드 시 해석"]

```

→ 기대 결과/무엇이 달라졌는지: “번들러가 왜 등장하는가”를 성능이 아니라 **해석 단계**로 설명할 수 있다.

해결 접근

1) Import Map으로 지정자 → URL을 매핑한다

• 왜 하는지: 코드에서는 지정자를 유지하면서, 브라우저가 이해하는 URL로 변환하기 위해
• 기대 결과: 런타임에 해석 규칙을 명시적으로 통제할 수 있다.

2) 번들러로 해석을 빌드 시점에 고정한다

• 왜 하는지: 해석/변환/최적화를 한 번에 처리해 배포물의 URL 구조를 단순화하기 위해
• 기대 결과: 앱 코드는 지정자를 유지하고, 배포는 산출물 중심으로 운영된다.

구현(코드)

Import Map 예시

```html

<script type="importmap">

{

"imports": {

"mypkg": "/vendor/mypkg/index.js"

}

}

</script>

<script type="module">

import { hello } from "mypkg";

hello();

</script>

```

→ 기대 결과/무엇이 달라졌는지: 브라우저는 지정자를 Import Map에 따라 URL로 바꾼 뒤, 그 URL을 로드해 모듈 그래프를 확장한다.

검증 방법(체크리스트)

흔한 실수/FAQ

**Q1. Import Map이면 모든 게 끝나나요?**

Import Map은 지정자 매핑을 제공하지만, 전역 매핑과 해석 타이밍 같은 제약이 있다. 규모가 커질수록 변경 관리가 더 중요해진다.

**Q2. 번들러는 꼭 필요한가요?**

환경/정책에 따라 달라질 수 있다. 다만 “specifier → URL” 해석을 플랫폼이 충분히 덜어주지 못하는 상황에서는 번들러가 운영의 중심이 되기 쉽다.

요약

• 브라우저 ESM은 URL 기반이다.
• 병목은 성능이 아니라 “specifier → URL” 해석이다.
• Import Map/번들러는 이 병목을 각기 다른 시점(런타임/빌드타임)에 해결한다.

결론

번들러는 최적화 도구로 남아야 한다. 의존성 해석이 플랫폼 레벨에서 더 자연스러워질수록, 번들러는 “필수 레이어”가 아니라 “선택 가능한 최적화”에 가까워진다.

참고(공식 문서 링크)

• [MDN: <script type="importmap">](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/script/type/importmap)
• [MDN: JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
• [MDN: import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
• [Next.js Docs](https://nextjs.org/docs)
• [React Docs](https://react.dev/)
• [Mermaid Docs](https://mermaid.js.org/)