기본 콘텐츠로 건너뛰기

njo2_vsce_blogposting 소개

The Buggles의 video killed the radio star ~~ 라는 노래가 생각납니다. 유튜브에 밀려 블로그 포스팅이 점차 설자리를 잃어가고 있으나 그래도 아직도 라디오가 존재하듯 상당 기간 글로 이루어진 블로그도 존재할 것입니다.

티스토리 블로깅을 하시는 분들이라면 요즘 티스토리의 움직임이 너무 없어서 다들 티스토리의 안위가 걱정이 되실텐데요. 네이버로 옮겨야 하나? 구글 블로거로 옮겨야 하나?... 고민이 많으실것 같습니다. 네이버는 유입량은 많으나 애드센스를 못달고, 블로거는 애드센스를 달 수는 있으나 사용법이 너무 불친절하고...

이런 불안함 속에서 최선의 방법은 일단 블로그를 운영하면서 최대한 내 컨텐츠를 확보하고 보호하자 였습니다 또한 더불어 편하게 컨텐츠를 등록하자 였습니다. 컨텐츠만 있으면 나중에 어떻게든 후일을 도모할 수 있으닌까요. 이러한 목적으로 Visual Studio Code의 익스텐션을 개발하게 되었습니다.

VS Code의 익스텐션을 사용하여 마크다운(Markdown)으로 작성된 글을 블로그에 포스팅하는 제품은 총 3가지가 있습니다.

  1. njo2_vsce_blogposting_blogger
  2. njo2_vsce_blogposting_tistory
  3. njo2_vsce_blogposting_tistory-blogger

이름에서도 알수 있듯이 njo2_vsce_blogposting_blogger는 구글 블로거(blogger, blogspot)에 글을 포스팅할 수 있고 njo2_vsce_blogposting_tistory은 티스토리에, njo2_vsce_blogposting_tistory-blogger은 블로거와 티스토리에 동시 발행을 할 수 있습니다.

njo2_vsce_blogposting

기본 툴은 Microsoft에서 무료로 배포하고 있는 텍스트에디터인 Visual Studio Code.. 일명 VSCode를 사용있습니다. 여기에 익스텐션을 설치하여 티스토리와 구글 블로거 API를 통해 발행 할 수 있습니다.

간단한 이미지 설명

특징

1. VS Code를 사용합니다.

Visual Studio Code 홈페이지

예전 울트라에디터나 에디트플러스, 노트패드++ 같은 텍스트에디터가 1세대라면 요즘은 서브라임텍스트, 아톰에디터, 브라켓 같은 2세대 텍스트에디터가 대세를 이루고 있습니다. 그중에서도 VS Code는 2세대 중에 제왕정도의 자리를 차지하고 있을만큼 개발자들에게는 핫한 텍스트에디터입니다. 지금도 MS에서 꾸준히 버전업을 하고 있구요. 이 VS Code에는 안정성이 좋고 다양한 익스텐션이 있어서 코딩뿐 아니라 작가가 글을 작성하는데에도 많은 도움이 됩니다.

만약 개발자가 블로그를 한다면 더할 나위없이 좋은 선택이 될것 입니다.
개발자인 경우 개발을 하다가 알게된 지식이나 아이디어를 익숙한 VS Code로 빠르게 포스팅 할 수 있읍니다.

2. 내 컨텐츠는 내가 가지고 있게됩니다.

이 익스텐션의 가장 큰 장점 중의 하나는 포스팅한 글과 이미지를 내가 가지고 있다는 것입니다. 나중에 혹시나 블로그가 폐쇄되거나 다른 블로그로 옮겨타야 할때 매우 요긴할 수 있습니다.
컨텐츠는 카테고리별 폴더 안에 포스팅 별 폴더를 생성하고 그 곳에 .md파일로 글을 작성하게 되어 있습니다. 이미지들은 해당 폴더에 images폴더를 생성하면 됩니다.

  1. 저는 POSTS_2021이라는 프로젝트 폴더(폴더명은 마음대로 변경해도 됩니다) 안에 카테고리별로 폴더를 만들어서 구분했습니다.
    • 이 것은 하나의 예시이며 개인에 따라 폴더구조는 변경가능합니다.
  2. 포스트 별로도 폴더를 만들었고 이미지는 images폴더에 저장하고 실제 글은 item.md에 작성합니다.
    • 이것도 예시이며 파일명은 변경가능합니다.

3. 마크다운을 활용하여 글 작성에만 집중할 수 있습니다.

마크다운은 원래 목적이 HTML을 몰라도 최소한의 양식으로 HTML형식의 글을 쓸수 있게 하기 위해 고안된 문서양식입니다. 그래서 글을 꾸미기에는 제한사항이 좀 있지만 글 자체를 작성해서 인터넷에 포스팅하기에는 상당히 편리한 문서도구입니다. 마크다운 문법은 몇시간만 배우면 매우 쉽게 글을 작성할 수 있습니다. 제 블로그에 있는 대부분의 글은 마크다운으로 작성되었다고 보시면 됩니다.
공식적인 문서 표준은 아니지만 github.com의 readme문서로 활용되면서 전세계 업계에서 거의 표준처럼 사용되고 있는 방식입니다.

간략히 예시를 들면....

위의 그림과 같이 왼쪽 처럼 #의 갯수에 따라 오른쪽의 제목 크기가 달라지게 번역이 됩니다. 제목을 달기 위해 코딩을 할 필요가 없죠.. 이런 식으로 몇가지 기호를 통해 글을 작성할 수 있게 됩니다.

그 마크다운 문법에 대해서는 아래 웹사이트를 참고 하시면 됩니다.

나무위키 마크다운

4. 마크다운 관련 익스텐션을 활용할 수 있습니다.

그리고 VSCode에서도 다양한 마크다운 익스텐션을 제공하고 있어서 쉽게 활용할 수 있습니다.

https://code.visualstudio.com/docs/languages/markdown

5. 티스토리와 구글 블로거에 쉽게 글작성을 할 수 있습니다.

하나의 .md 파일에 YML마크다운을 작성하여 쉽게 티스토리와 블로거로 글을 올릴 수 있습니다.
yml에 어느 블로그에 어떻게 글을 작성할것인지 설정을 하고 마크다운 문서로 글을 작성합니다. 또한 Visual Studio Code의 스니펫(사용자 코드 조각) 기능을 활용하면 미리 설정된 템플릿을 활용할 수도 있습니다.

구매하기

아래의 티스토리 블로그에서 구매를 할 수 있습니다.

구매하기 : https://shop.njo2.com

댓글

이 블로그의 인기 게시물

CSS에서 ellipsis('...')를 처리하는 방법

이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '...'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. <div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용됨. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함 text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함 white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능) 멀티라인 글자수 제한 멀티라인에 대해서 글자수를 제한하는 방법은 아래와 같습니다. <p class="txt_post">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다.&nbsp; 비도 추적추적 내리고 일정상 늦으막해서 그런지 사람이 많지는 않았다. 덕분에 보통때는 한참을 기다려야 겨우 날개달린 사진을 찍을 수 있었을 텐데, 이번에는 바로 천사날개를 달고 사진을 찍을 수 있는 행운까지 얻었다. 이번이 동피랑 벽화마을 방문 3번째인데 예전에 왔을때에 비해서 벽화가 많이 바뀌어 있었다</p> .txt_post { overflow: hidden; text-ove...

Google 스프레드시트로 구글캘린더에 일정 연동하는 방법

저는 구글 제품을 많이 사용하는 편입니다. 제 주력 캘린더도 Google 캘린더 고요. 이번에 모임의 임원을 맡게 되면서 회원들의 생일을 캘린더에 등록해야 할 일이 생겼어요. 그냥 하나하나 등록을 하는 도중 "내가 지금 뭐하고 있나.." 라는 자괴감이 들기 시작했어요. 구글 시트에 있는 날짜 정보(생일)을 한 번에 쉽게 일괄 등록할 수는 없을까라는 생각이 뇌리를 스쳤습니다. 그래서 찾아봤더니.. 약간의 매크로 프로그램을 작성하면 가능할 것 같더라고요. 그래서 열심히 개발을 해봤습니다. 1시간이면 등록할 것을 8시간 걸려서 프로그램을 짜 봤어요. 결과적으로는 더 비효율적이었네요. ㅠㅠ 그러나... 나에게는 비효율 적이었지만 이코드를 공개하면 다른 사람에게는 큰 도움이 될 수 있겠구나 생각을 하고 코드를 공개해 보려고 합니다. 준비물 준비물은 Google 스프레드시트, Google 캘린더만 있으면 돼요. 당연히 무료고요. Google 캘린더 먼저 Google 캘린더를 만들거나 사용하고 있는 캘린더를 준비합니다. 적용하기 원하는 캘린더의 우측의 ... 를 클릭하고 설정 및 공유 를 선택합니다. 캘린더 ID를 잘 기억해 놓습니다. 나중에 이 ID를 활용할 예정입니다. Google 스프레드시트 회원생일 스프래드시트 공유 Google 스프레드시트로 명단과 생일을 작성합니다. ▲ 위와 같이 작성을 하면 되고 중요한 사항은.. 생년월일 이 구글 시트의 날짜 형식에 맞아야 합니다. 그리고 갤린더등록 , 캘린더상태 의 항목은 필수로 있어야 합니다. 캘린더등록 : 캘린더에 등록할지 제거할지를 표시 (ADD / DEL) 캘린더상태 : 현재 캘린더에 해당 항목이 적용되었는지 확인 (Y / ' ') 매크로 프로그램 작성하기 기본적인 준비는 끝났습니다. 이제부터 Apps Script를 제작하고 트리거를 등록하면 됩니다. Apps Script 작성하기 Apps Script 는 구글 제품에 대...

Google캘린더(달력)에 대한민국 휴일 표시하기

구글 캘린더에 대한민국 휴일을 표시하는 설정에 대해서 소개합니다. 네이버 달력이라면 그냥 기본으로 나오겠지만 구글캘린더의 경우는 별도의 설정을 해 주어야 합니다. 휴일의 표시는 각 나라의 휴일을 구글에서 미리 작성해 놓은 것을 내 캘린더에 불러와 적용하는 방식으로 되어 있습니다. 대한민국 공유일 표시하기 먼저 설정화면으로 이동합니다. 캘린더 화면의 우측상단의 설정 아이콘을 클릭합니다. 메뉴 중 설정 을 클릭합니다. 설정화면 중 좌측 메뉴에서 캘린더 추가 메뉴를 선택합니다. 관심분야와 관련된 캘린더를 선택합니다. 지역 공휴일의 모두 둘러보기 를 선택하면 각나라의 휴일을 선택할 수 있습니다. 우리는 대한민국의 휴일 을 선택합니다. 캘린더에서 공휴일 보기 대한민국 휴일에 대한 설정을 했다면 이제 보기 좋게 표시하면 됩니다. 설정을 정상적으로 했다면 좌측메뉴에 대한민국의 휴일 이라는 캘린더가 보입니다. 캘린더명의 우측끝에 더보기 아이콘 을 선택합니다. 색상을 빨간색으로 선택합니다. (보통 공휴일은 빨간색이므로.. ㅎ) 그러면 캘린더에 휴일의 명칭이 빨간색 으로 표시되게 됩니다. 감사합니다.