느린 배포 주기, 강하게 결합된 의존성 및 모노리식 프론트엔드 코드베이스를 관리하는 번거로운 성질에 좌절하고 있나요? 이러한 일반적인 문제들은 많은 개발팀을 괴롭히며 생산성이 감소하고 프로젝트 납기가 지연될 수 있습니다. 여기에서 마이크로 프론트엔드가 나타납니다. 이는 이러한 도전 과제에 직면하여 만들어진 접근 방식입니다.

그런데 마이크로 프론트엔드가 정확히 무엇이며, 왜 중요한가요?

왜 마이크로 프론트엔드가 중요한가요?

마이크로 프론트엔드는 거대한 프론트엔드 코드베이스를 더 작고 관리하기 쉬운 조각들로 나누는 접근 방식입니다. 각 조각 또는 마이크로 프론트엔드는 독립적으로 개발, 테스트 및 배포할 수 있습니다. 이 모듈식 접근 방식은 민첩성과 속도를 제공하여 프론트엔드 개발 방식을 변화시킵니다.

마이크로 프론트엔드 정의

마이크로 프론트엔드는 마이크로서비스의 원칙을 프론트엔드로 확장하여 팀이 개별 아티팩트를 독립적으로 구축하고 배포할 수 있도록 합니다. 이 접근 방식은 특히 마이크로서비스 아키텍처를 채택한 조직에 매우 유익하며 유사한 원칙과 목표에 부합합니다.

전통적인 컴포넌트와 달리, 마이크로 프론트엔드는 독립적인 배포와 확장성에 최적화되어 있습니다. 다중 프레임워크 접근 방식에 특별히 설계되지는 않았지만, 결합 해제와 모듈화가 중요한 환경에서 뛰어난 성능을 발휘합니다.

저는 마이크로 프론트엔드와 컴포넌트의 차이를 설명하는 이 10분 영상을 시청하는 것을 강력히 추천합니다:

마이크로 프론트엔드의 실용적인 응용

마이크로 프론트엔드는 다양한 종류의 웹사이트와 애플리케이션에 적용할 수 있습니다. 지난 몇 년 동안 전 세계 100여 개 팀을 따라왔습니다.

서버 측 렌더링을 사용하는 전자 상거래 사이트부터 클라이언트 측 렌더링을 사용하는 B2B 플랫폼, 그리고 비디오 스트리밍 서비스, 금융 서비스, 보험 웹사이트, 엔터테인먼트 또는 여행 웹사이트와 같은 여러 분야에 적용될 수 있습니다.

요즘에는 애플리케이션에 대해 마이크로 프론트엔드를 구현했다고 공개한 많은 기업들이 있어요. 예를 들어, booking.com, Netflix, PayPal, DAZN, Lululemon, Dunelm, Postman, BMW, Adidas, BestBuy, Epic Games, Shopify, Business Insider 등 많은 기업들이 있어요.

올바른 분할 선택

수평 및 수직 분할 중에서 선택하는 것은 팀 규모, 재사용성, 간결함과 같은 여러 요소에 달려 있어요. 마이크로 프론트엔드 아키텍처를 사용하면 시스템 내에서 식별한 도메인에 적합한 분할을 사용할 수 있기 때문에, 천천히 수직 또는 수평 분할을 교차로 사용할 수 있어요.

수평 분할: 페이지의 일부분

수평 분할은 여러 마이크로 프론트 엔드가 동시에 하나의 페이지에서 공존할 수 있도록 허용하여, 서로 다른 팀이 각기 다른 섹션을 소유할 수 있습니다. 이 방법은 유연성을 제공하지만 일부 도전 과제도 제시합니다:

• 일관된 디자인: 각 팀은 이를 실현하기 위한 적절한 지침을 정의해야 합니다. 예를 들어, 디자인 시스템 라이브러리 버전을 강제하는 Dependabot을 설정합니다.
• 조정 부담: 여러 팀이 같은 페이지에 기여하는 경우 효과적인 커뮤니케이션과 조정이 필수적이며 때로는 시간이 소요될 수 있습니다. 따라서, 뷰의 최종 결과에 책임을 질 단일 팀을 식별하는 것이 좋은 선택입니다. 몇몇 기관에서 구현되었다는 것을 관찰했습니다.
• 도메인 연결 끊김: 이 접근 방식은 비즈니스 도메인 주변에 모델링하는 원칙에서 벗어날 수 있으며, 이는 마이크로 프론트 엔드 대신 여러 분산 컴포넌트를 생성하게 될 수 있습니다. 마찬가지로 마찬가지로 협력을 유지하고, 미세한 분할로 이동하기 전에 더 코어 그레인을 시작할 수 있도록 주의를 기울이세요.

수직 분할: 하나의 도메인, 하나의 마이크로 프론트 엔드

수직 분할에서 각 마이크로 프론트 엔드는 하나의 완전한 비즈니스 도메인을 나타냅니다. 이 방법에는 여러 가지 장점이 있습니다:

• 도메인 전문 지식 촉진: 팀은 특정 비즈니스 영역에 심취하여 진정한 전문가가 될 수 있습니다.
• 자율성 강화: 팀은 더 큰 독립성을 누리며, 자신들의 도메인을 가장 잘 제공하는 결정을 내릴 수 있습니다.
• 전통적인 접근 방식과 조화: 이 방법은 싱글 페이지 응용 프로그램 (SPA) 또는 서버 측 렌더링 방법론과 더 밀접하게 조화합니다.
• 단편화 감소: 각 도메인 내에서 구현이 일관성을 유지하며, 더욱 효율적인 개발 프로세스로 이어집니다.

어떤 접근 방식을 선택해야 할까요?

수평 분할과 수직 분할 사이의 선택은 궁극적으로 귀하의 조직 구조, 응용 프로그램의 성격 및 팀의 목표에 달려 있습니다.

수직 분할은 주로 비즈니스 도메인 주위 모델링 원칙과 더 잘 조화됩니다. 이 접근 방식은 확장 가능한 조직을 만들고 효과적인 자율 팀을 육성할 수 있습니다. 보다 명확한 소유권과 책임을 확립함으로써 개발의 품질이 향상될 수도 있습니다.

반면에, 수평적 분할은 페이지 구성에서 극도의 유연성이 필요한 시나리오나 완전히 분리하기 어려운 레거시 시스템을 다룰 때 적합할 수 있습니다. 구현하기는 더 복잡하지만 올바르게 수행되면 시스템을 올바르게 발전시킬 수 있는 더 많은 유연성을 제공합니다.

이러한 방법을 정말로 이해하고 실제로 보려면 제가 만든 독점 비디오를 놓치지 마세요.

그 비디오에서는 실제 예제를 통해 개념을 분해하여 마이크로 프론트엔드를 효과적으로 분할하는 방법을 정확히 보여줍니다.

성공을 위한 팀 구성하기

마이크로 프론트엔드의 효율적인 구현에는 신중하고 전략적인 팀 구성이 필요합니다. 일반적으로 커 또는 플랫폼 팀은 프로젝트 전체 아키텍처와 거버넌스를 감독하는 책임이 있습니다. 이 팀은 모베스트 프랙티스를 따르고 표준을 유지하며 애플리케이션의 전체 비전을 준수하는 것을 보장합니다. 한편, 개별 팀은 특정한 마이크로 프론트엔드에 집중하여 그 특정 영역의 개발과 향상에 노력과 전문 지식을 기울입니다. 이 구조는 다양한 팀 간의 협력을 촉진할 뿐만 아니라 전체 애플리케이션 전반에 걸쳐 일관성과 균일성을 보장합니다. 책임 분담과 명확히 정의된 거버넌스 프로세스를 통해 조직은 보다 원활하고 효율적인 개발 프로세스를 달성할 수 있습니다.

마이크로 프론트엔드 컨퍼런스에서 완벽한 마이크로 프론트엔드 플랫폼에 관한 주제 발표를 했습니다. 녹화 영상은 여기에서 확인할 수 있습니다:

계속적인 학습과 개선

마이크로 프론트엔드는 일반적인 해결책이 아닙니다. 올바르게 활용할 때 강력한 도구이며 개발 프로세스를 혁신할 수 있습니다. 거버넌스 접근 방식의 계속적인 재평가와 개선은 시스템의 진화하는 성격에 대응하기 위해 필수적입니다.

예를 들어, 처음에는 단일 프론트엔드 접근 방식을 채택한 전자상거래 플랫폼을 생각해 보겠습니다. 시간이 지남에 따라 플랫폼이 성장함에 따라 배포 주기가 불편해지고 종속성 관리가 악몽이 되었습니다. 마이크로 프론트엔드로 전환함으로써 플랫폼은 코드베이스를 더 작고 관리하기 쉬운 단위로 분해할 수 있었습니다. 각 팀은 이제 제품 카탈로그, 체크아웃 프로세스 및 사용자 리뷰와 같은 애플리케이션의 특정 부분에 집중할 수 있었습니다. 이러한 모듈성은 더 빠른 배포 주기, 더 쉬운 유지 관리 및 새로운 기술 도입에 대한 더 큰 유연성을 가능케 했습니다.

다른 예로는 대규모 미디어 스트리밍 서비스가 있습니다. 처음에 단일 프로그램으로 구축된 이 서비스는 확장과 신속한 업데이트 배포에 대한 도전에 직면했습니다. 마이크로 프론트엔드를 채택함으로써 팀은 랜딩 페이지, 사용자 인증, 콘텐츠 스트리밍과 같은 구별된 도메인으로 애플리케이션을 나누었습니다. 이 수직 분할을 통해 각 팀은 자신의 도메인에 독립적으로 작업할 수 있었고, 빠른 기능 릴리스와 더 반응적인 사용자 경험을 이끌어냈습니다.

이러한 예는 시스템의 발전적 성격을 수용하기 위해 지속적으로 거버넌스 접근 방식을 재평가하고 개선하는 중요성을 강조합니다. 이를 통해 마이크로 프론트엔드가 효과적이고 확장 가능하며 조직의 목표와 일치하는지 확인할 수 있습니다.

요약

마이크로 프론트엔드는 단일식 프론트엔드 응용프로그램이 제기하는 과제에 대한 강력한 솔루션을 제공합니다. 이 방식을 채택함으로써 더 빠른 배포, 코드 관리의 간소화, 그리고 더 효과적인 팀을 경험할 수 있습니다. 이는 일회성 변화가 아니라 지속적인 학습과 개선의 여정입니다. 이 흥미로운 지속적인 발전의 길에 함께해보시기를 권장합니다.

더 많은 정보를 알고 커뮤니티가 어떻게 진화하는지 알고 싶다면, 무료로 제공되는 이 주제에 관한 내용을 모아놓은 뉴스레터인 마이크로 프론트엔드 뉴스레터를 구독해보시길 권장합니다.