tech

Twitter로 Ghost 블로그 댓글 환경 만들기

Ghost 블로그 플랫폼은 댓글 서비스를 지원하지 않고 있다. 블로그 운영자나 개발자들이 Facebook 의 comments plugins 나 Disqus 와 같은 댓글전용 서비스를 Ghost 에도 사용하고 있다. 이번 주제는 Twitter를 이용하여 블로그 댓글 환경을 만드는 내용을 소개한다.

송성광

Feb 1, 2021 • 10 min read

Ghost는 Node.js 와 ember.js 기반으로 개발된 Medium 과 같은 아름다운 스타일을 제공하는 블로그 플랫폼이다. 블로그 플랫폼으로 Wordpress가 가장 인지도 있고 많은 사용자가 있지만 Node.js 개발자와 Medium 과 같은 스타일로 블로그 호스팅을 직접 운영하고 싶은 사용자들이 Ghost를 많이 사용하고 있다.

현재 Ghost v2.0 버전은 v1.0 과 달리 많은 부분이 Medium 의 영향을 많이 받았다. Ghost 는 v2.0 이상 부터 Medium과 같은 간편하고 다른 서비스와 편리하게 연동이 가능한 Koenig 에디터를 사용하고 있는데 개인적으로 Markdown 문법으로만 제공하던 v1.0 이 더 간단하게 사용했던것 같다. Koenig 에디터는 막강한 기능을 제공하지만 한글 입력시 자음과 모음이 분리되거나 자음이 두번 입력되는 등 한글을 지원하지 못하는 문제가 있다. 개인적으로 Ghost 오픈 소스에 이슈를 남겼지만 Ghost 측에서는 Koenig 데이터 내부에 사용하고 있는 mobiledoc-kit 의 문제라고 이슈를 책임을 넘겼고 결국 mobiledoc-kit 에서 한국어 입력을 정상적으로 처리해주지 못해 아직도 한글 입력에 문제가 있다. 이 문제 대해서는 블로그를 처음 시작하는 첫 글에 언급을 했던적이 있다. 이 문제는 오픈소스 코드를 수정해서 처리 했는데 이후 다른 글에서 자세히 설명할 예정이다.

이 글에서는 Ghost 에서 제공하지 않는 댓글 시스템에 대해서 이야기를 하고자 한다. Ghost 는 자체적으로 comments 나 discuss 기능을 지원하지 않고 있다. 커뮤니티를 높이거나 오픈소스를 각자에 맞게 사용하기 위해 자유도를 높여 댓글 시스템을 각자에게 맡긴 것인지 알 수 없으나 이런 기능의 부재는 블로그 운영할 때 또 다른 부담이 생기기 마련이다.

개발자들이 Ghost 에서 댓글 시스템으로 가장 많이 사용하는 것은 facebook 의 Comments Plugins 이다. 페이스북 사용자가 많기 때문에 댓글을 작성하기 위해서 굳이 별개의 로그인을 하지 않고 페이스북 계정 그대로 사용할 수 있기 때문에 사용자도 부담없이 바로 글을 남길 수 있는 장점이 있다. 또한 개발자 입장에서도 따로 복잡하게 설정하지 않고 facebook 에서 제공하는 코드 스크립트를 원하는 곳에 복사해서 붙여 넣기만 하면 된다. 이전 글에 facebook comments 의 가로 사이즈를 100%에 맞게 출력하는 내용을 작성한 글이 있다.

facebook 서비스도 좋지만 개인적으로 twitter를 더 선호한다. facebook은 더 빠르고 간결한 커뮤니케이션이 마음에 들고 뭔가 더 개발자스러운 느낌이 난다고 해야할까? 더구나 facbook comments plugins 는 원격에서 script를 가져와서 내 사이트의 DOM을 새로 만드는 과정을 가지는데 이 때, 네트워크 성능에 따라 comments 가 늦게 만들어져 늦게 로드되는 문제가 종종 발생한다. 그래서 좀 더 간단하고 빠르게 페이지를 로드해서 완성하고 싶은 생각을 했다.

twitter를 사용해서 댓글 환경을 만들경우 facebook 의 comments와 달리 comments를 내 사이트가 아닌 트위터 글타래를 만들게 해야한다. 객체 삽입을 할 수 있지만 사이트 내 트위터가 제공하는 Card UI를 그대로 삽입하는 것은 그렇게 아름답게 붙지 않거나 컨텐츠의 형태를 일관성 있게 만들 수 없다. 단순하게 트위터의 글타래로 링크를 걸어서 트위터 환경에서 댓글을 남기고 conversation 을 진행할 수 있다. 트위터는 태생부터 다르기 때문인데 초창기와 달리 특정 주제에 글타래를 만들거나 conversation 을 할 수 있는 기능이 추가되었다. 트위터에서는 Web Intent 의 in_reply_to 파라미터를 사용해서 댓글 서비스와 같이 사용할 수 있다.

twitter 의 Web Intent 는 정말 간편하게 URL 형태로 트위터에 접근하거나 기능을 사용할 수 있다. 트위터의 Web Intent 의 URL은 다음과 같다.

https://twitter.com/intent/tweet

이 URL 에 Query Parameter를 이용해서 나의 트위터 글을 하나의 parent 로 만들어서 그 트위터 글에 글타래를 연결하는 개념으로 사용할 수 있는데 이 때 필요한 파라미터가 바로 in_reply_to 파라미터 이다. 트위터에 댓글을 남기기 위해서는 아래와 같이 Web Intent 의 URL에 in_reply_to 로 트위터의 부모의 글이되는 twttierId 를 추가해서 링크를 요청해야한다.

https://twitter.com/intent/tweet?in_reply_to="+twitterId

ghost 에서 Post 에 관련된 파일은 $GHOST_HOME/content/themes/casper/post.hbs 파일인데 여기 "Twitter로 댓글 남기기" 라는 링크를 다음 코드로 추가한다.

<a href="" id="twitter-comments" style="display:none;">Twitter 로 댓글 남기기</a>

twitterId 는 블로그에 글이 발행되고 난 뒤에 그 글을 twitter 로 공유하고 그 트위터 글의 twitterId 를 가져와서 사용해야하는데 ghost 의 템플릿 안에 고정값을 넣을 수 없기 때문에 위 Web Intent 와 in_reply_to 에 들어갈 twitterId는 동적으로 할당 받고 그 글번호로 뷰가 렌더링 될 때 만들어지기 위해서 템플릿에서는 기본적인 DOM 만 만들었다. 그리고 Ghost 관리자 페이지에서 Code Injection 메뉴에 Site Footer 항목에 다음 스크립트를 추가했다. 아래 코드를 살펴보면 Post의 HTML 페이지에서 twitter-id 라는 HTML 엘리먼트에서 data-twitter-id 의 값을 참조해서 댓글을 남기는 링크의 href 를 업데이트하도록 하였다.

<script>
    var twitterIdElement = document.getElementById("twitter-id")
    if(twitterIdElement) {
        var twitterId = twitterIdElement.getAttribute("data-twitter-id");
		var twitterComments = document.getElementById("twitter-comments");
        if(twitterComments){
	        twitterComments.setAttribute("style", "display:block;");
    	    twitterComments.setAttribute("href", "https://twitter.com/intent/tweet?in_reply_to="+twitterId);        
        }
    }  
</script>

Ghost 의 Code Injection 은 모든 페이지에 공통으로 삽입되는 script 를 Ghost Admin 페이지에서 삽입할 수 있기 때문에 이후 서버를 재시작 하지 않고 사이트에 적용할 수 있다.

이제 블로그에 글을 포스팅한 다음 그 글을 twitter에 공유한다.

https://t.co/b1yf6f7x1y
— 송성광 (@sungkwangsong) January 25, 2021

이렇게 트위터에 공유한 트위터 글에는 고유의 ID 가 생성되는데 URL을 살펴보면 다음과 같다.

https://twitter.com/sungkwangsong/status/1353608229708652544

여기 URL의 status 뒤에 있는 글 번호가 트위터의 고유 번호가 된다. 즉, Footer Code 내 있는 data-twitter-id 의 값으로 넣어줘여하는 값이다. 그러면 이 데이터는 어떻게 삽입을 할 수 있을까? 안타깝게도 Ghost 에서는 글이 발행되기 전에 트위터에 먼저 글을 공유할 수 없기 때문에 블로그에 글을 발행하고 난 이후, 트위터에 글을 공유하고 얻게 된 트위터의 글 번호를 가지고 다시 Ghost 의 글 입력하는 화면에서 Code Injection 으로 다음 코드를 삽입한다.

위 첨부한 스크린샷과 같이 글 입력하는 메뉴에 Code injection 메뉴가 있고 Post header 안에 다음 코드를 삽입한다. 이 때 data-twitter-id 는 블로그 글을 트위터로 공유하고 얻게되는 status 의 트위터 아이디가 된다.

<div id="twitter-id" data-twitter-id="1353608229708652544"></div>

이제 모든 준비가 끝났다. 블로그의 글을 다시 업데이트 후 배포하면 내 블로그 글 하단에 다음과 같이 Twitter 로 댓글 남기기 라는 링크가 보이게 된다. 이 블로그는 Facebook Comments Plugins 도 같이 사용하고 있는데 Twitter로 댓글을 남길 수 있는 링크도 같이 보이도록 하였다.

이제 방문자들이 블로그 글을 보고 의견을 남기고 싶을 경우 Twitter로 댓글 남기기 링크를 클릭하면 트위터로 본문의 내용에 댓글을 남겨 글타래를 만들 수 있다.

사용자가 트위터로 댓글을 남기면 원래의 본문 아래 다음과 같이 댓글이 보여지게 된다.

블로그에 글을 남기는 저자는 twitter로 글을 먼저 공유하고 코드를 삽입해야지만 블로그 글을 구독하는 사용자는 자신의 twitter로 의견을 쉽게 남길 수 있게 되었다. 이렇게 사용자가 해당 글에 대한 의견을 남겨주면 트위터 앱으로 알림을 받을 수 있어 실시간으로 사용자의 피드백에 대한 의견에 답변할 수 있는 환경을 만들 수 있다.

참고

Twitter 로 댓글 남기기