Design Kits Blog

마이크로프론트엔드 (Microfrontends) 활용

Microfrontends는 큰 규모의 웹 애플리케이션을 작은 독립적인 프론트엔드 애플리케이션으로 분할하여 개발하는 아키텍처입니다. 이를 활용하는 것에는 여러 가지 이점이 있습니다. 다음은 Microfrontends의 활용 사례입니다

1.독립적인 개발 및 배포: Microfrontends를 사용하면 팀 또는 개발자들이 독립적으로 작은 프론트엔드 애플리케이션을 개발하고 배포할 수 있습니다. 이는 개발자들 간의 협업과 애플리케이션의 유연성을 향상시킵니다.

2.기술 스택 다양성: Microfrontends를 사용하면 각각의 프론트엔드 애플리케이션에서 다른 기술 스택을 선택할 수 있습니다. 이는 다양한 기술을 활용하여 애플리케이션의 요구사항에 최적화된 솔루션을 선택할 수 있게 해줍니다.

3.독립적인 확장성 및 성능: Microfrontends는 각각 독립적으로 확장할 수 있습니다. 애플리케이션의 특정 부분에 대한 트래픽이 증가하면 해당 Microfrontend만 확장하여 성능을 개선할 수 있습니다.

4.개발자 경계 설정: Microfrontends를 사용하면 다른 팀 또는 조직 간에 개발자 경계를 설정할 수 있습니다. 각각의 Microfrontend는 서로 독립적이며, 다른 팀이나 조직에서 독립적으로 관리될 수 있습니다.

5.기존 시스템 통합: Microfrontends는 기존의 모놀리식 웹 애플리케이션에 대한 리팩토링 또는 기존 시스템의 새로운 기능 추가에 유용합니다. 기존 시스템을 작은 Microfrontend로 분할하여 부분적으로 개선하거나 새로운 기능을 추가할 수 있습니다.

6.독립적인 테스트 및 배포: 각각의 Microfrontend는 독립적으로 테스트 및 배포할 수 있습니다. 이는 테스트 및 배포 프로세스를 간소화하고 오류의 범위를 제한하여 개발자들의 생산성을 향상시킵니다.

마이크로프론트엔드 (Microfrontends) 예시

1.이커머스 웹사이트: 대형 이커머스 플랫폼을 마이크로프론트엔드 아키텍처로 구성할 수 있습니다. 제품 목록, 장바구니, 결제, 사용자 프로필 등을 독립된 마이크로프론트엔드로 개발하고 배포할 수 있습니다.

2.뉴스 포털 웹사이트: 뉴스 포털은 다양한 카테고리의 뉴스, 기사, 사진, 동영상 등을 제공합니다. 각각의 카테고리 또는 섹션을 독립된 마이크로프론트엔드로 구성하여 개발하고 운영할 수 있습니다.

3.사내 관리 시스템: 대기업이나 조직은 사내에서 다양한 관리 시스템을 운영합니다. 인사 관리, 재무 관리, 프로젝트 관리 등을 독립된 마이크로프론트엔드로 분할하여 개발하고 유지보수할 수 있습니다.

4.은행 웹 애플리케이션: 은행은 계좌 조회, 이체, 대출 신청, 인증 등 다양한 기능을 제공합니다. 이러한 기능을 독립된 마이크로프론트엔드로 구성하여 개발하고 운영할 수 있습니다.

5.여행 예약 플랫폼: 여행 예약 플랫폼은 항공편, 호텔, 렌터카, 투어 등 다양한 서비스를 제공합니다. 이를 독립된 마이크로프론트엔드로 구성하여 개발하고 운영할 수 있습니다.

위의 예시들은 마이크로프론트엔드를 사용하여 큰 규모의 웹 애플리케이션을 작은 독립된 단위로 분할하여 개발하고 운영하는 방법을 보여줍니다. 이렇게 하면 개별적인 기능을 독립적으로 관리하고 확장할 수 있으며, 전체 시스템의 유지보수 및 개발 속도를 향상시킬 수 있습니다.

마이크로프론트엔드 (Microfrontends) 장점

1.독립적인 개발과 배포: 마이크로프론트엔드는 각각 독립된 단위로 개발되고 배포됩니다. 이는 개발 팀 간의 독립성을 높여 개발과 배포의 속도와 유연성을 향상시킵니다. 한 팀의 업데이트가 다른 팀에 영향을 주지 않고 개별적으로 배포될 수 있습니다.

2.기술 스택의 다양성: 마이크로프론트엔드는 각각 독립적인 프론트엔드 애플리케이션이므로 다양한 기술 스택을 선택할 수 있습니다. 이는 각 마이크로프론트엔드가 자체 기술 요구사항과 최적의 도구를 선택할 수 있다는 의미입니다.

3.팀 간 협업의 용이성: 마이크로프론트엔드는 작은 단위로 분할되기 때문에 팀 간 협업이 용이해집니다. 각 팀은 독립적으로 작업하며, 필요한 경우 서로의 마이크로프론트엔드를 조합하여 전체 애플리케이션을 구성할 수 있습니다.

4.확장성과 유지보수성: 마이크로프론트엔드 아키텍처는 기능을 독립적으로 확장하고 유지보수할 수 있습니다. 특정 마이크로프론트엔드의 변경이 다른 마이크로프론트엔드에 영향을 주지 않으므로 전체 애플리케이션의 유지보수성이 향상됩니다.

5.기존 시스템 통합의 용이성: 마이크로프론트엔드는 기존 시스템과의 통합이 용이합니다. 각 마이크로프론트엔드는 독립된 컴포넌트로서 기존 시스템과 통신하고 통합될 수 있습니다. 이는 기존 시스템을 점진적으로 현대화하거나 새로운 기능을 추가할 때 유리합니다.

6.독립적인 스케일링: 마이크로프론트엔드는 각각 독립된 단위로 구성되어 있기 때문에 특정 기능이나 모듈에 대한 스케일링이 필요할 때 해당 마이크로프론트엔드만 확장할 수 있습니다. 이는 리소스의 효율적인 사용을 가능하게 하며, 트래픽이 집중되는 부분에 대한 대응이 더욱 용이해집니다.

7.기술 선택의 자유: 마이크로프론트엔드는 독립된 애플리케이션 단위로 구성되기 때문에 각각의 마이크로프론트엔드는 자체적인 기술 스택과 프레임워크를 선택할 수 있습니다. 이는 다양한 기술을 적용하고 최신 동향을 반영할 수 있으며, 개발자들이 자신이 편안한 기술을 선택할 수 있는 자유도를 제공합니다.

8.독립적인 배포와 롤백: 마이크로프론트엔드는 각각 독립적으로 배포할 수 있으므로 특정 마이크로프론트엔드의 업데이트나 버그 수정을 쉽게 배포할 수 있습니다. 또한, 롤백 시에도 특정 마이크로프론트엔드만 롤백할 수 있으므로 전체 시스템의 안정성을 높일 수 있습니다.

9.기능 확장의 용이성: 마이크로프론트엔드는 독립적으로 개발되기 때문에 새로운 기능의 추가가 상대적으로 용이합니다. 새로운 기능을 담당하는 마이크로프론트엔드를 개발하고 배포함으로써 전체 시스템의 확장성을 향상시킬 수 있습니다.

마이크로프론트엔드 (Microfrontends) 단점

1.복잡성과 오버헤드: 마이크로프론트엔드 아키텍처는 여러 개별 애플리케이션으로 구성되므로 전체적인 시스템의 복잡성이 증가할 수 있습니다. 각 마이크로프론트엔드 간의 통신, 공통 레이아웃 관리 등 추가적인 오버헤드가 발생할 수 있습니다.

2.성능 문제: 마이크로프론트엔드는 여러 개별 애플리케이션으로 구성되기 때문에 초기 로딩 속도나 페이지 이동 시의 성능 문제가 발생할 수 있습니다. 각각의 마이크로프론트엔드가 로드되어야 하므로 추가적인 네트워크 요청이 필요할 수 있습니다.

3.관리의 어려움: 마이크로프론트엔드 아키텍처는 여러 개별 애플리케이션의 관리가 필요하므로 통합, 배포, 버전 관리, 모니터링 등의 작업이 복잡해집니다. 팀 간의 의사소통과 협업이 중요해지며, 일관된 개발 가이드라인과 프로세스의 필요성이 증가합니다.

4.브라우저 호환성 문제: 다양한 마이크로프론트엔드 애플리케이션을 조합하는 과정에서 브라우저 호환성 문제가 발생할 수 있습니다. 각 애플리케이션이 다른 기술 스택이나 버전을 사용하는 경우 호환성 이슈가 발생할 수 있으며, 추가적인 테스트와 대응이 필요합니다.

5.데이터 공유와 상태 관리: 여러 마이크로프론트엔드 간의 데이터 공유와 상태 관리는 복잡성을 증가시킬 수 있습니다. 공통 상태 관리나 데이터 흐름의 관리가 필요하며, 효율적인 데이터 통신 방법과 일관된 데이터 모델링이 필요합니다.

6.초기 설정과 인프라 구성의 복잡성: 마이크로프론트엔드 아키텍처는 여러 개별 애플리케이션으로 구성되기 때문에 초기 설정과 인프라 구성이 복잡해질 수 있습니다. 각 마이크로프론트엔드의 독립적인 빌드, 배포, 라우팅, 서버 사이드 렌더링 등의 설정이 필요하며, 이를 관리하기 위한 인프라 구성도 추가로 필요합니다.

이러한 단점들은 마이크로프론트엔드 아키텍처를 도입할 때 고려해야 할 사항들입니다. 각 조직의 상황과 요구사항에 따라 장점과 단점을 종합적으로 평가하여 결정하는 것이 중요합니다.

마이크로프론트엔드 (Microfrontends) 필요성

1.독립적인 개발과 배포: 마이크로프론트엔드는 각각 독립적인 애플리케이션으로 구성됩니다. 이는 여러 팀이 동시에 독립적으로 개발하고 배포할 수 있으며, 작은 단위의 변경사항도 빠르게 반영할 수 있습니다. 이는 개발 생산성을 향상시키고 릴리즈 주기를 단축시킵니다.

2.기술 스택 다양성: 각 마이크로프론트엔드는 독립된 애플리케이션으로 개발될 수 있으므로 다양한 기술 스택을 사용할 수 있습니다. 이는 팀별로 최적의 기술을 선택할 수 있으며, 새로운 기술 도입이나 업그레이드를 용이하게 합니다.

3.확장성과 성능 개선: 마이크로프론트엔드는 각각 독립적으로 확장 가능하므로 특정 기능이나 모듈에 대한 확장성을 향상시킬 수 있습니다. 또한, 트래픽이 집중되는 부분에 대한 대응이 더욱 용이하며, 성능 개선을 위한 최적화 작업이 가능합니다.

4.팀 간 협업 용이성: 마이크로프론트엔드는 작은 단위로 분할되어 개발되므로 팀 간의 협업이 간소화됩니다. 각 팀은 독립적으로 작업하며 필요한 경우 다른 팀과의 인터페이스를 정의하여 협업할 수 있습니다. 이는 팀 간의 업무 분담과 의사소통을 용이하게 합니다.

5.모듈화와 유지보수성: 마이크로프론트엔드는 작은 모듈 단위로 구성되므로 유지보수와 확장이 용이합니다. 특정 모듈의 변경이 전체 시스템에 미치는 영향이 제한되며, 코드의 재사용성과 유지보수성이 향상됩니다.

6.독립적인 스케일링: 마이크로프론트엔드는 각각 독립된 단위로 구성되어 있기 때문에 특정 기능이나 모듈에 대한 수평적인 스케일링이 가능합니다. 특정 마이크로프론트엔드의 트래픽이 증가하면 해당 마이크로프론트엔드만 확장하여 대응할 수 있습니다. 이는 시스템의 효율성과 확장성을 향상시키는데 도움을 줍니다.

7.기업 조직의 분리: 마이크로프론트엔드는 여러 개별 애플리케이션으로 구성되기 때문에 기업 내의 조직 구조를 반영할 수 있습니다. 각각의 마이크로프론트엔드는 특정 비즈니스 팀 또는 조직 단위와 연관될 수 있으며, 해당 팀이 독립적으로 개발과 관리를 담당할 수 있습니다.

8.실험과 혁신: 마이크로프론트엔드 아키텍처는 작은 단위의 애플리케이션을 구성하므로 실험과 혁신에 유리합니다. 새로운 기능이나 아이디어를 빠르게 구현하여 사용자 피드백을 수집하고, 필요에 따라 확장하거나 수정할 수 있습니다. 이는 더 나은 사용자 경험과 혁신적인 서비스 개발에 도움을 줍니다.

마이크로프론트엔드 (Microfrontends) 목적

1.기술 스택 다양성 관리: 마이크로프론트엔드는 다양한 기술 스택을 사용할 수 있는 장점이 있습니다. 이는 각각의 마이크로프론트엔드 애플리케이션에서 최적의 기술을 선택할 수 있게 합니다. 이를 통해 팀은 적절한 기술을 사용하여 개발하고, 현대적인 프레임워크와 라이브러리를 활용하여 최신 기술 동향에 대응할 수 있습니다.

2.독립적인 개발과 배포: 마이크로프론트엔드는 각각의 애플리케이션으로 분리되어 개발됩니다. 이는 다양한 팀이 독립적으로 작업하고 배포할 수 있게 하며, 애플리케이션 간의 상호작용을 규정하는 인터페이스를 통해 팀 간의 협업을 용이하게 합니다. 이를 통해 애플리케이션의 개발과 배포 주기를 가속화할 수 있습니다.

3.확장성과 유연성 향상: 마이크로프론트엔드는 각각 독립적인 단위로 구성되어 있기 때문에 개별적으로 확장이 가능합니다. 특정 마이크로프론트엔드의 트래픽이 증가하면 해당 마이크로프론트엔드만 확장하여 대응할 수 있습니다. 이는 시스템의 확장성과 유연성을 향상시키고, 특정 부분에 대한 변경이 전체 시스템에 미치는 영향을 제한할 수 있습니다.

4.독립적인 관리와 업데이트: 마이크로프론트엔드는 개별 애플리케이션 단위로 관리됩니다. 이는 개별 애플리케이션의 업데이트와 유지보수를 독립적으로 수행할 수 있게 합니다. 한 애플리케이션의 변경이 다른 애플리케이션에 영향을 미치지 않으므로, 안정성을 유지하면서 개발과 유지보수를 진행할 수 있습니다.

5.조직적인 분리와 독립성: 마이크로프론트엔드는 조직 내에서 다양한 팀이 각각의 마이크로프론트엔드를 개발하고 관리할 수 있습니다. 이는 기업 내의 조직적인 분리와 독립성을 제공합니다. 각 팀은 자신의 마이크로프론트엔드를 담당하며, 비즈니스 요구사항과 우선순위에 따라 독립적으로 개발과 운영을 진행할 수 있습니다. 이는 팀 간의 의존성을 줄여 조직의 민첩성을 향상시키고, 업무의 분산과 병렬화를 가능하게 합니다.

6.재사용성과 유지보수성: 마이크로프론트엔드는 작은 모듈 단위로 구성되기 때문에 재사용성과 유지보수성을 향상시킵니다. 공통적인 컴포넌트나 기능은 여러 마이크로프론트엔드에서 공유하여 중복 작업을 피할 수 있습니다. 또한, 특정 모듈의 변경이 전체 시스템에 영향을 미치는 범위가 제한되므로 유지보수가 용이해집니다. 이는 코드의 재사용성을 높이고, 시스템의 유연성과 확장성을 향상시킵니다.

7.경계의 분리와 안정성: 마이크로프론트엔드는 각각의 애플리케이션 단위로 독립적으로 운영됩니다. 이는 애플리케이션 간의 경계를 명확하게 분리하고, 장애가 발생해도 다른 마이크로프론트엔드에 영향을 미치지 않도록 합니다. 각 마이크로프론트엔드는 자체적으로 동작하며, 안정성과 격리성을 보장합니다. 따라서 전체 시스템의 안정성을 높이고, 장애가 전파되지 않도록 합니다.

마이크로프론트엔드 (Microfrontends) 관련키워드

1.마이크로서비스 (Microservices): 마이크로프론트엔드와 유사한 개념으로, 애플리케이션을 작은 독립적인 서비스로 분리하여 개발하고 운영하는 아키텍처 패턴입니다.

2.프론트엔드 마이크로아키텍처 (Frontend Microarchitecture): 마이크로프론트엔드를 위한 전체 아키텍처 구조를 지칭하는 용어로, 마이크로프론트엔드 애플리케이션의 조직, 컴포지션, 라우팅, 통신 등을 포함합니다.

3.컴포넌트 기반 아키텍처 (Component-Based Architecture): 애플리케이션을 작은 독립적인 컴포넌트로 구성하여 개발하고 관리하는 아키텍처 패턴으로, 마이크로프론트엔드에서도 컴포넌트 기반 아키텍처를 활용하여 모듈화된 개발을 지원합니다.

4.통합 패턴 (Integration Patterns): 여러 개별 마이크로프론트엔드 애플리케이션을 통합하기 위한 방법과 패턴을 의미합니다. 이는 애플리케이션 간의 데이터 교환, 상호작용, 라우팅 등을 다룹니다.

5.단일 페이지 애플리케이션 (Single-Page Application, SPA): 전체 애플리케이션을 단일 페이지로 구성하고, 동적으로 콘텐츠를 업데이트하는 웹 애플리케이션입니다. 마이크로프론트엔드는 SPA를 구현하기 위해 자주 활용됩니다.

6.프론트엔드 프레임워크 (Frontend Framework): 웹 애플리케이션을 개발할 때 사용하는 프레임워크로, React, Angular, Vue.js 등이 있습니다. 마이크로프론트엔드는 다양한 프론트엔드 프레임워크를 조합하여 구현될 수 있습니다.

7.웹 컴포지션 (Web Composition): 다양한 독립적인 마이크로프론트엔드를 조합하여 하나의 통합된 사용자 인터페이스를 생성하는 과정을 의미합니다. 이는 애플리케이션의 컴포넌트를 동적으로 조합하여 필요한 기능을 제공하고, 사용자에게 일관된 경험을 제공합니다. 웹 컴포지션은 각 마이크로프론트엔드 애플리케이션의 독립성과 유연성을 유지하면서 통합된 사용자 경험을 제공하는 핵심 요소입니다.

8.서비스 디스커버리 (Service Discovery): 마이크로프론트엔드에서는 여러 개의 독립적인 애플리케이션을 관리해야 합니다. 서비스 디스커버리는 이러한 독립적인 애플리케이션을 찾고 식별하기 위한 메커니즘을 제공합니다. 이는 애플리케이션의 주소, 버전, 기능 등을 등록하고 검색할 수 있는 중앙 서비스 레지스트리를 활용하여 애플리케이션의 검색과 연결을 용이하게 합니다.

9.CI/CD (Continuous Integration/Continuous Delivery): 마이크로프론트엔드 개발에서 CI/CD는 핵심적인 역할을 합니다. CI는 개별 마이크로프론트엔드의 지속적인 통합을 의미하며, 변경 사항의 빠른 피드백과 충돌의 식별을 지원합니다. CD는 지속적인 배포를 의미하며, 변경 사항을 자동으로 빌드, 테스트, 배포하여 신속하게 애플리케이션을 업데이트합니다. CI/CD를 통해 마이크로프론트엔드 개발 및 배포 프로세스를 자동화하고 효율성을 높일 수 있습니다.