Read Original
#Frontend

프레임워크에 구애받지 않는 통합 백오피스 구축하기

프레임워크에 구애받지 않는 통합 백오피스 구축하기
01

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 사용으로 인해 스타일 캡슐화 문제가 발생할 수 있으며 이를 해결하기 위한 리액트 커스텀 훅 등의 정교한 구현 처리가 요구됩니다.

03

Key Concepts

Concept · 01

Web Components

웹 표준 기술로서 브라우저가 자체적으로 커스텀 태그를 해석하고 실행할 수 있도록 캡슐화된 기능을 제공하는 API 모음입니다.

  • Vue의 `defineCustomElement`를 통해 모던 프레임워크 기반의 기능들을 순수 웹 컴포넌트 형태로 변환했습니다.
  • 프레임워크 제약 없이 React, Vue, JSP 모두에서 커스텀 태그 선언만으로 렌더링되도록 구현했습니다.
Concept · 02

Monorepo

여러 개의 프로젝트나 패키지를 하나의 저장소(Repository)에서 통합적으로 관리하며 공통 요소를 효율적으로 공유하는 아키텍처 패턴입니다.

  • 여러 백오피스에 서빙할 상품 관리 컴포넌트 소스 코드를 한곳에서 표준화하여 중복 개발을 원천 차단했습니다.
Concept · 03

Shadow DOM

브라우저가 제공하는 표준 기술로, 특정 요소의 DOM 구조와 스타일링을 전역 DOM 스타일과 완전히 격리하는 캡슐화 메커니즘입니다.

  • 부모 시스템의 스타일 오염 없이 웹 컴포넌트의 고유 디자인을 보존하기 위해 활용되었습니다.
  • 커스텀 훅을 통해 Shadow DOM 위에서도 부모 시스템과의 충돌 없이 스타일이 유연하게 렌더링되도록 상세 구조를 보완했습니다.