코스메디션(Cosmedician) 쇼핑몰 리뉴얼

카테고리 : 디자인 포트폴리오 / 웹 디자인 / 적용사례 최초 작성일 : 2019/03/21 최종 수정일 : 2019/05/27

– 카페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)

실제 사용되기 전, 디자인의 검토를 위해 실물과 비슷하게 가상 시뮬레이션으로 미리 볼 수 있는 결과물입니다.

크로스 브라우징
크로스 브라우징
크로스 브라우징-2
크로스 브라우징-2
바로가기 링크

※ 버튼을 누르시면 새 창으로 이동합니다.