:: Dev/Etc

Markdown: 아름다운 문서를 쉽고 빠르게.

jETA 2019. 10. 7. 10:00
반응형

문서를 작성하는 것은 생각보다 시간이 드는 일입니다.

내용을 정리하고, 구조화하고, 문장을 쓰고, 서식도 다듬어줘야죠.

 

하지만 Markdown(마크다운) 문법을 활용하면 이 과정을 상당히 간소화 할 수 있습니다.

글의 구조를 짜고, 문장으로 써내리기만 하면 됩니다.

 

이번 글에서는 Markdown의 특징과 문법을 공유합니다.

 

Markdown?

Markdown을 소개하기에 앞서 먼저 Markup(마크업)을 이야기해볼까 합니다.

개발을 간단히라도 배웠던 사람이라면 HTML 문법을 배우셨을겁니다.

HTML은 대표적인 Markup언어입니다.

왜 Markup이라고 하는지는 문법을 보면 이해할 수 있습니다.

<html>
    <head>
        <title>Hello, World!</title>
    </head>
    <body>
        <!-- <mark>내용</mark> -->
        <h1>Hello, World!</h1>
    </body>
</html>

위 문법과 같이 내용이 Mark로 둘러싸인 형태를 가지고 있기 때문입니다.

 

Markdown은 이름에서부터 알 수 있듯이 Markup 문법과 반대되는 특징을 가지고 있습니다.

먼저 아래 예제는 Naver SmartEditor의 readme.md 파일의 일부입니다.

# SmartEditor2

## Overview
SmartEdtitor™ 는 JavaScript로 구현된 웹 기반의 WYSIWYG 편집기입니다.

WYSIWYG 모드 및 HTML 편집 모드와 TEXT 모드를 제공하고, 자유로운 폰트 크기 설정 기능, 줄 간격 설정 기능, 단어 찾기/바꾸기 기능 등 편집에 필요한 다양한 기능을 제공하므로 사용자들은 SmartEdtitor™를 사용하여 쉽고 편리하게 원하는 형태의 글을 작성할 수 있습니다.

또한, SmartEdtitor™의 구조는 기능을 쉽게 추가할 수 있는 플러그인 구조로 되어 있어 정해진 규칙에 따라 플러그인을 만들기만 하면 됩니다.

## User Guide
사용자 가이드에서는 SmartEditor2 의 특징과 기능을 소개합니다.

또한, 설치 방법과 기능의 추가/삭제 방법도 알 수 있습니다.

 * [사용자 가이드](http://naver.github.io/smarteditor2/user_guide/)

## Demo
아래 데모페이지 에서는 SmartEditor2.0 이 제공하는 다양한 기능을 바로 체험해 볼 수 있습니다.
 * [SmartEditor2 Demo 바로가기](http://naver.github.io/smarteditor2/demo/)

위 예제에서 볼 수 있듯이 태그로 둘러싸이지 않고 몇 가지 기호를 사용해서 작성합니다.

 

Markdown의 서식을 찬찬히 살펴보면 우리가 일상적으로 사용하는 기호와 비슷하다는 것을 알 수 있습니다.

제목에 붙이는 #이나 목록에 붙이는 * 등이 그렇죠.

때문에 Markdown 문법을 모르는 사람이 봐도 어느 정도 이해할 수 있고, 배우기도 쉽습니다.

 

활용되는 곳

Markdown 문법은 상당히 많은 곳에서 사용되고 있습니다. 아래는 그 중 대표적으로 사용되는 경우입니다.

  • README.md
    GitHub에 공유되는 코드나, 많은 소프트웨어의 README 파일이 Markdown 문법으로 작성됩니다.
  • 메모
    최근 출시되는 메모 App들은 빠른 작성을 위해 Markdown 문법을 지원하고 있습니다.
  • 게시물 작성
    Tistory나 Jekyll, Atlassian Confluence 등 여러 사이트의 에디터가 Markdown 문법을 지원하고 있습니다.

 

대표적인 문법

XML과 같은 Markup 문법도 그렇지만 Markdown도 정해진 규칙은 없습니다.

하지만 대표적인 문법들은 대부분의 편집기에서 공통적으로 이용됩니다.

아래는 이러한 문법들입니다.

 

 

문단 나누기

첫 번째 문단

두 번째 문단

이전 문단과 다음 문단 사이에 한 줄을 비우면 문단이 나누어집니다.

 

행 넘기기

첫 번째 문단, 첫 번째 문장  
첫 번째 문단, 두 번째 문장

두 번째 문단, 첫 번째 문장

기본적으로 한 문단 안에서의 개행문자는 무시됩니다.

때문에 다음 행으로 넘기고 싶다면 빈 칸 두 개를 입력한 후 다음 행으로 넘기면 한 문단 안에서 행넘김을 할 수 있습니다.

 

제목

# 제목1
## 제목2
### 제목3
#### 제목4
##### 제목5
###### 제목6

제목의 수준만큼 #을 입력합니다. 보통 6번째까지 지원합니다.

 

간단한 서식

**굵게**  
*기울이기*  
~~취소선~~

이건 ~~아마도~~ **진짜** 간단한 문법입니다.  
*- jETA*

서식을 지정할 시작 지점부터 끝 지점까지 서식 문자를 입력합니다. 문장 중간에 입력하는 것도 가능합니다.

 

수평선

---
- - -
***
* * *

문서 중간에 수평선을 입력하려면 간단히 ---를 입력합니다. 물론 몇 가지 다른 형태도 있으니 선호하는 방식을 써도 무관합니다.

 

목록

1. 1이 나옵니다.
2. 2가 나옵니다.
3. 3이 나옵니다.
3. 4가 나옵니다.

* 사과
* 배
* 감
* 귤

순서 있는 목록은 1. 2. 3. 등을 앞에 입력합니다. 이 때, 1. 1. 1.과 같이 입력해도 숫자는 올바르게 출력됩니다.

순서 없는 목록은 *를 앞에 입력하면 됩니다.

 

인용

답장

> 메일 1  
> 메일 1  
>
>> 메일 2  
>> 메일 2  
>>
>>> 메일 3  
>>> 메일 3  
>>>
>>>> 메일 4  
>>>> 메일 4 
>>>>

인용할 문단 앞에 >를 입력합니다. 만약 이메일처럼 다중 인용이 필요하다면 필요한만큼 >를 추가로 입력하면 됩니다.

 

링크

제 블로그는 [이 곳](https://jetalog.net)을 눌러 이동하실 수 있습니다.

[]괄호 안에 표시될 문구를, ()괄호 안에 연결될 페이지 주소를 입력하면 링크를 생성할 수 있습니다.

 

코드

Markdown 문법으로 HTML `<strong></strong>`과 같은 효과를 내려면 아래와 같이 작성합니다.

```
강조하려는 내용에 *이렇게* 표현해주세요.
```

문장 안에 코드를 강조하는 경우 ` 한 개를, 여러 줄에 걸쳐서 코드를 강조하는 경우에는 ``` 세 개를 써서 감싸줍니다.

 

활용 App

Markdown 문법은 지금 바로 써볼 수 있습니다.

 

Web

  • Tistory: 에디터에 마크다운 모드가 있습니다.
  • Editor.md: 실시간 미리보기를 지원하며, WYSIWYG 에디터를 통해 문법을 자동으로 입력해줍니다.
  • Jekyll: Markdown 문법으로 포스팅합니다.
  • StackEdit: WebApp 형태입니다. Google Drive, Dropbox 등의 클라우드 동기화를 지원합니다.

 

Windows

  • HarooPad: 대표적인 Markdown 에디터입니다. 다양한 테마와 확장 문법을 지원합니다.
  • MarkdownPad: 기본에 충실한 Markdown 에디터입니다.

 

MacOS

  • Writed: 상당히 깔끔한 테마를 지원합니다.
  • Bear: Markdown을 활용한 메모 App입니다. iOS용 App과의 동기화를 지원합니다.

 

참고 문서

[별별 웹 용어] 마크업(MarkUp)? 마크다운(MarkDown)?: https://blog.cordelia273.space/15

마크다운 - 위키백과, 우리 모두의 백과사전: https://ko.wikipedia.org/wiki/마크다운

마크다운 사용법  · GitHub: https://gist.github.com/ihoneymon/652be052a0727ad59601

반응형