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가지입니다. 사실 저는 더 줄이고 싶었어요

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

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

그래서 지금은 어떻게 됐나

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

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

 

네이버 블로그

네이버 블로그 스킨 제작에 대해서

네이버 블로그 스킨에서 제공하는 기능을 활용하면 배너를 삽입하는것은 물론이고 약간의 트릭을 이용해서 홈페이지처럼 보이게 만드는 것도 가능합니다. 기본적으로 HTML과 CSS에 대한 선행지식이 필요한 관계로 전혀 경험이 없다면, 따라하시는데 다소 생소한 표현때문에 어려움을 느낄 수도 있습니다. 그렇지만 최대한 설명을 덧붙여서 어려움을 덜어드리도록 노력해보겠습니다.

위젯 기능 활용

네이버 블로그 스킨은 위젯이라는 기능을 수 년 전부터 지원하고 있습니다. 하지만 여전히 베타상태로 놔두고 있는 이유는 보안이나 관리상의 이유가 크지 않나 싶은데요. 너무 많은 자유도를 허용하다 자바스크립트 범벅으로 난장판이 됐던 다음 카페의 선례가 있기 때문인가 싶습니다. 지금은 보안상의 이유로 대부분의 커뮤니티에서 스크립트 입력을 허용하지 않고 있습니다.

CSS 활용

네이버 블로그 스킨에서는 CSS도 무조건 인라인 형태로 서술되야합니다. 때문에 반복적으로 같은 내용을 필요로 할때 반복작업으로 인한 피로감이 좀 있습니다. 그리고 일부 태그들은 또 여전히 적용되지 않고 있는 문제도 있고, 네이버에서 임의로 다른 태그로 대체해서 적용하는 경우도 있기때문에, 약간의 시행착오를 감수해야합니다.

홈페이지 처럼 보이게 만드는 트릭

일단 네이버 블로그 스킨을 홈페이지 형태로 만드는 방식에 대해서 간단한 개요를 이야기하자면, 네이버 블로그 상단 부분에 배경이미지를 깔고, 그 위에 투명한 위젯을 올려서 원하는 형태로 버튼이나 배너 같은 요소들을 삽입합니다. 엄연히 이야기하자면, 위젯을 이용해서 레이아웃을 구성한다고 볼 수 있습니다.

테이블 태그 사용 지양

덧붙여서 아직도 테이블 태그를 활용하는 방법을 고수하는 네이버 블로그 스킨 강좌들이 있는데, 테이블 태그를 사용하는 것 자체는 크게 상관 없으나 만드는 사람 입장에서 불필요한 코드를 많이 사용해야합니다. 그리고 버튼이 한 두 개라면 모르겠지만, 많은 양의 버튼을 테이블 태그로 생성하게 되면 그만큼 많은 로딩 시간이 소요됩니다.

테이블 태그로 박스를 만들 경우와 div 태그로 각각 폭 170픽셀, 높이 600픽셀의 박스를 만들 경우를 각각 아래 예시에서 보여드리도록 하겠습니다.

같은 결과물을 보여주지만, 내부에서 돌아가는 모양새는 다릅니다. 한 눈에 보아도 태그의 양이 확연히 차이가 납니다. 테이블 태그는 브라우저가 해석할때 구조적으로 먼저 table을 찾고, tr로 행을 찾고, td로 열을 찾고 그 안에 내용을 불러오는 식이라 3번에 걸친 과정이 필요합니다. 그와 반대로 div 태그는 그냥 한 번에 내용을 불러올 수 있습니다. 버튼 하나 쯤이라면 큰 차이가 안느껴지겠지만, 버튼을 많이 만들수록 이 문제는 더 크게 다가올 수 있습니다.

때문에 위지윅 wyswyg 방식의 나모웹에디터,드림위버를 사용해서 웹사이트를 만들어봤던 분들은 다소 생소할 수 있습니다만, 따라 해보시다보면 어느 정도 이해가 갈 겁니다.

본 튜토리얼은 아래와 같은 과정을 걸쳐서 진행됩니다.

  1. 구상단계
  2. 디자인(포토샵)
  3. 디자인을 스킨에 적용하기(네이버 블로그 관리자 기능, HTML/CSS)
  4. 버튼을 클릭할 때마다 새창으로 뜨는 문제 해결하기
  5. 프롤로그 기능 활용
  6. 포스팅 영역을 활용해서 조금 더 홈페이지처럼 보이게 만들어보자
  7. 에필로그

덧붙여서 말씀드리자면, 본 튜토리얼을 통해 네이버 블로그에 대한 기능적 이해를 돕는데만 활용하시고, 가능하면 홈페이지형 블로그는 만들지 않으셨으면 좋겠습니다. 그 이유는 에필로그에서 설명드리겠습니다.

일러스트레이터 트레이닝 북

초보자에게 적극 추천하고 싶은 일러스트레이터 트레이닝 북

일러스트레이터 트레이닝 북이라는 책은 일러스트레이터를 접하는 초보자에게 가장 적합한 내용을 다루고 있는 책이 아닌가 싶습니다. 보통 일러스트레이터를 비롯한 포토샵 등 많은 책들이 더 이상 초보자를 대상으로 한 책보다는, 실무위주의 내용을 다루다보니 초보자에게는 진입장벽이 느껴질 수 있는데요.  일러스트레이터 트레이닝북을 초보자에게 추천하는 이유가 몇가지 있습니다.

일러스트레이터 트레이닝 북 일단 텍스트의 양이 적다는 점을 높이 평가하고 싶습니다. 보통 이런 기술서적같은 경우에는 텍스트가 지나치게 길어지면 읽다가 지치는 경우가 많습니다 . 텍스트 양을 줄이려면 필연적으로 이미지 자료가 많아지게 되는데요. 그런 면에서 저자의 수고가 무척 많아집니다. 때문에 이미지보다 텍스트로 해결하는 경우가 많은데요. 그래픽 프로그램을 글로 배우는데는 한계가 있죠.

일러스트레이터 트레이닝 북그럼에도 불구하고 내용도 무척 충실한 편입니다. 하지만 단 한가지 아쉬운 점이 있다면, 책의 제본이 좀 약한 편입니다. 쉽게 잘 뜯어지는 약한 제본 상태가 좀 불만족 스럽긴 하네요.

일러스트레이터 트레이닝 북제가 처음 일러스트레이터를 누군가에게 가르칠때  교재로 꼽은 책이 이 책이었습니다. 과정마다 따라하기를 추가해 먼저 익힌 내용을 확인해볼 수 있도록 제공하고 있어 단순히 지식을 나열하는 방식에 그치지 않고 있습니다.

내용도 충실하고 무척 잘 정리된지라 이 책 한 권만 제대로 떼도 일러스트레이터에 대한 전반적인 이해를 갖추는데 큰 무리가 없다고 판단되었기 때문입니다. 어떤 소프트웨어건 한권의 책에서 모든걸 얻으려는건 무리한 욕심입니다.

기본적인 개념만 취하고 실무에서 적용하면서 익히거나, 혹은 필요한 부분은 유튜브나 인터넷에 공개된 튜토리얼을 보고 따라하면서 추가적인 테크닉을 익히는 것이 가장 좋다고 생각합니다.

일러스트레이터 트레이닝 북다만 약간 아쉬운 점은 바로 이런 점입니다. 일러스트레이터에서 3D를 만드는 방법인데요. 사실 일러스트레이터에서도 3D 기능이 유용하게 쓰이는 경우도 없잖아 있습니다만, 이런 객체를 만들어내는데에는 시스템 리소스도 불필요하게 많이 잡아먹고, 결과물도 실제 3D 프로그램으로 만든 것 만큼 만족스럽지도 못합니다. 필요에 의해서라기보단 내용을 채워넣기 위해서 삽입된 컨텐츠라는 느낌인데요.

그럼에도 불구하고 3D 기능이 다뤄진 이유는, 아무래도 3D 기능을 통해서 그려내는 테크닉도 실제 쓰이고 있기 때문이긴 합니다. 이 부분이 무조건 이 책을 초보자에게 추천할만한 책이라고 권하기 어려운 부분입니다. 3D에 대한 경험이 없는 초보자에게는 약간 어려울 수 있습니다. 완전 초급은 아니더라도 일러스트레이터에 대한 전반적인 기능과 기초적인 개념을 확립하고자 하시는 분에게 이 책은 무척 훌륭한 교과서가 되어줄 겁니다.

일러스트레이터 트레이닝 북 전공자나 일러스트레이터가 아니더라도 실무에서도 충분히 써먹을만한 유용한 내용들도 다루고 있어서 전반적으로 무척 만족스러운 내용들을 담고 있습니다.

일러스트레이터 트레이닝 북


전반적으로 ‘일러스트레이터 트레이닝 북’에 대해서 평가를 종합하자면

장점 : 

  • 텍스트가 적어서 부담이 없다
  • 페이지가 적어서 초보자가 부담없이 접근하고 끝까지 따라해볼만한 책이다
  • 글보다 사진이 많아서 읽는 사람이 과정을 파악하기 좋다
  • 실무에서 써먹을 수 있는 내용도 빠지지 않고 충실하게 다루고 있다

단점:

  • 책 제본 상태가 약하다

구매에 대한 정보는 이 링크를 참조하시기 바라겠습니다.