Markdown을 이용해 글쓰기

1. 마크다운(MarkDown)

마크다운(Markdown)은 마크업 언어의 일종으로서 읽기 쉽고, 쓰기 쉬운 Text-writer를 의도로 제작되었다. 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 제작한 이 언어는 텍스트 기반으로서 특수기호와 문자를 이용해 간단한 문법으로서도 웹에서 빠르게 가독성 좋은 컨텐츠를 생산할 수 있다. 이런 마크다운 문법은 어떤 텍스트 에디터를 이용해서도 작성할 수 있으며, 확장자는 .md가 된다.

 

 

1) 마크다운의 장단점

마크다운의 장점

• 문법이 간결하다.
  간결한 문법을 사용해서 작성하기 쉽고, 간결한 문법을 통해 쉽게 컨텐츠의 가독성을 높일 수 있다. 또 간결하다는 장점은, 별도의 에디터 없이 어디서나 작성이 가능하며, 텍스트 형태로 저장되기 떄문에 가볍고 저장하기 좋다는 장점이 된다.
• 다양한 형태로 쉽게 변환이 가능하다.
  마크다운은 기본적으로 텍스트 컨텐츠를 작성하기 불편한 HTML을 대체하기 위해 고안되었다. 따라서 설계시부터 간단한 것은 마크다운으로, 복잡한 것은 HTML을 이용하게끔 하였다. 이에 마크다운으로 작성한 컨텐츠는 쉽게 HTML로 변환이 가능하며, 마크다운 컨텐츠 중간에 HTML 코드를 넣어도 문제가 없다.

마크다운의 단점

• 표준이 존재하지 않는다!
  개발자 존 그루버가 10년 전 마크다운을 제안한 이후로 직접적인 개선사항이 없었다. 이에 다양한 플랫폼, 사용자마다 저마다의 개선사항을 추가한 문법을 발표했다. 대표적으로 Markdown Extra, Github Flavored Markdown 등이 있다. 하지만 마크다운의 기본적인 문법, 자주 사용하는 확장 문법은 동일하니 큰 걱정은 하지 않아도 된다.
• 이미지, 동영상 삽입 등 멀티미디어 삽입이 불편하다.
  티스토리 에디터와 같은 블로그 에디터에서는 주로 이미지 업로드 버튼을 통해 이미지를 업로드하고 바로 그 이미지를 사용할 수 있다. 하지만 마크다운 문법에서는 오로지 텍스트로만 글을 작성할 수 있기 때문에, 이미지를 다른 서버에 올려두고, 그 링크를 삽입해 이미지를 컨텐츠에 삽입할 수 있다. 이런 점은 글 작성과 동시에 이미지를 확인할 수 없는 불편함이 된다.

2) 마크다운 문법

앞서 설명했듯이, 기존 마크다운의 문제점을 개선한 여러 문법이 존재한다고 했다. 하지만 그런 문법들도 기본적으로 초기의 기본 문법, 자주 사용하는 확장 문법은 동일하기에 그러한 것들만 소개하고자 한다.

ㄱ) Headers

#을 이용해 표기하며, # 부터 ######까지 H1~H6를 나타낼 수 있다.

• H1 헤더

  H1 헤더입니다.

  # H1 헤더입니다.

• H2 헤더

  H2 헤더입니다.

  ## H2 헤더입니다.

• H3 헤더

  H3 헤더입니다.

  ### H3 헤더입니다.

• H4 헤더

  H4 헤더입니다.

  #### H4 헤더입니다.

• H5 헤더

  H5 헤더입니다.

  ##### H5 헤더입니다.

• H6 헤더

  H6 헤더입니다.

  ###### H6 헤더입니다.

ㄴ) 목록

• 번호 있는 리스트
  숫자를 사용해서 목록을 생성할 수 있다. 생성되는 목록 번호는 오름차순으로, 1부터 시작한다. 중첩된 목록은 Tab을 이용하면 된다. Tab을 넣어주는 방식으로 하위 레벨의 목록 생성이 가능하다.

1. Level 1-1
   

   1. Level 2
      

      1. Level 3
1. Level 1-2

1. Level 1-1

1. Level 2

l. Level 3

2. Level 1-2

• 번호 없는 리스트
  -, +, * 기호를 사용해서 목록을 생성할 수 있다. 마찬가지로 목록 아래에 세부 목록을 사용할 수 있는데, Tab을 이용해 들여써주면 된다.

• Level 1
  

  • Level 2
    

    • Level 3
      

      • Level 4

- Level 1

* Level 2

* Level 3

+ Level 4

ㄷ) 블록인용(BlockQuote)

인용구와 같은 텍스트를 서술하고자 할 때, 텍스트를 블록으로 감싸는 역할을 한다. 인용문 내에서 다른 마크다운 코드가 사용을 할 수 있으며, 인용문 내에 중첩 인용문을 사용할 수도 있다.

This is the blockquote

This is the nested blockquote

• it allows another MD syntax

> This is the blockquote
> > This is the nested blockquote
>
> - it allows another MD syntax

ㄹ) 텍스트

Markdown의 텍스트는 기본적으로 html의 <p></p>태그가 된다. 엔터 두번을 이용해서 단락 구분이 가능하다. 이외에도 Readability 향상을 위해서 다양한 기능을 제공한다.

• 강조
  기본적으로 Bold, Italic, Strike를 지원한다. Bold는 **text**을 통해 가능하며, 기울이기는 *text*, Strike는 ~~text ~~ 로 가능하다.

  굵은 글씨
  기울이기
  굵은 글씨+기울이기
  취소선

  **굵은 글씨**
*기울이기*
***굵은 글씨+기울이기***
~~취소선 ~~

• 수평선
  단락 구분을 위해 수평선을 사용할 수 있다. 세 개 이상의 * 혹은 -를 사용해 나타낼수 있다.

  ---

   

   

   

  아래의 코드는 모두 위와 같은 수평선을 나타낸다.
  * * *
***
*****
- - -
---------------------------------------

• 주석
  Mardown은 주석을 지원한다. 주석은 게시글의 하단에 생성된다. 주석을 하고자 하는 곳에 [^num]를 사용해서 원하는 곳에 주석을 삽입할 수 있으며, 주석에 대한 내용은 마찬가지로, [^num]:text 를 이용해 원하는 주석에 대한 설명을 생성할 수 있다.1
  

[^1]

[^1]:Comment

ㅁ) 링크

텍스트 컨텐츠를 제작하면서 때로는 외부의 링크를 참조하거나, 이미지 링크를 이용해 이미지를 삽입하고자 할 때가 있을 것이다. 마크다운에서는 이러한 기능 또한 포함하고 있다.

• 인라인 링크
  인라인(inline) 링크는 링크가 필요한 텍스트가 나타날 때마다 향할 주소를 넣는 방식을 말한다. 예를 들어서 티스토리 링크를 연결한다고 가정해보자. Tistory 이 링크는 인라인 링크를 이용해 생성했고, 그 방식은 [Tistory](https://www.tistory.com)과 같다. (참고로 외부링크를 이용하고자 할때는http:// 혹은 https://를 적어주어야 한다.) 이런 방법은 또 링크를 생성하고자 할때 [text](link)를 매번 적어야하는 불편함이 있다. Markdown을 이용해서도 html의 title을 정의할 수 있다. [text](link "title")을 통해서 가능하다.

  Google Link
  [Google Link](https://www.google.co.kr)

• 레퍼런스 링크
  레퍼런스(Reference Link)는 특정 링크를 참조하기 위해서 그 링크를 선언해놓고 사용할 수 있는 구조이다. 반복적으로 동일 링크를 사용하고자 할 때 유용하다.

  Google Link
  [Google Link][Google]
[Google]: https://www.google.co.kr

• 네임드 앵커
  본문내에서 특정 부분으로 뛰어넘고자 할때 네임드 앵커를 이용해 이를 구현할 수 있다. 다만 네임드 앵커를 사용하는 경우, 특정 부분에 대한 이름을 설정하기 위해 html의 <a 태그>를 사용해야 한다. 사용법은 아래와 같다.

  Named Anchor
  여기로 점프한다!

  [Named Anchor](#here)
여기로 점프한다!<a id="here"></a>

• 이미지 링크
  이미지 또한 다른 링크들과 마찬가지로 처리할 수 있다. 다만 Markdown을 이용해 이미지를 처리하는 경우, 이미지 크기 설정이 쉽지 않고(기본 Markdown) 이미지 확인이 글을 작성하면서 할 수 없기 때문에 불편한 점이 있다.
  Inline Style :
  ![Alt text](/path/to/img.jpg "Optional title")

  Reference Style :
  ![Alt text][id]
[id]: url/to/image "Optional title attribute"
  “id”부분은 사용자가 지정하는 참조하는 이미지의 임의 이름이다. 이미지 참조를 정의하는 것은 링크를 정의하는 것과 동일하다.

  
  

2. 마크다운으로 글쓰기

Markdown이 무엇인지 알아보았고, Markdown의 문법에 대해서 충분히 이해했다면, 이제 Markdown을 이용해서 글을 작성할 수 있을 것이다. Markdown을 위한 텍스트 에디터는 Win, Mac 용으로 다양하게 나와있지만, 개인적으로 웹에서 바로바로 작성해서 사용하기 때문에, StackEdit라는 웹사이트를 이용한다. 주소는 https://www.stackedit.io 이다.

StackEdit 사이트를 이용하는 이유는 우선은 Markdown을 쉽게 사용할 수 있기 때문이다. Ctrl+B로 굵은 글씨 등 다양한 단축키를 지원하기 때문에 편한점이 있다. 그리고, Markdown 파일로 Html 파일로 쉽게 저장이 가능하다. 이외에도 코드 삽입, 구글 드라이브를 이용한 이미지 삽입 등을 쉽게 지원하기 떄문에 사이트를 유용하게 활용하고 있다.

---

1. Comment ↩