Ghost 블로그에 퍼블릭 댓글 붙이기: iframe 문제와 현실적인 대처
note

Ghost 블로그에 퍼블릭 댓글 붙이기: iframe 문제와 현실적인 대처

9 min read

Ghost에는 기본 댓글 기능이 있다. 하지만 '멤버십 가입자'만 댓글을 달 수 있는 구조이다.

"댓글 하나 달려고 해도 회원가입이 필요하다니… 이런 폐쇄적인 부분은 별론데..?"

이런 UX는 내가 원하는 열린 공간과는 거리가 있었다. 나는 더 가볍고 열린 공간을 원해서 누구나 가볍게 댓글을 남길 수 있는 오픈소스 플랫폼인 Cusdis를 도입해 보기로 했다. 무료이며 설치가 간단하고 깃허브 계정으로 바로 시작할 수 있다. 참고로 cusdis가 당장은 그럭저럭 쓰겠지만 장기적 관점에서는 애매한 지점도 있어서 그 부분은 최하단에 적어두었다.

여하튼 Ghost 블로그에 Cusdis 댓글을 붙이는 건 embed 코드를 넣는 간단한 일로 시작됐지만 실제로 적용해보니 예상 외의 문제를 마주하게 되었다.

기본 설정: Cusdis 임베드 코드 적용

GitHub로 Cusdis에 가입하면 아래와 같은 기본 embeded code가 제공된다.

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="개인 id"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

이 코드를 Ghost 테마 내 page.hbs에 삽입했다. Ghost에서 제공하는 기본 댓글 블록 {{comments}} 아래에 이 코드를 배치해 멤버 전용 댓글 + 익명 사용자용 댓글 이라는 이중 구조를 구성했다.

UX가 아쉬운 댓글 시스템

적용 직후 확인해보니 Cusdis 댓글 시스템의 경우 iframe 자체의 높이가 고정된 데다 작게 잡혀 있어 댓글 영역이 잘려 보였고, 내부에 스크롤이 생기는 구조였다. 댓글이 없는 경우에도 스크롤 박스가 생기는 등 UX 관점에서 꽤 불편했다.

  • Cusdis는 댓글 UI를 iframe으로 삽입함
  • iframe은 내부 콘텐츠 길이에 따라 자동으로 높이가 늘어나지 않음

댓글이 본문처럼 자연스럽게 펼쳐지도록 iframe 내부 스크롤 없이 높이를 자동 조정하고 싶어서 방법을 더 알아봤다. 비슷한 경험을 하는 분이 많은지 구글에서 iframe만 검색해도 "iframe 스크롤 없애기"가 자동완성으로 뜬다..ㅠ

시도: postMessage 이벤트 수신

window.addEventListener('message', function(event) {
    if (event.origin !== 'https://cusdis.com') return;

    const iframe = document.querySelector('iframe[data-cusdis-host]');
    if (!iframe) return;

    if (event.data.event === 'resize' && event.data.offsetHeight) {
        iframe.style.height = (event.data.offsetHeight + 50) + 'px';
        iframe.style.overflow = 'hidden';
        iframe.scrolling = 'no';
    }
});
window.addEventListener('message', ...)는 웹에서 서로 다른 창 사이에서 메시지를 주고받을 때 사용하는 메서드이다. 주로 iframe, 팝업, 또는 다른 출처(origin)의 창과 안전하게 통신할 때 사용한다.

여기서 <iframe>은 html 안에 또 다른 웹페이지를 삽입하는 태그이다. 내 웹페이지 안에 cusdis 댓글 페이지를 박스처럼 가져와 끼워둔 것으로 cusdis만의 독립적인 웹페이지여서 css나 자바스크립트 및 dom이 모두 따로 있는 분리된 환경이다.

처음에는 위처럼 window.addEventListener('message', ...)를 사용해 이벤트를 감지하고 iframe 높이를 조절하는 방식을 시도했다. 하지만 메시지 수신부터 막혀서 디버깅으로..

결과: 메시지 수신 실패

콘솔 로그로 디버깅해보니 다른 메시지들은 수신되지만 정작 https://cusdis.com에서 오는 메시지는 전혀 없었다. postMessage가 안 오는 이유는 뭘까?

window.addEventListener('message', function (event) {
  console.log('[message 이벤트 수신]', event);

  if (event.origin === 'https://cusdis.com') {
    console.log('[Cusdis 메시지]', event.data);
  }
});
수신된 메시지 origin data 내용
O https://give-it-a-shot.site "" (빈 문자열)
O https://js.stripe.com Stripe 스크립트의 tracking payload
❌ https://cusdis.com 메시지 이벤트 보이지 않음

블로그 자체 메시지와 기존 연동했던 Stripe 메시지는 수신되었으나 Cusdis에서는 어떤 메시지도 오지 않았다. 처음에 타이밍 이슈인가 싶어서 위의 코드를 가장 상단에 배치해봤다. 그러나 결과는 동일했다.

모든 메시지를 보고자 message origin 필터 조건을 주석처리해서 전체 로그를 확인했다. 리스너는 정상적으로 작동하고 있고 콘솔도 잘 찍히고 있었지만 origin: 'https://cusdis.com'에서 오는 메시지는 단 하나도 없었다.

구조적 한계: postMessage는 양방향 협력 필요

Cusdis는 댓글 UI를 iframe으로 삽입하지만 내부에서 부모 페이지로 postMessage를 보내는 구조는 가지고 있지 않았다. 부모 페이지에서 메시지를 받을 준비가 되어 있어도 iframe 내부에서 메시지를 보내지 못하면 아무런 데이터도 전달되지 않는다. 회고를 하는 지금 시점에서는 이 말이 당연해보이는데 처음 시도할 때는 왜 생각을 못했을까!

이외에 'iframe 내부를 직접 읽어서 높이를 계산하면 안 될까?'하는 생각도 했는데.. Cusdis는 https://cusdis.com 도메인에서 iframe을 로딩한다. 내 블로그 도메인과 cusdis 도메인이 다르기에 브라우저의 동일 출처 정책(Same-Origin Policy)에 따라 iframe 내부 DOM이나 콘텐츠 높이 확인 등 직접 접근할 수 없었다.

브라우저는 외부 콘텐츠(쿠키, 로그인 정보 등)를 보호하기 위해 iframe 내부는 독립된 환경으로 취급하며 부모 페이지는 오직 iframe 자체의 속성(style 등)만 조작 가능하다.

결국 내가 iframe의 "부모"이자 "컨트롤러"일 순 있지만 iframe 자체가 아무 메시지도 보내지 않으면 그 안의 정보를 얻거나 조작할 방법은 보이지 않았다.(내가 못찾았을 수도!)

그러고보니.. Cusdis 코드에 iframe은 어디에?

Cusdis 임베드 코드에는 <iframe>이 명시되어 있지 않지만 아래 스크립트가 iframe을 동적으로 생성한다.

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="개인 id"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

스크립트가 실행되면 자바스크립트가 #cusdis_thread를 찾아 srcdoc 기반으로 자체 HTML을 담은 iframe을 삽입한다.실제로 개발자 도구에서 확인해 보면 이렇게 되어 있다.

<div id="cusdis_thread">
  <iframe srcdoc="<!DOCTYPE html>...">...</iframe>
</div>

REST API 방식으로 직접 댓글 구현은?

필요하다면 iframe 대신 REST API 방식으로 댓글 데이터를 받아와서 직접 그리는 방식도 가능하다. 하지만 로그인, 이메일 알림 등 기능까지 직접 구현해야 해서 시간도 더 걸리고 보안 및 유지보수 부담이 생긴다.(지금 내 수준으로 이게 쉽고 빠르게 구현될지 가늠이 안되어서 우선 패스..)

결국 iframe 높이를 조절하는 유일하고 현실적인 방법은 강제 CSS라는 결론에 도달했다.

최종 해결: CSS로 iframe 스타일 강제 지정

<style>
#cusdis_thread iframe {
width: 100% !important;
min-height: 700px !important;
display: block !important;
overflow: hidden !important;
border: none !important;
}
</style>

iframe이 동적으로 삽입된 이후 외부 스타일이 적용될 수 있도록 !important를 명시했다. 이제 완벽하진 않지만 댓글 영역이 스크롤 없이 펼쳐져 보기에 한결 낫다.

마무리하며

Cusdis를 Ghost 블로그에 붙여서 누구나 댓글을 남길 수 있는 열린 공간을 만드는 데는 성공했다. 하지만 iframe이라는 구조적 한계 때문에 댓글 UI가 완전히 만족스럽지는 않다. 자동으로 높이를 조절하려 여러 시도를 해봤지만 현실적으로는 min-height를 강제 적용하는 단순한 CSS 조작 방식이 가장 확실한 해결책이었다.

기술적으로 깔끔하지 않은 해법이더라도, 그 안에서 나에게 맞는 현실적인 방식을 찾는 게 블로그 운영자로서는 또 다른 성장이 될지도.

그런데 cusdis.. 누구나 남길 수 있긴 한데.. 댓글 달자마자 노출되도록 하는 기능도 있었던 것 같은데 지금은 관리자가 승인해야만 노출되는 구조이다.. 이건 퍼블릭이 아니잖아..! 그리고 cusdis 운영 관리가 잘 안되고 있는 것 같다. 댓글이 달리면 이메일 노티도 안온다. 서비스 안정성에 조금 의문이 생겨 시간 날 때 다른 대안을 찾아봐야 할 것 같다..ㅠ
All notes