프로젝트 개요
프로젝트 결과, 소설, 그리고 프로젝트 과정에서의 기록을 정리하기 위한 웹 플랫폼입니다.
- 개발 형태: Spring Boot 기반 웹 애플리케이션(MVC 구조)
- 개발 인원: 1인(전 과정 단독 개발)
- 개발 기간: 약 2주
- 기술 스택
- FE: HTML, CSS, JavaScript, Thymeleaf
- BE: Java, Spring Boot, Spring Data JPA, Spring Security, Lombok
- DB: MySQL, AWS RDS
- Infra: AWS EC2, AWS S3
- DevOps/CI·CD: Docker, GitHub Actions
- Dev Tools: IntelliJ IDEA, VS Code, Git/GitHub
→ 배포 주소: 바로 이 곳.
→ 같이 보면 좋은 글: https://blankspace.io.kr/board/BLOG/post/16
공통 설계 포인트
코어 아키텍처
- MVC 계층 분리: Controller, Service, Repository로 계층을 분리하여 관리합니다.
- Thymeleaf·REST API 병행: Thymeleaf로 동적 페이지를 렌더링하고, 일부 기능은 REST API로 처리합니다.
- DTO/응답 포맷: 데이터 전송에 필요한 DTO(Data Transfer Object)를 사용하여 일관된 데이터를 반환합니다.
공통 UI/UX 컴포넌트
- 공통 레이아웃: 전체 사이트에서 헤더, 푸터, 스크롤 내비게이션을 공통으로 사용하여 일관된 UI를 유지합니다.
- 토스트 알림: 사용자 피드백을 showToast()로 일관되게 처리해, 메시지가 중복되거나 애니메이션이 꼬이지 않도록 합니다.
보안/이미지 업로드
- Spring Security 인증/권한 관리: Spring Security를 활용하여 인증(Authentication)과 권한 관리(Authorization)를 처리합니다. 권한에 따라 관리자는 특정 기능(예: 게시글 삭제, 방명록 차단)에 접근할 수 있습니다.
- 비밀번호 변경 시 기존 세션 무효화: 마지막 비밀번호 변경 시각을 기록하고, 그보다 오래된 세션을 모두 정리합니다.
- 로그인 기록(감사 로그): 로그인 시 로그인 시각과 IP/지역(GeoIP) 정보를 저장하고, 로그아웃 시 세션 종료 시각을 기록합니다. 오래된 로그인 기록은 자동으로 정리합니다.
- IP/계정 기반 레이트 리밋: 요청 쿨다운으로 과도한 요청을 제한합니다.
- 이미지 업로드: 이미지는 S3 버킷에 업로드되고, 확장자/용량 검증을 통해 이미지 업로드를 안전하게 처리합니다.
배포/CI/CD 흐름
- PR/Push(dev) 시 Docker 이미지 빌드 후 GHCR 푸시(CI)
- CI 성공 시 AWS SSM으로 EC2에서 배포 스크립트 실행(CD)
- Docker 컨테이너는 non-root 사용자로 실행
인증/계정
인증/계정 관련 API 전체에 IP/계정 기반 레이트 리밋이 걸려 있습니다.
로그인
Rest API로 로그인을 요청하고, 로그인 성공 시 로그인 기록과 세션이 생성되며, 세션 정보를 쿠키에 저장합니다. 마지막 접속일로부터 30일 후 자동 로그아웃됩니다.
회원가입
Rest API로 회원가입을 요청하고, 요청 성공 시 계정을 생성하고, 메일로 인증을 위한 토큰 링크를 발송합니다. 로그인하려면 토큰 링크를 클릭해 인증을 완료해야 합니다. 토큰 유효 시간은 30분으로, 시간 내 인증을 마치지 못한 경우 메일 주소를 입력하면 재발급 가능합니다.
계정 찾기
Rest API로 계정 복구를 요청하고, 요청 성공 시 메일로 ID와 임시 비밀번호, 임시 비밀번호 적용 토큰 링크를 발송합니다. 토큰 링크를 클릭하면 임시 비밀번호가 적용됩니다.
비밀번호 변경
Rest API로 비밀번호 변경을 요청하고, 요청 성공 시 비밀번호 변경 시각을 기록하고 세션을 모두 정리합니다.
회원 탈퇴
Rest API로 회원 탈퇴를 요청하고, 요청 성공 시 메일로 회원 탈퇴 토큰 링크를 발송합니다. 토큰 링크를 클릭하면 ID를 제외한 모든 정보를 익명화합니다.
회원정보
회원 정보는 SSR로, 로그인 기록과 활동 기록은 Rest API로 불러옵니다. 사용자가 회원 본인인 경우 Rest API 요청으로 닉네임을 변경할 수 있습니다. 관리자는 사용자 차단 상태를 토글할 수 있고, 차단된 사용자는 로그인/댓글·방명록 작성이 제한됩니다.
회원목록
회원 목록을 Rest API로 불러옵니다. 카드를 선택하면 회원 정보 페이지로 이동합니다.
메인
사이트를 간략하게 소개하는 페이지입니다. 사이트 정보와 주요 포트폴리오 정보는 하드코딩돼있고, 최근 업데이트된 소설과 블로그 최신글은 SSR로 불러옵니다. 각 컴포넌트에는 스크롤 애니메이션이 적용됩니다.
게시판
포트폴리오/블로그 작성을 위한 시스템입니다.
게시판
카테고리 목록은 SSR로 불러옵니다. 관리자는 카테고리를 추가하거나, 제거하고, 이름을 변경할 수 있고, 이 요청은 Rest API로 처리됩니다. 편집 폼은 숨길 수 있습니다.
게시글 목록은 Rest API로 불러오고, 서버 단에서 페이징 처리됩니다. 카테고리 필터링 기능도 제공합니다.
게시글
게시글 정보는 SSR로 불러옵니다. 관리자에게는 수정/삭제 메뉴가 노출되며, 삭제는 SSR 폼 요청으로 처리됩니다.
이전 게시글/다음 게시글 ID를 불러와, 해당 페이지로 이동할 수 있는 메뉴를 제공합니다.
댓글 관련 로직은 전부 Rest API로 동작합니다. 대댓글만 가득한 페이지가 있는 것을 방지하기 위해, 원댓글 갯수만을 기준으로 페이징 처리를 합니다. 댓글/대댓글 작성 API는 계정 기반 레이트 리밋이 걸려 있습니다.
(사진에 댓글 갯수 카운팅 시 대댓글이 포함되지 않는 문제가 있는데, 해당 문제는 픽스했습니다.)
작성/수정
게시글 작성은 SSR 폼 요청으로 처리됩니다. 페이지 로드 시 게시판 정보를 불러오고, 블로그 글을 작성하는 경우 GIT 링크 필드는 숨깁니다. 썸네일/이미지는 S3 버킷에 업로드하고 URL 정보를 불러와 처리하며, 게시글 스타일링은 TinyMCE로 지원합니다.
수정 또한 SSR 폼 요청으로 처리합니다. 작성 페이지와 동일한 템플릿을 재사용하며, 컨트롤러에서 기존 게시글 정보를 내려주고, 폼에 바인딩합니다.
소설
소설 목록
Resr API로 소설 목록을 불러옵니다. 카테고리 필터링 기능도 제공합니다. 소설을 많이 업로드할 것으로 예상되지 않아, 페이징 처리는 따로 하지 않았습니다.
소설 등록/정보 수정
소설 등록/정보 수정 로직은 게시글 등록 로직과 거의 동일합니다.
회차 목록
SSR로 소설 정보와 전체 회차를 조회합니다. 연속된 회차의 소제목이 동일한 경우, 하나의 에피소드로 묶어서 보여줍니다.
관리자에게는 소설 관리 패널이 노출되며, Rest API로 완결 전환 처리하거나, SSR 폼 요청 방식으로 소설을 삭제 처리할 수 있습니다.
회차
회차 상세 조회 로직은 게시글 조회 로직과 거의 동일합니다.
회차 등록/수정
회차 등록/정보 수정 로직은 게시글 등록 로직과 거의 동일합니다.
설정 목록
Rest API로 설정 목록을 조회합니다. 카테고리 필터링 기능도 제공합니다.
설정
설정 상세 조회 로직은 게시글 조회 로직과 거의 동일하나, 댓글 시스템은 존재하지 않습니다.
설정 등록/수정
설정 등록/정보 수정 로직은 게시글 등록 로직과 거의 동일합니다.
방명록
한 페이지에서 방명록 조회/답변/삭제를 모두 할 수 있습니다. 모두 Rest API로 요청합니다.
방명록 등록 시 기본적으로 답변 컬럼의 값이 Null로 지정되고, 답변 등록 시 답변 컬럼의 값을 update합니다.
비밀글은 본인과 관리자만 볼 수 있고, 나머지 사용자에게는 ‘비밀글입니다.’로 마스킹돼 보여집니다.