마크다운(Markdown) 사용법 및 마크다운 에디터 리뷰

송승관·2020년 5월 27일
8

🤔 마크다운?

2004년에 UI 디자이너인 존그루버가 만든 텍스트 기반의 마크업 언어(Markup Language) 이다. HTML로 변환이 가능하며 읽고 쓰기 쉽도록 문법을 제공한다. 사용자가 따로 폰트를 설정한다거나 글자의 크기를 세부 조절할 필요없이 문법에 의해 조절이 가능하고, 마크다운을 쓰거나 사용할 수 있는 에디터들이 존재한다. 또한 페이지 구분이 없어 HTML 페이지처럼 내리면서 볼 수 있는 점도 있다.

마크다운은 대신 마크다운을 인식하는 에디터마다 조금씩 문법이 상이하다. 그래서 전체적인 맥락은 비슷해도 세부적인 문법은 조금씩 다를 수 있다. 그래도 마크다운 문법이나 에디터의 숙련도가 올라가면 다른 에디터를 사용하더라도 금방 적응할 수 있다.

🖐 마크다운 문법

1. 글머리

글머리는 마크다운의 주제목 및 부제목 등 제목을 설정할 때 사용할 수 있다. H1~H6 까지 지원하며 H6까지 갈 수록 크기가 작아진다.

# H1
## H2
### H3
#### H4
##### H5
###### H6

마크다운 문법

H1

H2

H3

H4

H5
H6

출력 결과


2. 강조

텍스트를 강조해 가독성을 높히고 싶을 경우에 사용할 수 있다.

*italic_star*
_italic_underbar_

**strong_star**
__strong_underbar__

~~delete~~
**_strong_italic_underbar_**

마크다운 문법

italic_star
italic_underbar

strong_star
strong_underbar

delete
strong_italic_underbar

출력 결과


3. Quote

인용구를 사용할 때는 > 를 사용한다. 인용구 내에 추가로 인용구를 넣을 수 있다.

> I'm Quote

마크다운 문법

I'm Quote

출력 결과


4. 목록

숫자 목록

숫자 목록은 1. 2. 3. 처럼 숫자와 점을 이용해서 목록을 나타낼 수 있다. 탭을 사용해서 개행하여 목록을 추가할 수 있다.

1. One
	1. One - One
2. Two
3. Three

마크다운 문법

  1. One
    1. One - One
  2. Two
  3. Three

출력 결과

점 목록

점 목록은 순서가 없는 목록이며 *, +, - 로 사용할 수 있다. 기호 구분없이 사용해도 목록이 나타나진다.

* Star
	+ Plus
		- Minus

마크다운 문법

  • Star
    • Plus
      • Minus

출력 결과


5. 링크

외부 URL과 연결할 떄 [Title](Link) 형식을 사용하여 나타낸다.

[Google](https://google.com)

마크다운 문법

Google

출력 결과


6. 수평선

따로 페이지 구분이 없는 마크다운 문서에 페이지 구분을 지어 줄 수 있는 요소이다.

-----------------------
***********************
<hr/>

마크다운 문법




출력 결과


7. 이미지

마크다운 문서에 이미지가 필요한 경우 이미지 링크를 사용하여 추가하실 수 있다.

[![Picture](https://images.unsplash.com/photo-1590422688038-a7ad92dc79e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1348&q=80)](https://images.unsplash.com/photo-1590422688038-a7ad92dc79e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1348&q=80)

마크다운 양식

출력 결과

8. 코드 강조

인라인 코드 강조

글을 쓰는 도중에 코드를 삽입하려 할때 `(Grave) 를 사용하여 글 중간에 코드를 삽입할 수 있다.

출력은 `print("Hello world")` 로 하시면 됩니다.

마크다운 문법

출력은 print("Hello world") 로 하시면 됩니다.

출력 결과

블록 코드 강조

코드 전체를 삽입해야 하는 경우에는 ``` 입력 후 타이핑하려는 언어를 적는다.

```python

H = "Hello World!"
print(H)

```

마크다운 문법

H = "Hello World!"
print(H)

출력 결과

📠 마크다운 에디터

마크다운 문법은 메모장을 켜서 작업을 해도 무리없이 작성 가능하다만 작업 속도 향상을 위해 에디터를 사용하는 것을 추천한다. 에디터는 사용한 마크다운을 랜더링하여 에디터 상에 실시간으로 보여주며, 단축키 등을 사용하여 마크다운 문법을 빠르게 사용할 수 있다. 필자가 직접 사용해본 마크다운 에디터만 소개한다.

Typora

https://typora.io

마크다운을 처음 사용했을 때 사용했던 에디터이다. 처음에 마크다운을 쓸 때 깃랩(Gitlab)에 문서를 작성하고 있었다. 처음에는 랜더링되는 과정도 잘 몰랐고 이런 에디터도 몰라서 문법을 일일히 쳐서 문서를 완성했던 적이 있었다. 옆에서 너무 답답했는지 타이포라를 마크다운 에디터로 추천해주고 사용했더니 신세계였다. 일일히 타이핑했던 문법을 자동으로 완성해줘서 작업시간이 엄청 단축되는 것을 볼 수 있었다. 그리고 군더더기 없는 디자인도 이 에디터를 쓰게 하는데 한 몫을 했다. 무료이니 마크다운를 처음 사용하는 뉴비들에게 추천한다.

⚠️ 2022.01.01 기준 Typora가 유료화가 되었다. 15일 Trial 기간이 지나면 $14.99(약 17,000원)을 과금해야 사용할 수 있다.(3 device까지)
특별하게 사용하고 있는 Markdown 도구가 없으면 과금해서 사용해도 충분히 값어치 한다 생각한다. (필자는 과금해서 사용하고 있다.)

Notion

https://www.notion.so

얘는 솔직히 마크다운 에디터라고만 말하기엔 사용하는 범주가 넓어서 마크다운 에디터로써의 이야기만 할 것이다. 노션은 마크다운 문법 외에도 스프레드 시트나 외부 프로그램 익스텐션을 사용할 수 있어서 좋다. /(슬래시) 를 쓰면 노션에서 사용가능한 문법들이 쭉 내려오고 원하는 문법을 치면 결과 리스트가 나온다. 필요한 문법을 마크다운 문법을 몰라도 슬래시만 알면 쓸 수 있다는 점이 좋았다. 그리고 블록 단위로 문서 내 객체들을 사용할 수 있어서 문서 병합이나 나눌 때 유용했다.

👋 마치며

마크다운을 아는 것은 개발자에게 정말 중요하다 생각한다. 글을 쓰는 하나의 도구이며 깃허브, 노션, velog 등 마크다운을 사용하는 곳이 점점 늘어나고 있다. 선택지를 별로 주지 않고 글에만 집중할 수 있는 마크다운의 철학때문에 쓰는 곳이 점점 많아지지 않나 싶다. 어쨋든 이 글도 읽고 다른 글도 읽어서 마크다운을 현업이나 블로그에 쓸 수 있도록 하자.

👇 읽어보기

profile
Data Engineer, 변화를 두려워하지 않는 개발자입니다.

1개의 댓글

comment-user-thumbnail
2022년 4월 2일

마크 다운 공부 중입니다 . 글 감사합니다 .

답글 달기