아무도 비글을 멈출 수 없어

“Nobody can’t stop beagle” sticker – REDBUBBLE.COM

항상 그렇지만 비글이라는 개는 지랄견, 악마견, 말썽쟁이라는 편견을 안고 있습니다만, 사실입니다. 지랄맞아요. 근데 대부분 개들이 다 지랄맞습니다. 비글만 그런건 아니죠. 제가 봤을땐 비글보다 푸들이 더 말썽쟁이로 보이더군요 ㅎㅎㅎ  어찌됐건 비글의 말썽이 어쩔때는 카타르시스처럼 다가올 때가 있습니다. 제가 키우는 개가 아니라서 그런가봐요

“금지”를 금지하는 대담함이랄까, 자기 주장이 강한 덕분에 정말 말썽을 당당히(!) 부리는 녀석들이라 오히려 매력적으로 다가오더군요. 깨방정을 비글미로 보는 사람들이 많습니다만, 제가 갖지 못한 걸 갖고 있는 선망의 대상이란 느낌이랄까. 정말 어쩔 땐 개같이 비글처럼 굴고 싶을때가 있는데, 그럴수가 없다보니 비글을 보면서 대리만족을 느끼곤 합니다.

누구의 눈치도 보지 않고, 부당하다고 생각되면 짖고 대들고, 친근한 사람들한테는 한껏 좋다는 표현도 하고 자기 모습에 솔직한 비글이 여러모로 참 매력적입니다. 그래서 늘 비글을 그리는건 즐거워요.

그런 비글의 성격을 생각하다보니 좁은 스티커 안에서도 자기 주장을 강하게 표현하는 모습을 표현하고 싶었습니다. 그래서 스티커를 물어서 찢어버리는 비글의 모습을 스티커로 만들었어요 🙂

 

링크에서 구매할 수 있습니다. 현재 4개 구매시 25%, 10개 구매시 50% 할인 행사중입니다. (2017년 8월 15일 기준)

“Nobody can’t stop beagle” sticker – REDBUBBLE.COM

블로그 리뉴얼

블로그 디자인을 리뉴얼했습니다. 포트폴리오 사이트는 “만든다 만든다”하면서 차일피일 미뤄두고 있습니다. 뭐든지 마음을 먹고 실행에 옮기는데에는 망설임이 많기 마련인데, 가장 큰 문제는 항상 시간에 쫓긴다는것이겠죠. 나름의 우선순위를 정하고 일을 하다보니 미뤄지는 것들이 종종 발생합니다.

여튼 블로그는 가장 많이, 자주 쓰는 공간인데 기본적으로 주어지는 테마를 갖고 쓰다보니 항상 아쉬움이 있었습니다. 이번 기회에 손을 대고 만들기 시작했는데, 대략 6일정도 걸렸네요. 아직 전부 완성된 상태는 아니고, 편의를 제공하는 부분에서 미흡한 부분들이 있습니다. 차근차근 또 작업해서 추가해나가야겠네요.

역시나 이렇게 하나하나 만들다보면 공부하게 되는 것들도 많은 것 같습니다. 이번에는 워드프레스 함수에 대해서도 좀 삽질하면서 공부해보고, 매번 SASS를 사용하기 위해 환경설정을 새로 하는 부담을 덜기 위해서 편리한 프로그램도 찾아서 사용해봤습니다.


스카우트 앱이라고 하는 어플리케이션입니다. 사용방법도 간단하고, sass를 편리하게 쓸 수 있도록 도와주는 susy나 compass와 같은 프레임워크 연동도 손쉽게 해낼 수 있어서 복잡한 환경설정을 하지않아도 바로 사용할 수 있어서 편리합니다. 소스가 수정될때마다 감지해서 자동으로 브라우저를 새로고침해주는 livereload라는 어플리케이션도 있는데, 이건 현재 제대로 동작하지 않는것인지 제가 설정을 잘못한건지 정상작동이 되지 않길래 패스했습니다.

gulp에서 browser sync를 활용하면 되긴합니다만, 브라우저 싱크도 쓰다보면 뭔가 좀 꼬이거나 속도면에서 성에 차지 않는 구석들이 있더군요… 컴이 후져서 그런가


워드프레스 제작사인 Automattic에서 제공하는 스타트테마입니다. 스타트테마는 별도의 자식테마를 만들지 않고, 바로 수정해서 사용하도록 되어있다고 합니다. 지난번에는 underscores 테마에 bootstrap을 입힌 understrap 테마를 사용해봤는데, 확실히 만드는 시간은 단축되는데 부트스트랩을 따로 또 공부해야하는 부담이 있습니다.

반응형 사이트를 만드는데 있어서 편리함을 갖고자 부트스트랩을 사용했었는데, sass 프레임워크 중 레이아웃을 손쉽게 잡아주는 susy를 알고나니 차라리 html에 직접 클래스를 삽입해서 레이아웃을 조절하는 부트스트랩보다는 css 내에서 컨트롤할 수 있는 susy쪽이 낫다는 생각이 들었습니다. breakpoint와 함께쓰면 반응형으로 만들기 편리하다고는 합니다만, 또 공부해야할 것들이 늘어나니, 그냥 한번 써봤던 compass와 susy를 곁들여서 만들었습니다.


이렇게 만들고 나니 여기저기 부족하고 눈에 걸리는 부분들도 많이 생기지만, 만족할때까지 붙잡고 늘어지면 평생 끝나지 않을것 같아서 일단 여기서 1차적으로 마무리 했습니다. 사용하는데 편리하도록 몇가지 기능들도 추가할 예정이긴한데, 확실히 이미지 로딩이 많아지면서 속도가 쳐지는 부분들도 있네요. 최적화에 대한 고민도 같이 해봐야할 것 같다는 생각이 듭니다.

여러모로 공부할게 많네요 ‘ㅁ’

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

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

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

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

 

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

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

실외형 배너 – 디자인을 바꾸면 어떤 일이 생길까?

실외형 배너 설치물은 창업 초기에 비교적 저렴한 금액에 홍보할 수 있는 수단입니다. 실제로 길거리에서도 많이 볼 수 있는데요. 마침 이번에 제 절친한 친구가 조그마한 테이크아웃 전문 스몰카페를 창업하게 되서 디자인 해줄 일이 생겼습니다. 원래 있던 카페를 인수해서 운영하게 되었기때문에 기존에 있던 홍보물을 그대로 사용하고 있었습니다.

실외용 배너

이런 디자인으로 아주 오랜 시간동안 서 있었던 배너였습니다만, 제 눈에는 문제가 있어 보였어요.

위의 배너는 정말 많은 이야기를 하고 싶어한다는게 느껴졌습니다. 커피 분위기도 내고 싶고, 가격에 대한 안내도 하고 싶은데, 뭔가 톡톡 튀는 느낌을 주고 싶어서 빨간색으로 범벅을 했죠. 제품도 붉고, 배경도 붉고 죄다 붉은게 문제였습니다. 심지어 그 와중에 붉은 글씨도 눈에 띄네요.

아무튼 중요한건 한가지도 제대로 전달되고 있지 않다는 것이 문제였습니다. 보통은 사장님들이 요구하시는대로 디자인을 하면 이런 식이 됩니다. 하지만 친구 좋다는게 뭐겠습니까. 잘못된 방향을 바로잡기 위해 부담없이 적극적으로 어필 할 수 있다는 것이 가장 큰 장점이었습니다.

무조건 심플하게 가자

실외용 배너를 무조건 심플하게 만들자고 적극 주장한 이유가 있습니다.

  • 주변에 휘황찬란하고 화려한 귀금속상가가 좌우로 자리잡고 있다
    – 이 상황에서 똑같이 화려하게 가면 오히려 승산이 없습니다. 화려하기로 치면 조명까지 번쩍거리는 귀금속 상가가 더 눈에 띄죠. 시야에 전혀 들어올 리가 없습니다.
  • 이미 주변에 복잡한 이미지가 많이 자리 잡고 있다.
    – 친구가 창업초기다보니 인테리어에 대한 투자를 전혀 못하고 있었습니다. 이미 전에 영업하시던 분이 있는 힘껏 화려한 이미지로 도배해놓은 상태라 더더욱 튀는 이미지는 지양해야하는 상황입니다.

그런 취지를 친구에게 잘 설명했고, 이것이 적극 반영되서 나온 디자인이 아래와 같은 상황입니다.

실외용 배너

새로 적용한 배너 디자인

일단 몇 가지 더 고려한 것이 있습니다. 며칠 그 친구의 가게를 오가다보니 의외로 외국인들이 많이 다니고 있더군요. 그래서 공공기물에서도 적용되는 언어인 영어, 일본어, 중국어를 별도로 기입했습니다. 그리고 복잡한 이미지 없이 멀리서도 눈에 띄도록 밝고 선명한 붉은 톤에 흰색 텍스트로 주요 판매 인기 판매 품목을 정리해 주었습니다. 친구는 거의 8가지 이상의 메뉴를 담고 싶어했지만, 저는 최소화 하기를 권장했고, 타협해서 정해진 것이 위의 5가지 메뉴였습니다.

눈에 띄는 변화 – 매출 상승

며칠 뒤 친구로부터 고맙다는 전화가 왔습니다. 테이크아웃 카페 특성상 겨울철에는 바깥에 서서 기다렸다가 커피를 사가지고 가는 사람이 흔치 않습니다. 주변 상가에서 팔아주는 단골에게 의지하더라도 워낙에 판매가가 저렴한 상황이라 하루 매출이 형편 없었습니다만, 배너 새로 바꿔 달고 나서 평소보다 2배 더 많이 팔리고 있다는 이야기였습니다.

관광버스가 매일 코앞에 서서 우루루 내리던 중국인들도 외면하다가, 비로소 커피를 사마시러 온다더군요. 오히려 말귀도 못알아듣는 외국인이 와서 주문한다고 곤란해하는 행복한 고민을 토로합니다.

배너는 언제부터인지 몰라도 최소 몇 달 전부터 그 자리에 자리잡고 있었을 것입니다. 없던 것이 아닌데도 불구하고 없는 것처럼 눈에 걸리지 않았던 이유가 무엇일까요.  저는 이런 경우에 영화나 드라마를 예로 듭니다. 이야기를 이끌어가는 주인공과 그 뒷받침이 되는 조연이 있듯이 디자인에도 주조연의 밸런스가 중요합니다.

비슷한 장르의 이야기라도 캐릭터가 확실하고 메세지 전달이 명확해야 사람들이 더 흥미롭게 느낄 수 있습니다. 조연이나 엑스트라 마저 뛰쳐 나와서 이야기를 끌어가려고 하다보면 누구 이야기에 집중해야할지 몰라서 우왕좌왕 되다가 표류하게 되죠.

저렇게 조금만 드러내도 괜찮은건가?

대다수의 중소영세기업 사장님들은 취급하는 품목들이 전부 다 중요하다고합니다. 네 그 말씀도 맞습니다. 다 잘 팔려야 좋은 건 명백한 사실이죠. 하지만 홍보물의 1차적인 목적은 판매가 아니라 손님이 들어오게끔 하는 것입니다. 저 친구도 메뉴는 20여가지 정도됩니다만, 배너에 노출 된 건 고작 5가지입니다. 사실 저는 더 줄이고 싶었어요

일단 저렴한 상품으로 손님의 발길을 이끌고 난 뒤에, 좀 더 많은 메뉴가 있다는걸 보여주며 선택의 폭을 제공하면 되는 겁니다. 쇼핑몰이나 대형 마트에서도 흔히들 쓰는 방법이죠.

이렇게 배너를 바꾸고 난뒤 부쩍 바빠졌다며 친구녀석이 참치집에 데려가서 거하게 밥을 사주더군요. 참치 별로 안좋아하는데… 뭐니뭐니해도 친구녀석이 기뻐하는걸 보니 참 기분도 좋지만, 제가 권한 방법이 실질적으로 효력이 나타나는걸 보니 더 기분이 좋았습니다. 전략이 먹혀 들어갔으니까요. 물론 시장에 대한 이해가 선행된 탓에 효과가 나타난 셈입니다.

그래서 지금은 어떻게 됐나

친구는 며칠간 배너 덕을 본다면서 평소보다 밀려드는 손님에 힘들어 죽겠다며 행복한 고민을 토로했습니다만, 너무 눈에 띄었던 탓일까요. 구청에서 단속반이 나와서 철거해갔습니다. 그 분들이 괜히 돌아다닐 일은 없고 아무래도 주변에서 민원을 넣은 모양입니다.  몇 달 동안 서있어도 존재감 없던 그 배너가 어느 날 존재감을 얻은 순간, 단속의 대상이 되어버려 찬물 끼얹는 상황이 되어버렸습니다.

참 웃어야할지 울어야할지 모르겠네요.ㅎㅎ 어찌됐건 그 친구는 이제 날이 풀리니 점차 매출은 다시 상승하겠지만, 그래도 더욱 매출을 증진하면서도 단속 대상이 되지 않는 홍보물을 만들기 위해 아이디어를 짜내고 있습니다. 기왕 있는 돈 다 털어서 창업한 친구가 불황에 대응하는 저렴한 가격대의 아이템을 무기로 삼고 있는데, 어떻게든 잘 됐으면 좋겠네요.