핵심 요약
올리브영은 프레임워크에 얽매이지 않는 백오피스 구축을 위해 웹 컴포넌트를 핵심 기술로 채택하고, 모노레포에서 빌드한 패키지를 CDN(S3)으로 서빙해 다양한 프레임워크 환경에서도 한 화면을 실시간으로 로드하는 아키텍처를 제시했습니다.
구현 방법
- 모노레포에서 공통 기능을 독립 패키지로 관리해 중복 제거와 유지보수성 향상
- Vue 컴포넌트를 웹 컴포넌트로 변환하고 Shadow DOM에서 스타일 격리 실현
- CDN으로 빌드 JS를 서빙하고, 같은 커스텀 태그를 렌더링에 활용
- 캐시 버스팅 등 최신 자원 반영 메커니즘으로 실시간 업데이트 보장
주요 결과
- 부모 시스템 재배포 없이 화면 변경 반영 및 채널 간 일관성 확보
- 스타일 격리와 런타임 프로퍼티 주입으로 보안·자원 공유를 안정적으로 처리
- 파편화된 백오피스 환경의 모던화를 촉진하는 통합 아키텍처 구현
