마이크로프론트엔드 아키텍처 설계와 구현

Table of Contents

서론

웹 애플리케이션이 점점 더 복잡해지고 대규모화되면서, 개발자들은 새로운 도전에 직면하고 있습니다. 어떻게 하면 이러한 대규모 애플리케이션을 효율적으로 개발하고 유지보수할 수 있을까요? 이러한 고민 속에서 등장한 것이 바로 ‘마이크로프론트엔드’ 아키텍처입니다. 오늘은 이 혁신적인 접근 방식에 대해 자세히 알아보겠습니다.

마이크로프론트엔드란?

마이크로프론트엔드는 프론트엔드 애플리케이션을 더 작고 관리 가능한 부분으로 나누는 현대적인 아키텍처 패턴입니다. 이는 “서로 독립된 형태의 배포 가능한 어플리케이션(모듈)의 조합으로 하나의 큰 어플리케이션을 구성하는 것”으로 정의할 수 있습니다.

핵심 개념은 다음과 같습니다:
1. 독립성: 각 마이크로프론트엔드는 독립적으로 개발, 테스트, 배포될 수 있습니다.
2. 모듈화: 특정 기능이나 비즈니스 도메인에 집중된 모듈로 구성됩니다.
3. 통합: 여러 개의 독립적인 마이크로프론트엔드가 하나의 완전한 애플리케이션으로 통합됩니다.

마이크로프론트엔드의 장단점

장점

유연성 증가: 각 마이크로프론트엔드를 독립적으로 업데이트하고 배포할 수 있어 전체 시스템의 유연성이 향상됩니다.
확장성 개선: 애플리케이션의 특정 부분을 쉽게 확장하거나 수정할 수 있습니다.
팀 자율성: 각 팀이 자신의 마이크로프론트엔드에 집중할 수 있어 개발 효율성이 높아집니다.
기술 다양성: 각 마이크로프론트엔드에 적합한 기술 스택을 선택할 수 있습니다.
코드 재사용성: 재사용 가능한 컴포넌트를 통해 코드 중복을 줄이고 개발 시간을 단축할 수 있습니다.

단점

복잡성 증가: 여러 마이크로프론트엔드를 통합하고 관리하는 과정에서 복잡성이 증가할 수 있습니다.
성능 오버헤드: 여러 개의 독립적인 애플리케이션을 로드하는 과정에서 성능 저하가 발생할 수 있습니다.
일관성 유지의 어려움: 여러 팀이 독립적으로 개발할 경우 UI/UX의 일관성을 유지하기 어려울 수 있습니다.

마이크로프론트엔드의 구현 방식

마이크로프론트엔드를 구현하는 데에는 여러 가지 방식이 있지만, 가장 주목받는 두 가지 방식은 Web Components와 Module Federation입니다.

1. Web Components

Web Components는 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있게 해주는 웹 플랫폼 API 세트입니다. 이를 활용하면 각 마이크로프론트엔드를 독립적인 컴포넌트로 개발하고, 메인 애플리케이션에서 이들을 조합할 수 있습니다.

Web Components의 주요 특징:
– 캡슐화: Shadow DOM을 통해 마크업 구조, 스타일, 동작을 숨기고 페이지의 다른 코드로부터 분리할 수 있습니다.
– 재사용성: 한 번 정의된 커스텀 엘리먼트는 여러 곳에서 재사용할 수 있습니다.
– 상호운용성: 다른 JavaScript 라이브러리나 프레임워크와 함께 사용할 수 있습니다.

2. Module Federation

Module Federation은 Webpack 5에서 도입된 기능으로, 여러 독립적인 빌드 간에 런타임에 JavaScript 모듈을 공유할 수 있게 해줍니다. 이를 통해 각 마이크로프론트엔드를 독립적으로 개발하고 배포할 수 있으며, 런타임에 이들을 통합할 수 있습니다.

Module Federation의 주요 개념:
– Container: 빌드된 각 앱은 Container 역할을 합니다. 이 Container는 모듈을 불러오는 호스트가 될 수도 있고, 원격으로 로딩되는 모듈이 될 수도 있습니다.
– Expose: 빌드된 앱을 원격으로 내보내는 역할을 합니다.
– Remote: 원격으로 Container의 앱들을 호출합니다.

Module Federation 구현 예시

// Host App 설정
const mfConfig = {
  name: "host",
  filename: "static/chunks/remoteEntry.js",
  remotes: {
    moduleAppA: `moduleAppA@http://localhost:4000/_next/static/chunks/remoteEntry.js`,
    moduleAppB: `moduleAppB@http://localhost:4001/_next/static/chunks/remoteEntry.js`,
    moduleAppC: `moduleAppC@http://localhost:4002/_next/static/chunks/remoteEntry.js`,
  },
};

// Host App에서 모듈 사용
import { Suspense, lazy } from "react";

const ModuleAppA = lazy(() => import("moduleAppA/App"));
const ModuleAppB = lazy(() => import("moduleAppB/App"));
const ModuleAppC = lazy(() => import("moduleAppC/App");

function App() {
  return (
    <div>
      <h1>Host App</h1>
      <Suspense fallback={<div>loading</div>}>
        <ModuleAppA />
        <ModuleAppB />
        <ModuleAppC/>
      </Suspense>
    </div>
  );
}

이 예시에서 볼 수 있듯이, Module Federation을 사용하면 여러 독립적인 애플리케이션(ModuleAppA, ModuleAppB, ModuleAppC)을 하나의 Host App에서 통합하여 사용할 수 있습니다.

실제 사용 사례

마이크로프론트엔드는 이미 많은 대기업들이 채택하여 사용하고 있습니다. 몇 가지 주목할 만한 사례를 살펴보겠습니다.

토스: 금융계의 슈퍼앱인 토스는 30개가 넘는 서비스를 운영하고 있습니다. 이러한 거대한 서비스를 마이크로프론트엔드 아키텍처를 통해 관리하고 있습니다. 각 서비스를 독립적으로 개발하고 배포함으로써, 빠른 서비스 확장과 유연한 대응이 가능해졌습니다.
오늘의집: 라이프스타일 슈퍼앱인 오늘의집도 커뮤니티, 쇼핑, 인테리어 등 여러 거대한 서비스를 하나의 앱에서 운영하고 있으며, 마이크로프론트엔드 아키텍처를 활용하고 있습니다. 이를 통해 각 서비스 팀이 독립적으로 개발을 진행하면서도, 사용자에게는 통합된 경험을 제공할 수 있게 되었습니다.
배달의민족: 배민커머스 웹프론트엔드 개발팀은 마이크로프론트엔드를 도입하여 서비스의 확장성과 유지보수성을 개선했습니다. 특히 주문, 결제, 리뷰 등 각 기능별로 마이크로프론트엔드를 구성하여 효율적인 개발과 배포가 가능해졌습니다.
강남언니: 강남언니 개발팀은 마이크로프론트엔드를 도입하면서 발생하는 타입스크립트 관련 이슈를 해결하기 위해 자체적인 도구를 개발하여 사용하고 있습니다. 이를 통해 타입 안정성을 유지하면서도 마이크로프론트엔드의 이점을 최대한 활용하고 있습니다.

이러한 사례들을 통해 볼 수 있듯이, 마이크로프론트엔드는 특히 대규모 서비스나 빠르게 성장하는 서비스에서 큰 이점을 제공합니다.

결론

마이크로프론트엔드 아키텍처는 대규모 프론트엔드 개발에 있어 혁신적인 접근 방식을 제공합니다. 독립적인 개발과 배포, 팀의 자율성 증가, 기술 다양성 등의 장점을 통해 복잡한 웹 애플리케이션을 더욱 효율적으로 관리할 수 있게 해줍니다.

그러나 이러한 이점에도 불구하고, 마이크로프론트엔드 도입 시에는 몇 가지 주의해야 할 점이 있습니다:

설정의 복잡성: Module Federation을 사용할 때 정확한 설정이 필요하며, 환경별(로컬, 스테이징, 프로덕션 등) 설정 관리에 주의가 필요합니다.
타입 추론 문제: 런타임에 모듈을 통합하기 때문에 개발 환경에서 타입 추론이 어려울 수 있습니다. 이를 해결하기 위한 추가적인 설정이나 도구 사용이 필요할 수 있습니다.

마이크로프론트엔드는 모든 서비스에 필수적인 것은 아닙니다. 하지만 대규모 서비스나 빠르게 성장하는 서비스의 경우, 코드 베이스 관리, 팀 간 협업, 서비스 확장성 측면에서 큰 이점을 제공할 수 있습니다. 따라서 서비스의 규모와 팀의 상황을 고려하여 마이크로프론트엔드 도입을 검토해볼 만한 가치가 있습니다.

프론트엔드 개발의 미래는 더욱 모듈화되고 유연해질 것입니다. 마이크로프론트엔드는 이러한 변화의 중심에 서 있으며, 앞으로도 계속해서 발전하고 진화할 것입니다. 개발자들은 이러한 트렌드를 주시하고, 필요에 따라 적극적으로 도입을 고려해볼 필요가 있습니다.