들어가며
개인 블로그에 대한 갈망은 개발자라면 다 가지고 있을 거라 생각합니다. 새로운 걸 배우고, 공유하기 좋아하는 개발자들 천성에 블로그 만한 좋은 수단은 또 없죠..! 하지만 막상 블로그를 직접 만들려다 보면 고민해야 할 것이 한두 가지가 아닙니다. 특히, 블로그의 인프라와 운영 방식은 생각보다 골치 아픈 문제입니다.
프로젝트 컨셉
도입
개인 블로그나 홈페이지를 운영할 때 가장 부담이 되는 요소는 바로 인프라입니다.
블로그를 운영한다고 해서 돈을 벌 수 있는 것도 아니고, 단순히 개인 공간을 위한 사이트를 유지하는 데 좋은 서버나 강력한 인프라를 두기엔 시간적·금전적 여력이 부족한 경우가 많죠.
특히, 데이터를 어디에 저장할 것인가? 하는 문제는 생각보다 애매합니다.
- 데이터베이스? → 유지보수 부담
- 자체 API? → 비용과 복잡성 증가
- 완전 정적인 사이트? → 유연성이 부족
그래서 결정한 제 홈페이지의 메인 컨셉은, Decoupled Backend입니다.
Decoupled Backend
- 백엔드가 있지만, 전통적인 백엔드처럼 데이터를 저장하는 역할이 아니라 프론트의 배포를 보조하고, 이미지 저장소와 프론트를 매개하는 역할만 수행한다.
- 프론트엔드가 저장소의 역할을 겸하며, SSG(Static Site Generation) 중심으로 프론트엔드가 데이터를 직접 저장/처리 한다.
- 서버와 관련없이 프론트엔드의 모든 기능이 온전하게 작동한다.
기본적으로 글 작성 플로우는 위와 같이 흘러갑니다. fe repo에서 이미지를 제외한 모든 정적 데이터를 가지고 있고, 백엔드를 fe repo에 이를 푸시해주는 역할만 수행합니다.
FE 배포는 githubPage를 통해 처리하기 때문에 비용도 적으며, 프론트가 빌드시점에서 모든 데이터를 알고있기 때문에 SSG를 적극 활용해 SEO 하기 좋죠.
프로젝트 설계
기획 및 디자인
전체적인 테마색은 astor 닉네임에 어울리게 우주 느낌을 내고 싶었습니다. 우주 사진을 unspash에서 몇장 고른 후 사진과 어울리는 색상 디자인 시스템을 구축했습니다. 그렇게 고른 색들은 아래와 같습니다.
기술스택과 아키텍처
프론트엔드
- Framework : Astro (SSG 활용 서버 없이 SEO)
- Styling : Tailwind CSS
- Deployment : GitHub Pages
가장 핵심인 포인트는 FE 프레임 워크로 Astro를 썼다는 점입니다..! Astro 프레임워크의 철학이 제 프로젝트 컨셉과 가장 잘 맞아서 결정하게 되었습니다. Astro의 내장된 mdx 프론트 메터 기반 data저장, mdx->html 렌더링 기능으로 별다른 노력없이 md 렌더러 구현 + SEO를 동시에 해결할 수 있는 점이 매력적이었습니다.
개인 포트폴리오 등에 사용하기 좋은 복잡하고 화려한 컴포넌트 또한 tsx로 작업하여 합칠 수도 있죠.
백엔드
- Framework: NestJs (가볍고 빠른 개발)
- Infra: ec2 or local, s3, cloudFront (프리티어 + 스토리지만 활용해 비용 절감)
- DB: X
백엔드는 최대한 라이트하게 구성했습니다. 아무래도 t2-micro 혹은 nano 환경에서도 돌아갈 수 있는 경량 서버를 띄워야 하고, 복잡한 기능은 들어가지 않을 예정이여서 가볍게 nest.js를 사용했습니다.
또한 기능이 가볍고, 사용자가 저 밖에 없다보니 유지보수나 확장성, 안정성이 크게 중요하지 않기 때문에, 최소한의 layering, 모듈화만 하였습니다. 전통적인 application/ presentation / infrastructure 3개의 레이어 기반에 최소한의 데이터 정합성과 로직 재활용 및 애플리케이션 레이어 책임 집중 방지를 위한 domain 레이어까지 4개만 두고 최대한 빠르게 개발하는 걸 목표로 하였습니다.
마무리
제가 백엔드 개발자긴 하지만,, 그래도 웹개발자로서 개인 웹을 짜치게 만드는건 너무 모양이 빠지는 거 같아서,, 이것 저것 붙이고 꾸미다 보니 완성까지 약 3주정도 소요가 되었네요..! 그래도 이렇게 코어한 기능을 완성하고 첫 글을 쓰니 뿌듯합니다 ㅎㅎ
앞으로 astorverse 홈페이지를 만들어 나가면서 사용한 상세한 로직들, 기능들에 대한 회고는 이 시리즈로 이어가겠습니다..!