배경 설명

3번의 블로그 개설

본래, 나는 예전부터 블로그에 대한 욕구가 있었다. 웹 개발자로써 자신만의 웹사이트를 갖고 싶다는 것은 누구나 하는 고민이라고 생각한다.

난 18년도 고등학교 시절 때부터, HTML, CSS, Javascript를 배우면서 웹 개발자로의 길을 일찍 정했었고, 2~3학년 쯤 되니 PHP나 MySQL 등 서버단까지 배우게 되면서 블로그를 만들고 싶다는 생각이 커졌었다. 한참 취업을 준비할 때다보니 자신만의 포트폴리오도 나열해서 그럴싸하게 보여주고 싶고, '나만의 공간'이라는 인식이 있어서 개발자로써의 나 자신을 나타내기에 적합하다고 생각했기 때문이다.

당시 배웠던 Javascript 와 PHP를 사용해서 꽤 괜찮은 블로그를 만들었지만, 학생 신분이다보니 배포하는 과정에서 비용적인 부분도 부담이 되었었고, 학업과 대회 준비로 인해 흐지부지 되었었다.

그 후, 취업하게 되고 나서도 한번 블로그를 만든 적은 있었는데, 그 때도 회사에서는 Nuxt를 사용하다 보니, 한창 뜨는 React에 대해서도 공부하고 싶다는 마음에 React와 Express.js 를 사용해서 간단한 블로그를 만들었었다. 하지만, 지속적인 게시물 갱신을 하지 못했었고 당시 AWS EC2를 통해 개발했었는데, free tier기간인 12개월이 지나면서 자연스럽게 블로그를 내리게 되었다.

그럼에도 이번에 다시 한번 3번째로 블로그를 도전하게 되었는다. 대학교를 졸업하게 되면서 어느 정도 여유가 생긴 것도 있고, 졸업 이후에도 공부를 계속 습관화하면서 학습한 것을 정리하기 위해서이다.

해결 과정 & 의사 결정

플랫폼 결정

이번에는 플랫폼에 대한 고민을 많이 하였는데, 일단 보편적으로 사용하는 velog 나 tistory 같은 경우는 배제하고 싶었다.

블로그는 나만의 개인적인 공간이라는 인식도 있지만, 실제로 개발자가 운영하면서 스스로 가장 많이 접할 수 있는 토이 프로젝트이며, 계속적으로 나 스스로가 사용하기 때문에 불편한 점을 인지하고 개선하기 적합하며, 이는 새로운 기술을 적용해보기에도 유리하기 때문이다.

따라서 개인 블로그를 따로 구축하고 싶었는데, 가장 중요한 것은 금액이였다.

개인이 운영하기 때문에 너무 비싼 금액이면 비용적으로 부담이 될 수밖에 없고, 학습 목적이라 이걸로 광고를 붙인다고 해서 큰 이익을 창출하진 않을 것이기 때문이다.

기존에 사용하던 AWS EC2는 보편적으로 많이 사용하여 나중에 훗날에도 도움이 될만한 스택이지만, 프리티어 1년을 이미 다 써버리기도 했고, 좀 더 저렴한 환경으로 구축해야지 개인적으로 운용하기에 부담이 없었다.

따라서, 결론적으로 사용하게 된 플랫폼은 다음과 같다.

Front-end: Netlify / Next.js(React)
Back-end: Heroku / Nest.js(Express.js)
DNS: Cloudflare
Image Storage: Cloudinary

도메인은 가비아에서 .site 도메인이 1년에 2,500원이길래 구매해서 무료 DNS를 제공하는 Cloudflare와 연동하였고 프론트는 무료로 Next.js 서비스를 배포할 수 있으며, 전용 라이브러리 @netlify/plugin-nextjs 를 지원하기에 개인이 부담없이 사용하기에는 Netlify 좋을 것으로 판단했다. 이미지 호스팅도 마찬가지로 Cloudinary 가 무료로 이미지 업로드를 일정 수준까지 제공하고 있는데, 또 다른 개인 프로젝트에서도 같이 쓰고 있는데도 제약 공간이 여유로워서 한동안은 문제 없을 것 같다.

마지막으로 Heroku는 최근까진 PostgreSQL과 API를 올릴 수 있는 Dyno를 무료로 제공하였으나, 최근에는 가장 저렴한 가격 기준으로 각각 최대 $5의 사용료를 지불해야한다. 그래도 나름 이정도면 AWS에서 내던 금액보단 저렴한 것 같아 괜찮은 것 같다.

전체적으로 모든 토이프로젝트를 굴리는데 현재는 위와 같이 사용료가 나가고 있는데, 사실상 Heroku만 비용이 들기 때문에 나름대로 학습비용이라고 생각하면 합리적인 금액인 것 같다.

Vercel도 고민해 볼 필요가 있지 않을까?
Vercel은 Next.js 를 개발한 회사에서 만든 서버리스 플랫폼이기 때문에, Next.js 프레임워크와의 통합이 원활하다는 장점이 있다.
무료 빌드 시간도 Vercel은 월 6,000분, Netlify는 월 300분을 제공한다. 하지만, 고민 끝에 Netlify 를 결정하였는데, Vercel은 공식적으로 상업적 허용을 허용하지 않는다. 나는 나중에 서비스를 확장하다가 내 서비스에 광고를 넣어서 수익을 창출해 보는 것이 꿈(?)이었기 때문에, Vercel은 대상으로 고려하지 않았다. 이런 목적이 따로 없고, Next.js 프로젝트라면 Vercel을 선택했을 것 같다.

귀차니즘 방지 대책

블로그를 운영하는 데에서 가장 중요한 건 가장 주의해야 하는 것은 귀차니즘이라고 생각한다.

이게 무슨 소리냐라고 할 수 있지만, 블로그란 자고로 꾸준히 자신이 학습하고 공부한 내용을 기록할 수 있어야 의미가 있는 것인데 이 일이 귀찮고 번거롭게 느껴지면 지속적으로 사용하기 어렵기 때문이다.

나태하다고 여겨질 순 있지만, 실제로 업무를 계속하다 보면 얻는 인사이트들이나 새로운 기술을 사용해 보면서 얻은 깨달음을 글로 풀어내는 것은 또 별개의 이야기라고 생각한다. 머릿속으로 이해한 바를 글로 설명하는 것은 생각보다 어려운 것이다.

따라서 나는 이를 방지하기 위해 내가 글을 작성할 때 좀 더 손쉽게 작성할 수 있도록 메뉴를 구성하고, 템플릿을 짜두기로 했다.

콘텐츠 기획

해당 블로그의 콘텐츠는 크게 3가지로 나뉜다.

[문제해결]: 실무나 개인 개발 과정에서 겪은 문제에 대한 해결방안 작성
[기술리뷰]: 새로운 기술이나 라이브러리를 분석하고 정리
[회고]: 프로젝트에 대한 크고 작은 결정 과정에 대한 회고록 작성

[문제해결]은 실제로 실무 개발 중이나 개인 개발을 하다보면 발생하는 이슈를 정리하여 스스로도 찾아볼 수 있도록 하면, 나중에 이를 돌아보면서 '이게 이래서 발생한 문제였구나.' 하고 되돌아볼 수 있고, 글을 작성하는 중에도 리마인드가 되어 오랫동안 기억할 수 있을 것이라고 생각했다. 실제로 블로그를 현재 개발하고서 가장 많이 작성 중인 카테고리이다.

[기술리뷰]는 새롭게 내가 배운 기술이나 라이브러리에 대한 생각을 정리하는 공간이다. 지금은 당장 블로그를 개발하면서 글을 작성하지 못했지만, 나중에 블로그를 개발할 때 새롭게 접한 Nest.js 나 새롭게 접하는 라이브러리에 대해 작성할 것이며, Notion 으로 앞으로 공부할 내용을 메모만 해둔 상태이다. 앞으로 개인적으로 공부할 땐 가장 애용하지 않을까 싶다.

[회고]는 진행 중인 프로젝트에 대한 의사 결정 과정이나, 프로젝트를 마무리한 후 되돌아 보는 용도로 작성할 공간이다. 일반적으로 분기별로 회고글을 작성하거나, 년도별로 회고를 작성하는 것도 좋지만, 프로젝트에서 왜 그러한 결정을 내렸는지 복기하고 어떤 결과를 이뤘는 지 정리하는 게 년도나 분기별로 뭉뚱그려 작성하는 것보다 효과적이고, 스스로 작성하기도 편리할 것으로 생각되어 따로 공간을 마련했다.

이렇게 자주 사용할 법한 메뉴를 만들어 두고, 그 안에서 어떻게 하면 좀 더 쉽게 글을 작성할 수 있을까 고민하였는데,

그 결과가 바로 카테고리 별로 '템플릿'을 구성하는 것이다.

템플릿 구성

예를 들어, 현재 [문제해결] 에서 마련한 템플릿은 다음과 같다.

발생한 이슈
- 어떤 문제가 발생했는가?
- 이슈 발생 환경: (OS, 브라우저, 프레임워크 & 라이브러리 버전)
문제 원인 분석
- 가능한 원인들 나열)
- 해당 문제 발생 코드 예제
해결 방법
- 어떤 해결 방안을 시도했는가?
- 해결 방법에 대한 설명
- 무엇이 문제였는가?
마무리
- 이 문제를 통해 배운 점
- 앞으로 비슷한 문제를 피하기 위해 할 수 있는 조치
관련 참고 자료
- 공식문서, 블로그, Stack Overflow 링크

나 자신에게 이 문제가 왜 발생을 했고, 원인을 분석해서 어떤 해결 방법을 도출하였는지. 그리고 문제를 앞으론 어떻게 대처해 나갈 것인지를 템플릿화하여 제공한 것이다.

아무것도 없는 빈 여백에 글을 처음부터 작성해야 한다면 고민스러운 법이다. 물론, 자유롭게 제목을 사용하진 못하지만, 지금 이 글을 작성하고 있는 것처럼 소제목으로 해당 항목에 대한 글을 작성한다면 부드럽게 맥락을 이어가기 편리하게 작용한다.

이는 '나 자신'이 서비스 제공을 받는 주체임을 인식하고 어떻게 하면 '내가 편리하게 사용할 수 있을까?' 를 고심한 결과였다.

결과 및 개선점

일단 결과적으로 봤을 땐 프로젝트는 나름 성공적이라고 생각하고. 블로그는 아직 손볼 곳은 많지만, 기본적인 기능은 모두 완성되었다. 전체적인 개발 기간이 2주에서 3주정도 되는 것 같은데, 틈틈히 보완해야할 구석이 많이 보여서 보일 때마다 메모해 두고 시간날 때 수정하려고 한다.

비용적으로는 요즘 달러가 많이 올라서 대강 월에 14,000원정도 지불하게 되는데, API 서버를 확장하여 다른 토이프로젝트도 이미 하고 있고, 앞으로도 시간 날 때 토이 프로젝트를 확장할 생각도 있기 때문에 크게 부담되는 금액은 아니라서 다행이었다.

지금까지는 회사에서 Nuxt를 주력으로 사용했다 보니까 React 관련 지식이 많이 부족하다고 자각하고 있기 때문에, 앞으로는 이 블로그를 테스트 베드로써 사용해서 다양한 기술들을 실무에서 활용할 수 있도록 적용해 보려고 한다.

다행히, Vue와 React는 러닝커브가 비슷하여 크게 다르지 않고, 이전부터 React는 꾸준히 공부해왔기 때문에 새롭게 배우는 데에 어려움은 없었다. 오히려 백엔드로 새롭게 도입한 프레임워크인 Nest.js 쪽이, 구조가 정형화되어있고 자체적인 개념이 많아서 공부하는 데에 어려움을 겪었던 것 같다.

앞으로 시간 날 때 이 블로그를 활용해서 새로운 지식을 꾸준히 공부해 보려고 한다.

회고

프로젝트 선택

해시태그