핵심 요약
사람인은 다양한 플랫폼의 이력서를 한 서비스에서 깨지지 않게 렌더링하기 위해 Shadow DOM을 도입했습니다. Shadow host와 Shadow root로 CSS/DOM을 격리하고, HTML 문자열 데이터를 Shadow DOM에 안전하게 렌더링하는 흐름과 외부/내부 스크립트 로딩, 스타일 안정화 및 데이터 노출 이슈를 다룹니다.
구현 방법
- Shadow DOM 생성: Shadow host에 attachShadow({ mode: "open" })로 루트를 만듭니다.
- HTML 파싱 및 재구성: DOMParser로 문자열 데이터를 HTML로 변환하고 base URL, meta/link/style, body를 추출해 재구성합니다.
- Shadow DOM 삽입: template를 이용해 파싱된 HTML을 Shadow DOM에 삽입합니다.
- 스크립트 처리: 외부 스크립트를 Promise.allSettled로 로드하고 inline 스크립트는 Shadow DOM 환경에 맞춰 실행합니다.
- 스타일 관리: MutationObserver로 스타일 변화 감지 후 안정화 시점을 판단합니다.
주요 결과
- Shadow DOM 캡슐화로 CSS/DOM 충돌 감소 및 렌더링 안정성 향상
- 다양한 플랫폼 이력서의 노출 일관성 증가
