마크다운(markdown): 역사부터 실전 예시와 Typora까지

마크다운 파일 예시

1. 마크다운의 탄생: "읽기 위해 쓴다"

📜 역사와 에피소드

마크다운은 2004년, UI 전문가 존 그루버(John Gruber)와 천재 프로그래머 아론 스워츠(Aaron Swartz)가 공동으로 제작했다.

당시 웹에 글을 올리려면 복잡한 HTML 태그(<h1>, <p>, <ul> 등)를 일일이 입력해야 했다. 존 그루버는 "글을 쓰는 과정 자체가 즐거워야 하며, 서식이 적용되지 않은 원문 상태에서도 충분히 읽기 좋아야 한다"는 철학을 가지고 마크다운을 설계했다.

 

마크다운의 핵심 기호들은 사실 새로운 창조물이 아니다. 아주 오래전, 그래픽 인터페이스가 없던 시절에 사람들이 이메일을 쓸 때 강조하고 싶은 단어에 *별표*를 치거나 제목 밑에 ===를 그어 표시하던 습관을 그대로 문법화한 것이다. 즉, 사람의 직관을 컴퓨터 언어로 옮겨온 것이다.

---

2. 마크다운 실전 예시 (종합편)

역사적인 철학을 담아 작성하면 이런 모습이 된다.

입력 (Raw Text)

Markdown

 

# 마크다운의 철학

마크다운은 **단순함**을 지향합니다.

### 주요 특징
1. 쓰기 쉽다.
2. 읽기 편하다.

---
*참고: 이 문서는 마크다운으로 작성되었습니다.*

출력 (Rendered)

마크다운의 철학

마크다운은 단순함을 지향합니다.

주요 특징

1. 쓰기 쉽다.
2. 읽기 편하다.

---

참고: 이 문서는 마크다운으로 작성되었습니다.

---

3. 궁극의 편집기: Typora (타이포라)

마크다운을 지원하는 수많은 툴 중에서도 Typora는 전문가들이 가장 선호하는 소프트웨어 중 하나이다.

✨ 왜 Typora인가?

대부분의 편집기는 왼쪽에는 '코드(Raw)', 오른쪽에는 '결과물(Preview)'을 보여주는 2분할 방식을 사용한다. 하지만 Typora는 실시간 미리보기(Live Preview) 방식을 채택했다.

1. Seamless Experience (심리스 환경): # 제목이라고 입력하고 엔터를 치는 순간, 그 자리에서 즉시 제목 서식이 적용된 커다란 글자로 변한다. 코드를 쓰는 동시에 최종 결과물을 보게 된다.
2. 강력한 표(Table) 편집: 마크다운에서 가장 까다로운 것이 '표' 만들기인데, Typora는 엑셀처럼 직관적으로 셀을 추가하고 편집할 수 있는 인터페이스를 제공한다.
3. 수식 및 다이어그램 지원: 수학 공식($\LaTeX$)이나 워크플로우 차트를 그리는 기능이 탁월하여 논문이나 기술 블로그를 작성하는 사람들에게 필수적이다.
4. 깔끔한 디자인: 글쓰기 본연에만 집중할 수 있도록 극도로 미니멀한 UI를 제공하며, 다양한 테마를 통해 눈이 편한 환경을 만들 수 있다.

---

4. 요약 및 제언

마크다운은 "형식에 얽매이지 않고 생각의 흐름을 기록하는 도구"이다. 처음에는 #이나 **을 치는 것이 낯설 수 있지만, 익숙해지면 마우스를 찾는 시간이 아까워질 정도로 놀라운 생산성을 경험하게 될 거다. 

 

5. 주요 문법과 예시

① 제목 (Headings)

#의 개수로 수준을 조절한다. HTML의 <h1>부터 <h6>에 해당한다.

입력: # 가장 큰 제목 ## 중간 제목 ### 소제목

② 텍스트 강조 (Emphasis)

글자에 스타일을 입힐 때 사용한다.

• 굵게: **텍스트** → 텍스트
• 기울임: *텍스트* → 텍스트
• ~~취소선~~: ~~텍스트~~ → ~~텍스트~~

③ 목록 (Lists)

순서가 있는 목록과 없는 목록을 지원한다.

순서 없는 목록: * 또는 - 사용

• 사과
• 바나나

순서 있는 목록: 숫자를 사용 (자동으로 순서가 매겨집니다)

1. 첫 번째 단계
2. 두 번째 단계

④ 인용구와 코드 (Quotes & Code)

특정 문장을 강조하거나 코드를 넣을 때 사용한다.

• 인용구: >를 문장 앞에 붙인다.
• "좋은 글은 쓰기 쉬운 글에서 시작됩니다."
• 코드 블록: 백틱(backtick, `)을 사용합니다.
  • 인라인 코드: `print("Hello")`
  • 블록 코드: ```으로 감싸기

⑤ 링크와 이미지 (Links & Images)

가장 헷갈리기 쉽지만 규칙만 알면 간단하다.

• 링크: [표시할 이름](URL 주소)
  • 예: 구글로 가기
• 이미지: