프레임워크에 구애받지 않는 통합 백오피스 구축하기
Summary
React, Vue, JSP를 하나로! 올리브영의 '웹 컴포넌트' 기반 백오피스 통합 여정
iframe의 세션 한계와 지옥 같은 중복 개발을 원샷으로 지워버린 마이크로 프론트엔드 구축 가이드
올리브영 카탈로그 팀이 이기종 프레임워크 환경에서도 단 하나의 소스 코드로 공통 화면을 동기화할 수 있는 영리한 아키텍처를 선보입니다. 무거운 시스템 통합 없이 웹 표준인 '웹 컴포넌트'와 모노레포를 사용해, 부모 시스템의 세션 자원을 완벽하게 공유하면서 화면 단위 배포 효율성까지 확보한 비법을 상세히 정리했습니다.
- 01iframe의 SameSite 보안 이슈와 로그인 중복 요구 문제를 완벽하게 회피하는 브라우저 표준 통합
- 02Vue 3의 `defineCustomElement` API를 활용하여 모던 프레임워크 기반의 커스텀 웹 엘리먼트 신속 제작
- 03모노레포에서 공통 패키지를 단일 관리함으로써 코드 중복을 최소화하고 일관된 업데이트 제공
- 04S3와 CDN 인프라를 활용하여 어떤 백오피스 시스템에서든 단순 스크립트 로드로 화면 결합
- 05React 환경에서도 유연하게 조화를 이룰 수 있도록 커스텀 훅(`useWebComponent`)을 포함한 세부 세팅 팁 공개
RECOMMENDATION
여러 종류의 레거시와 모던 웹 프레임워크를 동시 운영하며 중복 UI 개발에 지친 시니어 리드나, iframe 대신 유연하고 강력한 격리 기능을 원하는 백오피스 설계자에게 적극 추천합니다.
The Problem
서로 다른 프레임워크(React, Vue, JSP)로 구축된 여러 백오피스 시스템에 동일한 기능의 화면을 중복으로 개발해야 하는 비효율이 존재했습니다. 기존 iframe 방식은 로그인 세션 공유 불가능 등의 한계가 있었고, 단일 프레임워크로의 전체 마이그레이션은 막대한 리소스 소모와 리스크를 동반했습니다.
The Solution
Vue 3의 `defineCustomElement`를 활용하여 프레임워크에 구애받지 않고 빌드 및 서빙 가능한 표준 웹 컴포넌트를 설계했습니다. 소스 코드는 단일 모노레포에서 통합 관리하며, 빌드된 파일은 S3와 CDN을 통해 정적 자원으로 배포하여 각 시스템에서 커스텀 태그만으로 렌더링할 수 있게 조치했습니다.
The Result
한 벌의 코드로 여러 이기종 시스템에 공통 화면을 빠르게 구축하고 중복 코드를 방지하여 유지보수 효율을 극대화했습니다. 실제 가동되는 로그인 세션 및 전역 리소스를 부모 창과 온전히 공유할 수 있어, iframe의 UX 저해 요인을 극복한 것으로 보입니다.
Trade-off
웹 컴포넌트 도입을 위한 모노레포 설계 및 신규 빌드 파이프라인 구축 등에 초기 개발 환경 비용이 들어갑니다. 또한, Shadow DOM 사용으로 인해 스타일 캡슐화 문제가 발생할 수 있으며 이를 해결하기 위한 리액트 커스텀 훅 등의 정교한 구현 처리가 요구됩니다.
Key Concepts
More from 올리브영
View all posts from 올리브영
옴니채널 재고 정합성 한계에 대응하는 인벤토리 데이터 파이프라인 구축기
KafkaSpring BatchEDA1주 전
에러로그 하나에 깨던 새벽에서 벗어나기까지 — 상품 모니터링 진화기
DatadogCDCAutomation1주 전
150개국 K-뷰티 플랫폼 뒤의 팀, 올리브영 글로벌엔지니어링센터의 첫 번째 워크숍 이야기
GenAIVibe CodingVertex AI2개월 전
45분 배치에서 준실시간으로! 다수 도메인 데이터를 Kafka로 통합한 전환기
KafkaEvent-Driven ArchitectureRedis Pub/Sub2개월 전
AI와 협업하는 새로운 개발 프로세스, 올리브영은 어떻게 시작했을까 (feat. AI-DLC)
AI-DLCSDLCAWS2개월 전
