프로젝트 개요
스포츠 팬덤을 위한 커뮤니티 플랫폼입니다. Thymeleaf 기반 SSR을 중심으로 설계하되, 댓글 작성이나 좋아요처럼 즉시 반응이 필요한 기능은 API로 분리해 처리하는 하이브리드 구조로 구현했습니다. 또한 이메일 인증, 이미지 업로드, 로그인 기록, 관리자 기능 등 실제 서비스 운영에 필요한 요소를 함께 구성했습니다.
배포 주소: https://fanplace.co.kr/
현재 환율 인상으로 인한 서비스 일시 중단
아키텍처 설계
전체 구조
이 프로젝트는 Thymeleaf 기반 SSR을 중심으로 구성하되, 댓글·좋아요·알림 등 페이지 내 상호작용이 중요한 기능은 별도의 API로 분리한 하이브리드 구조입니다. 초기 페이지 진입은 서버에서 렌더링된 HTML을 통해 처리하고, 이후 사용자 인터랙션은 JavaScript를 통해 비동기적으로 처리하도록 구성했습니다.
렌더링 전략
게시판과 같이 정적인 구조가 중요한 화면은 SSR 방식이 더 적합하다고 판단했습니다. 다만 댓글 작성이나 좋아요처럼 즉시 반응이 필요한 기능까지 전체 새로고침으로 처리하면 사용자 경험이 저하될 수 있어, 해당 기능은 API로 분리해 처리했습니다. 이를 통해 구조 복잡도를 크게 증가시키지 않으면서도 필요한 수준의 사용자 경험을 확보하는 방향으로 설계했습니다.
계층 구조
백엔드는 Controller, Service, Repository 계층으로 분리된 구조를 사용했습니다. Controller에서는 요청을 받아 Service로 전달하고, Service에서 비즈니스 로직을 처리한 뒤 Repository를 통해 데이터에 접근하도록 구성했습니다. 또한 DTO를 통해 계층 간 데이터 전달을 분리해, 엔티티가 외부로 직접 노출되지 않도록 했습니다.
주요 기능
게시판
게시글 작성, 수정, 삭제 기능을 제공하며, 카테고리 분류와 검색 기능을 통해 원하는 게시글을 쉽게 찾을 수 있도록 구성했습니다. 또한 조회수, 좋아요, 댓글 수를 통해 게시글의 활동 정도를 확인할 수 있도록 했습니다. 각 게시글에는 댓글과 대댓글 구조를 지원하고, 삭제된 댓글은 상태를 유지하는 방식으로 처리했습니다. 사용자 권한에 따라 수정 및 삭제 가능 여부를 구분해 UI에 반영했습니다.
회원
회원가입 시 이메일 인증을 통해 계정을 활성화하도록 구성했으며, 로그인, 로그아웃, 비밀번호 변경, 계정 복구, 회원 탈퇴 기능을 제공합니다.
알림
댓글 및 대댓글이 작성될 경우 알림이 생성되며, 읽음 처리 및 미읽음 개수 확인이 가능합니다. WebSocket을 활용해 실시간 알림이 반영되도록 구현했습니다.
관리자
사용자 제재 기능과 함께 삭제된 게시글 및 댓글을 관리할 수 있도록 구성했습니다. 또한 활동 통계와 이상 행동 탐지 기능을 포함해 운영 관점에서 필요한 기능을 구현했습니다.
기타
로그인 기록과 사용자 활동 리포트를 제공하며, 이미지 업로드는 S3를 통해 처리하도록 구성했습니다.
핵심 설계 및 구현
댓글 구조 설계
댓글과 대댓글을 분리된 구조로 구성했습니다. 부모 댓글을 기준으로 대댓글이 종속되는 형태를 사용해 계층을 명확히 구분했으며, 각 댓글은 독립적으로 삭제 상태를 가질 수 있도록 설계했습니다. 삭제된 댓글은 데이터는 유지하되 표시만 제한하는 방식으로 처리해, 대화 흐름이 끊기지 않도록 했습니다.
계정 인증 및 토큰 처리
회원가입, 비밀번호 재설정, 회원 탈퇴 과정은 토큰 기반으로 처리했습니다. 토큰은 생성 후 해시 형태로 저장해 직접 노출되지 않도록 했으며, 만료 시간과 사용 여부를 함께 관리해 재사용을 방지했습니다. 이를 통해 계정 관련 기능을 비교적 안전하게 처리할 수 있도록 구성했습니다.
데이터 관리 전략(Soft Delete&Purge)
게시글과 댓글은 삭제 시 즉시 제거하지 않고, 삭제 상태를 표시하는 방식으로 처리했습니다. 이후 일정 기간이 지난 데이터는 별도의 작업을 통해 정리하도록 구성해, 데이터 보존과 성능을 함께 고려했습니다. 이를 통해 사용자 입장에서는 기록이 유지되면서도, 시스템 부담을 줄일 수 있도록 설계했습니다.
관리자 기능 설계
단순한 콘텐츠 관리 수준을 넘어서, 사용자 제재와 활동 데이터 확인이 가능하도록 관리자 기능을 구성했습니다. 삭제된 게시글과 댓글을 별도로 관리할 수 있도록 했으며, 사용자 행동을 기반으로 이상 활동을 확인할 수 있는 기능도 포함했습니다. 운영 관점에서 필요한 기능을 함께 고려해 설계했습니다.
실시간 알림 처리
댓글 및 대댓글이 작성될 경우 알림이 생성되며, WebSocket을 활용해 실시간으로 반영되도록 구성했습니다. 알림은 읽음 상태를 관리할 수 있도록 했으며, 사용자 인터랙션과 자연스럽게 연결되도록 처리했습니다.
기술적 고민 및 개선점
렌더링 방식 선택
초기에는 SPA 구조를 고려했지만, 게시판 중심 서비스에서는 SSR이 더 적합하다고 판단했습니다. 다만 모든 상호작용을 서버 렌더링으로 처리할 경우 사용자 경험이 저하될 수 있어, 댓글·좋아요·알림 등은 API로 분리하는 하이브리드 구조를 선택했습니다. 이 방식은 구조 복잡도를 크게 증가시키지 않으면서도 필요한 수준의 사용자 경험을 확보할 수 있다는 장점이 있었습니다.
인증 방식 및 보안
세션 기반 인증을 사용했으며, 계정 관련 기능은 토큰 기반으로 분리해 처리했습니다. 다만 CSRF 방어 설정이나 일부 보안 정책은 충분히 다듬지 못한 부분이 있어, 실제 서비스 기준에서는 추가적인 보완이 필요하다고 판단했습니다.
데이터 처리 방식
삭제된 데이터를 즉시 제거하지 않고 Soft Delete로 관리한 뒤, 일정 기간 이후 정리하는 방식을 적용했습니다. 이를 통해 데이터 보존과 시스템 성능 사이의 균형을 맞추고자 했습니다. 다만 데이터가 증가할수록 쿼리 복잡도와 관리 비용이 증가할 수 있어, 장기적으로는 구조 개선이 필요할 수 있다고 생각했습니다.
테스트 및 구조 개선
기능 구현과 구조 설계에 집중하면서 테스트 코드를 충분히 작성하지 못한 점은 아쉬운 부분입니다. 또한 일부 로직이 서비스 계층에 집중된 구조를 개선하고, 계층 간 역할을 더 명확히 분리하는 방향으로 보완할 필요가 있다고 생각했습니다.