티스토리 댓글 요정을 띄워 보내다

프로젝트 개요

첫 번째 Github 오픈소스 프로젝트(?)를 시작했다.

맛집 블로그를 운영하겠답시고 시작한 '티스토리'.
블로그 마케팅을 하는 친구의 조언을 받아서 하다보니 개인 도메인까지 만들어버렸다.

사실 티스토리와 네이버 중 어느 쪽이 좋은 지 몰라 일단 둘 다 만들었다.

문제는 둘 다 뭔가 묘하게 아쉽다는 점이다.
워드프레스로 할걸

프로젝트의 목표

우선 티스토리 블로그는 어느 정도 범위 내에서 수정 및 개선이 가능하기 때문에, 친구와 얘기하다가 나온 아쉬운 점을 첫 번째 목표로 삼았다.

그것은 바로, 개인 도메인 블로그에서는 방문한 티스토리 사용자들이 댓글을 작성하지 못한다는 것이다.

해결책은 생각보다 간단하다.

1. 개인 도메인을 포기하던가
2. 댓글을 막던가

하지만 이 것은 포기하는 것이 아닌가.

아무리 (풀스택이라 쓰고) 사무실 노가다꾼(이라 읽는)이라지만, 용납할 수 없었다.

관련해서 검색하다 보니 이 블로그 주인 분께서 제공하는 일종의 플러그인을 사용해 보았는데 약간 아쉬운 점이 있었다.

1. 기본적으로 '티스토리 로그인'에 대한 안내 위치가 정해져 있다.
2. 꽤 오래전에 만들어진 것인지라 테마에 따라 적용이 안되기도 하는 것 같다.
   이 부분은 친구의 블로그에 적용이 되지 않는다는 점을 바탕으로 하는 이야기이다.
3. 아무래도 임시 해결책이다보니 공유하기 기능을 활용할 때, 원치 않게 원래 티스토리 블로그의 링크가 넘어간다는 점이다.
   -> 그러니까 ㅇㅇㅇ.com/게시글-주소 이렇게 공유가 되면 좋은데, ㅁㅁㅁ.tistory.com/게시글-주소 형태로 공유가 될 수 밖에 없는 구조라는 것이다.

나의 목표는 이렇게 정했다.

1. 2차 도메인을 이용하는 블로그에서 댓글 문제를 결하는 이동 링크 만들기

   	2차 도메인 블로그 -> 티스토리 도메인 블로그

   이 부분은 위의 플러그인의 해결 방법이다. 이 방법을 기반으로 작업할 것이다.

2. 플러그인을 이용하는 블로거의 자유도를 높이기
   플러그인의 위치를 사용자가 자유롭게 조정할 수 있게 한다.
   또한 플러그인에 나오는 메시지를 어느정도 사용자 자율에 맡긴다.

3. 기존 플러그인의 UX상 아쉬운 점인, 로그인 상태(즉, 티스토리 도메인에 접근한 상태에도)에도 노출되는 점. 이 부분에 대한 개선을 할 계획이다.

4. (1)의 side effect인 공유하기 기능의 링크 문제 해소

사용한 기술

기술 스택이라고 할 것도 조금 부끄럽다.
그냥 JavaScript로 코드를 짰고, uglify-js를 통해 min.js를 생성했을 뿐이다.

접근 방향

1. DOMContentLoaded VS MutationObserver
   처음에는 DOMContentLoaded를 활용하려고 하였으나, 대댓을 달려고 할 경우 createElement -> appendChild 처럼 동적으로 엘리먼트를 생성하는 것을 확인할 수 있었다.

   기본 댓글 위치에는 나의 스크립트가 정상적으로 노출되지만, 내가 원하는 것은 댓글 작성 폼마다 티스토리 도메인으로 이동하는 접점을 만들어주고자 했다.

   그래서 MutationObserver를 사용했다.

   MutationObserver란?
   웹 페이지의 DOM 변화를 감시하는 데 사용되는 JavaScript API.
   동적으로 내용이 변경되는 웹 페이지나 웹 앱에서 변화를 감지하고 특정 동작을 실행할 수 있게 하는 기능

   내가 작성하는 코드는 DOM을 새로 생성하고, 문서에 삽입하는 것이기 때문에 MutationObserver를 사용할 경우 주의가 필요하다.

   '동적으로 변화를 감지' 한다는 점을 간과하고, 옵저버 내부에 DOM을 삽입하는 기능을 작성했더니 글쎄... 무한 루프에 빠져버렸다.

   그래서 MutationObeserver에 대해 조금 더 조사해보았다.

   disconnect()
   observe()를 호출하기 전까지 MutationObserver 인스턴스가 더이상의 알림을 수신하지 않도록 설정합니다.

   observe()
   주어진 설정과 일치하는 DOM 변경이 발생했을 때 MutationObserver 인스턴스가 자신의 콜백으로 알림을 수신하도록 설정합니다.

   takeRecords() (en-US)
   MutationObserver의 알림 큐를 비우고, 큐에서 대기 중이던 알림들은 MutationRecord들로 구성된 새로운 Array로 반환합니다.

   출처: MDN

   MutationObserver는 observe 인스턴스 메서드가 실행되면서 문서의 변화를 감지한다.
   옵저버를 통해 감지된 변화는 인스턴스를 생성할 때 지정한 콜백을 호출하게 된다.

   나의 경우에는 새로운 DOM을 삽입하는 것을 무시하도록 만들어야하므로, 특정 조건이 만족할 경우에 disconnect 메서드를 호출하도록 했다. 당연히 DOM 삽입 후에는 observe 메서드를 통해 다시 지켜보도록 해야한다.

2. Typescript vs JavaScript

   

   너무 타입스크립트? 사용 하지 마세요. 편리함이 있다면, 위험성은 증대하죠
   사실 뭘 하든 상관 없었지만, 그냥 JS로 했다.

결과

일단 결과적으로는 잘 동작하는 티스토리 플러그인이 만들어졌다. 깃허브 참고

다만, 그냥 TypeScript로 개발해볼걸 그랬나, 하는 생각이 든다.

README에 작성한 내용처럼, 앞으로 꾸준한 개선을 진행하거나 더 필요한 기능에 대해서 개발을 해볼까 한다.

문제 해결을 위해 방문하신 분께.

티스토리 댓글 문제로 찾아오신 분은 아래 코드를 '스킨 수정하기' 기능을 통해 삽입해주시면 됩니다.

특별히 위치는 상관 없으며, 저의 경우는 </body> 바로 앞부분에다 두었습니다.

<script>
// let fairyMessage = '';
// let fairyTarget = '.tt_wrap_write';
// let fairyLinkMessage = '&#129498; 티스토리 계정으로 댓글달기';
</script>
<script src="https://cdn.jsdelivr.net/gh/m1nque/tistory-comment-fairy@1.1.1/dist/tistory-comment-fairy.min.js"></script>

자세한 사용 방법은 아래 방문하기 를 눌러 확인해 주시고,
문제점이나 궁금한 점은 댓글 또는 여기 또는 이 포스트의 댓글로 작성해주세요.

방문하기