최근 카페24 스킨을 잘못 구매한 덕분에 쓰레기 치우느라(?) 아주 곤욕입니다. CSS 코드를 중복해서 여러번 불규칙적으로 정의해놓은 덕분에 5000여줄의 코드에서 일일이 찾아 지워주고 나니 1000여줄로 줄어드는 상황에 어이가 없는데, 이게 문제는 카페24 솔루션 특징상 CSS 코드가 수십개는 되는데다 만든 놈이 추가한 파일들도 있다는거죠. 그래서 이런 반복 되는 작업을 어떻게 해결할 수 있을까 고민한 끝에 css-purge라는 tool을 발견했습니다. 15800여줄의 코드를 보고 이건 안되겠다 싶어서 찾게 됐는데 간단하게 1700여줄로 줄여주는걸 보면서 감탄과 동시에 스킨 제작자를 저주하게 되더군요. 물론 완전하진 않습니다. 자동으로 중복된 코드를 지우면서 다이어트 하는 과정에서 불필요하다고 판단되는 것들을 지우다보니 지워선 안될 코드들도 일부 지운게 확인 됐습니다.그럼에도 불구하고 이 툴은 정말 쓸만합니다. 누락된 부분은 찾아서 추가하면 되는데 3군데 정도 누락되서 크게 어려움을 겪지 않고 문제를 해결 할 수 있었습니다. 아래에 관련 링크를 걸어두겠습니다. 저처럼 중복된 정의들을 지우기 위해서 애쓰지 마시고 css-purge로 스트레스를 덜 받으시길 바랍니다. http://rbtech.github.io/css-purge/그리고 추가로 minify된 코드를 해제하는 플러그인도 있더군요 atom 패키지 중에서 atom-beautify 를 이용하면 간단하게 해결 가능합니다. install package를 통해서 설치 가능합니다

보통 카페24 솔루션을 이용해서 직접 제작해왔던터라 스킨을 구매할 일은 없었습니다. 그런데 이번에 일하게된 업체에서 스킨 제작에 소모되는 시간을 줄여보고자 스킨을 구매하자는 의견이 나와서 처음으로 템플릿 구매를 해봤습니다. 결론부터 이야기하자면, 정말 고발해버리고 싶을정도로 소스가 엉망이네요.

이를테면 이런겁니다. 1차적으로 모든 소스가 minify 된 상태로 프로덕션 용으로 제공되고 있습니다. 처음에는 사이트 속도면에서 이점을 얻고자 한 것 정도로 이해했습니다. 그런데 보통 템플릿을 구매한다해도 그대로 쓰는 경우는 별로 없습니다. 수정을 하기 마련이죠. 그런데 이 업체는 악의적으로 수정을 어렵게 만들어 놨더군요. 그래야 계속 자신에게 수정을 맡길테니까요.

그래서 그 수법에 대해서 좀 이야기해보고자 합니다. 너무 약올라서 반디캠을 받아서 수정하는 과정을 동영상으로 촬영해놨습니다.

먼저 CSS 소스가 가장 엉망입니다. 카페 24 스킨을 구매했을 경우엔 저작권 침해가 이뤄질 것을 우려하여 소스 코드에 직접적으로 FTP를 통해 접속할 수 없게 막아놓았습니다. 그래서 서브라임 텍스트나 아톰 에디터와 같은 툴을 통해 직접적으로 수정할 수가 없어서 카페 24 자체에서 제공되는 스마트 디자인 창에서 수정해야합니다. 그래서 너무 복잡해서 에디터에 그대로 붙여넣은 모습이 바로 아래와 같은 상황입니다.

전부 minify 되어있어서 가뜩이나 많은 카페24 CSS 파일들이 죄다 이모양이라 수정하려면 전부 손을 봐야합니다. 그래서 소스를 보기 좋게 수정할 수 있는 상태로 만들어보니 아래와 같이 저작권 안내 주석 포함하여 약 816줄로 파악됩니다.

이제부터 눈여겨볼 것은 정의 된 것들이 중복되서 나온다는 점입니다. 아래 소스에서 찾기를 한 결과 하나의 정의가 5번이나 중복되는 것이 보입니다.

 

이렇게 중복된 소스들을 모조리 찾아서 하나의CSS 파일을 정리하는데 약 10분 가량 걸립니다. 그렇게 전부 중복된 코드들을 정리해서 간추리고 보니 아래와 같이 정리됩니다.

놀랍지 않습니까 208줄입니다. 816줄의 소스중에 쓰레기로 일부러 삽입된 소스가 400줄이 넘는다는 이야기입니다. 심지어 CSS 파일을 열어볼때마다 죄다 이 모양이라서 충격적이고 화가나서 참을 수가 없더군요. 하루하루 돈 주고 똥을 사서 치우는 느낌이라 이거 참 곤란하고 시간은 시간대로 들고 있는 상황입니다. 탬플릿을 구매한 의미가 없는 상태가 되어 있는거죠.

비단 이 업체만 그럴까 싶은게 너무 악의적으로 소비자를 우롱하는 상황에 참 분노를 금할 길이 없습니다. 무려 70만원이나 주고 산 템플릿이 이상태라는게 참 놀라울 따름입니다. 법적인 사태가 벌어질 것이 우려되어 업체 이름은 공개하지 않겠습니다만, 스킨을 구매하시는 것보다 그냥 차라리 제작 업체에 맡기는게 추후 책임 문제가 벌어질때도 사태가 악화되지 않을 것 같다는 생각이 듭니다.

혹시라도 쇼핑몰을 창업하실 예정이시라면 템플릿 구매는 한 번 생각해보셔야할 것 같습니다.

지인이 쇼핑몰에서 근무 하고 있는데 고민을 토로하더군요. “추석이 다가와서 상품마다 일괄적으로 배송지연 안내 문구를 넣어하는데, 이걸 도대체 일일이 언제 삽입해야할지 모르겠다” 그냥 어지간하면 제품마다 들어가서 그냥 공지 문구를 삽입하면 될텐데, 이 친구가 일하는 곳에서 다루는 상품수가 만만치 않습니다.

상품은 무려 7660개!!

정말 아찔한 상황이죠. 7660개의 상품을 모두 들어가서 배송지연됩니다 라고 안내 이미지를 삽입한다음, 추석이 끝나면 다시 삭제해야하는 상황입니다. 지금부터 부지런히 시작하면 추석 오기전에 가능할거라고 다독이고 돌려보냈습니다만, ‘내가 너무 잔인했던걸까’ 싶어서 솔직히 조금 기뻤습니다 안타까웠습니다.

아무튼 저도 예전에 쇼핑몰에서 일할때 비슷한 경험이 있었습니다만 그때는 고도몰을 사용하고 있었고, 손쉽게 적용가능한 기능이 있었던게 기억났습니다. 당연히 꼭 있어야하는 기능이기에 카페24도 당연히 있을거라고 여기고 메뉴를 뒤져보기 시작했죠.

프로모션 메뉴 -> 홍보배너/문구관리 -> 공통이벤트 관리 에서 상품 상세이미지마다 공통적으로 내용을 삽입해줄 수 있는 기능이 있습니다.

이 기능을 그 친구에게 알려주니 뛸듯이 기뻐하더군요. 그러다가 다시 고민을 토로하기를 “공통 이벤트라고 넣으면 뭐하냐. 상품 상세이미지 하나하나 공통이벤트를 사용하겠다고 설정해줘야되서 역시 7660번을 또 들어가서 설정해줘야한다” 라면서 금새 또다시 울상이 되더군요. 나이쓰

진짜네. 이렇게 기쁠수가. 심지어 초기값이 노출안함이라서 에누리 없이 전부 노출함으로 변경 해줘야하는 상황.

애써 미소를 감추기 별 수 있냐고 어쩔 수 없는 운명이라고 생각하라고 다시 돌려보냈습니다만, 곰곰히 생각해보니 카페24가 꽤 오래된 시스템인데 설마 이렇게 허술하게 만들었을까 싶어서 다시 뒤져봤습니다.

역시 해당부분을 해결해줄 수 있는 기능이 준비 되어있습니다. 어딘지 쉽게 알 수 없게 꽁꽁 숨어 있을뿐…

위의 메뉴를 찾아 들어가서 원하는 만큼 상품을 전체 선택한 다음 “선택한 상품의” “판매정보”를 “일괄변경” 하겠다고 세팅하고 버튼을 누르면 팝업창이 뜹니다.

그리고 이렇게 공통 이벤트를 일괄적으로 적용해줄 수 있는 메뉴가 있음을 확인할 수 있습니다. 저 친구 7660번 안해도 되겠네요 쳇.

이렇게 상품에 공통적으로 적용해줄 수 있는 프로모션, 이벤트라던지, 안내사항 등을 손쉽게 노출 할 수 있도록 메뉴가 준비되어 있습니다. 명절 앞두고 고생할 쇼핑몰 관리하는 친구들이 혹시 이 기능을 모르고 있었다면 이걸 보고 좀 도움을 받았으면 좋겠습니다. 카페24는 정말 여기저기 기능들이 다 흩뿌려져 있어서 메뉴 찾기가 너무 복잡하고 어렵거든요. 그러다보니 있어도 활용하지 못하는 기능들이 많습니다. 그야말로 구슬이 서말이라도 꿰어야 보배라는 말이 떠오릅니다. 좋은 기능 좀 더 사용하기 쉽게 만들어줬으면 더 좋았을텐데 아쉽네요.

카페24 스킨 제작

쇼핑몰 스킨 제작은 무척이나 골치 아픈 작업이다. 쇼핑몰 솔루션마다 공급업체에서 정해놓은 규칙에 따라 작업하지 않으면 정상 작동하지 않는 부분들이 존재하기 때문에, 그러한 내용들을 파악하는데만해도 꽤 시간이 소요되기 때문이다.

엉뚱한 곳에서 헤매기

스킨을 제작하다 겪은 황당한 사례 중 하나가 기억난다. 상품 이미지에 마우스를 올렸을때 2px 두께의 선이 그려지는 hover 효과가 기본 설정되어 있었다. 내가 진행하는 디자인에서 다른 hover 효과를 적용하기로 결정했기 때문에, CSS 파일에서 hover 효과를 지우러 들어가봤다. 이유는 잘 모르겠지만 카페24는 정말 무시무시할 정도로 많은 CSS 파일을 운용하고 있다. 기능적으로 필수로 필요한 부분과 디자인적으로 필요한 부분을 기준으로 나눠놨다면 무척 좋았을텐데, 그냥 단순한 의식의 흐름대로 만들었나 싶을 정도로 각각의 페이지별로 나누어놨다. 페이지 안에서도 모듈별로 또 파편화 시키는 상황까지 만나면 이게 무슨 상황인가 싶을지경…하나로 뭉쳐놓으면 지나치게 CSS 파일의 로딩에 오랜 시간이 걸릴까봐 이렇게 했는지 모르겠지만, 조금 더 파일 갯수를 줄여야할 필요가 있다.

그 안에서 원하는 내용을 찾아낸다는 것도 사실 쉬운 일이 아니다만, 정말 이 잡듯이 찾아도 hover 효과가 적용된 내용이 없었다. 귀신이 곡할 노릇이다 이번에는 JS 파일을 뒤졌다. JS 파일도 만만치 않게 여기저기 파편처럼 흩어놨다. 결론적으로 이야기하자면 hover 효과는 CSS도 JS도 아닌 관리자 화면에서 적용해준다는 사실을 알게 됐다.

바로 이렇게 들어가서 고쳐 주는 것이었다. 왜 이런 위치에 이런 기능이 들어있는지는 이해하기가 어렵다.

 

해당업체는 먼저 다른 디자이너가 만든 스킨을 내가 수정하는 상황이었다. 그래서 초기설정과 달리 상품이미지 효과 설정에 이런 기능이 들어가 있었다. 초기설정은 사용 안함으로 되어있다.

 

초기설정은 보다시피 사용안함이다. 혹시라도 이 기능은 부디 사용을 안했으면 좋겠다.

 

무척이나 이해가 안가는 상황이었다. 아마도 쇼핑몰을 운영하는 판매자들이 CSS나 JS를 다룰줄 모르는데, 빈번하게 hover 효과를 요구하다보니 카페24측에서 급한데로 어거지로 꾸겨넣었을거라는 추측을 해본다. 그나마도 디자인 관리 메뉴도 아니고 쇼핑몰 운영관리 메뉴에 꾸겨넣어 놨다는게 무척 의아할 따름이다.

카페24 스킨 제작하다 문제가 생겼을때는 1:1질문을 이용한다. 하지만…

사실 카페 24 고객센터에 질문을 넣으면 그렇게 빠른 답변을 기대하기 어렵다는 이야기들을 하는데, 애초에 질문할 필요도 없는 부분들도 질문할 수 밖에 없는 상황으로 만들고 있다는 느낌을 받았다. 물론 쇼핑몰 운영자들이 가입한 커뮤니티에서 그들이 올리는 질문을 보면 대충 건너뛰고 얼버무린 질문들이 많아서 이런 경우엔 답변을 하기가 어렵다. 아니 불가능하다. 최소한 문제가 되는 부분의 소스와 화면 캡쳐라도 올려줬으면 좋겠는데, 그것조차 불가능한 사람들이 하는 질문이란 교육부터 해달라는 요청과 다름없기 때문이다. 그래서 이런 사람들이 많을 수록 고객센터에서는 답변이 늦어질 수 밖에 없다. 문제 파악도 못하는 사람의 질문을 어떻게 답변을 하겠는가.

그래서 질문하는 사람도 최소한의 지식을 학습하는 자세가 필요하다. 네이버 카페 답변란 글자제한이 300~500글자 수준인데, 답변하는 사람이 사전지식까지 전부 읊을 수도 없거니와, 비교적 간단하다 싶은걸 어렵사리 읊어주고나면 “그래도 모르겠어요 ㅜㅜ” 라며 허탈하게 만드는 상황들이 반복되면 하나, 둘 답변하는 사람들이 사라지게 되는 것이다.

카페24 관리상의 문제

두번째 사례는 매뉴얼과 실제 스킨상에서 적용되는 바가 다르다는 점이다. 공지사항 최근 글을 불러오는 모듈인데, board_list_1 이라는 모듈을 호출하면 최근 게시글의 리스트가 출력된다는 설명과 달리 작동하지 않는 상황이었다. 한참 삽질한 끝에 결국 카페 24 고객센터에 문의를 넣었는데, board_list_1이 아니라 board_notice_1으로 기입하라는 답변이었다. 모듈명이 바뀌었다는 이야기인데, 매뉴얼과 실제 작동하는 모듈이 일치하지 않는 상황이다. 2017년 6월21일에 답변을 얻었으나, 지금 현시각 (2017.09.04.오후 12시) 기준으로도 매뉴얼은 수정되지 않고 있다.

너무 파편화 되어있다보니 관리가 안되는 상황까지 온 것이 아닐까 싶다.

 

 

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

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