디자인, 특별한 스킬 없이 도전하기! 1. INTRO 들뜬 분위기가 이어지는 12월은 다양한 이벤트와 기획전이 펼쳐지는 구매시즌입니다. 크리스마스의 특수성을 활용한 선물과 세일을 알리는 이메일이 쏟아지고, 모바일과 소셜에 공개되어 보는 이들의 눈길을 사로 잡습니다. 반면에, 기획자가 그래픽 디자인을 겸한 멀티플레이어가 되어야 하는 소규모 사이트에서는 상품 이미지의 디자인 퀄리티가 떨어져 시즌을 잘 활용하지 못하는 경우도 있습니다. 웹 페이지를 디자인할 때 곤란한 점은 무엇인가요? 조금만 더 정교해지면 시각적인 효과를 볼 수 있을 텐데 하는 아쉬운 마음이 들어 이번 칼럼에서는 디자인 방법에 대한 실제적인 팁을 알려드리는 내용을 소개해 볼까 합니다. 2. 실용적인 디자인 방법론 수많은 상품이나 광고 소재를 제작하기 위해 정보의 시각화는 중요합니다. 흥미로운 건, 몇 가지 디자인 기본원리를 이해한다면 비록 고급 그래픽 툴을 이용한 화려한 디자인은 어렵지만 훨씬 다듬어진 콘텐트 표현이 가능하다는 것입니다. 보기 좋은 떡이 먹기도 좋다. 요즘 오프라인에서는 상품을 매력적으로 보여주는 ‘비주얼 머천다이징’이 주목 받고 있습니다. 비주얼 머천다이징(Visual Merchandising)은 고객 입장에서 흥미를 일으키도록, 쇼윈도와 상품을 매력 있게 연출하여 판매로 이어지도록 하는 마케팅 전략을 말합니다. 3. 쇼핑몰 디자인 접근 방법 1) Color : 일관성을 가지는 디자인 보유 상품이 다양한 온라인 쇼핑몰에서는, 상품 자체에 컬러가 있어 컬러 선택을 잘못 하게 되면 그림3과 같이 직관적인 상품 파악이 어렵고 시선이 분산되 주목도가 떨어지게 됩니다. 사진이 들어간 이미지에서 어떤 컬러를 사용해야 할지 어려울 때 색 선택을 하는데 있어 유용한 방법이 있습니다. 불필요한 컬러는 과감하게 줄이고 간소화된 컬러 활용으로 배너의 가독성을 높이는 것입니다.   - 사이트 활용 포인트 : 이미지 컬러와 텍스트 컬러를 맞추면 색상 선택 어렵지 않아요.  그림 4-1은 상품 설명 문구의 컬러를 상품 컬러인 퍼플과 핑크를 사용하여 중요사항을 직관적으로 인식하게끔 합니다. 만약 상품 컬러가 오래 볼수록 눈에 피로감을 주는 컬러라면, 상품 고유 컬러만 사용하지 않고 명도와 채도를 조절해 보시기 바랍니다. - How to use?! 예시로 프리웨어 이미지편집 프로그램(PhotoScape)에서 체육대회 행사 포스터를 만들어보겠습니다. 표지 첫 화면을 꾸밀 때 사용된 이미지에서 컬러를 가져와, 배경박스와 폰트에 약간의 밝기를 조절��

1. Web Site
Consulting
‘전문가 칼럼’
N
SEARCH
MARKETING

2. NSM
사이트 컨설팅 전략에 대한
서른 여섯 번째 이야기!
디자인, 특별한 스킬 없이
도전하기!

3. CONTENTS
01.
02.
03.
4p
INTRO
5p
실용적인 디자인 방법론
보기 좋은 떡이 먹기도 좋다.
6~14p
쇼핑몰 디자인 접근 방법
1) Color : 일관성을 가지는 디자인
2) Simple : 단순함을 유지하는 디자인
3) Clear : 명확한 정보전달을 도와주는 디자인
04.
15p
The End
1) 디자인과 연애하기.

4. INTRO
들뜬 분위기가 이어지는 12월은 다양한 이벤트와 기획전이 펼쳐지는 구매시즌입니다. 크리스마스의 특수성을 활용한 선물과 세일을 알리는 이메일이 쏟아지고, 모바일과 소셜에 공개되어 보는 이들의 눈길을 사로 잡습니다. 반면에, 기획자가 그래픽 디자인을 겸한 멀티플레이어가 되어야 하는 소규모 사이트에서는 상품 이미지의 디자인 퀄리티가 떨어져 시즌을 잘 활용하지 못하는 경우도 있습니다. 웹 페이지를 디자인할 때 곤란한 점은 무엇인가요? 조금만 더 정교해지면 시각적인 효과를 볼 수 있을 텐데 하는 아쉬운 마음이 들어 이번 칼럼에서는 디자인 방법에 대한 실제적인 팁을 알려드리는 내용을 소개해 볼까 합니다.
[그림1] 여러분의 디자인은 안녕하신가요? 디자인 퀄리티를 좌우하는 디테일의 중요성
(아이언 맨 코스프레 사진)

5. 실용적인 디자인 방법론
[그림2] 롯데백화점 Show Window
수많은 상품이나 광고 소재를 제작하기 위해 정보의 시각화는 중요합니다. 흥미로운 건, 몇 가지 디자인 기본원리를 이해한다면 비록 고급 그래픽 툴을 이용한 화려한 디자인은 어렵지만 훨씬 다듬어진 콘텐트 표현이 가능하다는 것입니다.
보기 좋은 떡이 먹기도 좋다.
요즘 오프라인에서는 상품을 매력적으로 보여주는 ‘비주얼 머천다이징’이 주목 받고 있습니다. 비주얼 머천다이징(Visual Merchandising)은 고객 입장에서 흥미를 일으키도록, 쇼윈도와 상품을 매력 있게 연출하여 판매로 이어지도록 하는 마케팅 전략을 말합니다.
“요즘같이 상품과 쇼핑채널이 다양한 유통환경에서는요, 점포의 이미지가 매출의 큰 부분을 좌우한다는 것을 알고 계셔야 합니다. 소비자들은 상품을 구매한다기 보다는 그 상품을 판매하는 브랜드의 이미지를 구입하는 성향이 강하기 때문에 쇼핑에 만족감을 줄 수 있고, 상품을 매력적으로 보여주는 매장환경에서 쇼핑을 선호하는 것을 볼 수 있습니다. “
강희수 / 한국비주얼머천다이징협회 이사

6. Color : 일관성을 가지는 디자인
보유 상품이 다양한 온라인 쇼핑몰에서는, 상품 자체에 컬러가 있어 컬러 선택을 잘못 하게 되면 그림3과 같이 직관적인 상품 파악이 어렵고 시선이 분산되 주목도가 떨어지게 됩니다.
쇼핑몰 디자인 접근 방법
[그림3] 과도한 컬러 사용으로 주목도 저하
(사진출처 : Gulliver Online Shopping in Rakuten)
갤러리아 백화점은 최근 트렌디한 비주얼 머천다이징으로 차별화를 선포했고, 세련된 매장 디스플레이를 완성하였습니다. 상품을 취급하는 매장에서는 이처럼 디스플레이를 잘해서 소비자의 눈을 사로 잡는 마케팅 전략을 활발하게 펼치고 있습니다.
예쁜 옷을 파는 곳이 아닌 “예뻐 보이는 옷”을 판매하는 상점에서 머무르는 사람들.
이 이야기를 Online Show-Window에도 적용해 보면 어떨까요?
사례를 통해, 많이 하는 디자인 실수를 알아보고 이를 보완할 수 있는 디자인 방법을 알려드리겠습니다.
쇼핑몰 디자인 접근 방법. 하나

7. 쇼핑몰 디자인 접근 방법
[그림4-1] 상품 컬러와 텍스트 컬러를 통일한 이벤트 배너
(사진출처 : vitabita)
사진이 들어간 이미지에서 어떤 컬러를 사용해야 할지 어려울 때 색 선택을 하는데 있어 유용한 방법이 있습니다. 불필요한 컬러는 과감하게 줄이고 간소화된 컬러 활용으로 배너의 가독성을 높이는 것입니다.
- 사이트 활용 포인트 : 이미지 컬러와 텍스트 컬러를 맞추면 색상 선택 어렵지 않아요.
그림 4-1은 상품 설명 문구의 컬러를 상품 컬러인 퍼플과 핑크를 사용하여 중요사항을 직관적으로 인식하게끔 합니다. 만약 상품 컬러가 오래 볼수록 눈에 피로감을 주는 컬러라면, 상품 고유 컬러만 사용하지 않고 명도와 채도를 조절해 보시기 바랍니다.
유사 컬러의 사용
[그림4-2] 모델 및 상품 컬러와 텍스트 컬러를 통일한 이벤트 배너
(사진출처 : ralphlauren)

8. 쇼핑몰 디자인 접근 방법
[그림5-1] 작업 예시 : 비주얼 이미지에서 색상 선택
- How to use?!
예시로 프리웨어 이미지편집 프로그램(PhotoScape)에서 체육대회 행사 포스터를 만들어보겠습니다. 표지 첫 화면을 꾸밀 때 사용된 이미지에서 컬러를 가져와, 배경박스와 폰트에 약간의 밝기를 조절해 적용해 보았습니다.
먼저 색상검출 기능을 이용해 예쁜 파란색 컬러를 찍어봅니다. 몇 번 찍어보고 마음에 드는 컬러를 적용 하면 됩니다.

9. 4
쇼핑몰 디자인 접근 방법
[그림5-2] 작업 예시 : 선택된 색상 밝기 조절
색상 선택이 끝나니 손쉽게 표지(or페이지)를 만들 수 있게 되었습니다. 사이트 내에 배너나 기획전이 많은 쇼핑몰의 경우 새로운 컬러를 찾기보다 상품에 사용된 컬러를 사용하면 더욱 정돈된 사이트 느낌을 전달할 수 있습니다.

10. 쇼핑몰 디자인 접근 방법
[그림6] 작업 예시 : 스카이블루로 톤앤매너를 유지한 포스터
알록달록 어지러운 색상 대신 절제된 컬러로 상품을 소개해 주실 거죠?
이번에는 상품 정보 표현에 대해 생각해 보는 시간을 가져 보았으면 합니다.
타이틀 박스와 텍스트 컬러에 적용
5
5
6
6

11. 쇼핑몰 디자인 접근 방법
쇼핑몰 디자인 접근 방법. 둘
최근 인기 드라마 ‘미생’에서의 한 장면에서 ‘전달력’이 가진 상징성을 엿볼 수 있습니다. 포부에 찬 엘리트 신입사원이 회사에서 하는 하루 일과 중 하나는 ‘문장 줄이기’ 였습니다. 핵심만 간결하게, 한눈에 모든 내용을 이해할 수 있도록 보고서를 쓰기 위해 받는 훈련 이었습니다.
Simple : 단순함을 유지하는 디자인
[그림7] 문장을 깔끔하게 정리하기 위해 고민중인 드라마 속 인물
(사진출처 : tvn 드라마 ‘미생’)
보고서 뿐 아니라, 쇼핑몰 상품설명에서도 내용이 장황하여 쉽게 이해가 되지 않는 경우를 종종 볼 수 있습니다. 모든 것을 담고자 하는 마음은 이해가 되지만 고객이 진정 원하는 콘텐트는 아닐 것입니다. 보는 이는 모든 내용을 다 읽지 않기 때문입니다.

12. - 코끼리를 냉장고에 넣는 법 : 텍스트보다 키워드
하고 싶은 이야기를 모두 넣을 수는 없는 한정된 해상도에서 정보의 압축과 간결화, 시각화는 매우 중요합니다. 너무 많은 텍스트로 인해 가독성이 떨어질 때에는 이벤트 특징이 잘 드러나도록 단순화하고, 중요키워드 위주로 강조해 보세요!
쇼핑몰 디자인 접근 방법
[그림8] 불필요한 요소를 걷어내고 최대한 간결하고 심플하게 구성한 예시
-사이트 활용 포인트 : 많은 내용을 보여주기보다 중요내용을 명확하게 보여주기! 텍스트가 긴 경우 사용자 호흡을 고려하여 단락 구분을 주고, 불필요한 텍스트는 과감하게 줄여 가독성을 높일 수 있습니다. 또한 해당 서비스의 의미를 함축한 아이콘 형태의 텍스트를 제공하면 사용자의 이해를 돕고 재미를 더할 수 있어, 보다 직관적인 피드백 유도가 가능합니다.
VS
[그림9] 서술형의 내용을 간략하게. before & after
(사진출처 : Gulliver Online Shopping in Rakuten. 상품배너를 활용)

13. 쇼핑몰 디자인 접근 방법
쇼핑몰 디자인 접근 방법. 셋
애플의 MacBook Air는 이름에서처럼 굉장히 얇고 가벼운 제품입니다. 그 얇기를 사진으로도 느낄 수 있게 측면 사진을 많이 제공하고 있습니다. 또 다른 제품인 Mac mini의 특징은 가로세로 19.7cm 크기의 작은 외양 인데요 이를 강조하기 위해서 두 손으로 제품을 받치고 있는 상품 사진과 소품을 활용한 사진을 제공하고 있습니다.
Clear : 명확한 정보전달을 도와주는 디자인
[그림10] MacBook Air 상품 설명 이미지
(사진출처 : Apple)
[그림11] Mac Mini 상품 설명 이미지
(사진출처 : Apple)

14. 라츠의 뮤직 블루투스 이어셋 상품 사진입니다. 귀에서 잘 떨어지지 않고 착 감기는 듯한 착용감을 강조하기 위해 사람의 귀와 비슷한 모습을 하고 있습니다. 부드러운 실리콘이 피부 마찰도 없고 부드럽게 귀에 감길 것 같습니다.
쇼핑몰 디자인 접근 방법
[그림12] 라츠 - 뮤직 블루투스 이어셋 상품 사진 컨셉
(사진출처 : 동아일보)
장점이 잘 부각된 제품 이미지는 소비자의 구매 행동을 유도하는 역할을 합니다. 디자인은 단순히 상품을 멋있게 그리는 것이 아닌, 의도하는 바를 명확하고 설득력 있게 전달하는 것입니다.
메시지
시각적
즐거움
[그림13] 디자인이란 단순히 시각적인 즐거움이 아니라 메시지를 잘 전달하는 것

15. The End
디자인과 연애하기.
대한상공회의소 보고서에 의하면 디자인이 경쟁력 제고를 위한 중요 요소이지만 전문인력 부족으로 취약한 경우가 다수라고 합니다.
킬러콘텐트에 대해서는 전문가이시지만 콘텐트를 디자인 하는 것에 어려움을 호소하는 분들을 위해 쉽게 활용 가능한 디자인 방법론을 소개하였습니다. 제안서를 작성하거나 디자이너와 커뮤니케이션을 하거나, 디자이너 없이 쇼핑몰을 운영하는 분들에게 디자인적인 안목은 공통적으로 필요한 부분이기에 디자인을 보다 친근하게 받아들였으면 합니다. 나아가 전달력 높은 디자인으로 여러분의 브랜드 차별화에 중요수단으로 사용해 보시기 바랍니다.
칼럼니스트
안기민 과장
kimin.ahn@nsm.co.kr

16. 광고문의 1566-3265
nsmmaster@nsm.co.kr
엔서치마케팅㈜
www.nsm.co.kr
경기도 성남시 분당구 황새울로 359번길 11, 5층
우편번호 463-824
N Search Marketing 은 2001 년 네이버 검색광고 출시부터 NAVER 내부
조직으로 검색광고 서비스를 시작하여 네이버와 함께 성장해 온 온라인
마케팅 전문 컨설팅 기업으로 네이버 검색광고 취급액 1 위 , 검색광고주 수 1 위 독보적인 1 위로 시장을 선도하고 있습니다 .
검색광고 , 디스플레이 광고 , 타겟팅 광고 등 다양한 광고 상품 분야에서
최고 서비스를 제공하고 있으며 , PC·Mobile 사이트 컨설팅에 이르기까지 온라인 광고와 관련된 전반적인 컨설팅을 수행하고 있습니다 .
Contact Us