Shadow DOM이 아니라 Iframe를 사용한 이유

프로그래밍을 하다보면 dom안에 새로운 dom을 넣어야 하는 경우가 그렇다.

이런 경우는 대부분, 어떤 요소를 모듈형으로 페이지에 삽입하는 서비스등에 사용된다.

 

내가 우테코에서 개발하고 있는 댓글 모듈 서비스도 그렇다.

댓글 모듈은 어느 페이지에서나 정상적으로 보여져야하며, 외부 DOM의 스타일으로 부터 독립적이어야 한다.

 

또한, 댓글에 대해 어뷰징하는 사용자들로 인해, SEO를 해치면 안되므로, 검색엔진 크롤러가 댓글을 감지 못하게 해야 한다.

내가 열심히 관리한 블로그를 어떤 악성 사용자들이 댓글에 광고를 많이 달아서, 저품질 블로그로 낙인이 찍힌다면 억울하지 않겠는가?

 

그래서 외부 DOM과 서비스하는 댓글 DOM을 독립적으로 관리하기 위한 방법으로, Iframe과 Shadow DOM을 선택해야 했다.

 

나와 페어가 함께 고민해본 각각의 특징은 다음과 같다.

 

1. Shadow DOM

부모 DOM과 스타일이 완전히 분리된다.

검색 엔진 크롤링 방지가 가능하다.

Shadow DOM의 사이즈가 부모 DOM의 사이즈에 자동으로 반영되게 할 수 있다. (Shadow DOM의 영역이 커지면 부모에 자동 반영)

shadow dom은 document 객체가 없다.

css-in-js를 사용할 수 없고, shadow DOM 내부에 <style> 태그를 사용하여 스타일을 줘야 한다.

rem를 사용하지 않는다.

반응형 스타일을 적용하기 어렵다. (부모의 뷰포트를 예상할 수 없다.)

 

2. Iframe

부모 DOM과 스타일이 완전히 분리된다.

검색 엔진 크롤링 방지가 가능하다.

iframe의 사이즈는 외부 DOM의 사이즈에 제한되므로, 자식 DOM의 크기를 외부 DOM에 반영하기 위해서는 window.postMessage를 통해 height를 부모에게 전송하여 스타일을 변경해주어야 한다.

iframe이 html파일을 별도로 호출하므로 통신비용이 추가적으로 소모된다.

별도의 document가 존재한다.

별도의 html이기 때문에 css-in-js를 사용할 수 있고 rem도 사용가능하다.

별도의 html을 관리해야하기 때문에 CI/CD가 상대적으로 복잡하다.

 

 

기존에 react로 css-in-js의 종류중 하나인 styled-component를 사용하고 있었는데, Shadow DOM에서 이것이 css-in-js를 사용할 수 없다는 것은 치명적인 단점이었다.

리팩터링 비용도 어마어마할 것이고, styled-component에서 css를 추출하는 방법도 찾지 못했기 때문에 이 부분은 현재 맞지 않는 기술이라고 느껴졌고, shadow dom내부의 객체의 크기만큼 외부 DOM에 반영되기 때문에, 지금 개발하고 있는 댓글 모듈처럼 삽입형 서비스에서 반응형으로 스타일을 주는 것이 어렵다고 판단했다. 또한, rem을 사용하기에 적합하지 않는다는 것도 한몫했다.

 

왜 shadow dom은 css-in-js를 사용하지 못할까에 대한 나름대로의 추리를 하자면, styled-component는 css를 js에 가지고 있으며, 각 요소에 유일한 class값을 주어서 document.querySelector로 DOM객체를 가지고와서 스타일을 준다고 판단된다.

그래서 Shadow DOM 내부를 document가 특별히 알려주지 않는 이상 접근할 수 없으므로, 스타일이 적용이 안되는 것이다.

 

기능은 정상작동하나, 스타일이 Shadow DOM내에 반영이 안되는 모습

 

그에 반에 iframe은 통신 비용이 추가되고, 자식 DOM의 크기를 부모 DOM에 없데이트 하고 싶을때 window.postMessage를 이용한다는 것만 빼면 위 단점들을 모두 해결할 수 있었다.

 

실제로, 비슷한 댓글 모듈 서비스인 disqus와 라이브리도 iframe으로 구현되어 있는것 같았다.

 

즉, 우리팀은 Shadow DOM이 iframe보다 최신기술이고, 아주 매력적인 기술은 맞지만, 현재 내가 개발하고 있는 서비스에 맞지 않다고 판단을 내렸다.

 

내가 사용할 기술에 충분한 이유를 갖는 것. 오늘 고민한 이 몇시간의 과정이 아주 유익하고 좋은 습관인것 같다는 생각이 들었다.

항상 이유 있는 코드와 선택을 할 수 있도록 의식해야겠다.