Gatsby 에서 편집기를 사용해서 가장 쉽게 글을 쓰는 방법은 무엇일까?
블로그를 만들고 호스팅하여 인터넷에서 글을 전달할 수 있는 환경이 이제 마련되었다.
앞으로 해야할 일은 글을 잘 올려서 블로그의 내용을 채우는 작업이 필요하다.
그런데 사이트를 만들고 꾸미는 것은 어떻게 코드를 수정하면서 하겠는데, 글을 올리는 것은 어떻 게 관리해야하는가?
Gatsby 템플릿은 이를 위해 기본적으로 마크다운을 지원하는 기능을 제공한다.
마크다운 소스 플러그인을 사용하면 마크다운으로된 원본을 템플릿이 적절하게 HTML 코드로 변환하여 블로그 글을 만들어준다.
뭔가 정해진 형태의 내용으로만 나타나고, 원본과 결과물의 괴리감이 약간 느껴지지만 이를 감안하면 약간의 불편함은 가져갈 수 있을 것이라 생각했다.
마크다운 편집기를 사용해보자
마크다운으로 글을 쓰는 방법은 가장 원시적으로는 텍스트 에디터기로 글을 저장하고 commit 을 하는 것이다. 그러나 이건 너무 생산성이 떨어진다.
다음으로 검토해볼만한 내용은 시중의 마크다운 편집기 프로그램을 사용하는 것이다. 나름대로 글을 구조화하고 꾸미는 것은 편하게 작성할 수 있다.
마크다운 문법에 맞추어 글을 잡아주니 나쁘지 않은 선택이다.
문제는 블로그의 경우 검색엔진을 위해 하나 이상의 이미지를 활용하는 것이 좋다. 그런데 이런 작업은 불편하다.
이미지를 별도로 올리고 이걸 다시 글에 넣고, 경로 잘 맞는지 확인하고 하려면 이것도 어려운 일이다. 좀 더 직관적인 관리가 필요하다.
Netlify CMS 마크다운 편집기를 사용해보자
다음으르 검토한 내용이 Netlify 가 제공하는 CMS 사용이다.
선구자들의 솜씨로 웹에서 어드민 로그인하여 마크다운 편집기로 글을 쓰고 이미지도 업로드하여 호스팅하고 배포하는 구조를 확보할 수 있었다.
이정도면 이제 블로그 사이트 구성에 손을 때고 본격적으로 수익화를 위한 글쓰기 모드로 돌입할 수있을 것이라 기대했다.
그런데, 이게 왠일인가… 엄청난 결함을 한가지 발견하게 되었다.
그것은 바로… 마크다운 편집기가 한글을 제대로 지원하지 않는다는 것이다.
정확히 표현하면 한글을 쓰는데 자꾸 글이 씹힌다. 잘 써내려가다가 잠깐 쉬면 앞쪽으로 커서가 이동하여 기존에 쓴 글을 씹어먹는다.
이 문제를 해결하기 위해 각종 자료를 검토하였다.
Netlify CMS가 사용하는 기본 마크다운 편집기가 결함을 가지고 있어서 한글 뿐 아니라 유니코드 기반의 각종 언어에서 문제가 있다.
이걸 최근에도 작업하고 있다고 하는데… 언제까지 기다릴 수 없는 상황이라 몇가지 대안을 검토하였다.
Netlify CMS 편집기 커스텀(Feat. CKEditor)
마크다운 편집기 교체하기로 했다. 결론적으로 지금 돌아보면 하지 말았어야 할 작업이었다.
그러나 나름대로 문제를 빨리 해결해보려고 마크다운 편집기를 범용적으로 많이 사용하는 CKEditor 로 변경하는 커스텀 작업을 진행했다.
gatsby 에 CKEditor 플러그인을 붙이고 CMS에서 해당 편집기로 로딩하는 처리까지 구조를 파악하며 접근할 수 있었다.
CKEditor 는 한글이 씹히는 이슈 없이 아주 잘 동작하였다.
이 문제 해결을 위해 일하면서 시간을 쪼개 면서 검토하느라 일주일을 허비한 것 같다.
아무튼 에디터는 잘 붙었는데, 이것을 입맛에 맞게 마크다운 소스를 받아드리게 하는 작업을 검토하였다.
문제는 CKEditor 기본 템플릿은 아주 잘 붙지만 플러그인을 강화한 커스텀 버전 구성 관리가 쉽지 않은 것을 발견했다.
Gatsby 프레임워크를 한단계 더 깊숙히 들어간 webpack 레벨의 빌드작업이 필요하다.
리액트에 대한 숙련된 지식이 없는 상태에서 이렇게 자꾸 개발 난이도를 더해가는 것은 솔직히 감당하기 어려운 사이즈다.
플러그인 레벨에서 해결하려면 빌드 버전을 핫픽스로 매번 public 영역에 배포하는 작업을 하는 것도 공수가 든다.
무엇보다 짜증나는 것은 gatsby 코드들이 최신 업데이트가 안맞아 빌드할 때마다 문제를 해결해야 한다.
경고 메시지, 호환성이 맞지 않아 빌드가 안되는 문제로 점점 한계가 찾아오게 되었다.
생산선을 위한 편집기 도입
결론적으로 생산성있는 블로그 글 작성을 위해서 다른 대안이 필요한 시점이 되었다.
투자 없이 진행 하려고하니 난이도가 계속 높아지는 것을 보게 된다.
어느 정도 투자가 필요한 시점이라고 생각이 들었다.
때마침 티스토리를 통한 블로그 실험들이 탄력이 붙어서 애드센스 수익이 소소한 투자를 커버할 정도가 되었다.
가장 글을 쓰기 좋다고 소문난 워드프 레스를 통해 새로운 접근을 하기로 했다.
- 워드프레스로 블로그를?
- 워드프레스로 글만 쓰고 프론트는 Gatsby + Netlify 도 가능할 것 같은데? 이걸 headless cms 라고 표현하는군…
Gatsby 글을 워드프레스로 작업하려면 많은 수정이 필요하다.
기존 마크다운 기반의 페이지는 과감히 접어버리고, 워드프레스 기반의 Gatsby 템플릿의 접근이 필요하다.
이걸 위해 필자는 기존에 작업한 Gatsby를 코드들을 좋은 경험으로 생각하며 과감히 날려 버리고, 워드프레스 템플릿을 기반으로 새롭게 파고들었다.
https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
이 템플릿은 워드프레스에서 글을 가져와서 Gatsby 블로그로 변환해주는 기본 구성이다.
Gastby 에서 여러 플러그인 작업을 선행하여서 워드프레스에서도 글을 가져올 수 있다. 그런데 이를 위해서는 일단 내가 소유하고 있는 워드프레스가 필요하다.
PC에 세팅하는 방법도 있겠지만 워드프레스 호스팅 구성을 하는 것도 엄청난 노동력과 정신력의 소모가 있어서 쉽게 가기 위해 유료 결제를 선택했다.
먼저, 워드프레스 사용을 위해 국내에서 가장 저렴한 카페24의 워드프레스 월 500원짜리를 결제했다.
스토리지 500MB, 트래픽 800MB(하루)의 매우 부족한 스펙을 결제하였다.
테스트를 해보니 글 몇번만 읽어도 트래픽의 10%는 금방 차오른다. 워드프레스가 트래픽 튜닝이 안된 것인지 생각보다 트래픽이 많이 소모된다.
결제를 했으니 한번 둘러 보았다. 가장 먼저 해야하는 일은 좋은 테마 를 구성하는 일이다.
Chrome Blog 테마가 애드센스 구조에 적합해 보였다.
무엇보다 중요한 것은 편집기가 정상동작하고 작성한 글이 보기 좋게 블로그에 나오는 것이다. 그리고, 비용을 절약하여 사이트를 합리적으로 구성해야한다.
과연 워드프레스와 Gatsby 조합은 의미있는 작업이 될 것인지 기대가 된다. 다음 글에서 더 설명해 보겠다.