– 카페24에 최적화 그리고 애니메이션
기존의 노후화된 쇼핑몰을 현재의 트렌드에 맞게 새롭게 리뉴얼하였으며 클라이언트 측에서 사용하고 있는 스킨과 페이지 디자인 일부를 전달받아 진행하였습니다. 기존의 숍에서 느낄 수 없었던 애니메이션을 추가하였으며 상품군에 따라 특징을 강조한 세밀한 움직임을 더하여 사이트 이용자들에게 흥미를 유발하도록 제작하였습니다.
모바일 버전은 PC버전의 디자인을 반응한 형태로 제작하여 PC 이용자가 모바일 이용 시에 불편함 없이 사용할 수 있도록 하였습니다. 또한, 검색 최적화(SEO)가 되지 않던 문제를 점검하여 사이트 개편과 함께 검색 최적화를 완료하였습니다.
이번 프로젝트를 진행하면서 클라이언트가 제공하는 스킨을 수정 및 보완하였으나 기획된 모든 상황에 대처가 안되는 문제(스킨의 고질적인 문제) 가 있었습니다. 제공된 스킨은 의외로 허술하게 코딩되어 마진(여백) 값이 꼬인다든지 컨테이너 박스의 크기 문제 등이 발생하여 꼬인 코드를 확인하고 수정하는데 많은 시간을 허비하였습니다. 카페24를 사용하여 쇼핑몰 사이트를 제작할 때는 특별한 사정이 없다면 스킨을 사용하지 않고 뼈대부터 커스텀으로 진행하는 것이 효과적이라 생각되었습니다.
– 사이트 구조도
메인 페이지를 제외한 나머지 페이지의 구조도입니다.
COMPANY
Cosmedician
BRAND
Dermaceleb
Cossu
SHOP
All Product
Cossu
Dermaceleb
Business member only
COMMUNITY
Notice
Reviews
MEMBER/ETC.
Log in
Member Join
Cart
etc.
– 사이트 스크린샷
스크린샷은 오직 이해를 돕기 위한 목적으로 전체 사이트가 아닌 일부 페이지만을 사용합니다.
– 이해를 돕기위한 목업(Mock-up)
실제 사용되기 전, 디자인의 검토를 위해 실물과 비슷하게 가상 시뮬레이션으로 미리 볼 수 있는 결과물입니다.
※ 버튼을 누르시면 새 창으로 이동합니다.