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

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

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

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

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

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

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

CSS 적용

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

 

카페24 쇼핑몰을 운영하시는 분들 중에 웹디자이너 혹은 웹퍼블리셔의 도움 없이 혼자서 해결해나가는 분들이 있습니다. 간혹 이런 부분에 대해서 쇼핑몰 운영자들이 모여있는 커뮤니티에서 질문글이 올라오곤 하는데요.

아무래도 전문적으로 카페24 스킨을 수정해 온 사람들이라면 모를까 임시방편으로 해결해오던 습관 혹은 누군가 귀찮아서 대충 알려준 방법을 공유하는 모습들이 보입니다. 아마도 카페24 스킨을 수정할때 가장 빈번한 내용이 “배너”를 교체하거나 추가할때 필요한 내용들일 것입니다.

좀 과격하게 말씀드리자면 일단 과거에 table로 레이아웃을 잡던 방식으로 html을 배우신 분들은 ‘나도 html을 할 줄 안다’ 라고 생각하시지 않았으면 좋겠습니다. 그때와는 웹 문서를 만드는 방식이 너무 달라져버렸습니다. html 문서 안에서 스타일과 크기 등 모든 것을 해결하던 방식에서 이제는 html은 문서의 구조만 담당하고 css가 스타일과 색상, 배치, 크기 등을 담당하고 자바스크립트로 동적인 모션이나 데이터를 제어해주는 세상이 됐습니다. 역할이 분담이 된 셈인데, 이렇게 된 데는 다 이유가 있습니다.

예를 하나 들어볼께요.

이를테면 가로로 2단 그리드로 배치되는 이미지를 만드는 방식입니다.  간략하게 보자면 과거의 테이블로 레이아웃을 잡던 방식이라면 아래와 같은 방식을 취했겠죠.

테이블 코드에 대해서 잘 이해하고 다루는 사람이라면 한 눈에 “아 전체 가로폭은 1200픽셀이고 600픽셀씩 이미지를 배치해주는 코드구나” 이렇게 이해할 수 있을겁니다. 하지만 테이블 태그의 특성을 보면 일단 table > tbody > tr > td 이렇게 총 4번이나 안으로 들어가서 구조를 파악해야하므로 브라우저에서 그만큼 많은 단계를 거쳐야하고, 이런 부분이 많아질 수록 브라우저에서 이미지를 표현하는데 많은 시간이 걸립니다.

그래서 거기서 조금 더 나아간 방식이 style을 활용한 방식입니다.

한눈에 보기에도 훨씬 간결해졌죠? 하지만 이런 방식으로 코딩을 하면, 가로폭이 1200픽셀에서 1100픽셀로 바뀌거나 1400픽셀로 바뀌는 상황에서 또 저걸 찾아서 바꿔줘야한다는 문제가 있습니다. 물론 저 배너 하나뿐이라면 가서 바꾸면 되지만, 배너를 보통 하나만 쓰는 경우가 없죠.

그래서 아래와 같은 방식으로 개선해서 쓰게 됩니다.

조금 생소할 수 있지만, 여기서 처음 보이는 부분이 바로 class라는 부분입니다. class는 한번 지정해놓으면 얼마던지 쓸 수 있기 때문에 무척 편리합니다. 이를테면 아래와 같은 방법도 가능해요.

보시다시피 클래스가 3번이나 쓰였죠? 그래도 모두 같은 내용으로 1200픽셀이라는 폭이 허용됩니다. 그럼 나중에 1100으로 줄어들거나 1400으로 늘어나더라도 우리는 style 태그 안에 width:1200px이라는 값만 수정해주면 됩니다. 관리가 굉장히 편하겠죠? 여러번 반복해서 수정해야할 부분을 딱 한줄만 고쳐주면 전부 수정되니까요.

위의 방식도 문제가 되는 점이 있는데, style 태그가 작성된 html 문서 안에서만 저 내용이 적용된다는 점입니다. 보통 웹사이트는 html 문서 하나로만 구성되지 않습니다. 여러 페이지에 걸쳐서 width:1200px이라는 값이 필요할 수 있겠죠? 그래서 css 파일이 필요한겁니다.

어떤 문서건 head 태그 안에 <link rel=”stylesheet”  type=”text/css” href=”스타일 시트가 위치한 경로와 파일명”> 이 한줄만 넣어주면 공통적으로 스타일 시트를 재활용할 수 있습니다. html과 css 부분을 분리한 예제가 바로 아래와 같은 경우입니다.

See the Pen 스타일 시트를 활용하는 방법 by 배현기 (@illustudio) on CodePen.0

 

내용을 무척 길게 작성하게 되었는데, 이렇게 이야기하는 이유는 좀 더 미래를 보고 작업해야할 필요가 있다는 이야기를 하고 싶었습니다. ‘지금 당장 급하니까’라는 이유로 맨 처음에 설명한 inline 방식 – html 태그 안에 직접적으로 스타일을 정의하는 방식으로 style 적용한다던지, 아니면 html 문서 안에 style 태그로 적용 하는 방식으로 하면, 나중에 쌓아둔 숙제처럼 밀려오는 수많은 수정사항에 못이겨 관리하던 직원이 나가버리거나 사이트를 새로 만들거나 하는 사태가 벌어질겁니다.

이런 문제를 사전에 방지하려면 사실 처음부터 이런 부분에 잘 알고 있는 사람에게 일을 맡기는것이 좋겠죠. 그래서 혼자 운영하는 부분에서 정말 공부해야할 것이 많을겁니다. 그래서 사실 커뮤니티에서 알려주시는 분들도 좋은 의미에서 공유하시는거겠지만, 인라인 방식과 스타일 태그로 알려주는 방식은 차라리 알려주지 않느니만 못하다는것을 알았으면 좋겠습니다.

결국 이런 방식으로 html, css 파일로 나누어서 작성하게 된 이유는 모두 관리면에서 이점이 크기 때문입니다. 불필요한 작업은 최소화해야된다는거죠. 이런 방식을 따르지 않고 그저 작성한 사람 ‘혼자서만 알아보면 된다’, ‘나 당장 급한데로 해버릴꺼다’ 이런 식으로 일처리를 하기보단, 관리가 편한 방식을 따라서 작성하는 것이 좋습니다. 일단 다음에 관리해야할 사람이 망연자실할 정도로 후환(?)을 만들어 놓아서는 안되겠죠 ㅎㅎ

 

Whitespace debugging in DevTools in action

구글 크롬 위주로 사용하다가 파이어폭스로 옮겨타보려고 시도중입니다. 여느때와 다름없이 퍼블리싱을 하던 중 이상한 현상이 나타났습니다. 무슨 짓을 해도 레이아웃이 틀어지는 기이한 상황(?)이었는데, 도대체 무슨 상황인지 파악이 안되서 애꿎은 css만 계속 수정했습니다만 엉뚱하게도 원인은 공백문자 – whitespace text node 문제였습니다.

크롬과 달리 파이어폭스에서는 html 태그에서 한칸 띄어쓰기를 한것 까지 잡아내서 기어코 공백으로 표현하는 과잉 친절을 베푸는데, 바로 이게 원인이었습니다.

위와 같은 문제(?)때문에 약간의 공간을 표시하면서 결과적으로 전체적인 레이아웃이 틀어졌던 것입니다. 보기 좋게 줄바꿈을 한 덕분에 삽질을 하게 됐네요. 일단 이렇게 또 삽질하면서 한 수 배웠습니다.

 

 

최근 카페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를 통해서 설치 가능합니다

sftp-config.json에서ftp 설정을 해줄때 중요한 점은 바로 위에서 보여지는 내용 중에 빨간 밑줄을 그어준 부분들이다. 보통 인터넷에서 검색했을때 ftp인지,sftp인지 타입을 선택하고 호스트와 유저,패스워드,포트, 컨트롤할 리모트 패스까지는 설명이 되어있는데 좀처럼 폴더에 해당 파일들이 저장되지 않는다는 점이 내가 겪은 문제였다.

심지어 보통 yes / no를 묻는 창이 뜬다는데 그 창조차 뜨질 않아서 내용을 보니 confirm_downloads 항목이 false로 되어있었다. 나처럼 default 값이 false일 경우도 있으니 이 부분을 true로 바꿔 주어야 정상적으로 파일이 다운로드 된다.

그리고 파일을 수정한 다음에는 반드시 upload files 명령을 실행해줘야하는 번거로움이 뒤따르는데, 이 또한 upload_on_save 값에 true로 고쳐주면 저장과 동시에 업로드가 되서 바로바로 결과를 확인할 수 있다.