마이크로 프론트엔드 및 디자인 시스템 드리프트: 팀 전체에서 UI 일관성 유지
마이크로 프런트엔드를 사용하는 팀이 하나의 일관된 UI를 유지하는 방법: 버전이 지정된 패키지로 공유 토큰 및 구성 요소, CSS 격리, 업그레이드 정책 및 시각적 회귀 확인.
핵심 포인트
마이크로 프런트엔드를 사용하면 팀이 제품의 일부를 독립적으로 배포할 수 있으므로 UI 표류가 발생할 수 있습니다. 구성 요소의 다른 버전, CSS 충돌 및 스타일 중복이 발생합니다. 디자인 토큰과 구성 요소를 버전이 지정된 패키지로 공유하고, 각 팀의 CSS를 격리하고, 업그레이드 정책에 동의하고, 시각적 회귀 테스트를 통해 차이점을 파악하여 일관성을 유지하세요.
드리프트가 발생하는 이유
Martin Fowler의 사이트에서는 마이크로 프런트엔드를 주요 이점으로 독립적 배포를 통해 더 큰 전체로 구성된 독립적으로 제공 가능한 프런트엔드 애플리케이션으로 설명합니다. 동일한 독립성으로 인해 드리프트가 발생합니다. 팀은 서로 다른 시기에 디자인 시스템을 업그레이드하고, 구성 요소를 복사하여 더 빠르게 이동하고, 페이지의 다른 부분으로 누출되는 CSS를 작성합니다. 또한 이 기사에서는 일부 구현이 종속성을 중복하며 전역적이고 연속적인 CSS에는 의도적인 격리가 필요하다고 경고합니다.
시스템을 패키지로 공유
복사하여 붙여넣은 코드가 아닌 버전이 지정된 패키지로 토큰 및 구성 요소를 게시합니다. W3C DTCG 형식과 같은 표준 형식의 토큰은 팀이 사용하는 모든 프레임워크에 대해 구축될 수 있으므로 React 팀과 Vue 팀은 여전히 동일한 색상, 간격 및 모션을 공유합니다.
CSS 분리
BEM, CSS 모듈, CSS-in-JS 또는 웹 구성 요소용 Shadow DOM과 같은 명명 규칙 등 일관된 접근 방식을 통해 팀 간 스타일 유출을 방지합니다. 전체 제품에 대해 하나의 규칙을 선택하고 이에 대한 린트를 선택합니다.
업그레이드 정책
팀이 얼마나 뒤쳐질 수 있는지 합의하고(예: 하나의 주요 버전만) 의미론적 버전 관리를 사용하여 변경 사항이 언제 중단되는지 팀이 알 수 있도록 합니다. 공유 대시보드에서 각 마이크로 프런트엔드가 사용하는 버전을 추적하세요.
드리프트를 자동으로 잡아라
주요 화면에 대한 시각적 회귀 테스트, 원시 색상 및 간격 값을 금지하는 린트 규칙, 공유 표면(헤더, 탐색, 결제)에 대한 디자인 검토를 통해 사용자가 보기 전에 불일치를 찾아냅니다.
기억할 핵심 원칙
- 독립적인 배포로 인해 UI 드리프트 가능성이 높음
- 버전이 지정된 패키지로 토큰 및 구성 요소 공유
- 하나의 일관된 접근 방식으로 CSS 분리
- 업그레이드 정책에 동의하고 버전을 추적합니다.
- 시각적 회귀 테스트 및 린트 규칙 사용
자주 묻는 질문
출처
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org