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

커닝 – 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 폴더로 옮겨준 후 로그아웃 /로그인 후 실행을 해봤더니 한글입력이 됩니다 ;ㅁ;

자바스크립트 호출 순서

워드프레스에서 자바스크립트를 사용하다보면, 보통 웹사이트들과 달리 wp_enqueue_script 라는 워드프레스 자체 함수를 이용하게 됩니다. 일반적으로 웹사이트를 만들때 방식처럼 script 태그를 여기저기 삽입하는 방식으로 만드는 것보다 이런 방식을 권장하고 있기 때문이죠.

그런데 문제는 스크립트마다 head에서 호출해야하는 경우가 있고, body 태그 이후에 호출해야하는 경우도 있습니다. 컨텐츠가 다 불러오기 전에 미리 삽입하느냐, 컨텐츠가 다 불려온 후에 삽입해야하느냐 하는 순서를 정해줘야할 때가 있죠.

순서 때문에 문제가 가끔 발생합니다

예를 들면 저의 경우 워드프레스에 bxslider를 직접 넣어서 쓰고 있는데, 호출 시점에 문제가 생겼습니다. 처음에는 멀쩡히 작동하다가 테스트하면서 다른 플러그인을 한번 설치했다가 지우면서 뭔가 순서가 꼬였는지 오작동을 일으키기 시작했습니다.

개발자 툴을 통해 확인해보니 스크립트가 호출되는 시점이 변경되어있더군요. 컨텐츠가 다 불려온 이후에 호출되야하는데, 그 이전에 스크립트가 삽입되어버리더군요. 그러니 스크립트는 제어해야할 컨텐츠를 찾지 못하고, 손을 놔버리는 상황이었습니다.

wp_enqueue_script

보통 자바스크립트는 function.php 안에 wp_enqueue_script 함수로 삽입합니다.

이런 구조를 갖고 있는 녀석인데, 위의 내용은 함수 안에 쓰이는 매개변수들입니다. 총 5개의 매개변수들인데, 저의 경우엔 아래와 같이 사용했습니다.

여기서 문제 해결을 위해 주목해야할 부분이 가장 마지막에 쓰인 $in_footer 변수에 들어간 내용입니다. false 값으로 넣어주면 head부분(컨텐츠 이전)에서 자바스크립트가 삽입되고, true로 넣어주면 body 태그 이후(컨텐츠 이후)로 자바스크립트가 삽입됩니다.

이렇게 매개변수 옵션 하나만 바꿔줘도 쉽게 해결 될 수 있는 문제인데 한참 끙끙댔네요.

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

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