«
 

블로그 개편 준비

서론

“새로운 기능을 위해서 다른 블로그로 이전하여 기존 사용자에게 broken link를 만들어주지말자, 그리고 블로그 개편을 하면서 겪은 경험과 자료도 함께 공유하자”

http://blog.saltfactory.net 블로그의 운영자 saltfactory 입니다. 현재 좀더 직관적이고 보다 편리하고 빠르게 정보를 전달하기 위해서 블로그 개편 작업을 하고 있습니다. 현재 saltfactory’s blog는 티스토리에서 블로그를 운영하고 있습니다. 티스토리는 API 지원이 부족하고 Markdown이 지원되지 않아서 다른 블로그 호스팅 서비스로 이전하려고 했지만, 기존의 자료를 버릴 수 없었고 블로그의 글을 참조 링크로 사용하고 계신 분들이 있기 때문에, 그분들에게 broken link을 만들어 드리고 싶지 않아서 티스토리 스킨을 변경하여 아쉬운 부분들을 채워가려고 하고 있습니다. 블로그 개편 역시 나에게 많은 기술을 습득하고 나누고 싶은 자료가 많기 때문에 블로그 개편을 하는 과정을 글로 남기고 공유하려고 합니다.

나에게 블로그란?

“나에게 블로그는 개인 도서관이다.”

블로그에 기술자료를 지속적으로 포스팅하면서 느끼는 것들이 많다. 2011년 4월에 시작한 블로그는 지금까지 240개의 공개 글을 작성하였고, 2014년 7월 13일 현재까지 총 523,023명의 방문자가 방문하였다. 1일 평균 방문자 수는 1천명이 넘는 블로그가 되었다. 물론 더 많은 방문자를 운영하는 블로그도 많고 1천명이라는 수가 적다면 적은 수이지만, 학생과 수업하는 것을 인생의 목표로 삼고 있는 나에게 블로그를 통해 누군가에게 정보를 전달하고 함께 연구하고 있다는 것은 즐겁고 보람된 일이 되었다.

블로그와 SNS는 기록(일상이나 전문적인 자료를 남기는 곳)의 관점으로 보면 컨텐츠 생산 서비스라는 비슷한 모습을 가지고 있지만, 개인적으로 블로그는 SNS와는 다르다고 생각한다. SNS는 자신의 네트워크에 포함된 사람들에게 공감을 얻을 수 있는 짧은 글을 소비하는 공간이라면 블로그는 자신의 생각을 구체적인 정보를 생산하여 저장해두는 곳이라 생각을 한다. 이러한 의미에서 블로그는 나에게 내가 책을 모아두는 서재이며, 여러가지 많은 참고자료를 바탕으로 연구한 과정을 참고자료의 링크와 함께 담아두기 때문에 도서관과 같은 공간이 되었다.

문제 해결 방법의 기록

“내가 고민하는 것은, 반드시 경험한 사람이 있었을 것이고, 또한 앞으로 누군가가 고민할 것이다.”

처음 블로그를 시작할 때는 누군가를 위한 자료로 글을 작성하지 않았다. 블로그를 작성하기 시작한 것은 연구나 개발을 하면서 찾은 자료를 나는 다른 프로젝트를 진행하면서 똑같이 검색을 하고 있다는 것을 알게 되었다. 그래서 처음은 Google의 bookmark를 사용했는데 이 서비스는 단순히 검색한 사이트의 URL을 저장하는 기능만 가졌을뿐만 아니라 더이상 유지보수 하지 않고 closed된 서비스가 되었다. 연구를 하면서 무엇보다 사이트를 찾아서 저장하는 것보다, 문제를 어떤 방법으로 접근하고 해결했는지를 저장해 두는 것이 더 중요한 재산이 된다는 것을 알게되었다. 그래서 내가 가진 문제를 어떻게 해결했는지에 대한 글을 블로그에 작성하기 시작했다. 그렇게 시작한 블로그에 점점 사람들이 찾아오거나 구독하는 사람들이 많아지기 시작했고 내가 고민하는 부분을 다른 사람도 고민을 하고 있다는 것을 점점 더 확신하게 되었다. 이러한 확신감은 블로그의 자료를 작성할 때 나를 포함한 누군가가 다시 참고하더라도 에러없이 사용할 수 있는 문서와 100% 동작하는 코드를 만들기로 다짐하게 만들었다.

연구나 개발을 할 때 새롭게 알게된 정보를 다음과 같은 방법으로 관리했었다.

  1. Google의 bookmark 서비스로 참고한 사이트 저장
  2. RSS reader로 참고한 블로그 구독
  3. twitter나 facebook을 사용하여 링크정보 공유

“하지만 결국 문제를 해결하기 위해서 참고한 링크나 문서보다, 내가 어떻게 그 문제를 해결했는지가 더 중요하다는 것을 알게 되었고 그 방법을 다시 참조했을때 에러없이 그대로 이해하고 사용할 수 있는 글을 작성하고 생각하면서 블로그를 사용하기 시작했다.”

Tistory 블로그

“무료로 사용하면서 틀에 정해진 모양이나 기능이 아니라, 내가 원하는 서비스를 만들어 낼 수 있는 블로그 호스팅 서비스는 현재 국내에서는 Tistory와 국외는 Tumblr 밖에 없다. 나머지 블로그 호스팅 서비스는 유료로 limit 정책을 사용하거나 형식이 정해진 서비스 밖에 사용할 수 없다.”

블로그를 시작하면서 가장 고민했던 것이 바로 블로그 호스팅 서비스를 어떤 것을 선택해야하는가?였다.

처음은 설치형 블로그에 관심을 가졌다. WordPress를 처음 설치해서 사용했는데 여러가지 theme와 plugin은 다양한 기능을 블로그에 추가할 수 있게 해주었다. 현존하는 블로그 엔진중에서 가장 좋은 이라고 생각이들만큼 완성도와 확장성이 좋았다. 하지만 설치형 블로그의 가장큰 단점은 바로 서버구축이다. 다시 말해서 서버 비용이 발생한다는 것이다. 연구소에 테스트용 PC 서버가 있어서 그곳에 설치형 블로그를 설치해서 사용했는데 생각보다 다운타임(down time)이 잦아서 블로그가 열리지 않는 날이 종종 발생하게 되었다. 그래서 직접 서버를 가지고 운영하기 보다 호스팅 서비스를 알아보기 시작했다.

하지만 서버 호스팅 가격을 알아보다 무료 블로그 호스팅 서비스가 많은데 굳이 트래픽과 저장공간에 의한 과금의 제한을 받고 서버까지 내가 관리해야하는가?라는 생각이 들면서 무료 블로그 호스팅 서비스로 자연스럽게 시선을 돌리게 되었다. 하지만 대부분 무료 블로그 호스팅 서비스들은 사용자가 변경하는 것이 제한적인 틀에 박힌 촌스러운 템플릿을 사용하거나, 이미지 용량이나 트래픽에 limit를 두어 과금을하는 방법으로 운영되고 있었다.

틀에 박힌 블로그 테마나 기능을 사용하는 것이 아니라 내가 원하는대로 style도 변경하고 JavaScript를 사용해서 client(font-end)에서 좀더 다양한 일을 할 수 있도록 운영자가 직접 커스터마이징(customizing)을 할 수 있는 서비스를 찾았는데 국내 서비스로는 Tistory가 가능하였고, 국외에 서비스로는 Tumblr가 가능하였다.

지금 만약에 블로그를 다시 시작하라고 한다면 아마 Tumblr를 사용할 것 같다. Tumblr는 다양한 API와 앱(Third party applications)이 존재하고 있기 때문이다. 하지만 내가 블로그를 시작할 때는 API나 SDK그리고 API의 중요성보다 풍부한 WISIWYG 에디터를 사용해서 이쁜 컨텐츠를 쉽게 만들어 내는 것이 더 중요할 때였다. 또한 긴글에는 Tistory가 좀 더 쾌적하게 사용할 수 있다는 이야기를 들었다. 하지만 가장 중요하는 것은 국내 서비스를 사용하면 좀 더 빠른 서비스를 제공할 수 있을거라 생각 했었던것 같다.

MarkDown 사용하기

“아이디어를 남기기 위해서는 문서작성이 즐거워야하며, 최대한 글 작성에 집중할 수 있어야하고, 언제 어디서든지 빠르게 작성할 수 있어야한다.”

Tistory를 선택한 이유는 Daum Editor를 사용해서 웹에서 다양한 디스플레이를 만들어 낼 수 있다는 것이였다. 처음에는 고 퀄리티의 WISIWYG을 사용하는 블로그를 찾았었는데 문서를 작성하면 할 수록 WISIWYG을 사용하여 글을 작성할 때 display에 대해서 너무 많은 생각을 하게 된다는 것이다. 특히 모바일에서 글을 작성할 때는 답이 없다. 그 작은 모바일 화면에서 WISIWYG의 변환될 HTML 문법을 모바일 폰에서 직접 작성해야하기 때문에 문득문득 생각나는 아이디어를 모바일을 통해서 작성하지 못해서 문서화 시키지 못해서 잊어버린 것들이 많다.

지금은 생각이 많이 바뀌어서 WISIWYG으로 작성할 수 있는 컬러풀한 문서보다, 문서는 정보 전달이 가장 최우선되는 목적으로 Headers, Paragraphs, Emphasis, Code, Images, Links 만 구분하면 된다. 그런 의미에서 Markdown을 사용해서 글을 작성하기로 했다.

지금 이글 역시 Markdown으로 작성을한 글이다. Markdown은 다양한 에디터를 사용해서 작성할 수 있다. 물론 아무런 툴이 없이 그냥 vi나 메모장을 사용해도 괜찮다. 하지만 앞서 말했지만 ”문서작성이 즐거워야 한다”라는 생각으로 Markdown으로 기록을 남길 수 있는 DAYONE으로 글을 작성하고 있다. DayOne은 2014년 Apple Design Award를 한 앱인만큼 디자인이 매우 훌륭하다. 그래서 글을 작성하는데 즐겁고 무엇보다 iCloud나 DropBox와 연동하여 Mac과 iPhone과 동기화를 지원하고 있기 때문에 연구소에서 뿐만 아니라 언제 어디서든지 아이디어가 생각이 나면 글을 이어서 작성할 수 있다는 것이 큰 장점이다. DAYONE

Markdown은 문서와 구조만을 표기하기 때문에 나중에 Display는 HTML으로 변환되어질 때 CSS로 표현한다. 이것 또한 Markdown의 장점이라 생각한다. 문서에서 디자인 요소를 분리해서 문서 작성에 최대한 집중할 수 있게 한다. 그리고 문서를 어떠한 형태로 export 하거나 display를 할 수 있다는 장점이 있다. 만약 WISWYG으로 작성한 문서는 문서를 변환할 수 없거나 변환하더라도 다시 WISWYG을 사용해서 하나하나 변경을 해야할 것이다.

Markdown을 선택한 또하나의 이유는 바로 Local Archive이다. 즉, .md(또는 .markdown)의 파일을 로컬에서 만들어서 사용하게 되면 웹아 아니라 로컬에서 문서를 보관할 수 있게 된다. cloud 서비스를 함께 사용하게 되면 여러 디바이스에서 문서 작성을 이어서하거나 archive를 동기화 할 수 있게 된다. Markdown 문서를 생성할 때 날짜와 제목을 함께 파일명으로 사용하면 이후에 시간이 지나서 확인할 때 편리하며 또 Markdown 소프트웨어들이 대부분 파일명 이와 같이 만들어서 사용하고 있다. 예를 들어 Markdown 문서를 다음과 같이 작성할 수 있다. echo “#블로그 개편 준비” > 2014-07-14-make-ready-to-refactorying-blog-to-using-markdown.md

Tistory에 Markdown 사용하기

“왜 국내 블로그 서비스들은 Markdown을 지원하지 않는가?”

Markdown을 지원하는 블로그는 그렇게 많지 않다. 하지만 Tumblr에서는 Markdown을 지원하는데 Markdown 때문에 기존의 블로그를 포기하고 Tumblr로 이전을 할까 고민이 들었다. 하지만 기존에 블로그의 글을 link하고 있는 사용자들과 문서에 broken link를 만들어 줄 수 없다고 결론을 내렸다. 그래서 Markdown을 사용해서 Tistory에 블로깅을 할 수 있는 방법을 찾기 시작했다.

웹에서 Makrdown을 표현하기 위해서는 두가지 방법을 사용할 수 있다.

  1. Markdown 문서를 로컬에서 HTML로 export를 하여 HTLM 코드를 사용한다.
  2. Markdown 문서를 사용하고 브라우저에서 JavaScript를 사용하여 Markdown을 HTML으로 동적으로 변환하여 보여줄 수 있다.

현재 Tistory에 글을 작성할 수 있는 방법은 WISWYG을 사용하거나 HTML을 사용하는 두가지 방법이 있다. 일단 WISWYG으로 Markdown을 작성할수는 없다. 그래서 HTML을 사용할 수 있는 plan text editor 모드를 사용하기로 했다.

즉, Makrdown 문서를 HTML으로 변환시켜 글을 포스팅하거나, Markdown 문서를 그래도 HTML 모드에 작성하고 저장한 뒤 사용자의 클라이언터에서 브라우저에서 보여질 때 HTML으로 변환되어 보여질 수 있는 방법을 사용할 수 있다고 생각을 했다.

Makrdown 문서를 그대로 저장한 뒤 클라이언트에서 HTML로 표현하기

처음에는 Markdown 문서를 그대로 raw 문서를 HTML 모드로 포스팅하여 클라이언트 브라우저에서 HTML으로 변환할 수 있게 만들었다. 현재 PC들이 워낙 성능이 좋기 때문에 브라우저에서 Markdown 문서를 HTML으로 변환시키는데 시간이 오래 걸리지 않기 때문에 충분히 사용할 수 있는 방법이라 생각했다. 하지만 문제는 SNS로 공유할 때 문제가 생겼다. 요즘 SNS에서 사이트 링크를 공유하면 대부분 Open Graph를 사용해서 링크의 요약을 함께 보여주는데, Tistory는 Open Graph의 메타를 만드는 과정에서 Markdown을 일반 text로 인식해버리는 문제가 발생했다.

Open Graph의 meta를 만들기 위해서는 다음과 같이 HTML 문서를 분석해서 text를 가져와서 og:description 을 만들어야 한다.

<meta property=“og:description” content=“블로그 개편 준비”/>

하지만 Tistory에 Markdown raw 를 저장하면 다음과 같이 Open Graph 메타 태그라 만들어졌다. 즉, Markdown의 표기들이 일반 text로 인식되어 나타나는 문제가 발생하는 것이다.

<meta property=“og:description” content=“#블로그 개편 준비”/>

Markdown을 HTML 문서로 변경해서 포스팅하기

두번째는 로컬에서 Markdown 문서를 작성하고 HTML 코드로 export하여 Tistory에 업로드하는 방법을 선택했다. 이 방법은 위의 방법보다 안정적이긴 하지만 꽤 불편했다. Markdown editor에서 Makrdown 문서를 작성하고난 뒤 메뉴에서 export HTML을 선택해서 HTML 파일을 생성해서 그 파일을 열어서 HTML코드만 복사해서 Tistory에 글을 올려야하기 때문이다. 이 방법을 사용하면 Markdwon editor를 선택하는것 부터 변환하기 까지 복잡한 방법을 단순화 시켜야한다고 생각했다. 몇가지 Node.js 모듈을 만들었고 이 모듈을 사용해서 Markdown을 사용해서 Tistory에 포스팅하는 과정을 좀더 편리하게 만들었다. 이 모듈에 대한 설명은 다음 포스팅으로 작성하려고 한다.

Markdown을 사용할때 이미지 첨부 문제

Tistory에 Markdown을 사용해서 글을 작성하면 또하나의 큰 문제점이 있는데 바로 이미지 파일을 첨부할 수 없다는 것이다. Tistory의 에디터에서 HTML 모드로 작성하게 되면 파일을 첨부할 수 없는 문제가 발생한다. 이문제를 해결하기 위해서 두가지 방법을 실험하여 적용했다. 하나는 DataURI로 이미지를 변환해서 사용하는 방법이고, 다른 하나는 Node 모듈을 만들어서 파일 업로드하여 이미지 URI를 획득하는 방법이다. 이 방법에 대한 설명 또한 따로 포스팅으로 작성하려고 한다.