카페24 모바일 스킨에서 상품상세 기본적으로 소비자가가 표시되지 않고 판매가만 표시됩니다. 아래 이미지처럼 소비자가에 취소선이 들어가고, 판매가를 표시함으로써 정가에 비해서 할인되고 있다는 것을 보여주고 싶은데, 불가능한 상태입니다.

취소선이 들어간 소비자가, 강조된 판매가

이 부분을 따로 소스를 작성해줘야하는데요. 목록 화면에서는 적용되어있기때문에 목록화면에서 쓰이는 소스를 활용해서 적용해야합니다.

위의 소스를 원하는 부분에 삽입함으로써 간단하게 해결이 가능한데, 카페24에서 제공하는 $product_custom변수는 기본적으로 소수점 아래 2자리까지 표현하기때문에 천단위로 구분지어주는 모디파이어(modifier)기능을 활용해서 숫자 표현을 변경해줘야합니다.

“소비자가”를 추가하기 전

“소비자가”를 추가한 모습

위와같이 간단하게 소비자가와 판매가를 표현해줄 수 있습니다. 그리고 아래 사진과 같이 변경하기 위해서 CSS 코드를 이용하면 더욱 눈에 두드러지게 차이를 줄 수 있습니다.

CSS 적용

위와 같이 간단한 방법으로 소비자가를 삽입해줄 수 있습니다. 카페24에서도 할인율을 표시하는 방법이 있지만, 개인적으로 모든 제품 가격이 자동으로 할인율이 적용되도록 하고 싶습니다. 그래서 다음 포스팅에서는 소비자가와 판매가를 계산하여 할인율을 표시하는 자바스크립트를 작성해보도록하겠습니다.

 

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

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

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

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

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

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

 

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

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

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

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

카페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시) 기준으로도 매뉴얼은 수정되지 않고 있다.

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

 

 

카페24 롤오버 기능

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

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

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

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

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

네이버 블로그

네이버 블로그 스킨 제작에 대해서

네이버 블로그 스킨에서 제공하는 기능을 활용하면 배너를 삽입하는것은 물론이고 약간의 트릭을 이용해서 홈페이지처럼 보이게 만드는 것도 가능합니다. 기본적으로 HTML과 CSS에 대한 선행지식이 필요한 관계로 전혀 경험이 없다면, 따라하시는데 다소 생소한 표현때문에 어려움을 느낄 수도 있습니다. 그렇지만 최대한 설명을 덧붙여서 어려움을 덜어드리도록 노력해보겠습니다.

위젯 기능 활용

네이버 블로그 스킨은 위젯이라는 기능을 수 년 전부터 지원하고 있습니다. 하지만 여전히 베타상태로 놔두고 있는 이유는 보안이나 관리상의 이유가 크지 않나 싶은데요. 너무 많은 자유도를 허용하다 자바스크립트 범벅으로 난장판이 됐던 다음 카페의 선례가 있기 때문인가 싶습니다. 지금은 보안상의 이유로 대부분의 커뮤니티에서 스크립트 입력을 허용하지 않고 있습니다.

CSS 활용

네이버 블로그 스킨에서는 CSS도 무조건 인라인 형태로 서술되야합니다. 때문에 반복적으로 같은 내용을 필요로 할때 반복작업으로 인한 피로감이 좀 있습니다. 그리고 일부 태그들은 또 여전히 적용되지 않고 있는 문제도 있고, 네이버에서 임의로 다른 태그로 대체해서 적용하는 경우도 있기때문에, 약간의 시행착오를 감수해야합니다.

홈페이지 처럼 보이게 만드는 트릭

일단 네이버 블로그 스킨을 홈페이지 형태로 만드는 방식에 대해서 간단한 개요를 이야기하자면, 네이버 블로그 상단 부분에 배경이미지를 깔고, 그 위에 투명한 위젯을 올려서 원하는 형태로 버튼이나 배너 같은 요소들을 삽입합니다. 엄연히 이야기하자면, 위젯을 이용해서 레이아웃을 구성한다고 볼 수 있습니다.

테이블 태그 사용 지양

덧붙여서 아직도 테이블 태그를 활용하는 방법을 고수하는 네이버 블로그 스킨 강좌들이 있는데, 테이블 태그를 사용하는 것 자체는 크게 상관 없으나 만드는 사람 입장에서 불필요한 코드를 많이 사용해야합니다. 그리고 버튼이 한 두 개라면 모르겠지만, 많은 양의 버튼을 테이블 태그로 생성하게 되면 그만큼 많은 로딩 시간이 소요됩니다.

테이블 태그로 박스를 만들 경우와 div 태그로 각각 폭 170픽셀, 높이 600픽셀의 박스를 만들 경우를 각각 아래 예시에서 보여드리도록 하겠습니다.

같은 결과물을 보여주지만, 내부에서 돌아가는 모양새는 다릅니다. 한 눈에 보아도 태그의 양이 확연히 차이가 납니다. 테이블 태그는 브라우저가 해석할때 구조적으로 먼저 table을 찾고, tr로 행을 찾고, td로 열을 찾고 그 안에 내용을 불러오는 식이라 3번에 걸친 과정이 필요합니다. 그와 반대로 div 태그는 그냥 한 번에 내용을 불러올 수 있습니다. 버튼 하나 쯤이라면 큰 차이가 안느껴지겠지만, 버튼을 많이 만들수록 이 문제는 더 크게 다가올 수 있습니다.

때문에 위지윅 wyswyg 방식의 나모웹에디터,드림위버를 사용해서 웹사이트를 만들어봤던 분들은 다소 생소할 수 있습니다만, 따라 해보시다보면 어느 정도 이해가 갈 겁니다.

본 튜토리얼은 아래와 같은 과정을 걸쳐서 진행됩니다.

  1. 구상단계
  2. 디자인(포토샵)
  3. 디자인을 스킨에 적용하기(네이버 블로그 관리자 기능, HTML/CSS)
  4. 버튼을 클릭할 때마다 새창으로 뜨는 문제 해결하기
  5. 프롤로그 기능 활용
  6. 포스팅 영역을 활용해서 조금 더 홈페이지처럼 보이게 만들어보자
  7. 에필로그

덧붙여서 말씀드리자면, 본 튜토리얼을 통해 네이버 블로그에 대한 기능적 이해를 돕는데만 활용하시고, 가능하면 홈페이지형 블로그는 만들지 않으셨으면 좋겠습니다. 그 이유는 에필로그에서 설명드리겠습니다.