안녕하세요. 3팀 꿀단집 프로젝트 발표를 시작하겠습니다. 저는 발표자 이가린입니다.
저희 프로젝트 내용은 다음과 같습니다.
저희 3팀은 총 7명이 모여있는데, 프론트엔드 파트는 승철님 지윤님 보미님 창건님이 담당하였고, 백엔드 파트는 저, 채영님, 정민님이 담당하였습니다.
최근 혼자 사는 사람들이 늘어나고, 일과 삶의 균형, 일명 워라밸을 중요시하는 사람들이 늘어나고 있습니다. 점점 집에서 보내는 시간이 늘어나면서 나만의 공간이 중요해지는 것 같습니다.
그리하여 저희는 인테리어에 비교적 관심이 많은 20-30대(이삼십대) 1인가구 여성 소비자를 타겟으로 하여, 집에서의 경험을 풍요롭고 의미있게 하는 쇼핑몰 서비스를 기획하였습니다.
이름 꿀단집은 꿀단지를 의미하는 honey tong 과 집을 의미하는 house의 합성어 입니다.
기능성과 아름다움을 모두 갖춘 인테리어 소품을 판매하는, 저희 3팀의 꿀단집을 소개해 드리겠습니다.
앞서 말씀드렸듯이 디자인적 요소도 중요시하는 소비자를 타겟으로 하기 때문에 사이트는 전반적으로 깔끔한 UI와 산뜻한 디자인을 적용하였습니다. 저희는 스와이퍼와 스윗 얼럴트를 제외하고는 외부 라이브러리를 사용하지 않은 순수 CSS를 구현하였고요. 모든 페이지마다 파비콘을 적용하였습니다. 파비콘은 여러분이 사이트에 접속하시면 브라우저 맨 위쪽 사이트 이름 왼쪽에 보이는 작은 아이콘입니다. 또한 브라우저 안 저장소인 로컬스토리지를 이용하여, 장바구니를 활용한 쇼핑, 그리고 검색창에 입력한 단어들을 저장할 수 있도록 하였습니다.
백엔드 파트에서는 계층화된 모듈 구조로 데이터의 구조를 담당하는 스키마부터 시작해서, 클라이언트의 요청을 처리하는 컨트롤러까지, 각 부분이 맡은 역할만 수행하여 독립적인 개발, 테스트, 유지보수가 이루어지도록 하였습니다. 그리고 회원과 비회원의 id값이 구분되어 데이터베이스에 저장되어 관리되도록 하였는데, 이 부분은 뒤에서 트러블슈팅 부분에서 더 자세히 설명해드리겠습니다. 마지막으로 이메일 인증 기능을 통해 보안성을 높였고, 상품 관련 데이터는 AW3 S3의 클라우드 서비스에서 URL를 제공받아 활용하였습니다.
프로젝트의 구조는 다음과 같습니다.
우선 프론트엔드 쪽의 구조인데요, 간단하게만 말씀드리면 여기있는 동그라미들은 페이지를 폴더단위로 나누어 놓은 것입니다. 이렇게 작업한 결과물을 Vite(비트)라는 도구를 사용하여 묶어줍니다. 비트는 차세대 프론트엔드 개발툴인데요. 비트를 사용하게 되면 실시간으로 코드 변경을 확인하며 작업이 가능해지고, 각기 다른 페이지들이 하나로 합쳐지게 됩니다.
백엔드에서 제작한 서버는 다음과 같은 구조로 이루어져 있습니다. 이렇게 각 계층이 분리되어 있어서 한 계층에서의 변경이 다른 계층에 영향을 주지 않아, 시스템을 수월하게 관리할 수 있습니다.
저희는 다음과 같은 개발환경에서 작업을 진행하였습니다. 여기에 있는 것들은 여러분도 다 잘 아실 것 같은데요. 협업툴에 있는 깃메시지는 git message라는 텍스트파일의 템플릿을 활용하여, 통일된 커밋 컨벤션을 유지하였습니다. 라이브러리 중 스와이퍼는 홈페이지 메인이나 배너쪽 이미지들이 움직이면서 차례대로 넘겨지는 기능을 도와주는 것이고요. 스윗얼럴트는 경고창이나 모달창을 더 이쁘게 띄워주는 라이브러리입니다.