마이크로 프론트엔드 — Svelte로 독립적인 UI 모듈 만들기

팀마다 다른 프레임워크를 쓰는데 하나의 앱을 만들어야 한다면 — 마이크로 프론트엔드가 답입니다.

개념 정의

마이크로 프론트엔드(Micro Frontend) 는 하나의 웹 앱을 여러 독립적인 프론트엔드 모듈로 분리하여, 각 팀이 독립적으로 개발·배포하는 아키텍처입니다.

Svelte → Web Component

Svelte 컴포넌트를 Web Component(Custom Element)로 변환하면, 어떤 프레임워크에서든 사용할 수 있습니다.

SVELTE

<!-- Counter.svelte -->
<svelte:options customElement="my-counter" />

<script>
  let { initial = 0 } = $props();
  let count = $state(initial);
</script>

<button onclick={() => count++}>카운트: {count}</button>

<style>
  button { background: #ff3e00; color: white; border: none; padding: 0.5rem 1rem; }
</style>

HTML

<!-- 어떤 HTML에서든 사용 가능 -->
<my-counter initial="5"></my-counter>

<!-- React 앱에서도 -->
<my-counter initial={10}></my-counter>

<!-- Vue 앱에서도 -->
<my-counter :initial="15"></my-counter>

Module Federation

JAVASCRIPT

// webpack.config.js (호스트 앱)
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        svelteApp: 'svelteApp@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};

iframe 기반 통합

가장 단순하지만 격리가 강한 방법입니다.

SVELTE

<script>
  let { src, title } = $props();
  let height = $state(400);

  // postMessage로 부모-자식 통신
  function handleMessage(event) {
    if (event.data.type === 'resize') {
      height = event.data.height;
    }
  }
</script>

<svelte:window onmessage={handleMessage} />

<iframe
  {src}
  {title}
  style:height="{height}px"
  style:width="100%"
  frameborder="0"
></iframe>

마이크로 프론트엔드 선택 기준

방법	격리 수준	통합 복잡도	성능
Web Components	중간	낮음	좋음
Module Federation	낮음	높음	좋음
iframe	높음	낮음	보통

면접 포인트

"마이크로 프론트엔드의 장단점은?": 장점은 팀 독립성, 기술 스택 자유, 독립 배포입니다. 단점은 번들 중복, 일관된 UX 유지 어려움, 통합 복잡성입니다.
"Svelte가 마이크로 프론트엔드에 적합한 이유는?": 번들 크기가 작아 다른 앱에 임베드해도 오버헤드가 적고, Web Components로의 변환이 기본 지원됩니다.

정리

마이크로 프론트엔드는 대규모 조직에서 팀 자율성을 보장하는 아키텍처입니다. Svelte는 작은 번들 크기와 Web Components 기본 지원으로 이 아키텍처에 잘 맞습니다. 하지만 소규모 프로젝트에서는 오버엔지니어링이 될 수 있으니 신중하게 도입해야 합니다.