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