,

css 파일에서 중복된 내용 삭제하기

최근 카페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 상품상세 명절,이벤트 공지 일괄 적용/변경하기

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

상품은 무려 7660개!!

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

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

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

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

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

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

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

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

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

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

카페24 메인화면 게시글(공지사항) 목록 노출하기

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

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

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

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

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

 

카페24 상품 이미지 롤오버 기능 켜고 끄기

카페24 롤오버 기능

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

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

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

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

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