Typora 마크다운 편집기를 이용해서 소스코드(Code)와 이미지(Image)를 포스팅에 삽입해보자.

블로그 포스팅을 다시 시작하다.

한때 개발하는 도중에 겪은 경험들을 블로그에 잘 정리하던 시절이 있었다.

그러다 현재 회사로 이직을 하고 만 2년간 정말 바쁘게 살다보니 제대로 된 포스팅을 할 여력이 없었다. 간혹 정말 중요한 기법들만 대충 글로 끄적인게 전부였다.

만 2년을 그렇게 살다보니 버닝아웃도 오고 회사를 계속 다니는게 맞나 싶기도 하고...

여튼 요즘은 많이 시들하고 무료해서 블로그 포스팅을 다시 시작하기로 맘먹었다.

어떻게 포스팅 할 것인가?

예전에는 블로그에서 기본 제공되는 에디터만을 이용하다가 소스코드를 넣기 위해서 Syntax Highlighter 등을 이용하기도 했었는데 이게 정말 불편했다. 그래서 언제가 부터는 그냥 블럭을 하나 만들어서 대충 소스코드를 넣다보니 시안성도 떨어졌고 맘에도 안들었다.

새롭게 포스팅을 시작하는 시점에서 이왕이면 내가 볼때 뿐만 아니라 남이 볼때에도 볼만한 시안성을 제공하기 위한 방법을 좀 찾아봤다.

원하는 포스팅 방식의 조건은 다음과 같다.

소스 코드를 편하게 그리고 미려하게 포스팅 할 수 있어야 함

한참을 찾아봤는데 블로그에서 제공하는 기본 에디터로는 어림도 없고, 별도의 Syntax Highlighter의 CSS를 적용시켜서 넣는 방식도 너무 불편했다. 에디터와 HTML을 오가면서 작성하기도 귀찮고 오가는 도중에 스타일이 깨지는 경우도 많았다.

그러던 중에 Typora라는 마크다운 방식의 오프라인 에디터를 별견했다. 지금 이 글도 Typora를 통해 작성하고 있다.

내가 느낀 Typora의 특징은 다음과 같다.

• 무료다

• 소스 코드를 정말 편하게 삽입하고 스타일을 적용할 수 있다.

• 이미지 삽입도 편하다.

Typora의 설치 및 설정 방법은 스킵하고 코드와 이미지를 넣는 방법을 알아보자

Typora 사용법

1. 코드 삽입 법

편집창에서 마우스를 우클릭->삽입->코드 펜스를 선택한다.

코드 펜스 블럭이 나타나면 원하는 소스코드를 삽입하고 해당 소스코드의 언어를 선택한다.

최종적으로 다음과 같이 표기된다.

 const showLog = { // 로그 메시지 출력 여부
     info: true,
     debug: true,
     warn: true,
     error: true
 };

이제 오프라인으로 작성된 글을 블로그에 포스팅 해야하는데 티스토리의 경우 Typora의 편집창을 그냥 복사해서 티스토리의 편집창으로 복사하면 끝이다. Typora의 스타일과 완벽하게 동일하지는 않지만 꽤 비슷한 스타일로 적용된다.

반면 구글의 Blogger(Blogspot)의 경우 소스코드가 한줄로 합쳐져 버리는 현상이 있다. 이를 해결하기 위해서는 Typora에서 편집한 내용을 HTML파일로 내보내고, 내보낸 HTML 파일의 CSS 설정과 실제 HTML 코드를 분리해서 삽입해야한다. 이건 정말 인건비도 안나오는 방식이다. 그래서 당분간 Blogger는 사용하지 않기로 했다.

2. 이미지 삽입 방법

Typora에서의 이미지 삽입 방법은 정말 쉽다. 그냥 드래그 하거나 Copy&Paste 해도 자동 삽입된다. 다만 Typora의 마크다운 태그를 이용해서는 이미지의 사이즈 조절이 불가하다. 그래서 꼭 이미지 크기를 조정해야 한다면 마크다운 방식이 아닌 HTML 코드로 사입하고 사이즈 설정해야 한다.

Typora 홈페이지에서도 이미지 사이즈를 조정하려면 다음과 같은 <img> 테그를 이용하라고 설명되어 있다.

 <img src="https://www.google.com/doodles/kamma-rahbeks-241st-birthday" width="200px" />
 <img src="https://www.google.com/doodles/kamma-rahbeks-241st-birthday" style="height:200px" />
 <img src="https://www.google.com/doodles/kamma-rahbeks-241st-birthday" style="zoom:50%" />

그런데 Typora에 이미지를 넣었다고 해서 그 이미지가 티스토리에 복사되는 것은 아니다. 블로그 상에서 이미지가 정상적으로 출력되기 위해서는 해당 이미지가 블로그에 업로드 되거나 인터넷 상의 URL로 삽입되어야 한다.

외부 URL을 통한 이미지 삽입법

포스팅에 외부 인터넷상의 이미지를 넣고자 한다면 편집창에서 마우스 우클릭->삽입->이미지를 선택하고 해당 URL을 삽입하면 된다.

다음은 Typora의 ![] 태그를 통해 인터넷 상의 이미지의 URL을 삽인한 예다. 역시 크게 나온다.

 ![](https://www.bloter.net/wp-content/uploads/2017/08/D850.jpg)

다음은 <img> 태그를 이용해서 사이즈를 줄여서 URL을 삽입한 예다.

 <img src="https://www.bloter.net/wp-content/uploads/2017/08/D850.jpg" width="500px" />

로컬에 저장된 이미지를 블로그에 삽입하는 방법

티스토리를 기준으로 로컬에 저장된 이미지를 포스팅 하려면, 해당 이미지들을 블로그에 먼저 업로드한 후 업로드된 이미지들의 URL을 이용해서 이미지를 삽입하면 된다. Typora 편집창에서 업로드한 이미지의 URL을 ![]태그나 <img>태그를 이용해서 사입한 후 편집창의 내용을 복사해서 티스토리의 편집창에 복사하면 끝이다.

부연 설명하자면

1. 티스토리의 글쓰기 매뉴로 진입

2. 사진을 클릭하여 포스팅할 이미지들을 업로드

3. 업로드된 이미지들의 URL을 이용해서 Typora에 이미지 삽입

4. 티스토리의 편집창에 이미지들이 표현되는 것을 확인하고 현 상태에서 포스팅 발행

5. 이미지만 등록된 포스팅으로 이동하여 각 이미지의 URL 주소를 확인하여 Typora의 이미지에 외부 URL로 삽입

6. 발행한 글을 다시 수정하기로 들어가서 편집창 상의 이미지들 삭제(이미지 파일들은 파일보관함에 계속 존재)

7. 현재까지 작성한 Typora의 편집창의 내용을 복사하여 티스토리의 편집창으로 붙여넣음

8. 발행 버튼을 클릭하여 포스팅을 완료

마치며

본 포스팅에서 설명한 방식대로 본 포스팅을 작성했다.

추가로 한가지 첨언하자면 Typora로 작성한 글이 티스토리의 편집창에 붙여 넣으면 완벽하게 동일한 스타일로 적용되진 않는다. 그래도 볼만한 수준으로 작성된다. (현재 보이는 스타일 정도면 괜찮은 편이지 않은가?)

그런데 한가지 문제점이 Typora에서 적용한 줄바꿈 혹은 공백라인이 티스토리 포스팅에서는 무시되는 현상이 있다. 줄간격도 좁아진다. 포스팅을 작성할 때 Typora상에서 <br/> 코드를 삽입하면서 작성해도 되지만 본인은 그냥 편하게 작성하여 포스팅 한 후 티스토리의 편집창에서 줄바꿈을 다시 조정하는 방법으로 해결했다.

---

본 포스팅이 도움이 되셨다면 하단의 공감 버튼을 클릭해 주세요

---