KYJKY / project_MomsHolic_JSP

🍼 맘스홀릭(유아용품 중고거래) 사이트 프로젝트

📌 프로젝트 소개 (Project Introduction)

프로젝트 탄생

• 이 프로젝트는 학부 졸업작품 제출을 위해 제작한 프로젝트..
• 총 4번의 발표와 컨펌을 통해 매 발표마다 교수님들의 요구사항을 충족시키며 완성시킴

사이트 소개

• 유아용품 중고거래 사이트 Mom's Holic은 유아용품 중고거래와 육아 콘텐츠에 특화된 웹 서비스를 제공한다.
• 주 콘텐츠는 유아용품 중고거래이며, 서브 페이지로 기부/나눔, 육아 칼럼, 레시피, 일기 등의 콘텐츠를 구현했다.

⏰ 개발 기간

• 2021.03 ~ 2021.05.20
• 학기 시작부터 5월 중순까지 다른 과목을 수강, 시험준비하면서 진행.

🤝 개발 인원과 역할분담

김연중(팀장, 프론트엔드)

• 기획 - Axure를 사용한 프로토타입 제작(https://lqt0dc.axshare.com/#id=lzw77r&p=%EB%A9%94%EC%9D%B8_%EB%A1%9C%EA%B7%B8%EC%95%84%EC%9B%83_&g=1),
  PPT제작 및 발표준비, 시연준비 등
• 웹 퍼블리싱 - 메인 페이지 레이아웃, 로그인/회원가입페이지, 거래관련 페이지(상품카테고리, 판매글작성, 상품검색, 상품상세보기, 마이페이지, 구매페이지 등), 고객센터, 서브페이지(기부/응모, 칼럼, 레시피, 일기), 전체 페이지 반응형 작업

유**(팀원, 백엔드)

• 웹 퍼블리싱 - 상품등록(상품사진첨부기능), 맘스톡1:1대화 디자인, 알림 디자인
• 개발 - 전체DB설계, 로그인/회원가입, 거래관련기능 구현(상품카테고리, 판매글작성, 상품검색, 상품상세보기, 찜하기/댓글, 마이페이지, 중고거래 모든거래과정, 카카오결제, 다날결제, 맘스톡1:1대화, 알림 등), 서브페이지기능 구현(기부/응모, 칼럼, 레시피, 일기)

황**(팀원, 웹 디자인)

• 디자인 - 사이트 초기시안, 맘스홀릭로고 이미지, 메인페이지(키이미지, 기부장려이미지), 서브페이지(모든 키이미지, 기부신청/응모신청 절차안내, 기부/응모 장려이미지) 제작

⚙ 개발 환경 (Development Environment)

🛠︎ Tool

• Visual Studio Code
• Eclipse IDE for Enterprise Java Developers. Version: 2019-12 (4.14.0)
• Tomcat 9.0
• MySQL workbench CE 8.0

• Java: 8
• JDK/JRE: 13.0.2

🖥 OS

• Window

🎞 영상

https://youtu.be/Mf2pIn3V_HA

🙋‍♂ 나의 담당 상세업무 (My Responsibilities)

• 1~4차 발표 자료 준비, 시연준비
  
  
• front-end 구현, 반응형 구현
• Axure를 이용한 프로토타입 제작 - https://lqt0dc.axshare.com/#id=lzw77r&p=%EB%A9%94%EC%9D%B8_%EB%A1%9C%EA%B7%B8%EC%95%84%EC%9B%83_&g=1

Axure

• 아래의 자료들은 위 영상에 담기지 못한 반응형 화면을 담았습니다.

반응형 - 메인메뉴

반응형 - 네비게이션

반응형 - 메인 - 응모콘텐츠

반응형 - 메인 - 칼럼콘텐츠

반응형 - 메인 - 레시피콘텐츠

반응형 - 메인 - 일기콘텐츠

반응형 - 상품 상세보기

반응형 - 결제하기

반응형 - 서브 - 기부페이지

반응형 - 서브 - 칼럼페이지

반응형 - 서브 - 레시피

반응형 - 서브- 일기

📝 개발후기

프로젝트에서 분담을 프론트엔드를 맡았기 때문에 프론트엔드에서 많은 경험치를 얻을 수 있었던 프로젝트였다. 실력적으로 얻은 부분은 다음과 같다.

기본적인 클라이언트 언어 실력 향상

이 부분이 제일 많이 성장했다. 사실 어떤 사이트를 보여주어도 그대로 구현하려면 매우 많은 시간이 걸렸다. 이 프로젝트를 기점으로 어떤 웹 사이트의 페이지를 보여주면 정적인 부분은 90%는 구현할 수 있을 능력이 되었다.

Axure 툴의 사용 (prototype툴을 사용한 기획, 발표)

처음에 졸업작품을 기획할 때, 프로토타입 툴이 매우 절실했다. 때문에 어떤 툴을 사용할지 찾아보다가 유료 툴인 Axure을 사용하기로 결정했다. 물론 Axure에 관한 툴 사용법이 국내 서적이나 영상은 거의 없었다. 그러다 인프런에서 유일하게 axure 강의를 발견, 바로 결제하고 단기간에 필요한 부분만 배웠다. 페이지 레이아웃을 다 짜놓고 이를 기반으로 프론트엔드 구현을 시작했다.

반응형 구현

클라이언트 언어 실력을 매우 향상시킨 개기. 3차 발표에서 교수님이 예상치 못하게 반응형을 추가하라는 말씀을 주셔서(왜 끝나가서) 부랴부랴 반응형을 추가했다. display: flex도 몰랐던 내게 갑자기 반응형으로 구현하라는 말씀은 정말 청천벽력 같은 말씀이셨다.

부랴부랴 ebook 구매해서 단기간에 중요 개념만 보고 예제코드 분석 후 적용.. 중요 페이지는 좀 더 디테일한 반응형을 구현함 결국 해내긴 했지만 다음 발표까지 거의 1주일은 밤을 새가면서 했던 것 같다.

발표실력

졸업작품 발표는 총 4차 발표로, 과의 모든 교수님들과 4학년 학우들 앞에서 진행했다. 1~2차는 구현된 부분이 많이 부족했기 때문에 프로토타입과 PPT로 발표를 진행했다. 3~4차는 실제 프로젝트를 시연하면서 진행했다. 많은 사람들 앞에서 하는 발표는 항상 떨리지만, 그런 긴장되는 부분과 함께 모두의 앞에서 멋지게 발표하고 싶은 마음이 미묘하게 공존했었다. 발표 전, 미리 연습을 많이 진행하면서 어떻게 팀의 의도 효율적으로 전달해야 하는지 많이 고민했었다. 1차~2차 까지 많이 떨면서 발표했던 것 같다. 많이 연습했음에도 불구하고 목소리가 많이 떨렸지만, 3~4차 발표에서는 적응하면서 전보다 훨씬 좋은 발표실력을 갖게 되었다.

아쉬웠던 점

• 자바스크립으로 동적인 효과를 많이 못넣은 것에 있다. 간단한 자바스크립트만 사용하여 기존 구현하고 싶던 기능이 실력과의 타협으로 구현할 수 없었다.
• 파일의 효율적인 관리가 부족했다.
• css를 너무 지저분하게 작성했다. 매번 발표기한에 쫓기면서 css파일을 기능별로 나누지도 못했고 반응형 또한 따로 나누지도 못했다.
• css 선택자를 한정적으로 사용했다. 더 폭넓은 선택자를 사용했더라면 쓸데없는 id와 class를 만들지 않았을 것이다.
• 이 당시 git이라는 것을 몰랐다. 협업이기 때문에 git을 통해 버전관리를 했더라면 프로젝트를 더욱 수월하게 진행했을 것이다. 실제로 파일을 합치면서 생긴 이슈가 많다.