이미지를 많이 사용하는 블로거를 위한 마크다운+티스토리 방법

티스토리는 폐쇄형블로그와 오픈형블로그의 중간지점에서 많은 장점을 가지고 있습니다. 너무 어렵지도 않고 너무 쉽지도 않다는 점이지요. 단, 그런 애매한 포지션이 항상 뭔가 아쉽게 만들고는 합니다.

제가 티스토리에 가장 큰 불만을 가지고 있는 것은 에디터입니다. 순수하게 티스토리 에디터에서 글을 작성하면 큰 문제는 없지만 어디서 카피를 해온다던가 다른데서 작성하던 것을 붙이면 서식이 미친듯이 흐트러져 버립니다. 사진 넣는 것도 여간 불편한게 아니죠.

마크다운 언어는 글을 마구마구 쓰고싶게 만들어줍니다

저는 마크다운으로 글을 작성하고 티스토리에 글을 옮기고 있습니다. 티스토리에서 마크다운을 지원하지 않기 때문에 그간 어떻게 하면 마크다운으로 작성하여 완벽하게 티스토리에서 구현할지가 저의 큰 고민거리 였습니다. 제가 꼭 필요로 했던 기능은 하기와 같이 2가지 입니다.

1. 마크다운에서 작성하여 티스토리로 서식변경 등 없이 깔끔하게 넣는다

2. 이미지를 많이 사용하니 이미지를 넣기 쉬운 마크다운 에디터가 있으면 좋겠다

저의 이 2가지 니즈를 맞춰준 방법을 소개합니다.

마크다운으로 작성한 글을 티스토리로 : 에버노트 활용

여러가지 마크다운에디터를 사용해보았습니다. StackEdit, Dillinger, 하루패드, DayOne어플 등 다양하게 사용해보았습니다.

그중에서 StackEdit이 그나마 괜찮은 축에 속했습니다. 클릭 한번으로 HTML로 변경해주기 때문에 티스토리 에디터에 붙여넣으면 되니깐요. 근데 제가 생각했던 식의 서식으로 나오지를 않았습니다. CSS상의 이슈가 있을 수도 있었으나 제가 전문적이지 않아서 포기하게 되더군요.

다양한 기능만 아니라 웹에서도 작성이 가능해서 강력한 스택에딧. 그러나 이미지 넣기는 역시 어려워요.

그러던 중에 티스토리는 에버노트에서 글불러오기 기능이 있다는 것을 알게 되었습니다. 에버노트에서는 마크다운으로 작성한 글도 붙여넣기가 가능합니다! 그래서 이 방법을 쓰기로 했고 이제는 정말 편하게 글쓰기에만 집중할 수 있습니다.

에버노트에 쓴 글을 티스토리로 가져오는 방법은 티스토리 공홈에도 자세하게 설명이 되어 있습니다.

에버노트에서 불러오는 방법

이미지 넣기 정말 편한 마크다운editor Typora(타이포라)

마크다운을 이용하면 이미지 넣는 것이 제법 불편합니다. 마크다운 자체에서는 이미지를 지원하지 않기 때문입니다. 불러오는 방식을 이용하는데 대부분 웹서버에서 불러와야 합니다. 구글드라이브, 드롭박스등을 활용하는데 이거 가져오는게 일이죠.

그러던 중에 발견한 에디터가 Typora입니다. 무려 내 컴퓨터에 저장된 이미지를 드래그&드롭으로 붙여넣기가 가능합니다. 이 기능만으로 엄청나지요.

타이포라, 에버노트, 티스토리의 연동을 활용하면 특히 사진을 많이 사용하는 블로거들에게 도움이 됩니다.

간단한 소개와 다운로드는 홈페이지를 참고해주세요.

Typora 홈페이지

제가 사랑하는 사이트인 Back to the Mac에서도 타이포라를 소개하고 있습니다. 같이 보셔도 좋을 것 같습니다.

백투더맥 Typora 소개

타이포라의 주요기능은 다음과 같습니다.

• 이미지를 자유롭게 넣을 수 있습니다. 내 컴퓨터의 파일을 드래그&드롭이 가능하고 심지어 브라우저상의 이미지도 드래그&드롭이 가능합니다. 이게 가능한 이유는 타이포라 프로그램이 자체적으로 경로를 만들고 이미지를 불러오기 때문입니다.

• 그리고 그 무엇보다. 타이포라에서 작성을 마치시고 글을 카피해서 에버노트로 붙여넣기만 하면 끝. 자동으로 마크다운언어를 에버노트에 서식에 맞춰서 넣어주게 됩니다. 엄청나게 편리한 기능입니다.

• Windows와 MacOS 모두를 지원합니다. 저는 회사에서는 윈도우컴퓨터, 집에서는 맥북프로를 활용하므로 이부분도 중요한 장점이었습니다.

• 디자인이 깔끔하고 아름다워요. 마크다운의 특징인 심플함을 그대로 보여줍니다. 타자기모드(Typewriter)도 있어서 작가가 된 기분도 느낄 수 있고 정말 글에 집중할 수 있습니다.

이렇게 타이포라를 이용해서 저는 글을 쓰고 에버노트로 보내고 그리고 티스토리로 가서 에버노트의 글을 불러오는 방식으로 포스팅을 하고 있습니다.

제가 했던 여러가지 방법 중에서 가장 글에 집중할 수 있는 방법이었습니다. 그말인 즉슨, 이미지를 불러오고 뭐를 찾고 명령어를 찾고 하는 등의 불필요한 시간을 최소화 할 수 있다는 것입니다.

티스토리에서 에버노트 글을 불러올 때, Typora에 이미지를 넣을 때 주의사항

하지만 단점도 없지 않습니다. 티스토리에서 에버노트의 글을 불러올 때 어떻게 불러오는지 서식이 흩어지기도 하기 때문입니다. 그래서 타이포라에서 원활한 사용을 하려면 몇가지 설정을 만져줘야 합니다.

1. 이미지파일을 특정폴더에 넣기

타이포라가 이미지를 구현하는 방식은 이미지 넣기를 하면 특정폴더에 사진을 저장하고 그 사진을 불러오는 방식으로 구현이 됩니다. 이 특정폴더에 넣기를 설정해주시지 않으면 글을 카피해서 에버노트에 넣더라도 이미지는 복사가 되지를 않습니다. 아울러 폴더명은 반드시 영어로 해주셔야 제대로 복사가 됩니다. 꼭이에요.

이 메뉴처럼 설정을 해주시면 됩니다. 폴더는 임의의 폴더면 됩니다.

2. 이미지에는 반드시 글단계h를 넣어주세요

어째서인지 이미지를 그냥 넣고 티스토리에서 불러오면 반응형에서 가로간격을 자동으로 모바일사이즈에 맞춰서 해주는 HTML이 에버노트에서 불러오면 풀려버립니다. 그래서 모바일에서 보면 이미지 가로간격이 안맞게 되어 버립니다. 해결방법은 이미지에 글단계를 넣어주면 해결이 됩니다. 뿐만아니라 목록문법같은 경우에도 글단계를 넣어줘야 제대로 표현이 됩니다.