프로젝트 개요
개인 창작물을 기록하고 공유하기 위한 웹 애플리케이션으로, 캐릭터 프로필, 게시판, 이미지 갤러리, 방명록 등 창작 활동 전반을 하나로 묶어두는 아카이빙 플랫폼입니다.
- 개발 형태: Spring Boot 기반 웹 애플리케이션(MVC 구조)
- 개발 인원: 1인(전 과정 단독 개발)
- 개발 기간: 6일
- 기술 스택
- 프론트엔드: HTML, CSS, JavaScript, Thymeleaf
- 백엔드: Java
- DB: MySQL
- 프레임워크&라이브러리: Spring Boot, Lombok, Spring Security, MyBatis
- 개발 환경: IntelliJ IDEA, VS Code, FileZilla
- 배포: 가비아 컨테이너 호스팅
공통 설계 포인트
코어 아키텍처
- 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)**를 처리합니다. 사용자의 인증은 JWT 토큰을 기반으로 관리되며, 권한에 따라 관리자는 특정 기능(예: 게시글 삭제, 방명록 차단)에 접근할 수 있습니다.
- JWT 기반 인증: JWT를 쿠키에 저장하여 XSS 공격을 방어하고, 세션 상태를 서버에 저장하지 않습니다. 클라이언트는 JWT를 이용해 인증된 요청을 서버로 보냅니다.
- 이미지 업로드: 확장자/용량 검증, 리사이징 등을 통해 이미지 업로드를 안전하게 처리합니다.
인트로 페이지
사용자가 사이트에 처음 방문할 때 나타나는 단계별 인터랙션 페이지입니다. 각 단계에서 애니메이션 효과와 인터랙티브한 요소들이 표시됩니다. 사용자가 #doorScreen을 클릭하면 enterCounseling() 함수가 호출되어 화면 전환이 시작됩니다. 각 단계는 data-state="active" 속성을 통해 활성화 상태를 관리하며, 단계별로 대사와 버튼이 순차적으로 변화합니다. 이 전환 과정은 transitionOverlay(from, to) 함수를 사용하여 부드럽게 이루어지며, 대사와 버튼 텍스트는 별도의 데이터 파일인 brightStepScripts와 redStepScripts에서 관리됩니다. Step 3에서는 여러 개의 팝업이 랜덤 위치에 배치되며, 글리치 효과가 적용되어 긴장감을 조성합니다. 마지막 Step 5에서는 섬광 효과와 함께 최종 문구를 표시하고, 사용자에게 메인 페이지로 리다이렉트하는 경험을 제공합니다.
회원가입/로그인
JWT 기반 인증 시스템을 활용해 사용자가 시스템에 안전하게 접근할 수 있도록 합니다. 회원가입 시 사용자는 닉네임, ID, 비밀번호를 입력하며, ID 중복 확인을 통해 사용 가능한 ID인지 확인합니다. 비밀번호는 암호화돼 저장됩니다. 로그인 시 사용자가 입력한 ID와 비밀번호를 검증해 JWT 토큰을 발급하고 이를 통해 세션을 유지합니다. JWT는 HttpOnly 쿠키로 저장되며, XSS 공격을 방어할 수 있도록 설계됐습니다. 로그인 실패 시 토스트 알림으로 사용자에게 안내합니다.
메인
캐릭터의 프로필을 로드해 보여주는 페이지로, 프로필 내용을 데이터베이스에서 가져와 화면에 표시합니다. 관리자 권한이 있는 경우 프로필 내용 옆에 편집 버튼이 표시돼 profileEdit 페이지로 이동할 수 있게 되어 있습니다. 이 페이지는 템플릿에서 프로필 정보를 렌더링하고, 사용자가 수정할 수 있도록 HTML을 동적으로 생성합니다.
프로필 편집
프로필을 편집할 수 있는 페이지입니다. 사용자가 제목, 본문 요소를 자유롭게 추가하고 편집할 수 있습니다. 사용자가 작성한 프로필 내용은 buildProfileContent() 함수에 의해 HTML로 변환되어 서버로 전송됩니다. 이 데이터는 ProfileDTO 객체를 통해 서버에 저장되며, profileEdit 페이지에서 수정한 내용은 즉시 메인 페이지에 반영됩니다. 이 과정은 POST 방식으로 처리되며, beforeSubmit() 함수는 tinymce 편집기 내용을 저장하는 역할도 합니다.
게시판
게시글 작성, 수정, 삭제와 카테고리 관리 기능을 포함한 게시판을 제공합니다. 게시글 작성 권한은 관리자에게만 있습니다.
게시글을 카테고리별로 필터링하고 목록을 확인할 수 있습니다. 각 카테고리는 CategoryService를 통해 데이터베이스에서 조회되며, 관리자는카테고리를 추가하거나 삭제할 수 있습니다. 카테고리 삭제 시 해당 카테고리와 연결된 게시글은 자동으로 삭제됩니다. 게시글 목록은 페이징 처리되어 있어, BoardService의 getPage 메서드를 사용해 페이지별 게시글을 불러옵니다.
게시글 작성/수정
게시글을 새로 작성하거나 기존 게시글을 수정할 수 있는 페이지입니다. 관리자만 접근 가능합니다. 카테고리 목록은 데이터베이스에서 불러옵니다.
게시글
사용자가 선택한 게시글의 제목, 내용, 작성일 등의 정보를 표시합니다. 또한, 관리자는 수정/삭제 버튼을 통해 게시글을 관리할 수 있습니다.
갤러리
사용자는 이미지를 서버에 업로드할 수 있습니다. 서버는 파일 확장자와 용량을 검증해 적합한 파일만을 처리하며, 지나치게 큰 이미지는 리사이징합니다. 업로드된 이미지는 서버에 저장되며, 파일명은 충돌을 방지하기 위해 UUID 기반으로 변경됩니다.
각 이미지는 제목, 업로더, 업로드 날짜와 같은 기본 정보를 포함하며, 클릭 시 확대됩니다. 또한, 사용자는 더 이상 필요하지 않은 이미지를 선택 후 삭제할 수 있고, 삭제된 이미지는 DB와 파일 시스템에서 완전히 제거됩니다.
이미지 업로드 및 삭제는 관리자만 가능합니다.
방명록
사용자가 운영자와 소통할 수 있는 공간을 제공합니다. 사용자는 글을 작성할 때 비밀글 여부를 설정할 수 있습니다. 등록된 방명록은 페이지네이션 방식으로 나누어 보여지며, 관리자는 방명록에 답변을 달거나 삭제할 수 있습니다. 또한, 관리자는 특정 사용자의 글을 차단하고 삭제할 수 있는 권한도 가지고 있습니다. 로그인한 사용자만 글을 작성할 수 있고, 비밀글은 작성자와 관리자만 열람 가능합니다.