[마크다운으로 블로그 글 예쁘고 편하게 쓰는 법] 마크다운(Markdown)문법 소개

반응형

[마크다운으로 블로그 글 예쁘고 편하게 쓰는 법]

마크다운(Markdown)문법 소개


최근 반응형 웹 디자인과 마크다운 문법에 대한 관심이 아주 뜨겁습니다. 저 역시 같은 내용에 약간의 관심을 가지고 있는데, 일반적인 웹사이트 뿐만 아니라 조금은 대중화 된 블로그 서비스인 티스토리에서도 반응형 웹 스킨을 적용하여 사용할 수 있습니다. 마찬가지로 boostrap 등을 이용하여 마크다운까지 지원하고 있기 때문에, 반응형+마크다운을 적용하기에 부족함이 없습니다. 지금 이 글 역시 마크다운 문법을 활용한 마크다운 에디터를 활용하여 작성 중입니다.

Note

현재까지 여러개의 티스토리 스킨을 사용해 보았지만, 마크다운을 가장 잘 지원하는 스킨은 현재로서는 마크쿼리님의 스킨입니다. 제가 지금 사용 중이기도 한 스킨인데, 최근 웹의 움직임과 분위기 상 티스토리 블로거분들에게도 많은 인기를 얻고 있는 것으로 보입니다.



최근 웹 디자인의 변화

boostrap

반응형 웹에서는 사이즈에 상관없이 모든 기기에서 대체로 동일한 화면을 보여줍니다.



저는 디자인은 잘 모르지만, 최근 웹 디자인의 추세를 보면 simple쪽으로 가고있습니다. 더 이상 무겁고 화려한 디자인은 어디에도 사용되지 않습니다. 대표적으로 iOS7과 같은 플랫디자인이 인기를 끌고 있습니다. 상당히 직관적이면서도 가볍고, 이해하기에 편리하며, 가벼운 특성으로 인해 속도 역시 보장해 줄 수 있다는 장점이 있습니다. 말하자면, 거의 디자인이 들어가지 않는 디자인이 대세입니다. 그리고 웹사이트 운영자나 블로거에게는 가장 중요한 가독성. 디자인이 거의 없다는 것은 가독성에 대한 보증수표와도 같습니다. 이제는 화려하고 복잡하고 불필요한 디자인 요소가 있는 과거형 디자인은 설 자리가 없어 보입니다. 간략하면서도 다양한 것들을 고려할 수 있는 디자인이 전체 웹을 주도하고 있는 분위기입니다. 마치 클래식 웹으로 돌아가는 듯합니다.

마찬가지로 블로그에서도 마크다운과 플랫디자인 같은 요소를 활용하면 아주 멋지면서도 깔끔한, 그리고 가독성이 좋으면서도 작성하기 어렵지 않은 디자인의 포스트를 만들어 낼 수 있습니다. ▼ 출처 정재복님 블로그 ↩

ios theme

정재복님 블로그의 iOS 소개 글. 반응형 웹 스킨 위에 마크다운으로 작성되어 있다.



마크다운 문법 이란?



마크다운 문법 ↩이란 사실 별로 어려운게 없는 문법입니다. 마크다운, 그리고 문법이라는 단어가 왠지 부담스럽게 느껴지시는 분들도 있으실텐데, 겁먹을 필요는 전혀 없을 정도로 일반 글쓰기와 크게 다르지 않은 난이도입니다.

블로그를 개설하고 나서 일반적으로 사용하는 대표적인 에디터는 바로 위지웍 에디터라고 불리는 글쓰기 포맷입니다. 인터넷에 공개되는 모든 데이터는 HTML로 표현되는데, HTML 문법은 복잡하고 어렵게 느껴질 수 있기 때문에 일반적인 글을 쓰고 여러가지 버튼들을 활용하여 특정한 서식을 적용하면 뒷편에서 그것을 HTML로 바꿔 변환하는 것이 바로 위지윅 에디터입니다. ▼

티스토리 위지윅 에디터

티스토리 위지윅 에디터


위지윅 에디터는 아마 가장 많이 사용되는 보편화 된 에디터라 할 수 있을텐데요. 정말 오랜 과거에는 위지윅 에디터 역시 다양한 변화를 거쳐 진화해 왔습니다. 여러가지 버튼들이 추가되고 삭제되기도 하였고 변화된 웹 환경에 따라 필요했던 요소들이 생성되기도 하였습니다. 하지만 위지윅 에디터의 성능이 상향 평준화되고, 실제로 대다수를 차지하는 일반인들 같은 경우에는 위지윅 에디터에 포함되어 있는 기능들 중 극히 일부분만으로도 괜찮은 HTML 문서를 만들 수 있었기 때문에 더 이상의 발전이 필요가 없게 되었지요.

마크다운 문법은 위지윅 에디터에서 한발짝 더 나아간 개념이라고 볼 수 있겠습니다. 문법은 매우 간단하면서도 직관적인 반면 기능은 강력하다는 특성이 있습니다. 게다가 일반적인 텍스트 형식이기 때문에 읽기 쉽고 쓰기 편리합니다. HTML 문법을 전혀 모르는 초보자라고 하더라도 쉽게 배울 수 있고, 문법 역시 공개되어 있어서 누구나 조금의 시간만 투자하면 익힐 수 있습니다. 실제로 위지윅 에디터의 버튼들을 클릭해보며 테스트하는 시간과 마크다운 문법을 테스트하는 시간에 큰 차이는 없을 것으로 예상됩니다. 쉽게 말해서, 그냥 메모장에 글을 쓰는 것처럼 쓰더라도 다양한 디자인을 입힐 수 있다는 뜻입니다. 몇 가지의 간단한 문법 혹은 단축키만 익힌다면 말이지요.

Note

글을 쓰는 사람은 오로지 글 자체에 집중하면 됩니다. 문서의 최종 디자인은 커스텀되거나 적용해 둔 CSS에 의해 결정됩니다. 자유자재로 디자인할 수 있으며, 오픈소스 형태로 공개되어 있는 많은 스타일시트가 있습니다. 이런 방법은 차후 문서의 디자인을 변경할 때에도 큰 도움이 됩니다. 가령, 링크의 색상을 파란색으로 지정하여 100개의 글을 썼는데, 갑자기 링크의 색상을 붉은색으로 바꾸고 싶다면 어떻게 해야할까요? 기존 위지윅 에디터였다면 일일이 모든 글을 수정하여 글 색상을 바꿔주어야 할테지만, 마크다운 문법과 CSS의 조합으로 써진 글에서는 CSS의 색상값만 변경해주면 끝입니다.



이후의 글에서 계속 이야기를 할 예정인데, 마크다운 문법으로 글을 쓰게 되면 글쓰기가 아주 편리해집니다. 제 개인적인 견해로 글쓰기의 집중력은 마우스에 손이 가느냐 안가느냐에 큰 영향을 받습니다. 우리들은 인터넷에 어떤 글을 작성할 때 수시로 볼드처리(굵게)하거나 이탤릭체(기울게)하거나 색상을 입히는 등의 작업을 하게 됩니다. 전통적인 위지윅 에디터에서는 볼드체를 하고 싶은 글을 블럭 지정하여 '굵게'라고 표시된 버튼을 클릭해주어야 합니다. 한마디로 손이 많이 갑니다. 하지만 마크다운 문법에서는 단축키나 문법 자체를 그냥 써버리면 되기 때문에 왠만해서는 마우스에 손이 갈 일이 없습니다. 마찬가지로 링크를 걸거나 이미지를 삽입하거나 동영상을 링크한다든지 등의 작업 역시 방식은 동일합니다. 마크다운에 조금만 적응한다면 더 이상 위지윅 편집기는 쳐다도 보기 싫어질 수 있습니다. 마크다운에 비해 상대적으로 불편하니까요.

마크다운(Markdown)

마크다운은 읽기 쉽고 쓰기 쉬운 문서 작성을 목표로 미국 유명 IT 블로거 존 그루버(John Gruber)가 개발한 마크업 언어입니다. 매우 간단한 문법체계를 가지고 있기 때문에 널리 사용되고 있습니다. 최근 나오는 앱이나 사이트들에서도 마크다운을 적극 지원하고 있는 추세입니다. 유명한 일기쓰기 앱인 Day one 역시 간단한 마크다운 문법을 지원하고 있습니다. 최근에는 확장된 마크다운 버전이 출시되어 표 작성과 각주 등을 추가할 수 있게 되기도 했습니다.


마크다운에서 마음에 드는 기능 중 하나는 각주1 기능입니다. 블로그에서는 잘 사용되지 않는 각주이지만, 아마도 위지윅 에디터에서 사용하기 불편하다는 점 때문인 듯 합니다. 다양한 링크가 들어가는 블로그 포스트 특성상 각주 넣기가 쉬워지면 각주 기능이 활성화 될 것으로 예상됩니다. 마크다운 에서는 각주 역시 아주 쉽게 [^각주] 형태로 텍스트를 넣으면 끝입니다.




마크다운 지원 여부


마크다운을 지원하는 서비스 중 대표적인 서비스로는 워드프레스 등이 있는데, 유감스럽게도 국내 서비스 중에서는 아직까지 제대로 지원하는 서비스가 없습니다. 하지만 공식적으로 지원하지 않는다고 하여도 마크다운 에디터를 활용하면 일반적인 글쓰기처럼 글을 쓴 다음, 그 글을 HTML로 변환하여 위지윅 에디터의 HTML쓰기 모드에 붙여넣는 작업만으로 마크다운 문법을 활용할 수 있습니다. 저 역시 그러한 방법을 사용 중입니다. 어디까지나 이 방법은 차선책이며 가장 좋은 방법은 공식적인 플러그인 등을 통해 마크다운 자체를 지원해주는 형태입니다. 언제쯤 가능할지는 감히 예측할 수가 없는 실정이라 아쉽습니다.

위지윅 에디터에서는 기본적으로 HTML 쓰기 모드를 동시에 지원합니다. 따라서 마크다운 문법 역시 대부분의 웹 사이트에 글을 남길 때 사용 가능 합니다. 




  1. 각주

반응형

댓글(3)

  • 2014.01.07 19:12 신고

    좋은글 잘보았습니다. ^^
    이 글을 사용하면서 사용한 마크다운 문법은 어떤게 있을까요??
    서식으로 지정하여 활용하고 계신것도 공유해주시면 많은 참고가 될것 같습니다.
    느낌표나 엄지손가락은 그림삽입인가요?
    왼쪽에 세로줄은 뭘로 하신거에요 저것도 마크다운인건지..
    완전 초보가 눈만 높아서 >.<

    • 2014.01.07 19:15 신고

      느낌표나 노트표시, 좋아요 표시 같은 작은 아이콘은 boostrap에 이미 포함되어 있는 아이콘 리스트입니다. 현재 사용하고 계시는 스킨에 해당 css가 적용되어 있기 때문에 사용방법만 알게되면 얼마든지 사용가능하며, 말씀해주신 왼쪽 세로줄 처럼 약간의 디자인이 들어간 것은 HTML 소스코드인데요. 해당 내용을 잘 갈무리하여 역시 별도의 포스팅으로 알려드릴 수 있도록 하겠습니다.

    • 2014.01.07 21:33 신고

      오와~ 친절두 하셔라 ㅠ.ㅠ 정말 많은 도움될것 같아요. 포스팅 기대하고 있을게요.
      많이 배우도록 하겠습니다. 앞으로도 잘부탁드립니다.

Designed by JB FACTORY