프레임워크 통합? 웹 컴포넌트로 해결!
다중 프레임워크(React, Vue, JSP) 환경에서 동일 화면 중복 개발 문제를 해결하기 위해 웹 컴포넌트(Web Components) 도입을 결정함
iframe의 보안 한계와 시스템 마이그레이션의 비효율성을 극복하고, 프레임워크 종속 없는 통합 방안 모색
모노레포(Monorepo)와 CDN을 활용한 'BackOffice Standard System' 아키텍처 설계로 실시간 독립 배포 및 보안 강화 달성
Shadow DOM의 스타일 격리, SSR/SEO 고려사항, 초기 로드 지연 처리 등 웹 컴포넌트 활용 완성도를 높이는 방안 공유
웹 컴포넌트: 프레임워크 독립성과 자원 공유의 비밀
본문에서는 웹 컴포넌트가 프레임워크에 종속되지 않는 표준 기술이라는 점을 강조하며, 이를 통해 여러 프레임워크 환경에서 공통 UI를 재사용하는 핵심 원리를 설명합니다.
커스텀 태그(Custom Tag): 브라우저 네이티브 기능으로, React, Vue, JSP 등 어떤 환경에서도 HTML 태그처럼 인식되어 렌더링됩니다.
Shadow DOM: 스타일과 DOM을 격리하여 부모 시스템과의 스타일 충돌을 원천적으로 방지하며, 이는 웹 컴포넌트가 어떤 환경에 통합되어도 일관된 UI를 유지하는 비결입니다.
부모 자원 공유: iframe과 달리 동일한 스크립트 엔진 위에서 실행되므로, 쿠키, 세션, API 클라이언트 등 부모 시스템의 자원을 직접 공유하여 인증 및 데이터 접근 문제를 해결합니다.
결론적으로 웹 컴포넌트는 '라면 스프'와 같은 만능 양념장으로서, 기존 시스템의 변경 없이 공통 UI를 효율적으로 통합하고 배포하는 데 핵심적인 역할을 수행합니다.
모노레포와 CDN 기반의 'BackOffice Standard System' 아키텍처
이 아키텍처는 모노레포(Monorepo)를 통한 코드 통합 관리와 CDN을 통한 컴포넌트 배포를 결합하여 효율성을 극대화합니다.
1. 코드 통합: 여러 시스템에 흩어질 수 있는 공통 UI 로직을 단일 모노레포 내 독립된 패키지로 관리하여 중복 코드 감소 및 유지보수 효율성 증대를 꾀합니다.
2. 웹 컴포넌트 빌드: Vue로 개발된 패키지를 프레임워크에 종속되지 않는 순수 JavaScript 파일로 변환합니다.
3. CDN 서빙: 빌드된 JS 파일을 S3에 업로드하고 CDN을 통해 배포하여, 가장 빠른 정적 자원 다운로드 경로를 확보합니다.
4. 화면 렌더링: 각 서비스는 CDN URL을 커스텀 태그로 로드하기만 하면 되며, 이는 부모 시스템의 재배포 없이 실시간 화면 업데이트를 가능하게 합니다.
이 구조는 화면 단위의 독립적인 배포를 지원하며, 캐시 버스팅(Cache Busting)과 같은 기법을 통해 최신 자원 적용을 보장합니다.
보안 강화: iframe의 한계를 넘어서는 인증 시나리오
웹 컴포넌트는 iframe의 Cross-Origin 제약으로 인한 인증 문제를 해결하기 위해 부모 시스템과의 긴밀한 연동을 기반으로 다양한 보안 시나리오를 지원합니다.
쿠키/헤더 토큰 인증: 동일 오리진에서 실행되므로 SameSite 정책의 제약을 받지 않고 기존 인증 체계를 활용하며, CSRF 방어는 부모 시스템에서 별도 관리합니다.
API 인스턴스 주입: 부모 시스템의 Axios 인스턴스 자체를 웹 컴포넌트에 프로퍼티로 전달하여, 인증 정보가 포함된 API 호출을 자연스럽게 처리합니다.
이종 도메인 API 호출: 서버 간 약속된 토큰을 프로퍼티로 받아 동적으로 헤더에 주입하는 방식으로, 안전한 인증 정보 전달을 보장합니다.
핵심은 CDN에 배포된 JS 파일은 단순 렌더링 로직이며, 실제 인증 정보(Key, Axios 인스턴스)는 부모 시스템 메모리 상에서만 동적으로 주입된다는 점입니다. 이는 CDN 주소 탈취 시에도 민감 데이터 접근을 차단하는 구조적 보안(Structural Security)을 제공합니다.
Shadow DOM 스타일 격리 및 Vue 스타일 통합 전략
웹 컴포넌트의 가장 큰 장점 중 하나는 Shadow DOM을 통한 완벽한 스타일 격리입니다. 이는 어떤 부모 시스템에 통합되어도 스타일 충돌 없이 일관된 UI를 보장합니다.
스타일 주입 로직: 전역 스타일이 Shadow DOM 내부로 자동으로 들어오지 않기 때문에, `moveVueStylesIntoShadow`와 `injectStyleToComponent` 같은 커스텀 훅을 통해 Vue 전용 스타일 및 CDN에서 로드한 CSS를 명시적으로 주입해야 합니다.
스타일 우선순위: `prepend`와 `appendChild`를 활용하여 기본 스타일과 웹 컴포넌트 CSS의 적용 순서를 제어하고, 스타일 우선순위(Style Precedence)를 명확히 관리합니다.
초기에 이러한 스타일 통합 로직을 공통 훅으로 잘 구축해두면, 이후에는 개별 컴포넌트 개발 시 스타일 관련 이슈를 거의 신경 쓰지 않아도 됩니다.
SSR/SEO 제약과 초기 로딩 지연 극복 방안
웹 컴포넌트는 브라우저에서 커스텀 태그가 정의된 후에 렌더링되므로, SSR(Server-Side Rendering)이나 SEO(Search Engine Optimization)가 중요한 공개 화면보다는 로그인 후 사용되는 백오피스 환경에 더 적합합니다.
SSR/SEO 제약: 초기 렌더링이 클라이언트 측에서 발생하므로, 검색 엔진 크롤링이나 서버 렌더링이 필요한 시나리오에는 직접적인 적용이 어렵습니다.
초기 로딩 지연 처리: CDN에서 컴포넌트 스크립트를 다운로드하고 커스텀 태그가 정의되기까지 발생하는 짧은 지연은, `isDefined` 상태 관리와 같은 로딩 처리 로직을 통해 사용자 경험을 매끄럽게 만듭니다.
이러한 특성을 이해하고 적절한 로딩 처리를 구현한다면, 웹 컴포넌트는 백오피스 환경에서 매우 효과적인 솔루션이 될 수 있습니다.
