초코집사 블로그
2025년 08월 02일
216
초코집사 블로그
Spring Boot + Next.js + AWS 기반 개인 기술 블로그 프로젝트
프로젝트 한 줄 소개
단순한 정적 블로그가 아니라, 인증, 자동화, 캐싱, 배포, 운영까지 포함한 서비스형 개인 개발 블로그를 직접 설계하고 구현한 프로젝트입니다.
백준과 프로그래머스에서 푼 알고리즘 문제를 Chrome Extension으로 수집하고, LLM을 활용해 설명을 정리한 뒤 블로그에 자동 포스팅할 수 있도록 만들었습니다. 여기에 JWT 인증, Redis 캐싱, 방문자 통계, CI/CD 파이프라인까지 붙여 실제로 운영 가능한 형태의 풀스택 애플리케이션으로 발전시켰습니다.
왜 만들었는가
기술 블로그를 운영하는 목적은 단순히 글을 올리는 데 있지 않았습니다.
직접 만든 서비스를 운영하면서 아래 경험을 한 프로젝트 안에서 모두 해보고 싶었습니다.
- 백엔드 API 설계
- 프론트엔드 UI 구현
- 인증/인가 설계
- 캐싱과 성능 개선
- 배포 자동화와 운영
- 반복 작업 자동화
그래서 이 프로젝트는 "글을 쓰는 공간"이 아니라, 직접 만들고 운영하면서 계속 개선하는 제품을 목표로 시작했습니다.
내가 맡은 범위
이 프로젝트는 개인 프로젝트로, 아래 영역을 전부 직접 구현했습니다.
- Spring Boot 기반 백엔드 설계 및 구현
- Next.js App Router 기반 프론트엔드 구현
- MySQL / Redis 데이터 구조 설계
- JWT 기반 인증 시스템 구현
- Chrome Extension 기반 자동 포스팅 기능 구현
- GitHub Actions 기반 CI/CD 구축
- Docker 및 AWS 배포 환경 구성
- 운영 중 발생하는 성능 문제 분석 및 개선
핵심 기능
1. 알고리즘 자동 포스팅
백준과 프로그래머스에서 푼 문제를 한 번의 클릭으로 블로그 글 초안까지 생성할 수 있도록 만들었습니다.
구성 흐름은 다음과 같습니다.
- Chrome Extension에서 문제 정보와 풀이 코드 추출
- LLM 프롬프트 생성
- 풀이 설명 및 요약 자동 생성
- 블로그 관리자 페이지에서 확인 후 등록
이 기능을 통해 반복적인 포스팅 작업을 줄이고, 문제 풀이 기록을 더 꾸준히 남길 수 있도록 했습니다.
2. JWT 기반 인증 시스템
관리자 기능 보호를 위해 JWT 기반 인증 시스템을 도입했습니다.
- Access Token / Refresh Token 분리
- 관리자 로그인 및 인증 상태 유지
- 보호된 API 접근 제어
- 인증 실패 및 만료 처리 흐름 구현
단순 로그인 기능을 넘어서, 실제 운영 환경에서 사용할 수 있는 인증 흐름을 구성하는 데 집중했습니다.
3. Redis 캐싱 전략
조회수 집계와 인기 포스트 조회에는 Redis를 적용했습니다.
특히 자주 조회되는 데이터와 실시간성이 필요한 데이터를 구분해서 캐싱 전략을 세웠고, 그 결과 DB 조회 부하를 90% 이상 줄일 수 있었습니다.
적용 예시는 다음과 같습니다.
- 인기 포스트 목록 캐싱
- 조회수 집계 보조 처리
- 방문자 수 계산 최적화
4. Markdown 기반 에디터
관리자 페이지에서 마크다운으로 글을 작성하고 미리보기까지 확인할 수 있도록 구성했습니다.
- Markdown 작성
- HTML 렌더링
- 실시간 프리뷰
- 태그 및 카테고리 관리
블로그 운영 관점에서 "글 작성이 편해야 지속 가능하다"는 점을 고려한 기능입니다.
5. 방문자 통계
IP 기반 중복 방지 로직을 적용해 방문자 수를 집계했습니다.
- 동일 사용자 중복 방문 제한
- 일별/누적 방문자 집계
- 방문자 통계 API 제공
완벽한 분석 시스템이라기보다, 개인 블로그 운영에 필요한 수준의 통계를 직접 설계하고 구현하는 데 의미를 두었습니다.
기술 스택
Backend
- Framework: Spring Boot 3
- Language: Java 17
- Database: MySQL 8.0
- Cache: Redis 7
- ORM: Spring Data JPA + Hibernate
- Authentication: JWT + Spring Security
- API Docs: SpringDoc OpenAPI (Swagger)
Frontend
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- State / Data Fetching: React Query, Zustand
- Rendering: Markdown 기반 포스트 렌더링
DevOps / Infrastructure
- Backend Hosting: AWS Lightsail
- Frontend Hosting: Vercel
- Storage: AWS S3
- Container: Docker + Docker Compose
- CI/CD: GitHub Actions
- Monitoring: Spring Boot Actuator + Prometheus
AI / Automation
- LLM: Google Gemini API
- Extension: Chrome Extension Manifest V3
- Automation: GitHub Actions Workflow
아키텍처 설계
시스템 아키텍처
전체 구성은 다음과 같습니다.
- 프론트엔드: Next.js
- 백엔드: Spring Boot REST API
- 데이터 저장: MySQL
- 캐시: Redis
- 파일 저장: AWS S3
- 자동화: Chrome Extension + LLM
- 배포: GitHub Actions + Docker + AWS/Vercel
데이터베이스 설계
주요 엔티티 관계는 다음과 같습니다.
- User (1) - (N) Post
- Category (1) - (N) Post
- Post (N) - (M) Tag
- User (1) - (N) ApiKey
posts
id (PK)
title
content (TEXT)
html_content (TEXT)
view_count
published
category_id (FK)
user_id (FK)
timestamps
post_tags
post_id (FK)
tag_id (FK)
구현하면서 중요했던 점
1. 단순 CRUD가 아니라 운영 가능한 구조로 만들기
처음에는 블로그 기능만 구현하면 된다고 생각했지만, 실제로는 운영하면서 고려해야 할 요소가 훨씬 많았습니다.
- 인증/인가
- 업로드 파일 관리
- 조회수 집계
- 방문자 통계
- 캐싱 전략
- 자동 포스팅 흐름
- 배포 자동화
이 과정에서 "기능 구현"과 "운영 가능한 설계"는 완전히 다른 문제라는 점을 배웠습니다.
2. 성능 개선은 체감되는 결과가 있어야 한다는 점
Redis는 단순히 넣는다고 끝나는 기술이 아니라, 어디에 적용해야 효과가 나는지가 더 중요했습니다.
이 프로젝트에서는 인기 포스트와 조회수 집계처럼 조회 빈도가 높고 반복되는 영역에 적용했고, DB 부하를 90% 이상 감소시키는 결과를 얻었습니다.
3. 자동화는 생산성을 실제로 바꾼다는 점
Chrome Extension과 LLM을 연결해 알고리즘 풀이를 자동으로 정리하는 기능을 만들면서, 반복 작업을 줄이는 자동화의 가치를 직접 체감할 수 있었습니다.
단순히 "재밌는 기능"이 아니라, 실제로 블로그 운영 습관을 바꾸는 기능이 되었다는 점이 의미 있었습니다.
아쉬웠던 점
아직 개선할 부분도 분명히 있습니다.
- 검색 기능이 단순해서 전문 검색 고도화가 필요함
- 모니터링 대시보드가 더 정교해질 필요가 있음
- 로그 수집 및 분석 체계가 아직 약함
- 자동 포스팅 결과물을 더 안정적으로 보정할 필요가 있음
이 프로젝트는 완성보다 지속적인 개선에 더 가까운 프로젝트라고 생각합니다.
향후 개선 계획
1. 검색 기능 고도화
- Elasticsearch 학습 및 적용
- 전문 검색
- 하이라이팅 지원
2. 모니터링 강화
- Grafana 대시보드 고도화
- Prometheus 메트릭 확장
- 로그 수집 체계 정리
3. 이벤트 기반 구조 연습
- Kafka 학습 및 일부 기능 적용 검토
- 비동기 처리 구조 실험
마무리
이 프로젝트는 단순한 블로그 제작이 아니라, 하나의 서비스를 직접 설계하고 운영해 본 경험이었습니다.
이 프로젝트를 통해 아래 영역을 실제로 다뤄볼 수 있었습니다.
- 백엔드: Spring Boot + JPA + Redis
- 프론트엔드: Next.js + TypeScript + Tailwind CSS
- DevOps: Docker + GitHub Actions + AWS
- 자동화: Chrome Extension + LLM API
특히 기능 구현 자체보다, 운영 중 발생하는 문제를 직접 해결하고 구조를 개선해 나가는 과정에서 가장 많이 배울 수 있었습니다.
관련 글
Blue Green 무중단 배포
스프링 시큐리티 적용
OAuth 구현
다중 시큐리티 필터 체인
블로그 캐싱 전략
댓글을 불러오는 중...