Shadow Dom : 중요한 건 깨지지 않는 스타일

Shadow DOM 도입 배경 및 개념

• 사람인 서비스 개편으로 다양한 플랫폼 이력서 연동 시 CSS/DOM 스코프 충돌 문제 발생, 핵심 화면인 후보자 상세 페이지의 이력서 깨짐 현상 방지 필요.
• 해결책으로 Shadow DOM을 도입, CSS/DOM을 독립된 공간으로 격리하여 충돌을 근본적으로 차단.
• Shadow host, Shadow tree, Shadow boundary, Shadow root 등 구조와 open/closed mode를 통해 외부 접근 제어 방식을 설명.

Shadow DOM 내 이력서 렌더링 플로우

• HTML 문자열 이력서 데이터를 Shadow DOM에 렌더링하기 위한 8단계 플로우 제시.
• DOMParser로 String을 HTML로 변경 후 meta, link, style, body content 추출 및 HTML 재구성, 상대경로 -> 절대경로 변환 처리.
• Promise.allSettled를 사용하여 외부 스크립트를 로드하고, FOUC(Flash of Unstyled Content) 해결을 위해 MutationObserver로 스타일 변경 감지 후 안정화 시 노출.
• 내부 스크립트 실행 시 document 객체를 Shadow root로 변환하고, closed mode에서는 new Function을 활용하여 스크립트 실행.

Shadow DOM의 한계 및 고려사항

• 각 플랫폼 이력서 변경 시 Side Effect 발생 가능성 및 라이브러리 버전 충돌 문제.
• Shadow DOM의 격리 특성으로 인한 디버깅의 어려움 (특히 closed mode)과 러닝 커브 증가.
• SEO 측면에서 초기 콘텐츠 부재로 인한 인덱싱 지연 가능성이 있으며, SSR + template을 통해 해결 방안을 제시.