습작 - 홈페이지 신규 제작

 

15. 06

2015년 6월 당시 취업성공패키지로 국가기간전략산업직종의 웹디자인 부문으로 교육받을 당시의 작업물입니다

부산의 모 고양이카페 홈페이지를 웹 표준인 HTML5에 맞추어 신규 제작해 보았습니다.

사용된 고양이 사진이나 업장의 사진은 해당 업체의 네이버 카페에서 발췌하였습니다. 해당 업체의 로고나 파비콘이 따로 존재하지 않아서 로고와 파비콘은 직접 제작하였습니다. 

메인 페이지(메뉴의 WITHCAT 항목)

메인 페이지입니다. 고양이 카페인 만큼 이미지 요소가 많기 때문에 J-QUERY를 사용하여 이미지를 부각하였습니다. 사용한 J-QUERY는 작은 이미지를 클릭하면 원본 사이즈 팝업창이 뜨고, 자동 슬라이드쇼 기능이 포함되어 있습니다. 바닥이나 X를 누르면 창이 꺼지고, 자동 슬라이드쇼 말고도 이미지에 마우스오버 했을 때 이전이나 다음 이미지를 보여주는 화살표가 있어, 화살표를 직접 눌러 이미지를 확인할 수 있습니다.

서브 페이지 - CAT HOTEL

해당 홈페이지는 반응형으로 제작되어, 모바일에서도 문제 없이 이용할 수 있습니다.

서브 페이지 - RESERVATION

예약 페이지는 해당 업체가 고양이 호텔과 고양이 카페, 두 가지 영업 방식을 선택하고 있었기 때문에 구분해서 예약할 수 있도록 하였습니다.

서브 페이지 - RESERVATION- HOTEL

호텔 이용 주의사항, 탁묘계약서 팝업창

호텔 예약 페이지입니다. 간단한 폼으로 구성하였고, 호텔 이용 주의사항과 탁묘계약서는 별도 팝업으로 확인할 수 있도록 만들었습니다. 재작성 버튼을 누르면 폼에 입력된 내용이 삭제됩니다.

서브 페이지 - RESERVATION - CAFE

카페 예약 페이지입니다. 호텔 예약 페이지와 비슷하게 구성하였습니다.

서브 페이지 - WITHCAT'S CATS

고양이 소개 페이지입니다. 사용한 이미지 팝업 J-QUERY에 다양한 디자인이 포함되어 있어 메인 페이지와 CAT HOTEL에 쓰인 디자인 대신 다른 디자인을 적용시켜 보았습니다. 해당 디자인은 이미지에 마우스오버 시 툴팁이 출력되고, 이미지를 클릭하면 팝업된 이미지에 툴팁의 내용이 표시됩니다. 또한, 앞서 메인 페이지와 CAT HOTEL에 사용된 디자인과 마찬가지로 자동 슬라이드 쇼와 이전, 이후 이미지 버튼을 제공합니다.

 

 

제작했던 홈페이지 구동 영상 : https://youtu.be/RrdtGrAXElc

 

사용한 툴 : Adobe Dreamweaver, Photoshop, Illustrator

*해당 html 문서는 업체에 납품하기 위함이 아닌, 순수하게 개인의 포트폴리오를 위해 창작된 문서임을 밝힙니다.