ATOM으로 Markdown 문서 만들기
1. ATOM이란?
ATOM은 텍스트기반 개발용 에디터입니다.(일반 텍스트 에디터로 쓰셔도 됩니다.)
Package를 설치하여 다양한 개발자들이 만들 확장 기능을 사용할 수 있습니다.
2. Markdown이란?
문서를 특정 형식에 맞춰 작성하면 예쁜? 문서로 탈바꿈 해주는 문서 작성 방법론입니다.
문서 작성에 일관된 형식을 유지하고 싶거나 문서 작업이 어려운 분들에게 도움이 됩니다.
3. ATOM으로 어떻게 Markdown 문서를 만들 수 있을까?
ATOM은 기본적으로 Markdown 문서 작성을 지원합니다.
ATOM에서 확장자를 .md로 저장하시면 Markdown 문서로 인식합니다.
CTRL + SHIFT + M 키를 누르면 문서 결과 미리보기를 지원합니다.
ATOM의 기본 에디터 기능으로 Markdown 문서 작성시 아쉬운 점
- Markdown에서 줄 바꿈은 엔터가 아니라 스페이스(공백) 2개입니다.
ATOM은 정식 문법만 지원합니다. 그래서 매번 스페이스를 입력해야 합니다.
위에 이미지 오른쪽 보시면 엔터가 먹지 않고 문장이 다 붙어 있습니다.- 문서 작성 창과 미리보기 창의 스크롤 동기화가 안됩니다.
즉, 내가 작성한 내용을 실시간으로 오른쪽 미리보기 화면에서 보고 싶은데 안됩니다.- 작성중인 문서의 트리 구조를 보여주지 않습니다 : 목차
- PDF 저장을 지원하지 않습니다.
- 그 외에 여러 기능이 빈약합니다.
4. ATOM 에디터 기능 확장하기
위의 단점들을 앞서 언급한 Package 확장 기능을 이용하여 보완할 수 있습니다.
Package 설치 방법
1) CTRL + , 키를 누르면 Settings 메뉴가 열립니다. 2) Install` 메뉴 선택 3) 오른쪽 입력 창에 검색어 입력하고 `엔터` 또는 `Packages` 버튼 누르면 검색됩니다.
추천 Package 목록
markdown-preview-enhanced
주요 기능은 Markdown 미리보기입니다.(기본 미리보기를 대체합니다)
이 Package를 설치한 후 기존 내장 미리보기는 Disable 상태로 바꿉니다.Packages
-> markdown-preview를 찾아서 Disable 버튼 클릭
추가 확장 기능은 Preview 화면에서 마우스 우클릭하면 나타납니다.
장점
- 스페이스 2개 입력하지 않아도 엔터치면 엔터로 인식합니다.
- HTML, PNG, JPEG 저장 지원합니다(PDF도 지원하지만 안씁니다, 인터페이스가 구림)
- 이미지 붙여넣기가 매우 편해집니다.(Image Helper 제공)
- 브라우저 미리보기를 제공합니다(HTML로 저장시 어떻게 보일지 미리 확인 가능)
- 테마를 변경할 수 있습니다.
- 스크롤 동기화 기능을 제공합니다(에디터와 미리보기 화면이 서로 매치되며 스크롤 되는 기능)
* 그 외 자잘하게 기능들이 있는데 크게 의미 없어서 언급 안합니다.
markdown-img-paste
이미지 붙여넣기를 편하게 해줍니다.
붙여넣기 하고 싶은 파일을 복사한 후CTRL
+SHIFT
+V
를 눌러주면 됩니다.
그럼 자동으로![이미지설명 수동입력](assets/자동생성된파일이름.png)
로 입력됩니다.
이미지설명만 타이핑 해주면 됩니다. 파일도 자동으로 문서 하위에 assets 디렉토리를
만들어서 생성해줍니다.주의사항
: Mac에선 잘 동작하는데 Windows에선 동작이 잘 안됩니다.
개인적으로 Image Helper보다 이 기능을 더 많이 사용합니다.
markdown-pdf
작성한 문서를 pdf로 저장해줍니다.
다른 방식으로 pdf로 변환할 수도 있겠지만 이걸 이용하는게 최선입니다.
문서여백 글자 폰트, 문법에 따른 하이라이트 등 최적의 상태로 바꿔줍니다.
참고로, 맥 사용자는 코드 하이라이트도 적용해서 변환을 해줍니다.(윈도우는 안됨)
사용방법 :CTRL
+SHIFT
+C
를 누르면 변환하여 문서와 동일 경로에 저장됩니다.
language-markdown
이건 옵션입니다. 제가 작성한 글 보시면 입력한 내용에 따라 색상 변화가 있습니다.
코드 하이라이트처럼 구분을 좀 해주는데 가독성 면에서 괜찮아서 쓰고 있습니다.
이건 일반 문서 작성용 Package가 아니기 때문에 색상 구분은 대중 없습니다.
5. 활용 팁
이미지 등록
방법1
: 이미지 파일을 추가할 곳으로 드래그 앤 드롭하면 됩니다.(imgur.com에 업로드 됨)방법2
: Image Helper 메뉴를 이용하는 방법미리보기 화면에서 마우스 우클릭 한 후 Image Helper를 선택합니다.
첫번째,
Link
는 외부 이미지 URL을 입력하여 등록하는 방법입니다.
두번째,Copy image to workspace /assets folder
는 문서가 저장된 동일 폴더 하위에assets
라는 폴더를 만들고 그 폴더에 이미지를 복사해주는 방법입니다.
세번째,Upload
는 imgur.com에 파일을 업로드해주는 방법입니다.어떤 방법을 사용하던지 이미지는
![이미지설명 수동입력](assets/자동생성된파일이름.png)
또는![image_03](https://i.imgur.com/hCcbHS3.jpg)
이런식으로 자동 생성됩니다.
이미지 사이즈 조절
Markdown 작성법으론 이미지 사이즈를 조절할 수 없습니다.
하지만 Markdown이 HTML 문법을 따르고 있기 때문에 TAG로 조절이 가능합니다.
<img src="assets/test.png" width="300px">
이렇게 이미지 태그를 사용하면 이미지 사이즈를 작게 조절할 수 있습니다.
본문에 있는 Image Helper 이미지 등도 그렇게 조절한 것입니다.
이미지를 추가하면 자동으로 Markdown용 이미지 태그가 생성되는데 주소만 복사해서 쓰면 됩니다.
테마 변경하기
Code Block Theme는 말 그대로 코드블록 전용 테마입니다.
이걸 코드 블럭이라고 합니다 지금은 회색 박스지만 저기서 다른걸 선택해주면 다양한 느낌을 줄 수 있습니다. 개인적으로 coy나 darcula를 좋아합니다만 인쇄시 잉크 많이 써서 darcula를 자주 쓰진 못합니다.
Preview Theme : 미리보기 화면 테마입니다.
위 이미지처럼 테마를 바꾸면 어두운 느낌으로 미리보기를 바꿀 수 있습니다.
미리보기시 목차 띄우기
이미지 위쪽에 보시면 아이콘 3개가 있는데 첫번째 아이콘이 목차 보기 아이콘입니다.
참고로 목차는 제목태그를 사용한 것들만 나타납니다.# ~ ######
6개까지 지원됩니다.
배포하기
HTML로 배포하기
미리보기 화면에서 마우스 우클릭하여 HTML(offline)을 선택합니다.
문서가 저장된 경로에 동일 이름으로 html 파일이 생성됩니다.
HTML 보기 예시 화면입니다.
장점은 왼쪽 아래 목록 아이콘을 클릭하면 이미지처럼 왼쪽에 목차가 나옵니다.
이 파일을 그대로 웹에 게시하여 활용할 수도 있습니다.
실제 업무에선 그렇게 사용하고 있고요.
PDF로 배포하기
위에 Packages 추천에 나온 것처럼 CTRL
+ SHIFT
+ C
누르면 동일 경로에 저장됩니다.
그외 이미지로 배포는 안쓰는 것이 좋습니다. UI가 쓸것이 못됩니다.
PDF로 변환 후 PDF to JPG를 이용하는 것이 좋습니다.
6. ATOM의 단점
가끔 설정이 안먹을 때가 있습니다. 이것저것 막 바꾸다 보면 적용이 안될때가 가끔 있는데
종료 후 재시작 해주면 됩니다.같은 파일을 계속 열고 닫고 열고 닫고 하다보면 캐시가 남아서 새 파일이 아닌 캐시에 저장된 파일을
읽어들일 때가 있습니다. 종료 후 재시작 해주면 됩니다.
7. 마무리하며
Markdown 작성용 다양한 앱들이 있습니다. 고가의 유료앱도 있고요 MacDown 같은 무료앱도 있지요
이것저것 다 써본 결과 전 ATOM으로 정착했습니다.
Markdown은 기능이 복잡하게 많을 필요가 없다고 생각합니다.
편하게 간단하게 느낌있는 문서를 만들기 위한 목적이기 때문에 그런 목적엔 ATOM이 제 역할을 해줄겁니다.
MD 에디터 중에 끝판 왕이라고 생각합니다.
https://typora.io/
좌우로 분할해서 프리뷰 보는 방식이 아닌, 마크다운 문법 작성 즉시 하나하나 변환되는게 마음에 들었습니다.
적응되면 날것의 마크다운 문법이 보이는 문서가 오히려 어색하게 느껴질 정도입니다.
직관적이라서 좋기는 한데
- HTML태그를 지원하지 않고
- 수정시 제목과 같은 일부 태그는 태그 보기로 전환해서 수정해야 하는 불편함
- HTML 태그를 지원하지 않기에 이미지 사이즈를 조절할 수 없다는 점(이건 상당히 자주 쓰는 기능이라)
- HTML 배포시 목차 링크를 만들어 주지 않는 점
- 엔터를 지원하지 않아서 스페이스 2개를 입력해야 한다는 점
- 내용 입력시 엔터를 치면 줄 간격이 늘어나는데 (<br> 태그 먹인것처럼) 실제로 배포하면 엔터가 무시되는 점
- 그리고....<br> 태그를 지원하지 않아서 빈 줄 삽입을 할 수 없는 점
등등 개인적으로 자주 쓰는 기능들이 지원되지 않아서 잘 안쓰게 되더군요
간단한 문서 작성시엔 매우 유용하긴 합니다.
회의록 작성이라던지 이런 경우엔 심플하고 직관적이라 좋지요
복합적인 문서 작업시엔 비추하고 싶습니다.
- HTML 태그 지원합니다.
- 옵션 설정시 제목 태그와 같은 것은 커서가 위치하면 마크다운 소스 형태로 보여지게 할 수 있습니다.
- HTML 태그를 지원하므로 이미지 사이즈 조정도 가능합니다.
- HTML 로 변환 시 목차를 보여주는 것은 가능합니다만, 다만 markdown-preview-enhanced 패키지에서 제공하는 기능처럼 목차를 메뉴 형태로 넣어주지는 않습니다.
- 엔터를 지원하지 않는다기 보다는 GFM(Github Flavored Markdown)을 지원하지 않는 것 입니다. 개발자가 아닌 이상 GFM은 많이 안 쓰는 편이라 GFM에 맞게 마크다운 문서를 작성할 때는 항상 호환성에 신경을 써야 합니다.
- 엔터를 치면 일반적인 워드프로세서처럼 문단이 나누어집니다. 마크다운 소스를 보시면 엔터가 두 개가 들어가서 문단이 나눠 것을 보실 수 있습니다.
- HTML 태그를 지원하므로 당연히 <br> 태그도 쓸 수 있습니다.
오! HTML은 지원이 되는군요.
저도 다시 테스트를 해봤는데 지원이 되는게 맞습니다.
다만, br 태그는 입력창에 그냥 입력해도 되지만 이미지 태그는 소스보기 상태에서 입력해야 하는군요
전 typora가 입력과 동시에 반영을 해주는것이 장점이기에
태그를 입력해도 바로 화면에 반영을 해줄거라 생각했습니다.
<br>을 입력했는데 엔터효과가 아닌 그냥 태그 자체가 입력되길래 엔터가 안되는 줄알았네요
이미지도 마찬가지고요...소스보기에서 입력해야했다니...ㅡㅡ;
그래도 HTML 자체는 지원이 되니 좋군요
제목 태그 옵션 조정하면 소스 표시되는건 알고 있습니다.
다만 수정을 해도 반영이 안됩니다. 수정을 해보셨는지요?
제목에 마우스 커서 대면 ##제목 이렇게 보여지지만 ### 제목 이렇게 수정을 해도
반영되지 않고 ##제목으로 남습니다.(혹시 제가 맥버전을 써서 안되는걸지도 모르겠습니다)
엔터 문제는..사실 제 입장에선 지원을 안하는 것과 같습니다.
엔터가 지원하는 것처럼 보이지만 실제로는 <p>태그로 인식을 하는 듯 하더군요
그래서 엔터를 치면 줄간격이 엄청 넓습니다.
> 코드 입력도 마찬가지로 엔터를 치면
> 내용
>
> 내용2
이렇게 2개씩 입력이 되서 줄 간격이 너무 넓습니다.
줄간격을 좁히려면 엔터를 칠 때 매번 Shift + 엔터를 쳐야 하는데...불편하기도 하고
이때는 꼭 스페이스바 2개를 뒤에 같이 입력해줘야 엔터로 인식을 합니다.
그 외에도 작성하다 중간에 수정을 하고 싶어서 변경을 할 경우
예를 들어 문장 중 한 부분에 `` 명령어 표시를 추가 하고 싶을 때
`테스트` 이렇게 테스트 글자 앞뒤로 ` 표시를 해주면 적용이 안됩니다.
Typora는 자동 변환 기능이 동작하려면 스페이스바를 쳐줘야 인식이 되기 때문에
매번 ` ` 입력한 후 스페이스바를 입력해줘야 합니다.
작다면 작고 크다면 큰 불편함이긴 합니다.
툴은 자신이 익숙하게 사용할 수 있다면 그게 가장 좋은 툴 같습니다.
저야 ATOM을 쓰면 언급한 모든 불편함 없이 잘 쓸 수 있기 때문에 ATOM을 쓰는 것이고요
약간 불편함은 감수하더라도 직관적인 툴이 좋다면 Typora를 선택할 수도 있겠지요.
이 글을 보시는 분들은 다양한 툴을 써보시며 맞는 툴을 찾아보시는 것도 좋을 듯 합니다.
단, 거의 모든 툴을 다 써본 입장에서...특별히 더 안좋은 툴은 없습니다.
기능은 대부분 대동소이하고요 몇개 써보시다 맘에 드시는 툴 찾으시면 그 툴에 정착하시는게 좋지요
긴 글에 code block이 많이 들어가는데, typora에서 직접 작업한 문서도 다시 읽으면 깨져 있는 경우를 몇 번 당해 보고는 잘 안 쓰게 되었습니다. (동일 문서를 atom에서 읽으면 잘 나오는데도 말이지요.)
(이런 복잡해지고 길어지는 글들은 atom에서도 변환이 느려져서 미리 보기 켜 놓으면 편집이 어려워 지더군요. 결국 다른 에디터로 작업하면서 atom으로 실시간 확인하면서 보면서 작업할 때도 있었습니다.)
우선 이미지 태그도 기본 입력창에서 그대로 입력 가능합니다. 방금 테스트 해봤어요.
제목 태그를 조정하려면 '##제목' 이라고 되어 있을 때 마지막 # 다음에 추가로 #을 입력해서 제목 수준을 바꾸는 건 안 되고 # 과 # 사이에 추가로 #을 넣어서 바꿀 수는 있습니다.
그리고 엔터 부분은 마크다운 문법의 문제라고도 할 수 있는 부분입니다. 기본 마크다운 문법이 워낙 간단하다보니 확장 문법들이 꽤 많습니다. 엔터를 어떻게 처리하는지도 조금씩 차이가 있죠. 엔터 처리에 있어서는, 가장 많이 사용되는 확장 문법인 Markdown Extra나 multimarkdown에서도 기본 문법과 같이 엔터를 이용해 개행하도록 하고 있지 않습니다.
마크다운 문서를 혼자 작성하거나 HTML이나 PDF로 변환한 후 다른 사람들과 공유한다면 상관 없습니다. 하지만 다른 사람과 함께 문서를 작성하는 경우에는 특정 확장 문법에만 있는 문법으로 글을 작성하면 다른 사람이 내 문서를 볼 때 내가 의도한 형식으로 보이지 않을 수 있다는 것을 고려해야 합니다. 하나의 문서를 여러 명이 작업하는 경우에는 더욱더 신경을 써야겠죠.
(참고로 전 워드프로세서도 문단은 엔터로 강제 개행은 shift+엔터로 하는 것이 표준이라서 말씀하신 부분이 불편하다는 생각은 못해봤습니다.)
개인적으로 마크다운 문서를 작성할 때 Typora를 주력으로 쓰고 있진 않습니다. 마크다운 문법에는 익숙해져 있어서 프리뷰를 보여주는 게 저에겐 별로 메리트가 없거든요. 가끔 Typora를 쓸 때도 그냥 소스 코드 모드에서 쓰는 게 더 편하더군요.
말씀하신대로 여러 에디터를 써보면서 자신에게 가장 알맞은 에디터를 찾는 것이 좋을 것 같습니다.
음..typora 테스트를 할 수록 버그가 좀 많군요
이미지 태그 기본입력창에서 저도 여러번 해봤는데 안되었는데
앱 종료하고 다시 켜서 하니 되는군요
키 입력도 안먹어서 종료하고 다시 켜니 되고
본문내 링크 이동도 되다 안되다 하는군요
문서가 복잡해지면 좀 꼬이는 듯 합니다.
(맥 버전이라 그런지 좀 안정화가 안된 듯 하군요)
문서 포맷은 제가 작성한 Markdown 문서를 배포하는 경우는 없긴 합니다.
PDF로 변환하거나 HTML로 저장하여 웹서버에 올려서 배포합니다.
Markdown 문서 자체를 배포할 땐 정규식으로 줄 끝에 공백 2개씩 일괄로 다 넣어서 배포하면
별 문제는 없을 듯 합니다.
칼킨님은 Shift + 엔터가 편하게 느껴지시는 것처럼 자신만의 작성 스타일이 있는 듯 합니다.
그 스타일에 적합한 툴을 찾아보는 재미도 은근 있더군요
저도 열심히 찾은 결과인지라 만족하며 쓰고 있습니다..^^
툴이라는 것은 개인 활용도에 따라 차이가 있고, 그런 차이를 알려주시니 취사선택하기가 더 수월해졌습니다.
많은 도움이 됩니다.
고맙습니다.
타이포라 한 번 써봐야겠네요!