쇼피파이, 워드프레스, 마젠토를 이용해 해외 쇼핑몰을 구축한다면 테마를 이용해 디자인을 세팅하게 됩니다. 테마 스타일을 선택 후 실제 판매할 제품과 슬라이드, 배너 이미지를 교체하는 순서로 디자인을 세팅하게 되죠. 이런 과정에서 뚜렷한 기획이나 콘셉트가 없다면 디자인이 산만해질 수 있습니다. 이번 포스트에서는 통일감을 유지하기 위해서는 어떤 요소들이 필요한지에 대해 알아보고 브랜드를 돋보이게 할 수 있는 해외 쇼핑몰 디자인 세팅에 대해서 알아보겠습니다.

정형화된 타이틀

쇼핑몰에서 사용되는 제품명인 타이틀은 검색엔진최적화(SEO)에서도 가장 중요한 요소 중의 하나입니다. 타이틀은 키워드를 기반으로 구성되어야 하며 사이트 만의 규칙을 만들어 사용해야 하죠. 국내 지마켓이나 이베이에서 자주 볼 수 있는 "타이틀/키워드 1/키워드 2/키워드 3/키워드 4" 형식은 반드시 피해야 합니다. 타이틀 외에 꼭 추가해야 할 키워드가 있다면 디스크립션(제품설명)이나 태그를 통해 추가하시길 바랍니다. 일반적인 타이틀 형식은 브랜드+제품명+스펙 형식이고 브랜드는 타이틀 외에 브랜드 세션에 추가해도 무방하기 때문에 직접 제조한 제품이라면 타이틀에 브랜드를 꼭 기재하지 않아도 됩니다.

쇼핑몰에 적합한 이미지

쇼핑몰 디자인의 8할은 사진입니다. 사진은 제품 이미지와 배너 이미지로 나눌수 있습니다. 해외 쇼핑몰 디자인을 연구하다 보면 사진에서 해외 쇼핑몰과 국내 쇼핑몰의 차이를 느낄 수 있는데요. 해외 쇼핑몰은 대부분 제품 위주의 사진을 사용하는 반면 국내는 모델 위주의 컷들을 많이 사용합니다. 이 부분은 패션, 뷰티 제품군에서 더욱 두드러지는데요. 스타일 난다 등의 소호몰들이 국내 쇼핑몰 트렌드를 이끌어 가다 보니 패션 쇼핑몰 디자인이 포맷화된 것으로 보입니다. 이런 디자인 포맷은 스타 모델을 만들어 냈고, 모델 위주의 포맷을 굳어지게 만들었죠. 모델 위주의 디자인은 한류문화가 유행이 동남아에서는 긍정적일 수 있습니다. 하지만 북미, 유럽권을 타깃으로 한다면 제품 메인 이미지만큼은 제품 사진으로 구성하는 게 디자인적으로 바람직합니다. 아마존이나 다른 마켓 플레이스들도 대표 이미지는 흰 바탕으로 만들어진 제품 이미지를 요구하기 때문에 추후 제품 리스팅 연동에도 리소스를 줄일 수 있죠.

​웹서핑 중에 뿌옇게 보이는 이미지를 보신 적 있나요? 뿌연 이미지는 이미지 최적화가 안돼서 나타나는 현상으로 슬라이드 이미지나 배너 이미지를 제작한다면 1024px 이미지나 쇼피파이의 경우 최대 이미지 사이즈인 2048px 이미지를 사용해야 선명한 이미지를 제공할 수 있습니다. 대부분의 테마들은 자신의 섹션에 고화질의 이미지만 업로드하면 사이즈는 자동으로 조절해 주는 기능을 제공하고 있으니 슬라이드 이미지를 제작한다면 반드시 고화질의 이미지를 업로드하시길 추천드립니다. 또한 제품 이미지는 동일한 사이즈의 이미지를 사용해야 합니다. 제품 이미지도 자동 리사이징 기능을 제공하나 통일감 있는 디자인을 위해서는 반드시 동일한 사이즈의 이미지를 사용하는 게 좋습니다.

▲ 일정한 사이즈의 제품 이미지

메인 컬러 선택

이미지(사진) 외 사이트의 콘셉트를 결정하는 요소는 쇼핑몰의 메인 컬러입니다. 컬러는 브랜드 로고와 더불어 사이트의 디자인 콘셉트를 보여주는 중요한 요소지요. 컬러는 블랙, 화이트를 제외하고 2~3개의 색을 정해 사용하는 게 기본입니다. 메인 컬러로 바 배너와 슬라이드의 메인 헤더 등에 사용하고 서브 컬러로 CTA 버튼, 푸터, 기타 배너 이미지 등에 사용하는 식이죠. 통일감을 주는 컬러 선택에서 가장 쉬운 방법은 로고 색에 맞춰서 메인 컬러를 정하는 것입니다. 로고와 메인 컬러만 통일해서 사용해도 쇼핑몰에서는 충분히 통일감을 유지할 수 있죠. 메인 컬러를 정했으면 해당 컬러의 컬러 코드를 저장해 놓고 쇼핑몰에서 발송되는 메일이나 플라이어 등에도 공통적으로 사용할 수 있습니다.

▲ 컬러 코드

• #FFFFFF - 화이트
• #2D2D2D - 다크 그레이
• #50B83C - 그린

3종 이하의 폰트 사용

폰트 선택의 가장 중요한 요소는 가독성입니다. 아무리 디자인이 뛰어난 폰트라고 가독성이 떨어지면 사용을 지양해야 합니다. 또한 과도한 폰트 사용은 다자인의 독이 될 수 있습니다. 폰트는 3개 이하로 사용하셔야 하셔야 통일감을 유지할 수 있다는 점 잊지 마세요. 폰트 패밀리를 사용한다면 좀 더 균형 있는 디자인을 구성할 수 있습니다. 물론 폰트 또한 동일한 사이즈로 사용되어야 합니다.

▲ open sanse 폰트 패밀리를 사용한 이북 디자인 (source:canva)

▲ 폰트 패밀리를 사용한 배너 디자인 예시

쇼피파이를 비롯한 대부분의 쇼핑몰 빌더에서 제공하는 테마는 테마에서 제공하는 폰트 외에 구글 폰트 같은 외부 폰트가 연동 되어 있어 코딩 없이 간단한 설정만으로도 폰트 변환이 가능합니다. 하지만 Less is more 란 말이 있듯이 깔끔한 디자인에 가독성을 잃지 않기 위해서는 과도한 폰트 사용은 자제하시길 바랍니다.
_
위에 언급된 타이틀, 이미지, 컬러, 폰트만 통일되게 구성해도 통일감을 유지할 수 있습니다. 하지만 쇼핑몰의 주인공은 제품이 때문에 너무 과한 컬러 선정이나 복잡한 디자인은 지양하고 제품에 집중할 수 있게 디자인이 되어야겠죠. 4가지 요소로 쇼핑몰 브랜딩의 기초를 만드시길 바랍니다.