외주

사랑의 진도

웹 애플리케이션

GIT - https://github.com/blank09114/loveprogress

2026.01.07. 21:07

프로젝트 개요
사랑의 진도는 아마추어 창작 교류 행사 운영을 위한 웹 애플리케이션입니다. 행사 소개, 공지 확인, 부스 등록 및 관리, 문의/답변 기능 등, 행사 주최자와 참가자 모두를 위한 기능을 제공합니다.

개발 형태: Spring Boot 기반 웹 애플리케이션(MVC 구조)
개발 인원: 1인(외주 단독 개발)
개발 기간: 20일
기술 스택
- 프론트엔드: HTML, CSS, JavaScript, Thymeleaf
- 백엔드: Java
- DB: MySQL
- 프레임워크&라이브러리: Spring Boot, Lombok, Spring Security, MyBatis
- 개발 환경: IntelliJ IDEA, VS Code, FileZilla
- 배포: 가비아 컨테이너 호스팅

→ 배포 주소

공통 설계 포인트

헤더와 푸터는 fragment로 삽입했습니다. 헤더의 경우 모바일에서는 햄버거 메뉴로 전환됩니다.
이미지는 호스팅 서버 디렉토리에 직접 업로드하는 방식을 선택했습니다.
백오피스 페이지를 제외한, 일반 사용자에게 노출되는 페이지는 전부 반응형으로 구성했습니다.
Quill 에디터 라이브러리를 이용해 사용자가 콘텐츠를 작성할 때 스타일을 줄 수 있도록 했습니다.

메인 페이지

방문자가 행사 정보와 공지를 빠르게 파악할 수 있도록 구성했습니다. 배너 슬라이드와 공지사항 리스트에 연결된 페이지는 Thymeleaf 템플릿을 이용해 동적으로 렌더링되며, 관리자 페이지에서 내용을 수정할 수 있습니다.

배너와 링크를 설정하는 관리자 페이지입니다. 이 페이지에는 반응형 레이아웃이 적용돼있지 않습니다.

회원가입/로그인/비밀번호 변경

Spring Security 라이브러리를 활용해 구현했습니다. 비밀번호는 BCrypt로 암호화돼 서버에 저장됩니다. ID 저장 기능은 로컬 스토리지에 사용자 입력 정보를 저장하는 형태로 구현했습니다. 사이트에서 개인 정보 수집 동의를 받지 않아 이메일 인증 등의 기능을 구현하는 것에 제한이 있었기에, 비밀번호 찾기 기능은 관리자 페이지에서 비밀번호를 지정된 문자열로 초기화시키는 방식을 통해 우회적으로 구현했습니다.

해당하는 페이지입니다. 해당 페이지에는 반응형 레이아웃이 적용돼있지 않습니다.

회원 등급은 USER(일반 회원)/BOOTH(부스 회원)/ADMIN(관리자)로 나뉘며, 이 페이지에서 회원 등업 처리 또한 가능합니다.

어바웃 페이지

행사 정보를 소개하는 페이지입니다. Thymeleaf 템플릿을 통해 렌더링합니다. 수정 버튼은 관리자 계정으로 로그인했을 경우에만 노출되며, 수정 페이지에는 관리자 계정으로만 접근할 수 있습니다. 관련 로직은 Spring Security 세션 처리를 통해 구현했습니다.

게시판

게시판은 INFORMATION/EVENT/♥ 3종으로 구성돼있습니다. INFORMATION, EVENT 게시판은 관리자 계정으로만 게시글을 작성할 수 있으며, ♥ 게시판은 부스 회원 전용 게시판으로서 일반 사용자의 접근이 제한되고, 부스 회원이 게시글을 작성할 수 있습니다. 마찬가지로 Spring Security 세션 처리를 통해 구현했습니다. 게시글 목록은 레스트API, fetch를 통해 렌더링됩니다. 이 때, 관리자 계정으로 작성된 글은 작성자 정보가 '교무처장'으로 마스킹돼 표시됩니다.

게시글 상세 페이지입니다. 게시글 삭제는 관리자 및 작성자 본인만 할 수 있고, 수정은 작성자 본인만 가능합니다. 댓글 기능은 부스 게시판에만 존재하며, 게시판 정보를 Model에 담아 Thymeleaf 템플릿에 넘겨줌으로써 UI 분기 처리를 구현했습니다.

게시글 작성 페이지입니다. 제목/내용이 입력되지 않은 경우 alert창을 띄워 업로드를 막습니다. 비밀글로 작성할 경우 관리자 계정과 작성자 본인만 열람 가능합니다. 비밀글은 게시판에서 제목 앞에 자물쇠 이모티콘이 붙습니다.

게시판 공지는 관리자 페이지에서 설정 가능합니다. 해당 페이지에는 반응형 레이아웃이 적용돼있지 않습니다.

부스 정보

서버에 저장된 부스 정보를 Rest API를 통해 불러옵니다. 부스 태그를 통해 필터링 또한 가능합니다. 부스 참가자 닉네임을 클릭하면 참가자의 X(구 트위터) 계정으로 이동합니다.

부스 등록/수정/삭제는 해당 페이지에서 가능합니다. 부스 수정 버튼 클릭 시에 밑 부분의 부스 등록 폼이 부스 수정 폼으로 전환됩니다. 부스 등록/수정/삭제 로직은 레스트API를 통해 구현했습니다.

QnA

질문 등록은 비로그인 사용자도 가능합니다. 로그인 사용자에게는 자신이 작성한 질문만 확인하는 기능이 제공됩니다.

비밀글은 관리자와 작성자 본인만 확인 가능합니다. 이때, 비로그인 사용자는 비밀글 작성 시 비밀번호 설정을 요구하고, 열람 시 설정한 비밀번호를 입력해 확인합니다. UI 분기는 세션에서 로그인 정보를 받아와 처리합니다.

답변 등록은 위 페이지에서 가능합니다. 상세 보기 버튼을 클릭하면 밑의 답변하기 폼에 질문 내용이 들어옵니다.(Model에 담아 전달)

배운 점

이번 프로젝트를 통해,

Spring Boot MVC 아키텍처에 대한 이해를 확실히 다짐: Controller–Service–Repository 계층 분리를 실무적으로 경험하며 유지보수성과 확장성을 고려한 설계를 할 수 있었습니다.
Spring Security 적용 경험: 세션 관리, 권한 제어, 비밀번호 암호화(BCrypt)까지 전반적으로 학습하면서 실제 서비스 환경에서 보안 요소를 다루는 법을 배웠습니다.
Thymeleaf + REST API 혼합 구성: 일부 페이지는 서버 사이드 렌더링, 일부는 fetch 기반 비동기 통신으로 구현하여 상황에 맞는 렌더링 방식을 선택하는 경험을 했습니다.
실제 배포 경험: 가비아 컨테이너 호스팅 환경에 배포하고, FileZilla를 통한 정기 업데이트를 관리하면서 운영 환경에서 발생하는 여러 변수를 다뤄볼 수 있었습니다.
외주 프로젝트 협업 경험: 기획·디자인은 클라이언트 측에서 제공, 구현은 전적으로 제가 담당하면서 요구사항 분석과 설계부터 최종 배포까지 전 과정에 대한 책임감을 체득했습니다.

아쉬운 점 & 개선 아이디어

1 HTML 1 CSS 구조로 페이지를 분리하면서 중복 코드(보일러플레이트)가 다수 발생했습니다.
→ 추후에는 UI 컴포넌트화 및 CSS 구조화(SCSS, Tailwind 등)를 통해 재사용성을 높이고 유지보수를 개선할 계획입니다.
이미지 관리를 서버 디렉토리 직접 업로드 방식으로 처리했습니다.
→ 추후에는 외부 스토리지(AWS S3, Cloud Storage 등) 연동으로 확장성과 안정성을 확보할 예정입니다.
페이징 처리 방식 미흡: 현재는 게시글 전체를 백엔드에서 한 번에 불러온 뒤 프론트엔드에서 페이지를 나누는 방식이라, 불필요하게 과거 게시글까지 모두 로드하게 됩니다.
→ 추후에는 백엔드에서 OFFSET/LIMIT 기반 쿼리로 필요한 범위만 불러오는 페이징 처리를 적용하여 성능을 개선할 계획입니다.