2017년의 블로그

가끔 글을 쓰고 싶어 근질거릴 때가 있다. 대단한 글을 쓰고 싶다거나, 누군가에게 관심을 받고 싶은 것은 아니다. 대체로 배설의 욕구에 가깝다. 이를 페이스북에 풀자니 남들 먹고 여행다니는 사진 올리는 곳에 혼자 뭐하는 건가 싶고, 트위터에 풀자니 그곳은 잘못 밟으면 터지는 지뢰밭. 결국 마려운 걸 참으며 궁극의 화장실을 찾는 여정을 떠나게 되었다.

플랫폼

기왕 쌀 거면 번듯하고 좋은 곳에서 싸고 싶다. 청결하고 따뜻한 물도 잘 나오면 좀 더 행복할 것이다. 예쁜 화장실을 찾아 여정을 떠나는 이들을 위해, 친절한 이들이 매년 블로그 플랫폼을 비교하는 글을 작성해준다. 하지만 이런 글들은 다수의 독자를 위해 최대한 다각도에서 비교하고 평가한다. 그래서 내가 필요로 하는 조건을 추려서 정리해보았다.

• 디자인이 취향에 맞고 편집할 수 있어야 한다.
• 마크다운을 지원하여 추후 이전이나 디자인 변경에 쉽게 대응할 수 있다.
• 글이 내 손 안에 있어서 서비스가 망해도 내 글이 보존된다.
• 외부 서비스(개인 도메인, Google Analytics, …)를 붙힐 수 있어야 한다.

블로그 플랫폼 비교

위의 기준으로 도쿠위키, 텀블러, 워드프레스 3종을 놓고 고민했다. 워드프레스와 텀블러는 여전히 평점과 신뢰도가 높아 최종 후보가 되었다. 도쿠위키는 위키 엔진이지만, 이미 돌리는 위키에 블로그 플러그인만 설치하면 블로그로 사용할 수 있기 때문에 고려 대상이 되었다.

평가요소	DokuWiki	Tumblr	Wordpress
Markdown	X	O	O
백업	O	X	O
커스텀	O	O	X

도쿠위키는 백업 측면에서 가장 완벽하다. 모든 데이터가 텍스트 파일로 저장되어 언제든지 열어볼 수 있다. 데이터가 DB가 아닌 파일로 저장되므로, 위키 데이터 폴더를 드랍박스로 설정하면 데이터가 드랍박스가 설치된 모든 PC에 자동으로 백업된다. 최대의 단점은 마크다운을 완전히 사용하기 어렵다는 점. 플러그인을 통한 지원인데, 기존 위키 문법과 충돌하는 부분이 있다. 기능을 자유롭게 추가할 수 있긴 하지만 PHP를 써야한다. 공개된 템플릿들의 디자인 퀄리티가 전반적으로 낮다. 일단은 취향대로 직접 만든 템플릿이 있으니 패스.

텀블러는 유연하게 글을 쓸 수 있다는 점이 최대 장점이다. 긴 글부터 단순 링크까지 어떤 길이의 글도 커버한다. 마크다운을 깔끔하게 지원하는 점도 좋고, 예쁜 테마가 셀 수 없이 많다는 점도 매력적이다. 소셜 기능 지원과 여러 영역의 전문가가 많다는 점이 맞물려, 팔로우하여 구독할 수 있고 직접 교류할 기회도 열려있다. 플러그인을 지원하지는 않지만, 흔히 필요로 하는 기능들은 쉽게 넣을 수 있다. 하지만 백업 기능이 없다는 점이 너무 치명적.

워드프레스는 최고의 블로그 툴이지만, 설치형이 아니라 서비스형이라면 이야기가 다르다. 커스텀 도메인을 붙히려면 $2.99/month, CSS를 수정하려면 $8.25/month, SEO 설정을 하거나 Google Analytics를 붙히려면 무려 $24.92/month 짜리 비즈니스 플랜을 이용해야 한다.¹ 한달에 글 하나 정도 쓴다면, 글 하나당 3만원씩 내고 쓰는 셈. 설치형으로 쓰면 자유롭고 비용도 안들지만 귀찮다는 최대의 단점이 있다.

결론: 정적 페이지

설치형 워드프레스가 2017년에도 여전히 최고라는 결론을 내렸다. 그렇지만 기왕 품을 들일거면 정적 웹페이지에 들이는 게 낫겠다고 생각했다. 예전에 포트폴리오 페이지를 만들면서 사용해본 Lektor 를 사용하기로 결정. Jekyll 이 훨씬 많이 쓰인다고 하지만, 문서 보니 배워야할 게 너무 많아보였다. Lektor는 Python + Jinja2의 친숙한 조합이라 진입 장벽이 낮아서 좋다. 심지어 맥에서는 클라이언트가 있어 개발환경 세팅 마저도 필요없다. 드랍박스에서 소스 파일을 관리하면 백업도 용이하고 오프라인으로 글을 쓸 수도 있다.

이제 도구는 정했으니 사이트를 디자인할 차례.

디자인

정적 웹 생성기를 사용하여 블로그를 만들기로 한 만큼 디자인에 더 신경써야했다. 워드프레스와 같은 대중적인 도구에 있는 다양한 템플릿이 여기에는 없기 때문이다. 이 섹션에서는 블로그를 만들며 디자인에 대하여 고민한 내용을 설명한다.

디자인 기조

스레드 방식의 글쓰기

트위터로부터 영감을 받았다. 멘션된 트윗들을 스레드로 이어보여준다는 것은 처음 봤을 때 대단히 인상적이었다. 언젠가 전주 여행갔을 때 가능성을 실험해보기 위해 여행 기록용 트위터 계정을 하나 만들어 스레드 방식으로 기록해보았다. 두서없이 드는 생각들이 분류되어 기록된다는 점이 마음에 들었다.

블로그 글 역시 스레드 방식으로 구성하면 장점이 있을 거라 생각하였다.

• 글 하나의 길이를 짧게 가져갈 수 있어, 쓰는 쪽도 읽는 쪽도 부담이 덜하다.
• 연속된 글을 연속하여 쓰지 않아도 잘 정리되어있다.

디자인이 글쓰기의 발목을 잡지 않도록

워드프레스로 블로그를 운영할 때 디자인에 굉장히 공을 많이 들였다. 블로그 메인에 보이는 포스트 썸네일의 퀄리티에도 신경을 썼다. 그런데 이게 언제부터인가 본말전도가 되어 썸네일을 구하는 귀찮음 때문에 글을 덜 쓰게 된 적이 있었다. 당시를 교훈삼아, 이번 블로그는 글쓰기에 귀찮음을 더하는 디자인 요소는 하나도 넣지 않기로 했다.

색상

포트폴리오 페이지 색상을 그대로 사용하여 개인 사이트 간 통일감을 주었다. 블로그는 포트폴리오보다 컨텐츠가 놓이는 영역이 넓다. 기존 색상으론 심심한 느낌이 있어 포인트 컬러(가장 우측)를 하나 추가했다.

가독성

한 줄 당 글자수는 영문 기준 45~85자 정도가 적절하다고 한다². 하지만 한글 기준의 연구 자료는 몇 년 전이나 지금이나 없는 것 같다. 그래서 매번 디자인 할 때 마다 적절한 글자수를 찾으려 노력했고, 대체로 한 줄당 35~45자 정도가 가독성이 만족스럽게 느껴졌다. 이 블로그는 40자로 설정하였고, 단어 단위로 잘 보이게 하기 위해 자간도 약간 줄였다.

줄간격은 대체로 1.4~1.6 정도를 사용한다³. 적정 줄간격은 글자의 크기와 모양에 관계있다. 그 중 글자 크기와 적정 줄간격은 반비례 관계에 있다. 블로그 글자 크기가 20px로 큰 편이므로 줄간격은 1.4로 설정하였다.

로고

사이트를 보면 알 수 있겠지만 로고가 들어갈 곳이 없다. 하지만 favicon을 넣기 위해 어쩔 수 없이 로고를 디자인해야했다. 사실 고양이와 아무 상관없는 사이트이지만, 고양이가 귀여우므로 로고 역시 고양이스럽게 만들기로 했다. 노트에 잔뜩 스케치를 하다가 YA로 고양이 옆모습을 표현한 게 마음에 들었다.

Favicon인 만큼, y자로 고양이 옆면 실루엣만 가져가며 비율도 정사각형으로 바꾸어 아래와 같이 그렸다. 배색은 키컬러를 그대로 사용하였고, 사이트와 마찬가지로 배경에 투톤 그라데이션을 주었다.

사이즈는 3종류를 준비하였다. 가장 기본적인 16x16, 32x32에, iOS용으로 152x152를 추가. 다양한 사이즈⁴를 다 챙길까 하다가, 더 마음에 드는 아이콘을 그리면 그 때 해야지 하고는 말았다.

작은 사이즈는 번잡한 감이 있어 배경을 그라데이션에서 단색으로 바꾸었다. 혹시나 하는 마음에 큰 사이즈도 그라데이션을 제거해보니 더 마음에 들었다. 결과적으로 배경 그라데이션은 완전히 없는 것이 되었다.

여전히 작은 사이즈에서의 시인성이 떨어지는 게 마음아프긴 한데, 2시간 들여 만들었다는 점을 생각하면 그럭저럭 만족. 언젠가 더 시간을 들여 제대로 만들기로 하고 일단은 이 정도에서 마무리하기로 하였다.

기술적 문제들

문제 해결

맥에서는 Lektor 클라이언트가 있어 설치가 매우 간편하다. 하지만 맥북은 밖에 돌아다닐 때만 쓰므로 윈도 환경에서 세팅을 해야했다. Bash on windows가 베타이고, Lektor가 마이너하다는 점 때문에 문제가 발생하면 해결하기가 너무 힘들었다. 블로그 만드는 데 주말 이틀 걸렸는데, 그 중 만 하루를 삽질하는데만 썼을 정도. 문제 상황을 기록하여 나중에 참고할 수 있도록 한다.

Lektor 세팅

설치가 안됨

설치 쉘 스크립트를 실행하면 아래 에러가 나올 때 해결책

Error: None of the items in $PATH are writable.

https://github.com/lektor/lektor/issues/213 을 보고 해결할 수 있었다.

1. .bashrc를 연다.
   • sudo vi ~/.bashrc
2. 아무 곳에 아래 한 줄 추가
   • export PATH="$HOME/.local/bin:$PATH"
3. 저장하고 .bashrc 재실행
   • source ~/.bashrc
4. ~/.local/bin 폴더를 만든다.
5. 이제 설치가 잘 될 것이다.
   • sudo curl -sf https://www.getlektor.com/install.sh | sh

실행이 안됨

lektor server로 실행할 때 IOError가 발생

Bash on Windows의 문제였다. Insider Preview >= 14942 빌드에서 해결되었다고 한다. 해결된 지는 오래인데, 윈10 정식 업데이트에는 반영이 멀었는지 2017년 2월 28일까지 여전히 14393 빌드. Insider Preview 버전을 설치하고 나니 문제가 해결되었다.

https://github.com/Microsoft/BashOnWindows/issues/216

Lektor 사용법

페이지네이션

포스트들은 /post 폴더에 넣어두면서, 메인 페이지에 포스트 목록을 보여주고 싶었다. 루트에 포스트가 있으면 서브페이지와 구분이 되지 않기 때문. 이 간단한 것을 위해 어마어마한 시간을 소모하여 답을 찾았다.

포스트 목록을 보여주는 모델의 pagination을 아래와 같이 설정한다.

[pagination]
enabled = yes
per_page = 5
items = site.query('/post')

Syntax Highlighter

블로그에 코드가 들어가는 글을 얼마나 쓸 지는 모르겠다. 필요할 때 고민해도 되겠지만, 귀찮은 일은 한꺼번에 하고 싶어서 구문강조 기능을 미리 넣기로 했다.

Lektor로 만들어진 Lektor 홈페이지에 구문강조 기능이 있으니 공식 플러그인이 있을 거라 생각하기도 했다. 예상대로 Pygments를 활용한 공식 플러그인이 있었다. 그런데 문제는 어떤 스타일을 사용할 수 있는지 알려주는 곳이 없다는 것. Solarized Light를 한번 넣어 보았으나 실패했다. 그러나 이 실패에서 스타일 목록을 찾을 수 있었다.

1. configs/markdown-highlighter.ini 에서 style을 abcd 같은 것으로 바꾼다.
2. 구문강조를 하는 페이지를 하나 만들어 연다.
3. 에러 로그 속 경로에 있는 폴더 이름들이 사용할 수 있는 스타일.
   • /home/{user}/.cache/lektor/packages/{blah}/pygments/styles/

Lektor project-info --output-path 로 나오는 경로와는 다르다.

MathJax 수식을 Pygments 문법 강조가 덮음

Pygments 문법강조가 MathJax 수식의 일부 글자에 적용되곤 하였다. 두 곳에서 같은 클래스 이름을 사용해서 그런 것이었고, MathJax 관련 css 클래스들을 오버라이드하는 방식으로 해결하였다.

.MathJax .mo,
.MathJax .mi {
    color: inherit;
}

결과

트위터의 스레드 형태로 구조화된 글을 쓸 수 있는 블로그가 완성되었다.

1. https://wordpress.com/pricing ↩︎

2. https://webactually.com/2015/10/반응형-웹-디자인에서-글줄의-길이와-글자-크기-균형/ ↩︎

3. Times: 1.4, GitHub: 1.5, NYTimes: 1.55, Economist: 1.6 ↩︎

4. https://webdir.tistory.com/337 하단에 파비콘 사이즈 목록이 잘 정리되어 있다. ↩︎