1. 마크다운(Markdown) 소개
마크다운(Markdown)은 일종의 마크업 언어로 텍스트에 태그를 이용해서 글자를 굵게하거나, 이미지를 삽입하거나 하는 일이 가능하다. 엔하위키에 글을 쓸 때 위키 언어를 이용해서 글을 써야하는데, 마크다운 언어는 그 위키 언어와 상당히 유사하다고 할 수 있다. 하지만 마크다운은 위키문법보다 훨씬 더 간단하므로 익히는데 그리 긴 시간이 필요하지 않다는 장점을 가지고 있다.
요즘 마크다운은 아주 여러 곳에서 사용되고 있다. 이제 워드프레스에서는 기본적으로 마크다운을 지원하기 시작했고1, Tumblr나 Ghost와 같은 블로그 플랫폼에서도 마크다운 언어를 기본적으로 지원하고 있다. 또한 모니위키의 최신 개발 버전에서는 마크다운 언어와 모니위키 언어를 동시에 지원하도록 하고 있고 이후에 마크다운과 모니위키 언어를 함께 쓸 수 있도록 하는 것이 기본 설정이 될 예정이다. 만약 모니위키의 최신 버전이 엔하위키에도 적용된다면 엔하위키에 글을 쓸 때도 마크다운 언어로 글을 쓸 수 있게 될 것이다. 그리고 심지어는 그누보드나 XE에도 마크다운을 쓸 수 있는 플러그인이 있어서 그 플러그인을 설치하면 그누보드나 XE에서 글을 쓸 때, 마크다운을 이용하는 것이 가능하다.
이 글에서는 마크다운(Markdown)에 대한 간단한 소개를 해보고자 한다. 자세한 설명을 하게되면 글이 너무 길어질 수 있고, 이미 마크다운에 대해서 훌륭하게 정리해놓은 글들이 많아서 링크 위주의 글로 작성하려한다.
2. 마크다운의 장·단점
2.1 마크다운의 장점
- 읽기 쉽다.
마크다운은 다른 마크업 언어에 비해 훨씬 알아보기 쉽다. 제목은 앞에 #을 붙여주면 되고, 글자를 강조하려면 글자 주위를 **으로 감싸주면 된다. HTML로 글을 쓸 때는, 그 글이 실제로 브라우저에 어떻게 보여질지 상상하는 것이 꽤 어려운 일이었다면 마크다운으로 쓴 텍스트는, 텍스트만으로 그 글이 브라우저에서 어떻게 보여질지 쉽게 상상할 수 있다. - 익히기 쉽다
마크다운은 상당히 간단하다. John Gruber가 처음에 마크다운을 만들었을 때, 사람들이 가장 많이 사용하는 기능만을 마크다운으로 쓰고, 복잡한 것은 HTML로 쓰도록 디자인했기 때문이다. 그래서 비록 몇가지 제한이 있기는 하지만 마크다운으로 글을 쓸 때, 중간에 HTML을 그대로 써도 상관 없다. - 모바일 친화적이다
요즘 모바일을 통해서 글을 쓰고 올리는 경우가 상당히 많아졌다. 그런데, 모바일로 서식이 들어간 글을 쓰는 것은 상당히 불편하다. 특히 모바일에서는 위지윅 에디터가 제대로 작동하지 않는 경우도 있고, 작동하더라도 작은 화면때문에 위지윅 에디터를 통해서 글을 작성하는 것이 상당히 불편한 경우가 많다. 하지만 마크다운을 이용해서 글을 쓰면 간단한 태그만으로 쉽게 서식을 넣을 수 있어서, 위지윅 에디터를 사용하는 것보다는 훨씬 편리하다.
2.2 마크다운의 단점
- 문법이 너무 단순하다
문법이 너무 단순해서 그 기능을 벗어나려고 할 때는 결국 HTML을 써야하는 경우가 생긴다. 예를들어 마크다운에는 이미지를 정렬하는 문법이 없다. 따라서 이미지를 정렬하려면 HTML의 img 태그를 써야한다. 또한 태그에 클래스 지정등이 불가능하기 때문에, 클래스나 id를 지정하려면 역시 HTML을 써야한다. - 확장 문법이 많다
이것은 첫번째 단점때문에 발생한 문제라고 볼 수 있다. 문법이 너무 단순하기 때문에 그 불편함을 해소하기 위해서 여러가지 확장문법들이 생기기 시작했고, 그런 파편화 때문에 한 곳에서 잘 작동하는 마크다운 문서가 다른 곳에서는 잘 작동하지 않는 현상이 생기기도 한다. - 멀티미디어 삽입이 불편하다
개인적으로 마크다운의 가장 큰 단점이라고 생각한다. 위지윅 에디터에서 이미지를 삽입할 때는, 보통 이미지 업로드 버튼을 이용해서 이미지를 삽입한다. 하지만 마크다운은 그저 텍스트만 입력 가능하기 때문에, 이미지를 삽입하는 것과 이미지를 업로드하고, 그 주소를 따오는 과정들이 모두 분리되어 있다. 그래서 마크다운을 이용해서 블로그의 글을 작성할 때 가장 불편한 것이 바로 이미지를 삽입할 때이다. 하지만 유튜브등의 외부동영상을 삽입할 때는 위지윅 에디터를 쓰는 것과 크게 다르지 않다. 소스를 그냥 붙여넣으면 잘 작동한다.
3. 마크다운 문법
3.1 마크다운 문법 설명 링크 모음
- 공식 사이트 문법 설명 (영문)
- 한국어로 된 마크다운 문법 설명
3.2 마크다운 문법 간단 소개
마크다운은 John Gruber가 처음에 마크다운 언어를 만든 이후 거의 바뀌지 않았다. 그래서 사람들이 불편하게 생각하는 부분들을 보완한 여러가지 마크다운 언어가 만들어졌다. 대표적으로 가장 많이 쓰이는 것은 Markdown Extra와 Multimarkdown 그리고 Github Flavored Markdown 정도다. 여기선 그런 파생문법은 제외하고 가장 기본적인 마크다운 문법을 아주 간단하게만 소개해보려 한다.
- 제목
# 텍스트
#을 하나 쓰면 HTML의<h1>태그를, #을 두개 쓰면<h2>태그를 의미한다. 즉, #은 하나에서 여섯개까지 쓸 수 있고, #이 늘어날때마다 제목의 수준은 내려간다.(보통 글씨 크기가 작아진다.) - 번호 없는 리스트
-/+/* 텍스트 - 번호 있는 리스트
숫자. 리스트 - 기울인 글씨 (html의
<em>태그)*텍스트* or _텍스트_ - 굵은 글씨 (html의
<strong>태그)**텍스트** or __텍스트__ - 인용
> 텍스트
인용문안에 인용문을 넣으려면>를 더 추가해주면 된다. - 인라인 링크
[텍스트](링크주소) - 참조 링크
[텍스트][참조명][참조명]: 링크주소 - 이미지
 - 수평선
-, *, _을 세개 이상 나열 - 코드
\`코드 내용\` - 코드 블럭
앞에 스페이스 4개 이상 삽입
4. 마크다운 활용 앱 소개2
4.1 PC
좀 더 자세한 내용은 PC용 마크다운 에디터 4종 비교(StackEdit, MarkdownPad2, WriteMonkey, Haroopad)에서 확인할 수 있다.
- MarkdownPad2:
- WriteMonkey:
- 무료. 하지만 플러그인을 사용하려면 기부를 해야함.
- 글쓰기 전문 프로그램. 마크다운은 부가기능 정도. 따라서 이미지등의 삽입이 많아서 꼭 Live Preview를 보면서 글을 써야하는 상황이 아니라면 다른 에디터보다 더 편할 수 있다.
- 실시간 미리보기 기능이 없어서, 브라우저로 내보내기 기능을 통해서 프리뷰를 확인해야 하는 것이 좀 불편함
- 기본 설정에서 한글 입력 문제가 있기 때문에 설정 조정 필요. 다음 링크 참조
WriteMonkey 리뷰 01. 프로그램 설치와 필수 설정 – 서울비 블로그
- Haroopad:
- 무료
- 아직 베타 버전이기 때문에 불안정한 면이 보이고, 세부적인 부분에서는 부족한 부분도 있음. 하지만 개발자가 상당한 열정을 가지고 있어서 개발속도가 빠르고, 개발자가 한국인이기 때문에 피드백하기도 편하다는 것은 장점.
- 실시간 미리보기 기능 제공
- 윈도우즈, 맥, 리눅스 지원
- 하루패드는 하루패드만의 확장 문법이 있는데, 이 문법들은 하루패드에서만 적용되므로 개인적으로 사용하지 않는 것을 추천함
4.2 맥(Mac)
맥에는 마크다운을 지원하는 에디터가 상당히 많다. 하지만 난 맥을 쓰지 않기 때문에, 여기서는 프로그램의 링크만 제공한다.
- Mou
- 무료
- 실시간 미리보기 기능 제공
- Custom CSS 기능제공
- Scriptogram과 Tumblr에 원격으로 글을 올릴 수 있음
- LightPaper
- 무료
- 실시간 미리보기 기능 제공
- Custom CSS 기능제공
- Scriptogram과 Tumblr에 원격으로 글을 올릴 수 있음
- Ulysses III
- 유료($44.99)
- 상세리뷰: 추천 마크다운 에디터 율리시스(Ulysses III) 간단 리뷰 | Onasaju 블로그
- 사용법: Reinia.net의 Ulysses III 설명 포스팅
- Byword for Mac
- 유료($9.99)
- 실시간 미리보기 기능 없음
- 상세리뷰: Byword 리뷰 | 생산성 아카이브
4.3 안드로이드
- MarkDrop
- 무료
- 아주 낮은 버전의 안드로이드에서도 잘 작동됨
- 마크다운 툴바4
- 드롭박스 동기화(폴더 하나만 동기화 가능)
- txt 확장자의 파일은 편집 불가. 마크다운 파일만 편집 가능
- Draft
- JotterPad X
- 무료, 유료($4.5). 유료기능은 인앱 결제를 통해 활성화 가능. 마크다운 기능은 유료 버전에서만 지원함
- 드롭박스 동기화
- 마크다운 툴바4
- 태블릿 UI 지원
- 마크다운 프리뷰 기능(메뉴를 누르면 프리뷰가 보임)
- HTML, PDF Export 기능
- 버전 관리
- 블루투스 키보드 사용시 단축키 지원
- Lightpaper Pro
- 유료($1.99)
- 드롭박스 동기화
- 마크다운 툴바4. 다른 앱에서 제공하는 툴바보다 사용이 편리함
- 태블릿 UI 지원
- 마크다운 프리뷰 기능(메뉴를 누르면 프리뷰가 보임)
- 블루투스 키보드 사용시 단축키 지원
- Writer
- 무료
- 마크다운 프리뷰 기능을 따로 제공하지 않고, 마크다운 태그를 입력하면 입력창에서 모양이 바뀜. 하지만 한글에서는 굵은 글씨가 제대로 표현되지 않음
- Minutes Text Notes + Sync
4.4 iOS
iOS 역시 쓰고 있지 않아서 링크만 제공한다. 아래 앱들에 대한 자세한 리뷰는 다음 링크에서 확인할 수 있다.(현재 아래 링크의 블로그는 블로그를 이전하면서 이전 글을 모두 지운 상태이다. 그래서 아래 앱들을 소개하는 좋은 글을 찾아보고 그 글을 새로 링크할 예정이다.)
Markdown 문법 배워서 활용하기 – 마크다운 활용하기
- Drafts
- Drafts for iPhone
- Drafts for iPhone
- 유료(iPhone: $2.99, iPad:$3.99)
- Byword for iOS
- 유료($4.99) 아이폰과 아이패드에서 함께 사용가능
- Write for Dropbox
- Daedalus Touch
- 유료(각각 $0.99)
4.5 Web
- StackEdit:
크롬앱으로도 제공되어서 편하게 쓸 수 있다. 기본적으로 로컬상에 데이터를 저장하지만, 드롭박스와 구글드라이브와 동기화가 가능하므로, 여러 곳에서 같은 문서를 편집하는 것도 가능하다. 물론 로컬상에 데이터를 저장하기 때문에 다른 인터넷 연결이 없이도 문서의 편집이 가능하다.
StackEdit는 다른 프로그램들이 가지고 있지 않은 장점이 두가지 있다. 첫번째는 구글플러스 포토에서 이미지를 불러올 수 있다는 것이고, 두번째는 블로거, 텀블러, 워드프레스등에 원격 포스팅하는 것이 가능하다는 것이다. 이런 기능이 필요하다면 StackEdit를 사용하는 것이 좋을 것이다. - Hashify:
마크다운으로 글을 쓰고 공유할 때 아주 편리하게 쓸 수 있는 에디터이다. 다른 에디터들은 로컬에 있는 문서를 편집하지만, Hashify는 온라인상에서 글을 쓰고 바로 공유하는 것에 중점을 두고 있다. Hashify로 글을 쓰고 저장하면 바로 단축URL이 생성되고, 버튼을 통해 트위터에 트윗하는 것이 가능하다. 단축URL 링크로 접속하면, 작성한 글을 수정할 수도 있는데, Hashify는 글을 수정할 때마다 단축URL을 바꾸기 때문에 원본이 사라질 것을 걱정하지는 않아도 된다. - Markdown Here:
Markdown Here은 브라우저 확장 프로그램으로, 웹상에서 위지윅 에디터 대신 마크다운으로 글을 쓸 수 있도록 해준다. 거의 모든 브라우저를 지원하므로, 링크로 들어가서 자신이 쓰는 브라우저에 맞는 확장 프로그램을 설치하면 사용할 수 있다. 사용방법도 간단하다. 위지윅 에디터에서 마크다운으로 글을 작성한 후에, 마우스 컨텍스트 메뉴에서 “Markdown Toggle”을 선택하거나, 툴바에 있는 Markdown Here 버튼을 눌러주면 마크다운 문법이 변환되서 에디터에 입력된다. 기본 단축키인 “Ctrl+Alt+M”을 눌러도 같은 역할을 한다.5 마크다운을 이용할 수 있는 서비스가 아직까지 많지 않지만, 이 확장 프로그램을 이용하면 마크다운을 지원하지 않는 곳에서도 마크다운을 이용해서 글을 작성할 수 있다.
5. 함께보기
이 글과 이 글에서 소개한 몇몇 글 이외에도 마크다운을 사용할 때 참조하면 좋을만한 글들이 많이 있다. 그래서 개인적으로 참고하면 좋겠다고 생각하는 글들을 모아봤다.
- 놀부의 마크다운 사용법 – 무료 툴을 중심으로 한 워크플로우 |
Nolboo’s Blog - ONE™의 노트작성 레시피 | Back to the Mac
- 크롬 마크다운(Markdown) 확장 3종 세트 | 웹으로 말하기
- WordPress.com에서는 기본적으로 마크다운 언어를 지원하고 있고, 설치형 워드프레스에서는 워드프레스의 제작사인 Automattic이 직접 제작한 Jetpack 플러그인의 2.8버전부터 마크다운 언어를 지원하기 시작했다.
- 여기서 소개할 앱 외에도 엄청나게 많은 앱들이 마크다운을 지원한다. 다음 링크를 참조하면 더 많은 앱들을 확인할 수 있을 것이다. 78 Tools for Writing and Previewing Markdown
- 실시간 미리보기 기능은 에디터 오른쪽이나 하단에 브라우저에서 어떻게 보이는지가 바로 보여지는 기능을 의미한다. 보통 왼쪽에 있는 에디터를 스크롤하면 오른쪽에 있는 미리보기 창도 그에 맞게 스크롤되서 현재 편집하고 있는 부분을 바로 확인할 수 있다.
- 마크다운 태그를 안드로이드 키보드를 입력하는 것이 불편하기 때문에, 키보드 위에 마크다운에서 쓰이는 태그를 모아서 툴바형태로 보여주는 것을 의미한다.
- 단축키는 설정에서 바꿀 수 있다.
관련글모음
출처 : http://blog.kalkin7.com/
'IT기술 > html' 카테고리의 다른 글
| input type="text" 에서 글 쓰지 못하게 막기 ( readonly, disabled ) (0) | 2018.10.06 |
|---|---|
| 자바스크립트 쿠키 생성 document.cookie (0) | 2017.04.26 |
| z-index 속성으로 배치 순서 결정하기 (0) | 2017.03.23 |
| overflow 속성 (overflow: visible, hidden, scroll, auto 차이) (0) | 2017.03.23 |
| clear 속성에 대해 배워 보자 (clear:none, right, left, both) (0) | 2017.03.23 |
