Velog [Markdown] 사용법

김명건·2021년 1월 28일

나도 나만의 블로그를 가져야겠다 싶어 Velog를 시작했다.
글을 작성하려는데 웬 생소한 페이지에 너무나도 간결한 도구들에 당황했다.
지금껏 한글이나 엑셀 또는 파워포인트만 접해온 내게 Velog의 글쓰기는 그렇게 생소하게 다가왔다.
분명 다른 사람들은 이쁘게 잘 사용하고 있었지만, 내게 주어진 조건은 단촐하기 그지없었다.
찾아보니 이러한 글쓰기 방식은 Markdown에 기인하고 있었다.
정보의 바다에는 내가 유용하게 Markdown을 사용하게 할 많은 정보들이 있었지만, 필요할 때마다 중구난방으로 정보를 수집하기 귀찮았던 나는 Markdown을 쓰는 방법을 모아 내가 보기 쉽도록 정리하여 보관하기로 했다.

1. Markdown 이란?

일반 텍스트(Plaintext) 기반의 경량 마크업(Markup) 언어이다. 그림의 표현같은 오브젝트가 아닌 읽을 수 있는 문자열인 일반 텍스트, 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 마크업 언어인 것이다.

존 그루버(Jhon Gruber)가 2004년에 만들었고 지금은 세계에서 가장 대중적인 언어라고 한다.
내게 큰 해당사항은 없다.(알고 난 후에는 간결하고 편리한 방식에 매료되었다.)

마크다운(Markdown)은 워드 프로세서에서 단추를 눌러 서식을 즉시 변경시키는 위지위그(WYSIWYG) 방식의 편집기와 다르게, 마크다운(Markdown) 구문을 이용하여 어떤 단어나 구문의 서식을 나타낸다.

Velog의 글쓰기 방식은 마크다운(Markdown)에서 여러 기능을 추가한 방식으로 생각된다.

2. Markdown 을 쓰는 이유?

편리한 단추와 도구들을 보유한 워드 프로세서들이 있는데 굳이 마크다운(Markdown)을 쓰는 이유는

1. 범용성이 뛰어나다.

마크다운(Markdown)은 모든 것에 사용할 수 있다. 웹 사이트, 문서, 메모, 책, 프레젠테이션, 전자 메일 등 여러 형식 또는 결과물을 만드는데 사용할 수 있다는 것이다.

2. 이식 가능하다.

마크다운(Markdown) 형식의 텍스트가 포함된 파일은 거의 모든 응용 프로그램을 사용하여 열 수 있다. 이는 사용한 응용 프로그램을 통해서만 열 수 있는 워드 프로세싱 응용 프로그램과 비교되는 이점을 가진다.

3. 독립적으로 사용할 수 있다.

운영 체제를 실행하는 모든 장치에서 마크다운(Markdown) 형식의 텍스트를 만들 수 있다.

4. 점유율이 높다.

주요 커뮤니티 사이트(Reddit, GitHub) 등의 웹사이트와 데스크탑, 웹 기반 어플리케이션 등 많은 곳에서 마크다운(Markdown)을 지원한다.(점유율이란 단어를 사용하는 것이 맞는지는 모르겠다.)

3. Velog 시작하기

지금까지 Velog 글쓰기 방식의 기반이 된 마크다운(Markdown)의 관련 내용을 살펴봤다. 이제 Velog 글쓰기에 필요한 기능을 설명하기로 하고, 해당 기능을 통해 개성있는 나만의 Velog를 만들고자 한다.

1. 제목(Headings)

제목은 #으로 나타낼 수 있고 HTML에서의 h1부터 h6까지 표현할 수 있다.

✍ 작성 시

# h1
## h2
### h3
#### h4
##### h5
###### h6

💻 결과

h1

h2

h3

h4

h5

h6

💡 h1과 h2는 #말고도 =와 -로 대체가 가능하다.

✍ 작성 시

Heading level 1(h1)
===================
Heading level 2(h2)
-------------------

💻 결과

Heading level 1(h1)

Heading level 2(h2)

제목을 쓸 경우에는 #구문 입력 후 ' '한 칸 띄어쓴 다음에 사용해야 한다.

2. 문단, 단락(Paragraphs)

마크다운(Markdown)에선 문단을 나눌 때 문단 사이에 한 줄을 비워두는 것으로 구분한다.

✍ 작성 시

문단을 나눌 경우, 문단 사이에 한 줄의 빈 공간이 있는 것으로 구분짓는다.

문단의 첫 문장에 들여쓰기를 하는 것과 다르므로 유의하여야 하지만 글 작성에 크게 주의하여야 할 점은 아닌 것 같다.

💻 결과

문단을 나눌 경우, 문단 사이에 한 줄의 빈 공간이 있는 것으로 구분짓는다.

문단의 첫 문장에 들여쓰기를 하는 것과 다르므로 유의하여야 하지만 글 작성에 크게 주의하여야 할 점은 아닌 것 같다.

3. 줄 바꿈(Line Breaks)

줄 바꿈은 <br>를 이용하여 할 수 있다. 여러 번 사용 시 사용한 수 만큼 줄 바꿈을 시행한다.

✍ 작성 시

문단을 나눌 경우 enter 키를 이용하여 문단 사이의 하나의 빈 줄을 넣는다.<br>또한 문단은 `<br>`을 두 번 사용하여 구분지을 수도 있다.

💻 결과

문단을 나눌 경우 enter 키를 이용하여 문단 사이의 하나의 빈 줄을 넣는다.
또한 문단은 <br>을 두 번 사용하여 구분지을 수도 있다

4. 강조, 취소선(Emphasis, Strikethrough)

글을 강조하거나 취소하는 표시를 할 경우엔 *또는 _, 그리고 ~를 이용하여 나타낼 수 있다.

✍ 작성 시

**굵게** (Bold)
__굵게__
*기울임* (Italic)
_기울임_
***강조와 기울임***
___강조와 기울임___
~~취소선~~ (취소선은 '~'를 꼭 두 개 사용하도록 하자)

💻 결과

강조
강조
기울임
기울임
강조와 기울임
강조와 기울임
~~취소선~~

💡 여담이지만 마크다운(Markdown) 어플리케이션은 단어 중간의 _ 처리하는 방법을 지원하지 않으니 *를 사용할 것을 권장한다고 한다.

5. 인용구(Blockquotes)

인용구를 사용할 경우 문단 앞에 >를 추가한다.

✍ 작성 시

> 인용구를 사용하여 글을 쓸 경우 문단 앞에 '>'를 추가한다.
>
> 단락을 나눌 경우 빈 공간에 '>'를 입력하면 된다.
>
>> ### 인용구 내에서 인용구의 재사용, *강조* 또는 '제목'
>> 1. **리스트** 또한 사용 가능하다.
>> - 자유롭게 사용할 수 있는 점 기억해 두었으면 한다.

💻 결과

인용구를 사용하여 글을 쓸 경우 문단 앞에 '>'를 추가한다.

단락을 나눌 경우 빈 공간에 '>'를 입력하면 된다.

인용구 내에서 인용구의 재사용, '강조' 또는 '제목'

리스트 또한 사용 가능하다.

자유롭게 사용할 수 있는 점 기억해 두었으면 한다.

6. 목록(Lists)

목록은 순서가 있는 목록과 순서가 없는 목록으로 나뉜다.

1. 순서가 있는 목록

숫자 1과 .(온점)을 합한 것으로 시작하며 같은 형식의 순차적인 번호 표기로 나타낸다.
1.이후에 오는 숫자는 꼭 연속적일 필요는 없지만 처음은 1.로 시작하여야 한다.

✍ 작성 시

1. 첫 번째 목록
2. 두 번째 목록
3. 세 번째 목록
3. 네 번째 목록
2. 다섯 번째 목록

💻 결과

첫 번째 목록
두 번째 목록
세 번째 목록
네 번째 목록
다섯 번째 목록

2. 순서가 없는 목록

기호 -, + 그리고 *로 나타낸다.
' '공백 또는 Tab키를 통해 들여쓰기하여 목록에 요소를 추가할 수 있다.
(Velog에서는 첫 요소를 넣을 경우 Tab이 아닌 ' '공백을 사용해야 한다.)

✍ 작성 시

- 순서 없는 목록
    - 띄어쓰기(공백) 4번으로 들여쓰기 후 목록 내 요소 생성
    	- 요소 내에서 'Tab'을 이용한 들여쓰기 후 생성
- 순서 없는 목록
    > 첫 인용구를 요소로 넣을 경우 공백을 통한 들여쓰기가 필요
* 순서 없는 목록
    * '목록 내에서 한 줄 코드'표기가 가능하다.
+ 순서 없는 목록
        ' '공백 여덟 번 또는 'Tab'을 두 번 사용하여 목록 내에서 코드블럭을 만들 수 있다.
        하지만 Velog에서는 코드블럭과 목록 사이에 '1.한 칸의 빈 줄'을 넣어 구분해줘야 하고, 
        '2.공백을 사용한 들여쓰기' 조건에만 반응한다.

💻 결과

순서 없는 목록 1
- 띄어쓰기(공백) 4번으로 들여쓰기 후 목록 내 요소 생성
  - 요소 내에서 'Tab'을 이용한 들여쓰기 후 생성
순서 없는 목록 2

Velog에서 첫 인용구를 요소로 넣을 경우 공백을 통한 들여쓰기가 필요

순서 없는 목록 3
- 목록 내에서 한 줄 코드표기가 가능하다.

순서 없는 목록 4

  ' '공백 여덟 번 또는 'Tab'을 두 번 사용하여 목록 내에서 코드블럭을 만들 수 있다.
  하지만 Velog에서는 코드블럭과 목록 사이에 '1.한 칸의 빈 줄'을 넣어 구분해줘야 하고, 
  '2.공백을 사용한 들여쓰기' 조건에만 반응한다.

7. 코드(Code)

`백틱(Backticks) 키를 이용하여 코드 글을 작성할 수 있다.

✍ 작성 시

`백틱(Backtick)키는 'ESC'키 바로 밑에 그리고 숫자 '1'키 왼편에 붙어있다.`

💻 결과

백틱(Backtick)키는 'ESC'키 바로 밑에 그리고 숫자 '1'키 왼편에 붙어있다.
앞 뒤로 '`' 키를 두 번씩 사용하므로써 코드 안에 백틱 키를 표시할 수 있다.

8. 코드블럭(Code Blocks)

본래 마크다운(Markdown)에서는 공백 4개 또는 'Tab' 1개를 통해 들여쓰기하여 코드블럭을 생성할 수 있지만 다른 방법으로도 사용 가능하다.
` 또는 ~를 세 번 사용하여 문단의 시작과 끝에 표기하여 코드블럭을 사용할 수 있다.

✍ 작성 시

```
이러한 형식을 사용하여 코드블럭을 생성한다.
```

💻 결과

이러한 형식을 사용하여 코드블럭을 생성한다.

구문 강조(Syntax Highlighting)

Velog에 매료된 이유가 여기 코드블럭에 있다.
코드블럭의 시작에 사용 컴퓨터 언어를 입력하면 해당 언어 형식으로 변환해 준다.

✍ 작성 시

```python
import collections

l = [1,3,2,1,3,3,1]
count = 0
deq = collections.deque()

for i in l:
    deq.append(i)

while deq:
    num = deq.popleft()

    if num >= 2:
        count += 1

print(count)
```

💻 결과

import collections

l = [1,3,2,1,3,3,1]
count = 0
deq = collections.deque()

for i in l:
    deq.append(i)

while deq:
    num = deq.popleft()

    if num >= 2:
        count += 1

print(count)

9. 수평선(Horizontal Rules)

*** 또는 ---, ___를 사용하여 수평선을 생성할 수 있다.

✍ 작성 시

페이지의 끝

***
글 쓰기를 종료하거나 페이지를 나누고 싶을 때

---
수평선 사용할 때는 한 줄 띄워주고 사용하자.

____________________________

💻 결과

페이지의 끝

글 쓰기를 종료하거나 페이지를 나누고 싶을 때

수평선 사용할 때는 한 줄 띄워주고 사용하자.

10. 링크(Links)

괄호를 통해 링크를 생성할 수 있다.

✍ 작성 시

링크
[Velog](http://velog.io)

링크에 제목 추가하기
[Velog](http://velog.io "쉽고 간편한 글쓰기 Velog")

URL
<http://velog.io>

참조링크
[참조 한 링크 사용함][참조링크]
[참조링크]: http://velog.io

💻 결과

링크
Velog

링크에 제목 추가하기(링크 위에 커서를 두면 내용이 보인다)
Velog

URL
http://velog.io

참조링크
참조 한 링크 사용함

11. 이미지 링크(Images)

앞에 !를 붙여주면 이미지를 불러 붙이거나 링크할 수 있다.

✍ 작성 시

이미지 넣기
![A Sunday Afternoon on the island of La Grande Jatte.-Seurat](이미지 주소)

이미지 링크
[![A Sunday Afternoon on the island of La Grande Jatte.-Seurat]](이미지 URL)

💻 결과

이미지 넣기
A Sunday Afternoon on the island of La Grande Jatte.-Seurat

이미지 링크

12. 탈출문자(Escaping Characters)

텍스트 서식에 사용되는 문자나 기호들을 표현하고자 할 때는 \백슬래시(Backslash) 키를 이용한다.

✍ 작성 시

\* 백슬래시가 없으면 정렬되지 않은 목록의 글머리 기호가 된다.

💻 결과

* 백슬래시가 없으면 정렬되지 않은 목록의 글머리 기호가 된다.

13. HTML

마크다운(Markdown)에선 HTMl 태그 또한 이용할 수 있다.

✍ 작성 시

<strong>굵게</strong>
<h3>제목</h3>
<a href="http://velog.io">Velog</a><br>
<font color="red">red</font>
<br>
<span style="color:red">something *red*</span>

💻 결과

굵게

제목

Velog
red
something *red*

14. 표(Tables)

|파이프(Pipe)와 -를 사용하여 표를 만들 수 있다.
표 내에서 간단한 강조 등의 글자 서식을 정할 수 있다.

✍ 작성 시

|구문|설명|비고|
|:---|:---:|---:| # 좌측, 가운데, 우측 정렬
|**Header**|_Title_|1|
|`Paragraph`|Text|2|

💻 결과

구문	설명	비고
Header	Title	1
`Paragraph`	Text	2

15. 작업 목록(Task Lists)

- 뒤에 [ ] 빈 공간을 가진 대괄호를 사용하여 나타낸다.
박스에 체크하고 싶다면 [x] 빈 공간 대신 x키를 입력하면 된다.

✍ 작성 시

- [x] 회의록 작성하기
- [x] 상품샘플 받아오기
- [ ] 보고서 작성하기

💻 결과

회의록 작성하기
상품샘플 받아오기
보고서 작성하기

16. 이모티콘(Emoji)

이모티콘은 그림 이모티콘을 복사하여 붙여넣거나 단축 코드를 사용하여 나타낸다.
Velog 글쓰기에선 단축 코드를 지원하지 않는 것 같다. 하지만 단축키를 통해 이모티콘을 사용할 수 있다.

💡 이모티콘 사이트
https://emojipedia.org/
https://getemoji.com/

💡 단축키
Windows 10 : Window + '.'(마침표)
Mac : Command + Control + Space Bar

이렇게 Velog 글을 쓰기 위한 마크다운 작성법에 대해 알아봤다. 마크다운은 각 웹이나 어플리케이션마다 지원하는 기능에 간소한 차이가 있는데, Velog 또한 적용하기 어렵거나 지원하지 않는 기능들이 더러 있었다. 그리고 생각보다 기능이 많아 글쓰기 페이지의 첫인상과 괴리가 있었지만, 할 수 있는게 늘어나면서 상당한 재미를 느낄 수 있었다.