포트폴리오

초코집사 블로그

2025년 08월 02일
206
#AWS#Docker#MySQL#포트폴리오#블로그#Devops

초코집사 블로그

Spring Boot + Next.js + AWS 기반 개인 기술 블로그 프로젝트

mainscreen

프로젝트 한 줄 소개

단순한 정적 블로그가 아니라, 인증, 자동화, 캐싱, 배포, 운영까지 포함한 서비스형 개인 개발 블로그를 직접 설계하고 구현한 프로젝트입니다.

백준과 프로그래머스에서 푼 알고리즘 문제를 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. 알고리즘 자동 포스팅

chr

백준과 프로그래머스에서 푼 문제를 한 번의 클릭으로 블로그 글 초안까지 생성할 수 있도록 만들었습니다.

구성 흐름은 다음과 같습니다.

  • Chrome Extension에서 문제 정보와 풀이 코드 추출
  • LLM 프롬프트 생성
  • 풀이 설명 및 요약 자동 생성
  • 블로그 관리자 페이지에서 확인 후 등록

이 기능을 통해 반복적인 포스팅 작업을 줄이고, 문제 풀이 기록을 더 꾸준히 남길 수 있도록 했습니다.

2. JWT 기반 인증 시스템

관리자 기능 보호를 위해 JWT 기반 인증 시스템을 도입했습니다.

  • Access Token / Refresh Token 분리
  • 관리자 로그인 및 인증 상태 유지
  • 보호된 API 접근 제어
  • 인증 실패 및 만료 처리 흐름 구현

단순 로그인 기능을 넘어서, 실제 운영 환경에서 사용할 수 있는 인증 흐름을 구성하는 데 집중했습니다.

3. Redis 캐싱 전략

visi

조회수 집계와 인기 포스트 조회에는 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

아키텍처 설계

시스템 아키텍처

arc

전체 구성은 다음과 같습니다.

  • 프론트엔드: 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 구현
다중 시큐리티 필터 체인
블로그 캐싱 전략

댓글을 불러오는 중...