(25.06.09 ~ 25.06.30 - 약 3주)
1주차 : DB 설계 및 프로젝트 구조 잡기
2주차 : 문의글 게시판 crud 구현, 이미지 업로드 기능 구현
3주차 : 댓글 구현, 검색/필터링 기능 추가
4주차 : 시큐리티(로그인) 기능 추가
5주차 : 심리테스트 구현
"심리테스트 안에서 자유롭게 날아다녀라"는 의미를 가진 성격유형 기반의 심리테스트 플랫폼입니다. 웹에서 다양한 주제의 테스트를 제공하며, 질문과 결과는 모두 DB로 관리되어 쉽게 확장 가능한 구조를 가지고 있습니다.
MBTI처럼 성격유형 테스트에 대한 사람들의 관심에서 출발한 프로젝트입니다. 평소에 심리테스트 콘텐츠에 관심이 많았고, 이를 직접 기획하고 구현해보는 과정 자체가 좋은 경험이 될 것 같아 시작하게 되었습니다. 복잡한 기능보다는, 간단한 테스트라도 데이터 기반으로 설계하고, 웹에서 실제 작동하는 구조를 만드는 것에 집중했습니다.
- 로고에는 하늘을 나는 귀여운 비행기를 사용해, 사용자가 자신의 내면을 가볍고 자유롭게 탐색하고, 마음껏 즐기며 심리여행을 떠나도록 의미를 담았습니다.
- 비행기의 웃는 표정은 편안함과 친근함, "FLY HIGH"라는 문구는 심리적 성장과 긍정적인 에너지를 상징합니다.
- 사용자가 SimPlane과 함께 자신만의 심리 여정을 자유롭게 탐색하고, 더 높이 비상하길 바라는 마음을 담았습니다.
✨ 이지혜
역할: 팀장 / 백엔드·프론트엔드 개발
담당 기능: 게시글 조회(Read), 댓글 및 페이징 처리, JSP 기반 UI, 심리테스트 기능 구현
🛠️ 이연수 (본인)
역할: 백엔드 개발
담당 기능: 게시글 등록/삭제(Create/Delete), 이미지 업로드 설계, ERD 설계, Spring Security
🎨 방희경
역할: 백엔드 개발 / 디자인
담당 기능: 게시글 수정, JSP 기반 UI, 홈페이지 디자인, 포춘쿠키 기능 구현
- HTML5, CSS3, JavaScript
- JSP
- jQuery(비동기 처리)
- Bootstrap
- Java 11
- Spring Framework
- Spring Security
- MyBatis
- Maven
- WAR 패키징
- MySQL
- Apache Tomcat
- Git, GitHub
- 회원/관리자 역할에 따라 접근 권한을 설정하여, 게시판 작성/삭제, 테스트 생성 등 기능을 제어하였습니다.
- 인증 처리는 커스터마이징된 로그인 기능으로 구현하였으며, 사용자 구분을 위한 Role 기반 보안을 구성하였습니다.
- 사용자, 심리테스트, 댓글, 문의 등 다양한 도메인의 CRUD 작업을 SQL 매퍼(XML) 기반으로 처리하여 유지보수성을 높였습니다.
- 복잡한 동적 쿼리나 조건 분기 로직도 SQL에서 명확하게 정의할 수 있었습니다.
- 테스트 진행화면, 결과 출력, 관리자 페이지 등 주요 뷰를 JSP로 구성하였고,
JSTL로 조건문·반복문 처리, jQuery로 비동기 통신을 구현하여 동적 UI를 완성했습니다.
- 댓글 등록, 테스트 응답 등 주요 기능에 AJAX 기반 비동기 처리를 적용하였습니다.
- 특히, 띠별 운세 결과는 JSON 파일로 저장된 데이터를 jQuery를 통해 비동기로 불러와 사용자에게 보여주도록 구현하였습니다.
- 프로젝트는 Maven 기반으로 관리되며, 의존성 설정과 빌드가 자동화되었습니다.
- WAR 패키징을 통해 Apache Tomcat에 배포 가능한 구조로 구성하였습니다.
클래스 구조 다이어그램
프로젝트의 주요 클래스 구조를 나타낸 것입니다.
패키지별 역할(Controller, Service, Mapper, VO 등)과 클래스 간 구성 흐름을 중심으로 정리되었습니다.
(직접적인 연결선은 생략되었지만, 각 구성요소의 배치를 통해 전체 구조를 파악할 수 있습니다.)
- 상단 메뉴바를 통해 심리테스트, 게시판 등 다양한 기능 페이지로 이동할 수 있습니다.
- 로그인 / 회원가입 버튼과 로고 클릭 시 메인 페이지로 돌아올 수 있습니다.
- 하단에는 베스트 심리테스트 리스트가 노출되어 사용자 접근성을 높였습니다.
- 사용자가 참여할 수 있는 심리테스트들을 카드형 UI로 제공하는 페이지입니다.
- 테스트 제목 / 설명 / 썸네일 이미지를 직관적으로 확인 가능합니다.
- 페이징 처리로 다수의 테스트를 효율적으로 탐색할 수 있습니다.
- 원하는 테스트를 선택하면 상세 페이지로 이동해 바로 참여할 수 있습니다.
- 사용자는 심리테스트 목록에서 항목을 선택한 후 질문에 응답하며 테스트를 진행할 수 있습니다.
- 모든 문항에 답변을 완료하면 점수를 기반으로 유형이 자동 분류됩니다.
- 결과 페이지에서 해당 유형에 맞는 설명과 이미지를 확인할 수 있습니다.
- 비회원 사용자도 로그인 없이 자유롭게 테스트에 참여할 수 있어 누구나 쉽게 이용할 수 있습니다.
- 상단 메뉴에서 '운세' 항목을 선택하면 다양한 운세 기능으로 이동할 수 있습니다.
- '띠별 운세'를 클릭하면 사용자의 태어난 연도를 입력할 수 있는 창이 나타납니다.
- 연도를 입력하고 확인 버튼을 누르면 해당 띠의 운세 결과가 출력됩니다.
- 회원가입 없이도 누구나 간편하게 이용 가능하도록 구성되어 있습니다.
- 상단 메뉴에서 '포춘쿠키' 버튼을 클릭하면, 모달 창으로 귀여운 포춘쿠키 모양이 등장합니다.
- 포춘쿠키를 한 번 클릭하면 쿠키가 깨지며,
- 그 안에서 연예인 명언 또는 어록이 랜덤으로 출력됩니다.
- 누구나 가볍게 클릭만으로 이용 가능하며, 소소한 위로와 재미를 줄 수 있도록 구성된 기능입니다.
- 우측 상단의 회원가입 버튼을 클릭하면, 회원정보를 입력할 수 있는 회원가입 창이 표시됩니다.
- 아이디를 입력하고 중복 확인 버튼을 누르면, 해당 아이디가 사용 가능한지 여부를 알려주는 모달창이 표시됩니다.
- 아이디 중복 확인 후에는 비밀번호, 닉네임, 이메일 등의 정보를 입력할 수 있습니다.
- 모든 항목 입력 후 가입하기 버튼을 클릭하면, 자동으로 로그인 페이지로 이동하며 회원가입이 완료됩니다.
- 로그인 페이지로 이동하면 회원가입이 성공적으로 처리된 것입니다.
- 우측 상단의 로그인 버튼을 클릭하면 아이디와 비밀번호를 입력할 수 있는 로그인 창이 표시됩니다.
- 로그인 정보를 입력하고 로그인 버튼을 누르면, 로그인 전에는 로그인 / 회원가입으로 표시되던 상단 버튼이 로그아웃으로 변경됩니다.
- 로그인 후에는 각 심리테스트 결과에 댓글을 작성할 수 있으며, 문의 게시판에 글 등록 기능도 활성화됩니다.
- 회원만 사용할 수 있는 기능들을 통해 더욱 풍부한 사용자 경험을 제공합니다.
- 각 심리테스트 결과 페이지 하단에는 댓글 작성란이 제공되어, 사용자가 테스트 결과에 대한 의견을 남길 수 있습니다.
- 로그인하지 않은 사용자가 댓글을 작성하려고 할 경우, 로그인 요청 모달창이 자동으로 표시되어 로그인 후 이용하도록 유도됩니다.
- 로그인한 사용자가 댓글을 입력한 뒤 작성 버튼을 누르면, 댓글 작성 완료라는 메시지가 모달창에 표시되며,
곧바로 화면에 작성한 댓글이 반영됩니다.
- 문의게시판은 로그인한 사용자만 접근 및 작성할 수 있도록 설정되어 있습니다.
- 로그인 후, 상단 메뉴에서 **'문의게시판'**을 클릭하면 제목, 내용, 이미지를 입력할 수 있는 작성 페이지로 이동합니다.
- 작성 후 등록 버튼을 클릭하면 게시글이 정상적으로 등록되며, 문의게시판 목록에서 확인할 수 있습니다.
- 등록된 게시글은 수정 및 삭제도 가능하여, 사용자 스스로 작성한 문의글을 쉽게 관리할 수 있습니다.
Spring Boot가 아닌 Spring Framework 환경에서 프로젝트를 진행하면서,
DispatcherServlet과 ViewResolver를 직접 설정해야 했습니다.
하지만 JSP 뷰 페이지가 정상적으로 렌더링되지 않고 404 오류가 발생했습니다.
- web.xml과 servlet-context.xml에서 설정한 ViewResolver 경로가 실제 JSP 경로와 불일치
- 컨트롤러에서 반환한 뷰 이름을 ViewResolver가 올바르게 매핑하지 못해 발생
- DispatcherServlet 경로 일치: web.xml의 init-param(/WEB-INF/spring/appServlet/servlet-context.xml) ↔ 실제 파일 경로 맞춤
- ViewResolver–JSP 경로 통일: prefix /WEB-INF/views/, suffix .jsp 기준으로 JSP를 WEB-INF/views/…/*.jsp에 정리
- 컨트롤러 반환 규칙 고정: return "폴더/파일명"만 사용(슬래시·확장자 제외)
이러한 설정 정비를 통해 JSP 페이지가 정상적으로 렌더링되었으며,
뷰 경로와 컨트롤러 규칙을 일관성 있게 맞춤으로써 이후 신규 화면 추가 시에도
별도의 설정 수정 없이 안정적으로 동작하도록 개선할 수 있었습니다.
이번 심리테스트 프로젝트는 팀원들과 함께 주제를 정하는 것부터 기술 스택 선정, 화면 구성까지 전 과정을 함께 논의하며 시작한 뜻깊은 경험이었습니다. 각자의 역할을 나누어 개발을 진행하면서 단순한 기능 구현을 넘어, 왜 이런 방식으로 개발해야 하는지, 데이터가 어떤 흐름으로 처리되는지를 깊이 있게 이해할 수 있었습니다. 특히 게시판의 등록과 삭제 기능을 처음부터 직접 구현하면서, 각 클래스의 역할과 책임에 대해 명확히 알게 되었습니다.
개발 과정에서는 오류도 많았고, 생각한 대로 코드가 작동하지 않아 어려움도 있었지만, 혼자 해결하려 하기보다는 팀원들과 적극적으로 소통하며 문제를 함께 해결해 나갔습니다. 이 과정을 통해 협업의 중요성을 실감할 수 있었고, 끝까지 함께 완성해냈다는 성취감도 얻을 수 있었습니다.
무엇보다 이번 프로젝트를 통해 부족한 부분을 돌아보는 계기가 되었고, 다음 프로젝트에서는 더 성장한 모습으로 참여하고 싶다는 다짐도 하게 되었습니다. 아직 구현하지 못한 기능들이 남아 있어 아쉬움이 남지만, 기회가 된다면 팀원들과 함께 보완하여 사용자들이 더 즐겁게 참여할 수 있는 서비스로 발전시키고 싶습니다.
이번 프로젝트는 단순한 결과물을 넘어서, 협업의 가치와 개발자로서의 성장 방향을 스스로 찾을 수 있었던 의미있는 경험이었습니다.