iframe 사용에 대해서

iframe은 일반적으로 권장되지 않는 방법으로 인식되어있다.

 

하지만 이번 우테코 프로젝트에서는 iframe을 이용하여 프로젝트를 진행했다.

 

프로젝트 주제는 댓글 모듈이었는데, 어떤 스크립트를 실행하면 원하는 웹 페이지의 어딘가에 댓글을 작성할 수 있는 UI와 기능이 제공되는 서비스였다.

 

처음에는 그냥 원하는 요소를 지정하면 그 밑에 UI를 추가하면 되겠거니 했으나, 그렇게 되면 댓글모듈의 UI의 rem단위들이 웹 페이지 별로 다르게 적용되어 동작하게 된다.

 

즉, 스타일의 분리가 이루어지지 않는다.

 

그리고, 댓글 기능이 있는 어느곳에서나 홍보같은 스팸성 댓글이 수두룩하게 도배되기 마련이다.

만약 이것들이 SEO에 반영이 된다면 어떨까?

스팸성 댓글이 달렸음에도 관리를 즉시 하지 않는다면, 바로 해당 웹페이지가 저품질페이지로 분류되어 검색엔진에 노출횟수가 확연하게 줄어들 것이다.

 

근데 iframe을 사용하게 되면, iframe을 크롤링하지 못하는 검색엔진이 있기 때문에 이를 방지할 수 있다.

(물론 구글 검색엔진은 iframe까지 모두 크롤링하는 것 같다.)

그리고 스크린 리더기에도 읽히지 않으므로 웹 접근성이 저하된다.

 

다른 서비스라면 문제가 될 수 있었겠지만, 댓글 모듈은 크롤링이 되지 않는 것이 좋은 편이기 때문에 전혀 문제가 되지 않았다.

 

(물론 구글 검색엔진은 iframe까지 읽어서 SEO에 반영하는 부분을 신경써봐야할 것 같다.)

 

다른 방법으로 Shadow DOM이 있었으나, html안에 html이 구성되는 형태가 아니었다.

그래서 rem이 제대로 동작하지 않을 것이었고,

styled-component로 스타일을 적용하고 있었는데, styled-component의 해시값으로 정해진 class들이 html상에는 들어갔으나, Shadow DOM 내에 있는 요소에 전달되지 않기 때문에 아예 스타일이 먹지 않는 이슈가 발생했었다.

(원래 Shadow DOM에 스타일을 주려면 <style> 태그에 직접줘야하는 것 같다.)

 

이러한 이유로 iframe을 사용했고 사용하는데 큰 문제점을 찾지는 못했다,