Hello World
·
blogNext.jsCloudflare
블로그를 새로 만들었어요
안녕하세요. 이승우라고 해요.
원래는 velog에서 블로그를 운영하고 있었어요. 글 쓰기 편하고 개발자 커뮤니티도 잘 되어 있어서 좋았지만, 디자인이나 기능을 자유롭게 바꾸고 싶다는 생각이 점점 커졌어요. 그래서 직접 블로그를 만들기로 했어요.
처음에는 Notion 테이블을 DB처럼 활용해서 블로그를 만들었어요. Notion API로 글을 불러오고, 페이지를 렌더링하는 구조였는데 쓰다 보니 불편한 점이 하나둘 생기더라고요.
Notion 기반 블로그의 한계
Notion API 기반 블로그는 처음에는 편했어요. Notion에서 글을 쓰면 바로 반영되니까요. 그런데 운영하다 보니 몇 가지 문제가 있었어요.
- 이미지 만료: Notion에서 제공하는 이미지 URL은 일정 시간이 지나면 만료돼요. 글에 넣은 이미지가 어느 날 갑자기 깨져 있는 경험을 여러 번 했어요
- API 속도와 제한: 페이지를 열 때마다 Notion API를 호출해야 해서 응답이 느렸고, rate limit에 걸릴 때도 있었어요
- 커스터마이징 제약: 디자인이나 기능을 바꾸고 싶어도 Notion이 제공하는 블록 구조에 맞춰야 했어요. 검색, 댓글 같은 걸 원하는 대로 만들기 어려웠고요
결국 콘텐츠를 외부 서비스에 의존하는 구조 자체가 한계라는 걸 느꼈어요. 거기에 좋아요, 댓글, 조회수 같은 인터랙션 기능을 붙이려면 별도의 DB가 필요한데, Notion만으로는 이런 확장이 어려웠어요.
그래서 어떻게 바꿨나
콘텐츠를 로컬 MDX 파일로 관리하고, 빌드 타임에 정적 생성하는 방식으로 전환했어요. git으로 버전 관리도 되고, 이미지도 로컬에 두니까 만료 걱정이 없어요. 무엇보다 블로그의 모든 부분을 직접 컨트롤할 수 있게 됐어요.
기술 스택
- Next.js: 블로그는 검색 엔진 노출이 중요해서 SSR/SSG를 잘 지원하는 프레임워크가 필요했어요. App Router 기반으로 페이지별로 정적 생성과 서버 렌더링을 유연하게 선택할 수 있는 점이 결정적이었어요
- MDX: 마크다운에 React 컴포넌트를 섞어 쓸 수 있어서 글 작성이 유연해요
- Tailwind CSS: 유틸리티 기반 스타일링이라 빠르게 작업할 수 있었어요
- Framer Motion: 페이지 전환이나 카드 호버 같은 인터랙션에 활용하고 있어요
- Cloudflare Pages + D1: 배포와 DB를 한 곳에서 해결했어요. 조회수, 좋아요, 댓글 같은 기능을 서버리스로 처리하고 있어요
앞으로의 계획
이 블로그를 계속 발전시키면서 그 과정도 글로 남겨볼 생각이에요. 개발 외에도 일상이나 여행 이야기도 담아보려고 해요.


