안녕하세요. 잿더미에서 다시 살아나는 것처럼, 한때 오래가지 못했던 블로그가 다시 태어났습니다. 돈도, 시간도, 그리고 어쩌면 창의력도 부족했기 때문이죠… 네, “Bar do Clovão”는 10년 전에도 존재했습니다. 학교에 다니던 시절, 자신이 정확히 무엇을 하고 싶은지도 몰랐던 한 청소년이 만든 프로젝트였습니다.
당시에는 Google에도 상당히 잘 색인되어 있었습니다(이건 정말 좋은 일이고, 모든 블로그가 제대로 해내는 것도 아닙니다). 그때는 지금처럼 블로그를 만들겠다는 생각보다는 리뷰, 뉴스, 어쩌면 팟캐스트까지 다루는 너드·서브컬처 콘텐츠 사이트를 만들 생각이었습니다. 당시에는 차별화할 방법도 하나 생각했죠. 축구와 너드 콘텐츠를 한곳에서 다루는 겁니다. 대단하지 않나요?
왜 다시 시작하는가?
저는 항상 Bar do Clovão을 다시 시작하고 싶었습니다. 하지만 늘 무언가 걸림돌이 생겼습니다. 공부나 일을 우선해야 했고, 여가 시간에는 제 나름의 휴식도 필요했습니다. 아무리 그래도 사람인데 계속 달릴 수는 없잖아요. 그러는 동안 블로그는 점점 뒤로 밀려났고, 새로운 기회들이 생기면서 결국 다른 분야인 영상·미디어 분야에 집중하게 되었습니다(이 이야기는 다음에 하죠).
저는 많은 사람들이 이런 생각을 한다는 것을 깨달았습니다. “이미 이런 게 수없이 많은데 내가 굳이 왜 해야 하지?” 저 역시 오랫동안 이런 생각 때문에 망설였습니다. 하지만 나이를 먹고 생각이 성숙해지면서 소위 **“에라 모르겠다”**라는 마음가짐이 점점 더 자주 생기기 시작했습니다.
이런 생각은 새로운 것을 배우거나, 건강한 취미를 갖거나, 새로운 사람을 만날 기회를 막아버립니다. 결국 기회를 놓치는 것이죠. 이 사실을 깨닫고 나서 저는 오디오와 영상 기술에 대해 더 공부하기 시작했고, 스트리밍 소프트웨어에 대해서도 많은 것을 배웠습니다. 그리고 그 모든 것을 배우는 과정에서, 아무런 의무감 없이 내가 좋아하는 것에 대해 다시 글을 써보는 것도 재미있겠다는 생각이 들었습니다.
즉, 이제 이 블로그는 검색 엔진 같은 색인 시스템에 노출되기 위해 거의 매일 뉴스를 억지로 올리면서 콘텐츠를 채우는 공간이 아닙니다. 새로운 레이아웃과 마찬가지로 좀 더 가볍고, 단순하며, 사용하기 편한 공간이 될 겁니다. 그래서 제가 가진 소프트웨어 개발 능력을 직접 활용해 보기로 했습니다. 2015년 당시에는 아직 배우는 단계였고, 취미로 프로그래밍을 하고 있었습니다.
게다가 당시에는 디자인도 급하게 만들었습니다. WordPress를 사용했고, 작업을 빠르게 하기 위해 플러그인과 프레임워크를 잔뜩 넣었습니다. 그 결과 기술적인 수정 작업이 오히려 귀찮아졌습니다(무료 서버에 부담을 주기도 했고, 블로그에 글을 쓸 수 있었던 시간까지 잡아먹었으니 정말 별로였죠).
앞으로 올라올 콘텐츠는 제가 쓰고 싶은 것이라면 무엇이든 될 겁니다. 분석 글일 수도 있고, 나중에 필요할지도 몰라서 남겨두고 싶은 기록일 수도 있습니다. 그리고 무엇보다 재미있는 건, 이 모든 것을 인터넷에서 공유하는 것이죠!
아래에는 블로그 엔진을 만든 과정을 조금 기록해 보겠습니다. 조금 기술적인 내용이 될 것이고, 앞으로는 누구나 사용할 수 있도록 코드를 공개하는 것도 생각하고 있습니다.
이 모든 것은 어떻게 만들었을까?
우선 개인 프로젝트이기 때문에 저는 프론트엔드 라이브러리를 찾아다니며 이것저것 사용하는 편이 아닙니다. 제 방식대로 만드는 것을 좋아합니다. 결국 개인 프로젝트니까요. 일이 되어버리는 것이 아니라 좀 더 “재미있는” 것이어야 합니다. 물론 모든 것을 처음부터 만든 것은 아니고, React 라이브러리 몇 가지를 사용했습니다.
그럼 시작해 보겠습니다. 완전히 순수한 React를 프레임워크 없이 사용해서 모든 것을 직접 제어할 수 있도록 했습니다. 기본적으로 이미 만들어진 엔진을 참고했습니다. 이 엔진은 Markdown (md) 파일을 가져와서 하나의 HTML 게시물로 변환합니다(어차피 브라우저는 Markdown을 직접 읽을 수 없으니까요).
그래서 react-markdown, remark-gfm, gray-matter 같은 라이브러리를 설치해야 했습니다. 그런데 왜 필요할까요?
제가 사용하는 게시물 템플릿은 대략 다음과 같은 형태입니다.
---
title: ""
thumbnail: ""
date: "2001-01-01T00:00:03+00:00"
description: ""
categories:
- category
tags:
- tag
draft: true
---
이 헤더를 읽기 위해 gray-matter를 사용하고, Markdown을 해석하기 위해 react-markdown을 사용합니다. 그리고 remark-gfm은 해석 기능을 보완하고, 앞에서 이미지와 이미지 바로 아래에 표시되는 설명을 통해 보여드린 것처럼 일부 구성 요소를 개선하는 데 사용합니다.
이를 위해 단순히 이라고 작성하면, 단순한 img 태그가 아니라 좀 더 구조화된 HTML로 자동 변환됩니다.
또 다른 재미있는 기능은 동영상을 삽입하는 것입니다. Markdown 자체에는 동영상용 iframe 태그를 삽입하는 기능이 없지만, 이것도 문제가 되지 않습니다. remark-gfm을 사용해 URL을 읽고 동영상인지(예를 들어 YouTube 동영상인지) 감지하도록 하면 됩니다. 아래에서는 https://www.youtube.com/watch?v=dQw4w9WgXcQ URL을 사용해 간단한 예를 보여드리겠습니다.
어떤가요? 모바일 환경에도 맞게 조정할 수 있는, 완전히 반응형이고 원하는 대로 커스터마이즈할 수 있는 HTML을 만들 수 있습니다!
그리고 이것을 실제 인터넷에 올리는 것도 그리 어려운 일이 아닙니다. Github Pages를 사용할 수도 있었지만, 저는 호스팅에 Netlify를 사용하기로 했습니다. 둘 다 무료입니다!
이미지를 호스팅하는 것도 AWS S3를 사용하면 문제가 없습니다. 다만 이미지를 업로드하기 전에 Tiny를 사용합니다. 이미지 품질을 잃지 않으면서 압축해 주는 서비스입니다(png, jpeg, gif, webp 지원). 유료 서비스이기는 하지만 500장 이상의 이미지를 압축할 때만 비용이 발생합니다. 이 블로그는 규모가 작으니 한 달에 500장 넘는 이미지를 사용할 이유가 전혀 없죠!
댓글 시스템을 넣는 것이 과연 가치가 있을지 한동안 고민했습니다. 그러다 문득 이런 질문이 떠올랐습니다. “댓글 기능을 활성화하지 않을 이유가 있나?” 인터넷에는 별별 사람들이 다 있습니다. 만약 그중 누군가가 블로그 댓글에 찾아온다면 그냥 차단하고 신경 쓰지 않으면 됩니다! 그래서 Disqus를 사용하기로 했습니다. 개발자에게도, 일반 사용자에게도 사용하기 쉬운 좋은 댓글 시스템이고, 무엇보다 무료라는 점이 마음에 들었습니다!
일단은 이 정도인 것 같습니다… 이제 블로그의 기술적인 수정도 쉽고, 새로운 글을 올리는 것도 간단해졌습니다. 어떤 텍스트 편집기든 사용할 수 있고, Github와 Netlify가 나머지 작업을 알아서 처리해 줍니다.
읽어주셔서 감사합니다!