웹,그래픽디자인을 비롯해 운영일지 형식으로 웹에 전반적인 관련 내용들을 다루고 있습니다.

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

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

 

 

워드프레스를 로컬에서 설치해서 작업할 때 기본적으로 필요한 아파치나 mysql 정도는 설치를 할 수밖에 없지만, 막상 테마를 설치하거나 플러그인을 설치하려고하면 아래 스크린샷처럼 ftp 정보를 요구할때가 있습니다.

이 문제를 해결하기 위해서 ftp 를 설치하거나 권한을 바꾸거나 하는 방법들이 있는데, 이런 번거러운 과정 없이 wp-config.php 파일에 아래와 같은 한 줄만 추가해주면 간단하게 해결됩니다. 내용출처:https://www.barrykooij.com/unable-to-install-plugins-on-localhost/

파일을 업로드하는 방식을 ftp가 아닌 direct로 정의해주는 내용입니다. 로컬에서 작업할때만 필요한 내용이니 실제 서비스가 이뤄질때는 해당 부분은 삭제를 해주는 걸 잊지 않도록 합시다.

커닝 – Kerning 은 타이포그래피를 다룰때 시각적으로 매끄럽게 글자를 읽을 수 있도록  간격을 조절하는 것을 이야가합니다. 서체 프로그램에 의해서 만들어지는 텍스트들이 사실 항상 보기 좋게 나열되는 것들이 아니기 때문에 이러한 작업들이 꼭 필요합니다. 타이포그래피에 대한 용어 정리를 잘 해둔 블로그가 있으니 참고하면 좋을 것 같네요 .http://namcreative.tistory.com/99

여튼 친한 동생이 커닝을 직접 눈대중으로 조절한 다음 얼마나 정확하게 맞췄는지 측정하는 사이트를 알려줘서 해봤더니 생각보다 쉽지 않았는데, 점수는 생각보다 좀 나왔네요. 나름 재미는 있어요. 예전에 타이포그래피에서 커닝 조절할 때 요령에 대해서 읽은 적이 있는데, 글자와 글자 사이에 풍선을 끼워 넣듯이 배치하라는 팁이 있었습니다. 디자인할때 그 팁을 여전히 적용해서 작업하는 편인데, 그 방식대로 테스트에도 적용해 얻은 결과입니다.

그런데 또 이게 한글이라면 다른 결과가 나왔을것 같아요. 영문보다는 좀 더 신경써줘야 할 부분들이 더 많다는 느낌인데…(나만그런가)

아무튼 테스트는 아래 링크에서 해볼 수 있습니다. 한 번 해보세요 재미있어요 🙂

 

간단히 이야기하면 어도비 스톡 컨텐츠 작가 신청을 했습니다. 대단한건 아니지만, 반신반의 하며 제출한 이미지가 승인 심사를 통과하고 나니 신기하네요. 잘하면 제가 만든 이미지가 판매될 수도 있다고 생각하니 좀 신기한 구석도 있습니다.

국내에도 스톡이미지 업체들이 많이 있습니다만, 지인 중에 작업을 진행해 본 사람의 이야기를 들어보니 계약조건이 참 부당하더군요. 국내업체들이 내미는 조건을 보면 작가는 그냥 착취의 대상으로 여기는 경우를 많이 만나게 됩니다. 지급되는 보수는 노동대비 시간을 따져보면 최저시급만도 못한데다 저작권까지 통채로 넘기는 식이라 영 내키지 않죠.

해외 스톡이미지 업체들이 한글서비스를 갖추고 국내진출을 하게 되면서 이 시장도 조금은 달라지리라는 기대를 품어봅니다. 일단 마켓 자체가 국내에서 해외로 넓어졌다는 것만 해도 고무적이라고 봅니다. (물론 경쟁 상대도 어마어마하게 많아졌다는 이야기지만…)

국내업체처럼 작업 건당 페이를 지급하는 방식이 아니라 판매가에서 수익이 배분되는 형식이라, 판매가 되지 않으면 수익도 없습니다. (슬프네요) 아무튼 천리길도 한걸음부터니까 이제 컨텐츠를 부지런히 생산해서 쌓는 일만 남았네요.

 

우분투 16.04 LTS 버전에서 서브라임텍스트3를 설치하고 가장 황당했던 상황 중 하나가 한글이 입력되지 않는다는겁니다. 뭐 input helper를 이용한다는 분도 있고, 여러가지 방법들이 많이 나와있습니다만, 저는 아래 링크를 보고 시도해봤습니다.

그런데 이 분이 알려준 방법도 뭔가 좀 부족한 부분이 있어요. 사실 이 내용은 전에도 다른 블로그에서도 발견했던지라 이미 시도했다가 실패했던 내용이라 반신 반의하면서 다시 시도했습니다. 위의 포스팅과 다르게 제가 추가적으로 실행한 부분들을 정리해보겠습니다.

일단 git을 설치하고, imfix를 다운로드 받은 이후에 그 안에 폴더를 보면 README.md 파일이 있습니다. 이걸 한 번 읽어봤어요. 그랬더니 아래와 같은 내용이 있습니다.

sublime-text-imfix를 다운로드 받은 폴더로 이동해서 터미널에서 ./sublime-imfix를 실행하라는 부분이 있었습니다. 실행을 하면, 자동적으로 뭔가 열심히 옮겨붙이고 생성하는 과정이 나옵니다.

대충 보면 뭐 디렉토리 추가하고 필요한 파일들을 생성하고 붙여넣고  이런 과정들이 있더군요. 결국 이걸 먼저 실행했더라면 위에 있었던 포스팅에서 소개됐던 ‘GCC를 이용한 컴파일 과정같은것도 필요없었을까?’싶은 의문도 듭니다. 확인하려고 다시 다 지우고 해볼 수도 없고 참…ㅎㅎㅎ

아무튼 쉘스크립트 작성도 sublime-imfix/src 폴더에 미리 되어있길래 subl 스크립트 파일을 bin 폴더로 옮겨준 후 로그아웃 /로그인 후 실행을 해봤더니 한글입력이 됩니다 ;ㅁ;