블로그 개편 이야기

블로그 개편 이야기

글은 완벽해야한다는 강박감

저는 블로그에 글은 완벽해야한다는 속내때문에 글을 빨리 쓰지 못합니다. 글을 쓸 때 가장 많은 시간을 할애하는 것이 올바른 정보인가 검증하는 작업과 글이 잘 읽힐 수 있도록 꾸미고 중간중간 삽입할 그림과 예제를 만드는 작업입니다.

그런데 어느 순간 머리속에 있는 내용들을 정리하는 시간보다 글을 꾸미는 시간이 더 많아지기 시작했습니다. 그러다보니 글을 쓰는 것은 너무나 귀찮은 일이었습니다.

마크다운으로 글을 쓰자

그래서 이를 해결하기 위해 마크다운으로 글을 쓰기 시작했습니다. 훨씬 간단했고, 크게 꾸미지 않아도 예쁘게 꾸며져 정리되었습니다. 그런데 문제는 Tistory의 마크다운 지원관련 문제였습니다. 정확히는 제가 사용하던 기본스킨의 문제가 컸습니다.

마크다운으로 글 쓴 결과물은 웹화면과 모바일의 뷰가 크게 달랐고, '글은 완벽해야한다. 어디서든' 이라는 제 철학과 너무 맞지 않아서 글 쓰는것이 괴로웠습니다. 마크다운으로 글을 쓰고, 티스토리에 맞게 수정하여 글을 두 벌씩 썼습니다. 편하자고 한 일이 더 귀찮아진겁니다.

물론 여러 스킨들을 찾았지만, 새로운 스킨들 맘에 드는게 하나도 없고, 하나가 되면 하나가 안되는 일이 다반사였습니다. 프로그래밍 블로그의 특성상 가장 중요한것중 하나는 syntax highlight 기능이 지원되어야 하는 것인데, 해당 모듈과 마크다운, 그리고 반응형을 모두 지원하는 스킨은 찾아보기 힘들었습니다. (도메인 유지를 위한 구글 광고도 넣을만한 공간이 있어야...)

그래서 스킨을 직접 만들려고 했습니다. css를 공부하고 기존의 스킨을 가져다 쓰고 등등 여러 짓거리를 해봤지만, tistory에 올려야하는 제약사항때문에 스킨개발마저 쉽지않았습니다. 제 도메인도 파놓았는데, 내친김에 집에서 서버를 직접 돌릴까라는 고민을 수차례씩 했습니다. ㅠㅠ 깃허브로의 페이지 전환도 고려해봤습니다.. (고민의 흔적: http://norux.github.io)

반응형, Syntax Highlight, 마크다운 모두를 만족하는 스킨은 없을까?

이래도 저래도 영 맘에 들지 않아서 한 동안 방치하다가, 최근 굉장히 자극받은 일이 생겨서 집중해서 블로그 복귀를 준비했습니다.

좁아터진 기본 스킨을 바꾸기로했습니다. 가장 최근에 나온 티스토리 스킨이 눈에 들어왔습니다. 우선 널찍하니 좋았구요. 반응형을 지원하고, 마크다운으로 작성 된 글도 훌륭하게 출력되더라구요. (웹과 모바일 양쪽에서)

우선 이걸 적용한다 치고. Syntax Highlight 모듈을 찾아나섰습니다. 여러가지 하이라이트 모듈을 찾다가 highlighter.js 를 사용하기로 했습니다.

• Highlightjs: https://highlightjs.org

아시는 분은 아시겠지만 제가 기존에 사용하던 모듈은 http://alexgorbatchev.com/SyntaxHighlighter 에서 js/css를 저에 맞게 약간 수정해서 가지고 있었습니다. 이 모듈의 최대 단점은 <pre class="brush:c"> </pre>이렇게 일일히 언어를 지정하여 감싸줘야했던 것이고, 속도가 많이 느렸습니다. 무엇보다 최대 단점은 모바일 지원이 안되는 것이었습니다..

highlightjs는 기능은 syntax highlighter에 비해 약간 모자랍니다. (줄번호가 나오지 않는 등..) 하지만 속도가 빠르고, 나름 다양한 스킨을 제공하며 무엇보다 <pre><code> </pre></code> 로만 감싸게 되면 알아서 언어를 감지해서 강조를 해준다는 점입니다! 모바일 지원도 잘 되구요 :)

특히 이 점이 중요했던 것은, 제가 마크다운으로 코드를 작성한 글의 html 버전을 뜨게 되면 코드부분이 <pre><code> </pre></code> 로 감싸져서 나온다는 점이었죠. 기존의 syntax highlighter를 사용할때는 code태그는 지우고, pre에 클래스를 넣어줘야하는 이중 작업이 필요했습니다. 하이라이트js를 사용하므로써 이 과정이 줄었으니, 얼마나 반길만한 일인가요!!

이전 글 포팅(?)작업

이전 글들은 모두 syntax highlighter에 맞춰져있었고, 마크다운 형식으로 쓴 글이 아니어서 줄높이가 멀찍히 벌어진다는가 하는 문제들이 많았습니다. 그래서 포팅작업이 필요했고, 우선은 코드들이 문법강조가 잘 되도록 수정을 진행했습니다. highlightjs로의 변경을 시도한 것이죠. 그리고 심하게 줄높이가 달라진 글들은 적당히 조절하는 작업을 했습니다.

물론 마크다운으로 쭉 작업된 글에 비해 약간의 어색함은 있지만 어느정도는 감수하기로 했습니다. 앞으로는 절대 그런 이상한 스킨 쓰지말자고 생각하면서요 ㅠㅠ

사실 첫 번째 마크다운으로 작성된 글은 Qt 날짜 관련 함수 입니다. 이전 스킨을 사용할 때, 한 번 시도해 본 것이죠.

괜찮다 싶어서 제대로 작업한 것이 우분투 16.04에서 달라진 것들 입니다. 지금 블로그의 스킨을 적용하고 테스트 할 때, 이 글이 얼마나 잘 보이는지를 중점사항으로 두고 작업했습니다. 덕분에 어느정도 만족스러운 결과가 나온것 같습니다.

앞으론 열심히 글 써야겠네요.

참고: 완전히 정확하게 Tistory에서 제공한 스킨은 아닙니다. css에서 아주 약간의 수정을 했습니다. 하지만 거의 기본스킨이라 생각하면 될 것 같습니다. :)