포트폴리오로 돌아가기

쇼핑몰 웹사이트

2024.11 - 2025.01
6명 팀 프로젝트
쇼핑몰 웹사이트 메인 이미지

프로젝트 개요

무신사 PC 버전이 종료되는 시점에, PC 사용자들을 위한 패션 커뮤니티 플랫폼의 필요성을 느꼈습니다. 이를 계기로 JSP/Servlet을 활용한 전자상거래 플랫폼을 개발하게 되었습니다. 무신사의 핵심 기능인 스냅샷 커뮤니티와 쇼핑몰 기능을 결합하여, 사용자들이 패션 아이템을 공유하고 구매할 수 있는 통합 플랫폼을 구현했습니다. 특히 PC 환경에 최적화된 UI/UX를 제공하여, 모바일 중심의 패션 커뮤니티 시장에서 차별화된 가치를 제공하고자 했습니다.

주요 기능

쇼핑몰 기본 기능

상품 검색, 장바구니, 주문/결제, 배송 조회 등 기본적인 쇼핑몰 기능을 구현했습니다.

판매자 입점 시스템

판매자 입점 신청 및 관리자 승인 프로세스를 통해 안전한 판매자 관리 시스템을 구축했습니다.

스냅샷 커뮤니티

무신사 스타일의 패션 스냅샷 기능을 구현하여 사용자들이 자신의 스타일을 공유하고 상품을 추천할 수 있는 커뮤니티를 제공합니다.

실시간 DM 기능

스냅샷 작성자와 구매 희망자 간의 실시간 소통을 위한 DM 기능을 구현하여 구매 결정을 돕습니다.

관리자 대시보드

판매자 관리, 상품 관리, 회원 관리, 주문 관리 등 통합적인 관리 기능을 제공합니다.

담당 역할

Git 관리 및 코드 통합

팀의 Git 저장소 관리와 코드 통합을 담당하여 팀원들의 작업을 효율적으로 관리하고 충돌을 최소화했습니다.

스냅샷 기능 개발

스냅샷 기능의 프론트엔드와 백엔드 개발을 전담하여 사용자들이 패션 아이템을 공유하고 소통할 수 있는 커뮤니티 기능을 구현했습니다.

클라우드 인프라 구축

AWS EC2, S3, 원격 DB 등 클라우드 서비스 학습 및 구축을 담당하고, 이를 팀원들에게 전파하여 프로젝트의 안정적인 운영 환경을 마련했습니다.

프로젝트 구조 설계

전체적인 프로젝트 구조를 설계하고, 팀원들이 효율적으로 개발할 수 있는 환경을 구축했습니다.

시스템 아키텍처

JSP/Servlet 기반의 MVC 패턴을 구현하여 확장성과 유지보수성이 높은 시스템을 구축했습니다.

주요 컴포넌트

Front Controller

단일 서블릿으로 모든 요청을 처리하며, URL 패턴에 따라 적절한 Action 객체를 생성합니다.

Action Interface

비즈니스 로직의 표준화된 인터페이스를 정의하여 코드의 재사용성과 일관성을 높였습니다.

Service Layer

비즈니스 로직을 처리하고 트랜잭션을 관리하며, 데이터 유효성을 검증합니다.

DAO Layer

MyBatis를 활용하여 데이터베이스 접근을 효율적으로 관리하고, Connection Pool을 통해 성능을 최적화했습니다.

요청 처리 흐름

1. Client Request → Front Controller
2. Front Controller → Action Interface
3. Action Interface → Service Layer
4. Service Layer → DAO Layer
5. DAO Layer → Database

성과 및 배운 점

  • 스냅샷 기능을 혼자 담당하며 완성했고, 프로젝트 마감 1주일 전에 EC2에 Node.js를 설치해 웹소켓으로 실시간 DM 기능을 구현하려 했습니다. 하지만 관리자 모드를 담당한 팀원의 개발이 지연되면서, 결국 웹소켓 구현을 포기하고 인터벌 방식의 실시간 DB 로딩으로 전환했습니다. 이 과정에서 팀 프로젝트의 본질을 깨달았습니다. 개인의 기술적 성취보다 팀원들과의 협력이 더 중요하다는 것을 배웠고, 팀원의 부족한 부분을 지원하고 나의 부족한 점을 솔직하게 공유하는 것이 프로젝트 성공의 핵심이라는 것을 체득했습니다.

프로젝트 정보

기간2024.11 - 2025.01
팀 규모6명

기술 스택

Frontend

HTML5CSS3JavaScriptAJAXjQueryBootstrapJSP

Backend

JavaJSP/ServletMySQLMyBatisAction Interface

DevOps & Cloud

AWS EC2AWS S3TomcatGitGitHub

프로젝트 스크린샷

쇼핑몰 웹사이트 스크린샷 1

메인 페이지 - 무신사 PC 페이지를 클론한 쇼핑몰의 메인 화면입니다.

쇼핑몰 웹사이트 스크린샷 2

제품 리스트 페이지 - 다양한 상품 목록을 확인할 수 있습니다.

쇼핑몰 웹사이트 스크린샷 3

상세 페이지 - 상품의 상세 정보와 구매 옵션을 제공합니다.

쇼핑몰 웹사이트 스크린샷 4

구매 페이지 - 선택한 상품의 주문 및 결제를 진행합니다.

쇼핑몰 웹사이트 스크린샷 5

마이 페이지 - 사용자 정보 및 주문 내역을 관리할 수 있습니다.

쇼핑몰 웹사이트 스크린샷 6

스냅샷 메인 - 패션 스냅샷을 공유하고 탐색하는 커뮤니티 메인입니다.

쇼핑몰 웹사이트 스크린샷 7

스냅샷 상세 - 개별 스냅샷 상세 정보와 댓글, 좋아요 기능을 제공합니다.

쇼핑몰 웹사이트 스크린샷 8

스냅샷 마이페이지 - 사용자의 스냅샷 활동 내역을 모아 보여줍니다.

쇼핑몰 웹사이트 스크린샷 9

스냅샷 작성 페이지 - 새로운 스냅샷을 업로드하고 내용을 작성합니다.

쇼핑몰 웹사이트 스크린샷 10

스냅샷 DM 페이지 - 스냅샷 작성자와 실시간 DM을 주고받을 수 있습니다.

쇼핑몰 웹사이트 스크린샷 11

관리자 기능 - 관리자가 회원, 상품, 주문 등을 관리하는 화면입니다.

쇼핑몰 웹사이트 스크린샷 12

판매자 대시보드 - 판매자가 상품 및 주문 현황을 관리하는 대시보드입니다.