[개발 블로그 개발(?)기] 01. 플랫폼 선정하기

들어가며

블로그 플랫폼 비교

2020년 데이터 엔지니어로 (원하는 기업은 아니었으나..) 첫 입사 이후, 머릿속으로는 '개인 개발 블로그를 운영 해야겠다'는 생각은 꾸준히 해왔던 것 같다. 그러면서 아래와 같은 블로그 글들을 보며, 네이버 블로그 부터 티스토리, 브런치, Velog, Github Pages 등 수없이 많은 플랫폼을 시도해봤던 것 같다.

꽤 오랜 시간을 들여 Tistory 블로그를 구성 했으나, 그 어떤 플랫폼도 아래와 같은 나의 요구사항을 모두 충족시키는 플랫폼은 없었다.

Github issue 에 글 작성할 때와 유사한 사용자 경험 지원 : <- 가장 중요!!
- 마크타운 포맷의 글쓰기 지원
- 이미지 복사 & 붙여넣기 지원
Google AdSense 등을 통한 수익화 가능
예쁜 블로그 디자인 및 커스텀 기능 제공
쓰기 편한 글쓰기 에디터 지원
...

각 항목 별로 실제 여러 블로그 플랫폼을 사용해보며 느낀 부족한 점은 아래와 같다.

Platform	마크다운 글쓰기	수익화	디자인 만족도	난이도
티스토리	△	O	⭐︎⭐︎⭐︎	⭐︎⭐︎
네이버 블로그	X	O	⭐︎	⭐︎
카카오 브런치	X	?	⭐︎	⭐︎
Velog	O	X	⭐︎⭐︎	⭐︎
Github Page	X	O	⭐︎⭐︎⭐︎ (custom 설정 필요)	⭐︎⭐︎⭐︎⭐︎⭐︎
Notion	△	X	⭐︎⭐︎⭐︎	⭐︎
Google Blogger	X	O	⭐︎⭐︎⭐︎⭐︎⭐︎ (custom 설정 필요)	⭐︎⭐︎⭐︎
Medium	X	△	⭐︎	⭐︎
Wordpress	X	O	⭐︎⭐︎⭐︎ (custom 설정 필요)	⭐︎⭐︎⭐︎⭐︎⭐︎
Ghost (최근에 발견)	?	?	?	?
...

그럼에도.. Google Blogger 로 (임시) 정착

Google Blogger 역시 Markdown 형식의 글쓰기 지원이 안된다는 점에서, 해당 플랫폼 사용을 고려하지 않았었는데, 앞선 다른 플랫폼을 모두 사용해보니 여전한 갈증이 느껴졌었다. 그러던 와중 StackEdit 이라는 플랫폼을 발견했는데, 해당 프로그램을 통해 Markdown 형식으로 글을 작성하면, 자동으로 html 형식으로 변환하여 Google Blogger 에 글을 포스팅할 수 있었다!! 해당 플랫폼으로 정착하려던 찰나... 아래와 같은 아쉬운 점이 있었다.

이미지 복사 & 붙여넣기 지원안함.... 아래와 같이 URI 통한(또는 Google photos 연동을 통한?) 이미지 삽입만 가능
Markdown -> HTML 변환 시 포맷 커스터마이징 불가
- 일례로, 해당 프로그램을 사용하면 Code Block 앞 뒤로 <p></p> 태그가 붙는데, 요거 때문에 Blogger 내 코드 블럭이 아주.. 보기 안좋음...

그럼에도 불구하고 구글 계정 연동이나 Blogger 연동이 매우 편리해서, 개발 지식 없이 Blogger 를 마크다운 형식으로 사용하고 싶다! 하는 사람에게는 추천한다. (개발 지식이 없는 사람이 마크다운 형식의 글쓰기가 필요할지는 모르겠지만🤣)

위와 같은 한계점을 깨달았을 때는 이미... Blogger 에 원하는 레이아웃을 구매하여 어느정도 꾸며둔 상태라 + 마크다운 글쓰기만 지원된다면 지금까지 플랫폼 중에 가장 맘에 들었던 플랫폼이라, 직접 마크다운 에디터를 구현해보면 어떨까... 라는 생각에 도달했다.

그리하여...

Google 마크다운 에디터 개발기

해당 생각이 떠올랐을 때, 회사에서 Github Action 을 활용한 CI/CD 프로젝트를 개발중 이였는데, 이미 시중의 많은 Markdown Editor 를 활용해 글 작성 후 html 로 변환해주는 기능만 Github Action 을 활용하면 되지 않을까? 라는 생각이 떠올랐다!!

대략적인 도식도는 위와 같은데, 아이디어를 글로 풀어 표현하면 아래와 같다.

Blogger 포스팅을 위한 Git Repo. 를 생성하고, posts 경로 하위 *.md 파일 생성
마크다운 에디터 (Obsidian 선정)를 활용한 글쓰기 <- Obsidian 을 선정한 이유는 후술
Git push 하면 Action 이 돌면서 변경이 발생한 마크다운 파일을 html 로 변환 후 Blogger 로 포스팅!

이 때 아래와 같은 추가 기능들을 구현하려 했다.

Google Blogger 는 기본 에디터를 통해 테이블에 대해 가로 스크롤을 지원하지 않으므로, 해당 기능 구현
Markdown 내 properties 를 활용해 Metadata 설정 (아래는 맛보기입니다ㅎ)

추가로 (md2blogger로 명명한) Github Action 을 위한 별도 repo. 를 구성하여, 해당 repo. 하위 구현된 Github Workflow 를 손쉽게 재사용할 수 있게 하려했다.

사용 예시:

name: MD2Blogger Reusable Workflow Caller  
  
on:  
  push:  
    branches: [ main ]  
  
jobs:  
  call-md2blogger:  
    uses: swellful-life/md2blogger/.github/workflows/workflow.yml@main  
    secrets:  
      BLOGGER_CLIENT_ID: ${{ secrets.BLOGGER_CLIENT_ID }}  
      BLOGGER_CLIENT_SECRET: ${{ secrets.BLOGGER_CLIENT_SECRET }}  
      BLOGGER_REFRESH_TOKEN: ${{ secrets.BLOGGER_REFRESH_TOKEN }}  
      BLOGGER_BLOG_ID: ${{ secrets.BLOGGER_BLOG_ID }}

텍스트 에디터로 Obsidian 선정

앞서 짧게 소개한 도식도에서도 볼 수 있듯이, 다양한 텍스트 편집기가 있는데 그중 Obsidian 을 선정한 이유는 아래와 같다.

현재는 나 스스로 사용을 위해 개발했으나,, 비개발자도 약간의 설정만 한다면 마크다운 형식으로 글쓰기가 가능했으면 했음
도식도에도 볼 수 있듯이, github push 및 commit 등의 과정이 필요한데 해당 과정에 대한 이해도가 낮아도 본 플랫폼을 사용할 수 있었으면 함
Obsidian 의 경우 커뮤니티 플러그인을 활용해 git 관련 부분을 붙일 수도 있고, 이미지 저장 경로 등도 마찬가지로 커뮤니티 플러그인을 활용하면 UI 통해 커스텀하게 설정이 가능해 일반 사용자가 사용하기에 가장 편한 플랫폼으로 보였음
무엇보다.. 무료입니다

마치며

위와 같은 이유와 배경으로 직접 마크다운 에디터(에디터라 하기는 뭐하지요... 정확히는 상용 플랫폼을 덕지덕지 붙인 Github Action 개발)를 개발했고, 아직 많이 부족하지만 기본적인 필요한 기능이 구현된 Github Action 을 구현하여 해당 포스팅을 작성중이다. (해당 포스팅도 markdown 으로 작성 중입니다.)

앞으로 개발한 Github Action 개발 코드와 더불어, Blogger 를 어떻게 세팅했는지 등 전반적인 개발 블로그 구축 과정을 해당 블로그 통해 공유할 예정이다.

많은 관심 부탁 드립니다 :)