[팀프로젝트]펫 샵 웹 페이지 만들기

우리 조의 주제는 펫 샵으로 결정되었으며, 타겟 페이지는 '펫프렌즈'로 설정하고 분석하여 만들었다.

타겟 페이지의 전체적인 구성과 각 페이지들간의 통일감 부여 방법

그리고 해당 페이지만의 특색있는 요소들을 파악해보았다.

이를 통해 조원들이 맡은 각 페이지들의 색감을 통일하고 템플릿을 이용하여 작업 영역을 제한하여

전체적인 통일감을 조성하였다.

조원별로 각자 맡은 페이지를 분석하였으며 내가 맡은 메인페이지의 강점은 특색있는 카테고리바의

형태와 구성방식이라 판단하였다.

 

사용된 웹 템플릿은 하단의 링크를 통해 확인할 수 있다.

Live preview for Style template — Untree.co

Preview - Untree

 

기본적으로 자동 슬라이드,드래그 슬라이드 기능등이 있으며 우측 상단에 메뉴바가 위치한다.

해당 웹 템플릿을 이용하여 타겟 페이지를 분석한 뒤 작업을 시작하였다.

 

페이지 구성은

메인 페이지

로그인 페이지

이용약관 페이지

회원가입 페이지

회원가입 완료 페이지

반려동물 등록 페이지

상품 페이지

상품 상세정보 페이지

위의 페이지들로 구성되어 있다.

 

상품 페이지와 상품 상세정보 페이지는 샘플로 간단하게만 구성되어 있으며

메인 페이지에서 상품 카테고리중 '키튼'에 해당하는 페이지만 구성이 되어있어

페이지간의 연결 역시 '키튼' 카테고리만 되어있다.

추후 카테고리에 맞는 페이지들을 추가적으로 구현하고 메인페이지와 연결 할 예정이다.

 

해당 페이지들중 내가 맡은 페이지는 메인 페이지로, 메인 페이지만 상세 설명을 할 예정이다.

 

 

메인 페이지의 모습이다. 템플릿과는 꽤 다른 모습이나 기본 배경색,폰트 변경과 같이 간단한 변경을 제외하고는

섹션 부분에 메뉴바가 추가되었다.

중앙에 보이는 사료,간식,용품으로 나누어진 부분이 메뉴바이며 

사료,간식,용품을 클릭함에따라 메뉴바 역시 변화한다.

jQuery를 사용하였으며 버튼 클릭이벤트를 이용하였다.

스타일 css에 hide 클래스의 속성을 display:none 으로 설정하여 addClass()와 removeClass()를 이용하여

버튼 클릭 이벤트를 통해 전체 메뉴를 감싸고 있는 <div>태그를 숨기거나 보여주는 식으로 구현되어있다.

 

다음은 메뉴중 더보기를 누르면 나오는 더보기 창이다.

 

더보기창은 해당 화면과 같이 모달창으로 구현되어있다.

모달창도 메뉴바와같이 클릭 이벤트로 감추거나 보여지게끔 하는 원리이다.

역시 display:none 속성을 이용하였으며 해당 기능은 자바스크립트로 구현되어있다.

 

 

다음은 페이지 왼쪽 상단의 드롭다운 메뉴이다.

기본 강아지로 설정되어있으나 메뉴바를 누르면 드롭다운형식으로 메뉴바가 보여지고 강아지와 고양이를 선택할 수 있다.

선택에 따라 메인 페이지에서 보여지는 추천 상품이 달라진다.

가시성을 위하여 마우스 오버효과가 설정되어있다.

캡쳐로 인하여 마우스 커서가 사라졌으나 해당 화면은 커서를 가져다 댄 모습이며 오버효과를 확인할 수 있다.

 

기본 강아지 상태의 추천메뉴이다.

일정 시간 간격으로 슬라이드 되며 드래그로도 슬라이드가 가능하다.

 

고양이 상태에서는 품목이 달라진것을 확인할 수 있다.

드롭다운 메뉴바 안의 메뉴를 선택함에 따라 현재 선택 창의 text값을 교체한다.

jQuery로 구성되어있으며 드롭다운 메뉴바는 addClass()와 removeClass()로 구현되어있고

현재 선택된 모드를 보여주는 창의 text는 .text()를 이용하여 text값을 교체해주었다.

추가적으로 드롭다운 메뉴바에서 강아지 또는 고양이를 클릭함에 따라

화면 중앙의 메뉴 카테고리바를 구현할때 사용했던 .hide 클래스의 속성을 이용하여

추천 메뉴를 보여주는 <div>태그 자체를 보여주거나 감추는 식으로 구현되어있다.

 

이번 프로젝트는 페이지의 외형을 만드는게 주 목적이었지만 이번 프로젝트에서 만든 웹 페이지는

외형만 있는 껍데기로 끝나는 것이 아니라 계속해서 업데이트하여 유효성 검사를 완료하고

실제 펫 샵의 기능을 탑재한 완성된 웹 페이지로 발전시킬 예정이다.

 

해당 프로젝트의 코드는 아래의 링크에서 확인 가능하다.

sonsunghwan94/petshop (github.com)