마크다운(Markdown)으로 블로거 관리 (2)

12월 05, 2016

Use Markdown to polish your Google Blogger (2)

I’m sorry but this post is written in Korean. Please visit StackEdit, and Markdown if you want to get some information related to this post.
enter image description here

Image source

1편에서 블로그를 관리할 때 편리성을 높이기 위한 방법으로 마크다운(Markdown)을 소개하였고, 추가적으로 마크다운 사용 편리성을 높이기 위해 스텍에딧을 추천하였다. 만약 지금 글을 읽는 독자가 어느정도 마크다운 문법과 스텍에딧에 익숙해졌다면 2편을 읽어주길 바란다.

조금더 세련된 블로그를 원한다면…

블로그를 통해 양질의 정보를 제공하고자 한다면, 과연 어떤 방법이 가장 효과적일까? 물론 글로써 모든 걸 간결하게 표현할 수 있다면 가장 좋겠지만, 대부분의 경우 글은 독자에게 충분한 정보를 제공하지 못한다. 간단한 예로, 누구나 다 아는 사과라는 과일에 대해서 설명하고자 할 때, “사과는 나무에서 자라는 열매로… ” 라고 장황하게 설명하기 보다는 잘 익어서 먹음직스러워 보이는 사과 그림 하나를 보여주는게 독자들에게 더 직관적으로 와 닿을 것이다. 따라서 내용 전달의 효율성을 높이고자 한다면, 단순히 글을 적는 것 이외에 그림과 동영상과 같은 시각적 정보를 함께 제공해 주는 것이 좋을 것이다.
오늘 2편에서는 당신의 블로그 글을 좀더 세련되게 다듬어 줄 그림과 동영상 올리는 법, 링크를 추가하는 법에 대해서 이야기 하고자 한다. 또한 열심히 작성한 마크다운을 저장하거나 다른 마크다운 문서를 불러오는 법, 그리고 문서의 추가정보를 입력하는 법에 대해서 이야기 하도록 하겠다.

그림과 동영상 올리기

한 번쯤 잘 만들어진 블로그를 방문했다면, 그 블로그는 단순히 글과 그림이나 동영상을 아무런 순서없이 나열하진 않았을 것이다. 글을 조리있게 쓰는 것은 물론이고 그 글에 어울리는 그림이나 동영상을 적절하게 선택한 뒤에, 글의 흐름상 적당한 위치에 집어 넣은다음 독자가 보기에 편한 크기로 조절하였을 것이다. 필자도 그림을 올리기 전에 선택한 그림이나 동영상이 글과 잘 어울리는지, 크기는 어느정도로 해야하는지, 배치는 어디로 해야하는지에 대한 여러가지 사항을 고려한 뒤에 파일을 불러온다. 따라서 글을 읽는 독자들도 블로그를 읽을 미래의 독자들을 위해 위의 언급한 사항들을 고려한 뒤 파일을 올리기 바란다.

그림 올리기
- 스텍에딧 상단에 그림 아이콘을 클릭한다.
- “Import from Google+”를 선택하고 “Upload photos”를 선택한다. (그림에 대한 주소가 있다면 주소를 적으면 되고, “Upload photos” 외에 “Your photos”나 “Photos of yours”를 선택해서 그림을 올려도 된다. )
- 그림을 확인하고 사이즈를 설정한 뒤 OK를 누른다.
- 다음과 같은 주소 형태의 포멧이 작성될 것이고, 오른쪽으로 그 포멧이 반영된 그림이 나타날 것이다.
- 필요하다면 “[enter image description here]”에 그림에 대한 내용을 적고, 포멧 사이에 보이는 “s500”에서 숫자만 400 혹은 600으로 수정하면서 그림이 글과 어울리는 사이즈가 되도록 조정한다.
동영상 올리기
- 마크다운은 동영상 올리는 문법을 공식적으로 제공하지는 않는다. 따라서 HTML문법을 통해서 동영상을 올려야한다. 이를 위해 올리고자 하는 동영상을 먼저 유투브(Youtube)에 올려놓아야 한다. (자신의 유투브 계정에 동영상을 올릴 수 있으니 참고하도록 하자.)
- 유투브에 동영상을 올렸다면 그 동영상에 대한 주소 링크를 가져와야 한다. 주소 링크는 동영상 하단에 보이는 공유 버튼을 눌러 나타나는 3가지 옵션 중에 소스코드 옵션을 선택하여 나타나는 주소를 가져와야 한다. 소스코드는 다음과 같은 주소형식을 갖는다.
```
<iframe width="560" height="315" src="https://www.youtube.com/embed/HndN6P9ke6U" frameborder="0" allowfullscreen></iframe>
```
- 가져온 주소를 적당한 위치에 붙여놓고 가로, 세로 길이를 수정하여 크기를 조절한다.
링크 걸기.
- 타인의 그림이나 동영상을 가져온 뒤, 그 출처에 대해 알리고 싶을 것이다. 이때 긴 주소를 모두다 적기보다는 간단한 글과 함께 링크를 걸어두는 것이 좀더 깔끔할 것이다. 링크를 걸고자 할 때 다음의 양식을 이용하면 된다.
```
format [Link Name](The address of the image or video "Title") 
example [An apple] (https://en.wikipedia.org/wiki/Apple  "Title")
```

알아두면 좋은 사항

마크다운 저장하거나 불러오기.
- 작성한 마크다운을 다른 곳에 사용하거나 혹은 단순히 보관하고자 할 때 스택에딧은 간편한 저장방법을 제공한다. 단순히 화면 상단에 보이는 샵 버튼을 누른 뒤 “Export to disk”를 선택하면 된다. 이때 마크다운 형식 외에도 HTML과 PDF 형식으로도 저장이 가능하기 때문에 자신의 용도에 맞게 파일을 저장하면 된다. 하지만 만약에 블로거 외에 동일한 글을 올리고 싶은 것이라면 스텍에딧에서 기본적으로 제공하는 Publish 가능한 사이트들을 참고하여 바로 글을 올리면 된다. (스텍에딧이 제공하는 주요 사이트: 깃헙, 텀블러, 워드프레스 등)
- 존재하는 마크다운을 불러오는 것 또한 간편하다. 화면 상단에 보이는 샵 버튼을 누른 뒤 “Import from disk”를 선택하면 된다.
프론트 메터(Front Matter) 작성하기.
프론트 메터란 마크다운 형식 최상단에 기입하는 추가 작성양식으로써 마크다운 작성 이후, 표면적으로는 나타나지 않으면서 글의 세부정보를 기록한다. 프론트 메터에 들어가는 내용은 여러가지가 있지만 아래에 언급한 몇가지 정도만 알고있으면 충분하다. (추가적인 사항은 Jeckyll 사이트를 참조하자.)
```
> ---
> title: 마크다운(Markdown)으로 블로거 관리 (2)
> date: 2016-12-05
> tags: Markdown_Usage
> ---
```
특히 ‘tags’는 블로거에서 ‘labels’ 목록에 기록되기 때문에 꼭 작성하도록 하자.

펜으로 담는 하나의 화폭

필자는 정보를 전달하는 위해 그다지 많은 도구를 사용하지 않았다. 사실 정보를 수동적으로 받아들이는 학생으로서 나름 최선을 다한것이 메일 혹은 메신저를 통한 간략한 토론정도라 할 수 있었다. 하지만 연구를 하고 시간이 지남에 따라 제약된 정보소통 공간이 얼마나 큰 약점이 될 수 있는지를 깨닫게 되었다. 분명 필자 스스로 찾을 수 있는 정보에는 한계가 있을 것이고, 설사 정보를 얻었다 할지라도 잘못된 것일 수 있다. 누군가와 토론을 한다 할지라도 타 분야에서 새로운 정보를 습득한 낯선이와 의사소통을 하지 않는한 공유하는 정보는 극히 제한적일 것이고, 새로운 정보의 노출이 적은 만큼, 지식의 습득은 계속해서 시간이 지나 색이 바래버린 책으로부터만 이루어 지게 될 것이다.
그래서 필자는 낯선이와 만나고자 한다. 학생이기에 수동적이여도 된다는 면죄부를 버리고, 내 정보를 낯선 모든이들과 공유하고자 한다. 오늘 새롭다 여긴 지식을 내일은 모두가 아는 평범한 것으로 만들고, 옳다고 믿었던 잘못된 지식을 날카로운 낯선이의 비판을 통해 겸허히 받아들이고자 한다. 그래서 오늘도 펜을 든다. 그래야만 내가 그려놓은 그림이 낯선이들의 그림과 더해져 하나의 수려한 화폭이 될 수 있으리라 믿기 때문이다.

Hyungwon Yang

이 블로그 검색

Hyungwon's Notebook