전자상거래 웹 디자인을 위한 5가지 팁

인간은 아주 단순합니다. 보기 좋은 것을 좋아합니다. 놀라운 제품, 저렴한 가격, 다양한 언어 옵션이 있어도 대부분의 고객이 브랜드를 판단하는 기준은 여전히 웹사이트 디자인입니다. 

하지만 좋은 소식은 몇 가지 디자인 조정만으로 긍정적인 첫인상을 심어주고 신뢰성을 강화하며 방문자를 고객으로 전환하는 전자상거래 웹사이트를 쉽게 만들 수 있다는 것입니다.

이 글에서는 전자상거래 웹사이트에 매우 중요한 5가지 디자인 팁을 공유하고 다국어 웹사이트를 통해 해외에서 판매하는 분들을 위한 몇 가지 추가 팁도 알려드리겠습니다! 

팁 1: 시각적 계층 구조 활용하기 

자, 먼저 멋진 디자인 용어인 시각적 계층 구조에 대해 알아봅시다. 시각적 요소의 배열, 크기, 색상, 대비에 따라 상대적인 두드러짐과 사람의 눈에 보이는 순서가 결정되는 간단한 개념입니다. 

하지만 이 간단한 개념은 전자상거래 웹사이트 디자인에 있어 매우 중요합니다. 왜 그럴까요? 페이지의 모든 요소가 동일한 중요성을 갖는 것은 아니며, 요소의 순서에 따라 방문자에게 다른 영향을 미칠 수 있기 때문입니다. 

여기서 시각적 계층 구조가 작동하며 방문자에게 가장 먼저 표시되는 내용을 제어할 수 있습니다. 이러한 요소(크기, 위치, 형식, 다른 요소와의 상대적 위치)를 조합하여 중요한 내용을 강조하고 그 다음에 이어지는 경로를 정렬할 수 있습니다. 

전자상거래 웹사이트의 시각적 계층 구조를 전략적으로 사용하면 방문자의 관심을 관심에서 구매 전환으로 유도할 수 있습니다. 따라서 크기, 위치, 색상을 임의로 결정하는 대신 생성하는 효과를 인식하고(위 표 참조) 이를 유리하게 활용하세요.

시각적 계층 구조 원칙에 대해 자세히 알아보고 싶다면 이 글을 확인하세요.

다국어 팁: 시각적 계층 구조를 사용하면 시장별로 최적의 효과를 낼 수 있습니다. 예를 들어, 특정 해외 고객에게는 가격이 가장 중요한 요소일 수 있고, 다른 고객에게는 무료 배송이 가장 중요한 요소일 수 있습니다.

어떤 요소가 가장 효과적인 전환 경로를 만들 수 있는지 파악하고 그에 따라 시각적 계층 구조를 해외 시장별로 다르게 사용하세요.

팁 2: 사람과 함께 이미지 사용하기  

미국의 소프트웨어 회사인 Basecamp는 어떤 유형의 웹사이트 디자인이 유료 가입을 늘릴 수 있는지 알아보기 위해 Highrise 마케팅 사이트에서 몇 가지 테스트를 수행한 결과 흥미로운 인사이트를 얻었습니다. A/B 테스트를 통해 사람의 이미지를 사용하면 전환이 증가한다는 사실이 입증되었습니다.

인간의 뇌는 다른 얼굴을 인식하고 해석하도록 프로그래밍되어 있기 때문에 이는 당연한 일입니다. 따라서 전자상거래 웹사이트에 사람의 이미지를 사용하면 방문자의 관심을 끌 가능성이 더 높아집니다. 

하지만 여기서 끝이 아닙니다. 이미지 속 인물과 표정 또한 시청자의 인식을 형성하는 데 큰 역할을 합니다. 예를 들어, 베이스캠프에 따르면 위에 표시된 디자인의 성공 비결은 모델이 매우 친근하고 전문적이지 않으며 친근하게 보였기 때문이라고 합니다 .

따라서 타겟 고객의 특징을 반영하는 모델을 사용하여 친근한 느낌을 줄 수 있습니다. 마찬가지로 행복이나 만족과 같은 특정 표정을 통해 긍정적인 감정과 신뢰를 불러일으킬 수 있습니다.

다국어 팁: 다국어 웹사이트에 사람 이미지를 사용하면 해외 고객과 즉각적인 관계를 구축하는 데 도움이 될 수 있습니다. 예를 들어 클라란스는 타깃 국가에 따라 이미지를 현지화하여 프랑스어 웹사이트에서는 유럽 여성을, 한국어 웹사이트에서는 한국 여성을 사용합니다.

또한 이러한 현지화 관행은 잠재적인 위반을 피하는 데도 도움이 될 수 있습니다. 다국어 디자인 고려 사항에 대해 자세히 알아보려면 문서를 확인하세요!

팁 3: 사회적 증거 포함

관심 있는 브랜드나 제품에 대한 긍정적인 리뷰를 읽는 것보다 더 든든한 것이 있을까요? 92%의 소비자가 다른 어떤 유형의 광고보다 추천을 더 신뢰한다고 응답할 정도로 추천은 매우 효과적입니다.

그렇다면 이를 유리하게 활용해보면 어떨까요? 브랜드가 얼마나 멋진지, 제품이 얼마나 유용한지에 대해 이야기하는 대신 리뷰를 통해 이를 증명해 보세요. 

다음은 웹사이트에서 사용할 수 있는 몇 가지 다양한 유형의 소셜 증명입니다:

1. 고객 리뷰 
2. 사례 연구
3. 사용자 수
4. 대형 고객사 로고
5. 협회 멤버십, 보안 인증서 및 수상 내역
6. 팔로잉의 크기를 보여주는 소셜 미디어 위젯

그리고 얼마나 많은 리뷰를 포함해야 하나요? 사회적 증거에 관해서는 많을수록 좋습니다! Orbit Media의 분석에 따르면 Amazon 제품 상세 페이지의 43%가 사회적 증거와 리뷰로 구성되어 있습니다. 전자 상거래의 거인인 아마존이 그렇게 하고 있다면 분명 효과가 있을 것입니다(제가 한 일을 보셨나요?).

이쯤 되면 이렇게 효과적이라면 추천글 전용 페이지를 따로 만들면 어떨까 하는 생각이 들 수도 있습니다. 

좋은 생각처럼 보일 수 있지만 회원 평가 페이지는 트래픽이 적은 페이지인 경우가 많습니다. 따라서 가장 좋은 방법은 홈페이지 및 제품 페이지와 같이 트래픽이 많은 페이지에 통합하는 것입니다. 이렇게 하면 웹사이트 전체에서 소셜 증거가 콘텐츠를 뒷받침하고 향상시킬 수 있습니다.

다국어 팁: 소셜 인증은 다국어 웹사이트에 특히 중요합니다! 해외에서 쇼핑하는 고객에게는 추가적인 안심이 필요할 수 있습니다. 따라서 국내 시장의 리뷰는 해외 방문자의 전환에 도움이 될 수 있습니다.

따라서 웹사이트의 사회적 증거를 번역하여 모든 사람이 이해할 수 있도록 하세요. Weglot 요트포 리뷰를 번역하는 방법을 배울 수 있습니다.

팁 4: 길게 만들기

웹 페이지 길이와 관련하여 어디까지가 너무 긴가요? 분명한 것은 페이지 길이가 길면 좋은 결과를 얻을 수 있다는 것입니다. Crazy Egg의유명한 사례 연구에 따르면 페이지 길이를 20배 늘린 결과 전환율이 30% 증가했습니다! 다음은 얼마나 큰 변화를 가져왔는지 보여주는 비주얼입니다!

15초짜리 틱톡 동영상과 140자 트윗으로 인해 사람들의 집중 시간이 그 어느 때보다 짧아졌다는 점을 고려하면 놀라운 일이 아닐 수 있습니다. 하지만 웹사이트의 경우 방문자는 클릭보다 스크롤을 더 선호한다는 연구 결과가 있습니다.

닐슨 노먼 그룹에 따르면 사람들은 90년대의 긴 웹 페이지 덕분에 스크롤을 배우고 익숙해졌으며, 이러한 디지털 습관은 오늘날에도 여전히 이어지고 있습니다. 따라서 스크롤은 자동적이고 쉽게 느껴지는 반면, 클릭은 추가적인 동작이 필요합니다. 

하지만 그렇다고 해서 페이지를 길게 만들기 위해 관련 없는 정보로 채울 필요는 없습니다. 페이지가 길수록 더 많은 섹션, 공백 및 시각적 요소를 넣을 수 있습니다. 따라서 이를 활용하여 시각적으로 매력적이고 쉽게 이해할 수 있는 콘텐츠를 만드세요. 

긴 페이지를 좋아하는 것은 방문자뿐만이 아닙니다. 연구에 따르면 Google은 긴 콘텐츠를 선호합니다. SerpIQ는 20,000개 이상의 키워드에 대한 상위 10개 검색 결과를 분석하는 연구를 수행했습니다. 그 결과 상위 10개 결과 모두 2,000단어 이상이었으며 상위 페이지일수록 콘텐츠가 더 많은 것으로 나타났습니다. 

또한 사람들이 심층적인 콘텐츠로 연결할 가능성이 높기 때문에 콘텐츠가 길수록 백링크가 더 많이 발생하는 것으로 보입니다. 이는 긴 세션과 결합되어 긴 페이지를 더욱 SEO 친화적으로 만듭니다. 

다국어 팁: 언어마다 차지하는 공간이 다르므로 번역된 페이지의 콘텐츠를 조정해야 할 수도 있습니다. 페이지가 길면 디자인 수정을 위한 공간이 더 많이 확보되므로 그런 의미에서 유리합니다.

또한 긴 페이지가 해외 시장에서도 순위를 높일 수 있도록 최고의 다국어 SEO 관행을 따르세요.

팁 5: 캐러셀 피하기

성공적인 이커머스 웹사이트를 위해서는 고품질의 상세한 제품 이미지가 중요하다는 것은 누구나 알고 있는 사실입니다. 하지만 이러한 이미지를 표시하는 방법도 매우 중요하다는 사실은 잘 모를 수 있습니다.

여러 이미지를 좌우로 회전하여 한 공간에 표시할 수 있는 캐러셀은 여러 제품 이미지를 표시할 수 있는 실용적인 솔루션으로 전자상거래 디자인에 많이 사용됩니다. 웹사이트에서 캐러셀을 사용하는 것이 좋은 아이디어처럼 보일 수 있지만, 연구 결과에 따르면 그렇지 않습니다. 

닐 파텔에 따르면 10번 중 9번은 캐러셀이 전환율을 떨어뜨린다고 합니다. 그렇다면 캐러셀의 문제점은 무엇일까요? 대부분의 사람들이 다음 이미지를 보기 위해 클릭하지 않기 때문에 보이지 않는 것으로 나타났습니다.

실제로 노트르담 대학교 웹 개발자 Erik Runyon의 연구에 따르면 홈페이지를 방문한 3,755,297명 중 캐러셀의 항목을 클릭한 비율은 1%에 불과했습니다. 

더욱 우울한 것은 이러한 클릭 중 84%가 로테이션의 첫 번째 항목에 대한 클릭이었다는 것입니다. 이후 다른 유형의 웹 사이트에서 캐러셀을 테스트하여 타겟팅 콘텐츠가 더 개선되는지 확인했지만 여전히 최고 CTR은 8.8%로 그다지 희망적이지 않았습니다.

또한 접근성과 관련하여 좋은 관행이 아닙니다. 캐러셀은 일반적으로 화살표나 작은 화살표로 제어되기 때문에 시각 장애가 있는 방문자가 탐색하기 어렵습니다. 따라서 일부 방문자를 소외시키고 싶지 않다면 캐러셀을 사용하지 않는 것이 좋습니다. 

그렇다면 이미지를 어떻게 표시해야 할까요? 방문자가 스크롤만 하면 모든 이미지를 쉽게 볼 수 있도록 이미지를 겹쳐서 표시해 보세요. 또는 스마트 콘텐츠라는 더 멋진 옵션을 선택하여 방문자의 관심사나 사이트에서 이전에 수행한 작업을 기반으로 각 방문자에게 맞춤화된 환경을 만들고 가장 관련성이 높은 이미지를 표시할 수 있습니다.

다국어 팁: 이미지가 해외 방문자의 전환을 효과적으로 유도하려면 캐러셀을 피하는 것 외에도 이미지에 번역되지 않은 텍스트도 피하세요. 해외 방문자가 이해할 수 없는 텍스트가 있는 이미지는 클릭률을 떨어뜨릴 수 있습니다.

Weglot미디어 번역 기능을 사용하면 이미지를 쉽게 번역하고 현지화된 사용자 경험을 제공할 수 있습니다.

마무리

최고의 전자상거래 웹 디자인 팁은 여기까지입니다! 간단히 요약해 보겠습니다:

1. 시각적 계층 구조를 이해하고 이를 유리하게 활용하세요.
2. 사람이 포함된 이미지의 우선순위를 정하세요. 이미지에 등장하는 사람이 전달하려는 메시지와 관련하여 중요한 인물인지 주의하세요.
3. 소셜 증거는 방문자를 고객으로 전환하는 데 효과적인 도구입니다. 하지만 추천 전용 페이지가 아닌 웹사이트 전체에 통합하세요.
4. 유용하고 읽기 쉬운 콘텐츠로 페이지를 길게 만들어 보세요. 
5. 캐러셀을 피하고 여러 이미지를 표시하는 보다 사용자 친화적인 방법을 선호합니다.

다국어 웹사이트가 있다면 다국어 팁도 잊지 마세요! 아직 다국어 웹사이트가 없다면 지금 바로 Weglot 10일 체험 판으로 바꿔보세요!