markdown 작성팀과 트릭

Image credit: WeGraphics

markdown • jekyll • 블로그 • 작성팁 • blogging

markdown 작성팀과 트릭

Markdown 작성 팁과 트릭: 블로그 글을 더 멋지게 만드는 방법

블로그를 시작했다면 콘텐츠를 어떻게 예쁘게 꾸밀지 고민하게 됩니다. Jekyll 블로그에서는 ‘Markdown’이라는 간단한 문법을 사용해 글을 작성합니다. 복잡한 HTML 코드를 배우지 않아도 멋진 글을 작성할 수 있어요. 이 글에서는 Markdown의 기본부터 활용 팁까지 알아보겠습니다.

Markdown이란 무엇인가?

Markdown은 일반 텍스트에 몇 가지 특수 문자를 추가해서 서식을 지정하는 방식입니다. 예를 들어, 별표를 사용해 글자를 굵게 만들거나, 해시태그(#)로 제목을 만들 수 있습니다. 간단한 문법으로 글의 구조를 명확하게 표현할 수 있다는 장점이 있습니다.

기본 문법 살펴보기

1. 제목 만들기

제목은 ‘#’ 기호를 사용해 만듭니다. ‘#’의 개수에 따라 제목의 크기가 달라집니다.

# 이것은 가장 큰 제목 (H1)
## 이것은 두 번째로 큰 제목 (H2)
### 이것은 세 번째로 큰 제목 (H3)
#### 이것은 네 번째로 큰 제목 (H4)
##### 이것은 다섯 번째로 큰 제목 (H5)
###### 이것은 여섯 번째로 큰 제목 (H6)

위 코드는 아래와 같이 표시됩니다:

이것은 가장 큰 제목 (H1)

이것은 두 번째로 큰 제목 (H2)

이것은 세 번째로 큰 제목 (H3)

팁: 블로그 글에서는 보통 제목(H1)은 한 개만 사용하고, 소제목으로 H2, H3를 사용하는 것이 좋습니다.

2. 텍스트 강조하기

글자를 강조하는 방법은 여러 가지가 있습니다:

*이탤릭체(기울임꼴)*
_이것도 이탤릭체입니다_

**굵은 글씨**
__이것도 굵은 글씨입니다__

***굵은 이탤릭체***
___이것도 굵은 이탤릭체입니다___

~~취소선~~

위 코드는 아래와 같이 표시됩니다:

이탤릭체(기울임꼴) 굵은 글씨 굵은 이탤릭체 취소선

3. 목록 만들기

순서가 있는 목록과 순서가 없는 목록 모두 만들 수 있습니다.

순서가 없는 목록은 *, -, + 중 아무 기호나 사용할 수 있습니다:

* 사과
* 바나나
* 오렌지

- 빨강
- 파랑
- 초록

+ 하나
+ 둘
+ 셋

위 코드는 아래와 같이 표시됩니다:

  • 사과
  • 바나나
  • 오렌지

순서가 있는 목록은 숫자와 점을 사용합니다:

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

위 코드는 아래와 같이 표시됩니다:

  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목

팁: 순서가 있는 목록에서는 실제로 숫자의 순서가 중요하지 않습니다. 모두 1로 시작해도 자동으로 순서대로 표시됩니다.

4. 링크 추가하기

다른 웹사이트나 페이지로 연결되는 링크를 만들 수 있습니다:

[구글 바로가기](https://www.google.com)
[내 블로그의 다른 글](/blog/다시-시작하면서/)

위 코드는 아래와 같이 표시됩니다:

구글 바로가기 내 블로그의 다른 글

5. 이미지 삽입하기

이미지는 링크와 비슷하지만 앞에 느낌표(!)가 붙습니다:

![대체 텍스트](/images/사진.jpg)
![고양이 사진](https://example.com/cat.jpg)

팁: ‘대체 텍스트’는 이미지가 로드되지 않을 때 표시되는 텍스트입니다. 시각 장애가 있는 사용자의 스크린 리더를 위해서도 중요합니다.

6. 인용문 작성하기

다른 사람의 말이나 문장을 인용할 때는 ‘>’ 기호를 사용합니다:

> 이것은 인용문입니다.
> 여러 줄에 걸쳐 작성할 수 있습니다.
>
> 빈 줄을 넣어 단락을 구분할 수도 있습니다.

위 코드는 아래와 같이 표시됩니다:

이것은 인용문입니다. 여러 줄에 걸쳐 작성할 수 있습니다.

빈 줄을 넣어 단락을 구분할 수도 있습니다.

7. 코드 블록 만들기

프로그래밍 코드나 명령어를 표시할 때는 백틱(`) 세 개로 코드 블록을 만듭니다:

```
function hello() {
  console.log("안녕하세요!");
}
```

위 코드는 아래와 같이 표시됩니다:

function hello() {
  console.log("안녕하세요!");
}

특정 프로그래밍 언어를 지정하면 문법 강조(syntax highlighting)가 적용됩니다:

```python
def hello():
  print("안녕하세요!")
```

8. 수평선 넣기

글의 섹션을 구분할 때 수평선을 사용할 수 있습니다. 하이픈(-), 별표(*), 밑줄(_) 중 하나를 3개 이상 연속해서 사용합니다:

---
***
___

위 코드는 모두 아래와 같은 수평선으로 표시됩니다:

9. 표 만들기

열과 행으로 구성된 표를 만들 수 있습니다:

| 이름 | 나이 | 직업 |
|-----|-----|-----|
| 홍길동 | 30 | 개발자 |
| 김철수 | 25 | 디자이너 |
| 이영희 | 28 | 마케터 |

위 코드는 아래와 같이 표시됩니다:

이름 나이 직업
홍길동 30 개발자
김철수 25 디자이너
이영희 28 마케터

팁: 콜론(:)을 사용해 열의 정렬 방식을 지정할 수 있습니다:

| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|:--------|:----------:|----------:|
| 텍스트   | 텍스트     | 텍스트     |

Markdown 작성 팁

1. 줄바꿈 하기

Markdown에서 엔터를 한 번 치는 것은 줄바꿈으로 인식되지 않습니다. 줄바꿈을 하려면:

  • 문장 끝에 스페이스를 두 번 입력한 후 엔터를 치거나
  • 엔터를 두 번 쳐서 새로운 단락을 만듭니다.
이것은 첫 번째 줄입니다.  (여기에 스페이스 두 개)
이것은 두 번째 줄입니다.

이것은 새로운 단락입니다.

2. 체크리스트 만들기

할 일 목록이나 체크리스트는 다음과 같이 만듭니다:

- [x] 완료된 항목
- [ ] 아직 완료되지 않은 항목
- [ ] 또 다른 항목

위 코드는 아래와 같이 표시됩니다:

  • 완료된 항목
  • 아직 완료되지 않은 항목
  • 또 다른 항목

3. 각주 추가하기

글에 참고 자료나 추가 설명을 넣고 싶을 때 각주를 사용할 수 있습니다:

여기에 각주가 필요한 문장[^1]이 있습니다.

[^1]: 이것은 각주의 내용입니다.

4. 이스케이프 문자 사용하기

Markdown 문법에 사용되는 특수 문자를 그대로 표시하고 싶을 때는 역슬래시()를 앞에 붙입니다:

\*이것은 이탤릭체가 아닙니다\*

위 코드는 아래와 같이 표시됩니다:

*이것은 이탤릭체가 아닙니다*

Jekyll 블로그에서 알아두면 좋은 추가 기능

1. 헤더 이미지 추가하기

블로그 글 상단에 멋진 이미지를 넣고 싶다면 Front Matter(글 맨 앞의 — 사이에 있는 메타데이터)에 다음과 같이 추가합니다:

---
layout: post
title: "글 제목"
date: 2025-03-09
categories: blog
image: /assets/images/header-image.jpg
---

2. 목차 자동 생성하기

긴 글에서는 목차가 있으면 독자가 원하는 부분으로 빠르게 이동할 수 있습니다. Jekyll에서는 다음과 같이 목차를 자동으로 생성할 수 있습니다:

---
layout: post
title: "긴 글 제목"
date: 2025-03-09
toc: true
---

이 설정은 테마에 따라 다를 수 있으므로 테마 문서를 확인해보세요.

3. 코드 블록에 줄 번호 추가하기

일부 Jekyll 테마에서는 코드 블록에 줄 번호를 추가할 수 있습니다:

```ruby
# 줄 번호가 표시되는 코드 블록
def hello
  puts "안녕하세요!"
end
```
{: .line-numbers}

Markdown 편집기 추천

Markdown을 더 쉽게 작성하려면 전용 편집기를 사용하는 것이 좋습니다:

  1. Visual Studio Code - 무료이며 Markdown 미리보기 기능과 다양한 확장 프로그램을 제공합니다.
  2. Typora - 실시간으로 Markdown을 렌더링해서 보여주는 직관적인 편집기입니다.
  3. StackEdit - 브라우저에서 바로 사용할 수 있는 온라인 Markdown 편집기입니다.
  4. iA Writer - 맥과 iOS에서 사용할 수 있는 심플하고 집중에 도움이 되는 편집기입니다.

마치며

Markdown은 배우기 쉽지만 강력한 문서 작성 도구입니다. 이 기본 문법만 알아도 블로그에 멋진 글을 작성할 수 있습니다. 처음에는 어색할 수 있지만, 조금만 사용해보면 HTML보다 훨씬 빠르고 직관적으로 글을 작성할 수 있다는 것을 느끼게 될 것입니다.

Markdown으로 글을 작성할 때는 내용에 집중하고, 나중에 서식을 추가하는 방식으로 작업하면 효율적입니다. 글을 다 작성한 후에 제목, 강조, 링크 등을 추가해보세요.