TS6 여성청결제 쇼핑몰 리뉴얼 

TS6 여성청결제 쇼핑몰 사이트  리뉴얼 작업을 완료했습니다. 작업기간은 두 달정도 걸린거 같네요. 물론 이것만 한게 아니라 샘플 패키지 디자인, 상세페이지, 브로슈어, 상품등록까지 하루에 4시간씩 작업하는 조건으로 진행하다보니 전부 다 해서 두 달이란 시간이 걸렸는데, 실제로 작업시간으로 따져보면 한달정도 걸린 셈이네요. 사이트만 만드는데 순수하게 집중적으로 소요된 시간은 대략 2~3주 정도 걸린거 같습니다. 여러가지를 동시에 하다보면 순수하게 어떤 작업에 얼마가 걸렸다라는걸 파악하기 좀 어려운 점이 있네요.

사이트를 상세이미지를 비롯해서 거의 다 바꾸다 시피했는데, 상세이미지는 before가 남은게 없어서 설명하기가 어렵겠네요. 대략적으로 어떤 점을 바꿨는지 소개해보겠습니다.


메인페이지 

상단 부분

수정 전 – 제품의 브랜드는 TS6, 회사 이름은 DNA 메디컬코리아입니다.  회사 이름을 알리는 것보다 TS6라는 브랜드에 대해서 알려야 할 필요성이 큰 상태입니다. 두 가지가 전부 상단에 노출되어있어서 무엇이 중점인지 알기 어려운 상태였습니다.

수정 후 – 과감하게 DNA메디컬 코리아라는 사명을 상단에서 제외했습니다. 이 사이트는 제품 브랜드를 알리는 것이 더 중요합니다. DAUM 사이트에서 DAUM 로고와 KAKAO 로고를 상단에 동시에 노출하지 않는 것처럼 말이죠


메인 슬라이더

수정 전 – 메뉴와 제품에 대한 소개가 전부 jpg 이미지 파일로 구성되어 있었습니다

수정 후 – SEO(검색엔진최적화)에 유리하게 만들어주기 위해 이미지를 사용하기보다 CSS를 통한 타이포그래피로 해결할 수 있는 부분들은 직접 텍스트를 사용했습니다. 포털사이트 검색은 이미지가 아닌 텍스트로 검색되기 때문입니다. 만들때는 더 시간이 많이 걸리지만, 노출효과는 더 도움이 될 것으로 기대됩니다.


제품 진열 

수정 전 – 제품이  목적없이 전부 나열되어있던 상태

수정 후 – 제품이 6개밖에 되지 않는 사이트입니다. 그런데 제품을 용도별로 나누지 않고 전부 나열하기만 해놓아서, 쇼핑하는 입장에서 생소한 제품을 접할 때 무슨 제품인지 알려주기 어려운 점이 있습니다. 그래서 용도별 – 세정용, 세정 후 관리 / 휴대용 , 피부관리로 세분화된 카테고리를 제안해서 반영하고, 별도로 탭으로 구성했습니다.


제품 소개

수정 전 – 제품을 어떤 상황에서 사용하는것이 좋을지 설명하는 부분입니다.

수정 후 – 어떨 때 사용할지 세부적인 내용은 상세이미지에서 설명을 해주어도 충분합니다. 처음에는 아주 간략하게 카테고리로 묶어 소개하고,필요한 상황에 바로 제품과 연결되도록 링크를 제공하는 식으로 바꾸어 주었습니다.


하단디자인

수정 전 – 푸터 부분은 전부 이미지로 되어있었고 KG 이니시스 로고도 없었던걸 제가 임시로 추가한 상황입니다. 필수로 들어가야할 쇼핑몰 정보들이 누락되어있는 상태입니다.

수정 후 – 마찬가지로 이미지 사용은 최소화 하고, 텍스트로 대부분 구성했습니다. 전자상거래법상 쇼핑몰 필수 정보 중 어떤 에스크로(안전거래) 서비스를 사용중인지, 어느 회사 호스팅을 이용하고 있는지 정도는 필수적으로 들어가야 합니다. 나머지는 선택적으로 넣어줄 수 있는 이미지와 안내문구들입니다. 사실 최근 개인정보 관련하여 쇼핑몰들도 SSL을 필수적으로 넣어야합니다.


작업후기

사이트를 새로 만드는 작업은 언제나 좀 골치 아프고 피곤하고 힘든 일이 많습니다. 단순히 주어진 것을 작업하는 것도 쉽지 않지만, 의뢰하신 분과 함께 고민하고 어떤 방법이 좋을지  의견을 주고받으면서 작업하다 보면 더욱 신경 쓸 일이 많아지기 때문이죠. 그래도 이 사이트를 만들면서 제 의견을 많이 수용해주시고, 긍정적으로 받아주셔서 작업하면서 큰 어려움은 없었던 것 같습니다.

수정 전 사이트 스킨 : http://skin-skin1.dnamedicalkorea.cafe24.com/

수정 후 사이트 : http://drkmedic.com

쇼핑몰 제작 문의, 이벤트, 기획전 디자인 문의 등 필요하신 부분이 있으면 아래 양식으로 메세지 보내주시면 빠른 시간 안에 답변 드리도록 하겠습니다.

카페24에서는 게시판 최근 글을 메인화면에 노출할 경우, 게시판 페이지에서 노출할 경우 등 다양한 상황에 맞도록 모듈을 제공하고 있습니다. 제가 겪은 경우는 좀 예외적인 상황이었던 것이 아닐까라고 생각되는데, 혹시라도 같은 문제를 겪고 있을지 몰라 포스팅으로 남깁니다.

일반적으로 게시판 메인 모듈은 아래 링크를 통해 매뉴얼을 참고하면 어떻게 적용할지 확인할 수 있습니다.

제가 작업하고자 했던 목표는 메인화면에 게시판 공지글리스트가 노출되도록 하는 것이었는데, 위의 매뉴얼에서 제공하는 바에 의하면 “board_list_1″이라는 모듈을 호출해야합니다. 하지만 실제로 작동되지 않아서 고객센터에 문의를 남겼더니 “board_notice_1″ 으로 적용하라는 답변이 돌아왔습니다.

매뉴얼에 문제가 있던지, 제가 손보는 스킨 구조상 호출할 수 없다보니 별도 모듈을 구성해서 보내준건지는 모르겠습니다. 일단 저랑 비슷한 경우를 겪으신 분이라면 위의 방법대로 소스를 수정해서 적용해보시길 바라겠습니다.

아래에는 해당 내용을 반영하여 수정된 소스입니다. 필요하신 분은 바로 복사해서 쓰셔도 좋습니다.

 

카페24 롤오버 기능

최근에 관리하기시작한 쇼핑몰 디자인을 새로 바꾸면서 현재 디자인과 어울리지 않는 부분들을 제거하고자 소스를 뒤져보고 있던 중이었습니다. 상품이미지를 선택했을때 롤오버 되는 부분을 수정하려고하는데, 좀처럼 CSS나 JS에서 해당 기능이 적용된 부분을 찾을 수가 없었습니다.

혹시나 싶어서 디자인 수정, 상품관리에서도 관련 메뉴가 있나 살펴보았는데 없더군요. 엉뚱하게도 전혀 연관성없는 메뉴에서 설정해줄 수 있다는걸 발견했습니다.

위와 같이 상점관리 – 화면효과 설정 – 상품이미지 효과 설정을 통해 해당 설정을 켜고 끌 수 있습니다. CSS나 JS를 사용할줄 모르는 사용자를 위해서 제공하는 기능같습니다만, 최소한 해당 메뉴는 디자인관리에서 적용될 수 있도록 되어야 맞지 않나 싶네요. 정말 한참을 헤매고 뒤진 끝에 발견할 수 있었던터라 연관성이 몹시 떨어지는 곳에 메뉴가 위치하고 있어서 아쉬움이 많이 느껴집니다.

더불어서 간단하게 CSS를 이용해서 비슷한 효과를 낼 수 있는 방법이 있습니다. 아래 소스를 첨부했습니다.

CSS 부분을 보시면 위와같이 바로 :hover라는 가상클래스를 이용하는 것인데요. css에서 보통 상태와, 마우스를 올렸을때(hover) 어떻게 변화할 것인지만 새로 기술해주는 것만으로 충분히 사용이 가능합니다.

카페24 쇼핑몰에서도 소셜로그인해보자

카페24 뿐만이 아니라 다른 쇼핑몰이나 웹사이트 들을 보면, 간편하게 소셜 계정 – 네이버, 카카오톡 등으로 로그인이 가능한 곳들이 있습니다. 회원가입 절차가 무척 번거러울 수 있어서 사용자에게는 무척 편리한 기능입니다. 카페24에서도 이런 기능을 간편하게 제공하고 있는데요.

먼저 제공되는 서비스목록을 보면 페이스북,카카오,네이버,구글플러스 계정으로 가입하는게 가능합니다. 그래서 각각 계정을 연동하기 위해서는 각SNS의 개발자센터를 통해 API키나 아이디를 받아야 하기때문에 각 서비스의 계정에 가입해서 아이디가 준비되어있어야합니다.

카페24 관리자 메뉴 찾기

설정하는 곳은 카페24관리자 화면에서 프로모션 > SNS관리 > SNS 로그인 연동관리에서 찾아볼 수 있습니다.

각각 서비스에 맞는 설정값 발급방법이 입력칸 옆에 [발급방법 보기]에 잘 설명되어있기때문에 별도 설명은 생략하도록 하겠습니다.