ETC.

티스토리에 정착하며

휴게소 집사 2021. 8. 9. 00:46

오랫동안 제로보드를 이용한 홈페이지 구축에 콘텐츠 관리를 하였고, 

네이버 블로그에 많지는 않지만 조금씩 글을 올리고 유지를 해왔다.

하지만 세월이 흐르다 보니 이제 개인 홈페이지를 만들고 유지하는 것은 예전과 같지 않다는 것을 느끼고 있다.

네이버 블로그로 컨텐츠를 옮기면 좋겠지만 큰 벽이 가로막는다.

수식

네이버 블로그에서 제공하는 수식은 inline 모드가 지원되지 않는다는 결정적인 문제점(개인적으로)이 있다.

다수의 수식을 사용해야 하는 입장에서 본문과 수식이 어울리는 구성을 해야 하는데 낭패가 아닐 수 없다.

게다가 다소 폐쇄적이다 보니 MathJax를 활용할 수도 없다.

결국 큰 맘먹고 대이동을 결정하고 다른 서비스를 찾은 것이 구글 Blogger였다.

일단 자유도가 높아 구성만 잘하면 홈페이지처럼 만들 수 있을 것 같고, 외부 스크립트를 활용할 수 있어 MathJax를 통한 수식 입력이 원활하다는 것이 매력포인트이다. 

일단 새로운 콘텐츠를 몇 개 구성해서 만들어보았다.

관리 도구나 툴이 단순하지만 점차 익숙해지면서 별 문제가 되지 않았다.

그런데 구글 Blogger에서의 문제점이 눈에 들어왔다.

구글 서비스는 해외에서는 적합한지 몰라도 국내 환경과는 이질감이 들고, 결정적으로 검색 노출이 국내 포털에 비해 어렵다는 것.

1주일 이상 지난 글이 조회수 0이라는 점은 나를 다시 움직이게 만들었다.

애초에 개인 일기장 수준의 블로그를 만들려는 것은 아니었다.

사실 티스토리는 별로 고려하지 않던 서비스다.

이유는 모르겠다. 그냥 네이버는 이제 떠나려는 것이고 크롬에서 바로 관리할 수 있어서 구글 서비스를 이용하려 했던 거 같다. 

티스토리 서비스는 구글 Blogger보다는 훨씬 한국적이었다.

관리 도구도 조금 더 편의성이 돋보이고, 무엇보다 커뮤니티를 활용하면 나의 문제점을 해결할 수 있다는 점이 매력적이다.

맞춤법 검사도 된다. ^^

그리고 가장 핵심인 수식의 사용도 MathJax를 활용해서 쉽게 할 수 있다는 점이 좋다.

티스토리에서 MathJax를 사용하려면 몇 가지 지식과 작업이 필요하다.


우선 스킨에 간단한 코드를 입력해야 한다.

블로그관리홈에서 스킨 편집으로 이동
html 편집
9번째부터 12번째 줄까지 입력

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

위의 코드를 복사-붙여넣기 한다.

세부적인 사항은 MathJax 홈페이지에서 확인하면 되지만 특별한 것은 없다.

단, LATEX에 익숙한 사람이라면 다른 코드를 입력하는 것이 좋은데, html의 특성상 $을 특수문자 처리해서 오류가 잘 발생한다고 한다. 해당 코드는 다음과 같다.

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

👀 참고 문서(MathJax DOC)

 

수식을 입력해보면 잘된다. 그런데 PC에서만 잘된다.....

구글 Blogger에서는 모바일이든, 데스크톱이든 상관하지 않고 수식이 잘 출력되었는데 티스토리는 모바일에서는 수식이 출력되지 않는다. 스킨에서 해결하는 방법이 없을까 열심히 검색하고 소스를 확인해봤지만 방법이 없었다. 아무래도 티스토리 자체적으로 모바일에 제한을 걸어둔 것이 아닐까 조심스럽게 추측한다. 구글 Blogger에서는 잘 되었으므로 스크립트의 문제는 아닌 것 같다. 

 

간접적이고 귀찮은 것이지만 해결책을 찾기는 했다.

후처리 프로세스를 활용하는 것인데 아래의 코드를 수식이 있는 글에 html모드에서 삽입하는 것이다.

이 방법이 언제까지 유용하고, 이렇게만 해야하는지는 모르겠지만 지금으로서는 유일한 방법인 것 같다.

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>