Shopify 언어 전환기: 사용자 경험 향상

Shopify 언어 전환기는 다국어 스토어에 유용한 기본 기능입니다. 이 기능을 통해 고객은 선호하는 언어로 사이트를 볼 수 있어, 브랜드가 새로운 국제 시장에 진출할 수 있습니다. 코드를 사용하여 기능을 맞춤 설정할 수도 있어 브랜드의 미적 감각에 더 부합하도록 할 수 있습니다.

하지만 기본 기능에는 타사 솔루션에 비해 자동 지리적 위치 전환 기능이 없고 사용자 지정이 제한되는 등 단점이 있습니다.

전용 Shopify 번역 앱을 통합하면 스토어 운영자는 기능성 향상, 사용자 참여도 증대, 실제 번역 작업 처리 등 추가 기능을 활용할 수 있습니다. 예를 들어, 저희 Shopify 번역 앱 Weglot 언어 전환기에 독특한 디자인과 배치 옵션을 제공하여 어떤 스토어 레이아웃에도 적용 가능합니다. 게다가 단순히 언어 전환을 허용하는 것 이상의 다양한 기능을 제공합니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

이 글에서는 Shopify의 기본 언어 전환기를 최대한 활용하는 방법을 소개한 후, Shopify에서 Weglot 활용하는 방법을 살펴보고, 스토어 번역을 위한 모범 사례와 최적의 사용자 경험을 제공하는 방법을 상세히 설명합니다.

핵심 포인트

• Shopify의 기본 언어 전환기는 여러 언어를 지원하지만, 타사 앱에 비해 자동 위치 기반 서비스와 맞춤 설정이 부족합니다.
• Weglot 자동 웹사이트 번역과 언어 전환기에 대한 광범위한 맞춤 설정 옵션을 Weglot . 또한 완전한 수동 편집을 허용하며, 언어별 URL 생성 및 hreflang 태그 구현을 통해 다국어 SEO를 강화합니다.

Shopify 언어 전환기: 개요

먼저, Shopify의 내장 언어 전환기를 살펴보겠습니다. 앞서 언급했듯이, 이 기능은 스토어 운영자가 여러 언어를 지원할 수 있게 하여 자연스럽게 해외 고객의 사용자 경험(UX)을 향상시킵니다.

Shopify 언어 전환기는 추가적인 맞춤 설정이나 앱 없이 사용자의 기본 설정에 따라 언어를 자동으로 감지하고 표시하지 않습니다. 기본 기능은 주로 사용자의 수동 언어 선택을 지원합니다.

Shopify 언어 전환기를 설정하고 맞춤 설정하려면 다음 단계를 따르세요:

1. Shopify 관리자 페이지에서 설정 > 언어로 이동하여 지원하려는 언어를 추가합니다.
2. 온라인 스토어 > 테마로 이동하여 테마를 선택한 다음 코드 편집을 클릭합니다. 섹션 디렉토리에서 header.liquid 파일을 찾습니다.
3. header.liquid 파일에서 적절한 위치(일반적으로 네비게이션 메뉴 근처)를 찾아 다음 Liquid 코드 snippet 붙여넣으세요:

<form action="{{ routes.root_url }}" method="get">  
 <select name="locale" onchange="this.form.submit()">    
  {% for locale in localization.available_locales %}      
   <option value="{{ locale | escape }}" {% if locale == localization.current_locale %}selected{% endif %}>        
    {{ locale.name }}      
   </option>    
  {% endfor %}  
 </select>
</form>

4. 이제 전환기가 준비되었습니다. 스토어 디자인에 맞게 테마의 스타일시트에서 사용자 지정 CSS 규칙을 추가할 수 있습니다. 필요한 경우 select [name="locale"]과 같은 특정 선택기를 사용하면 페이지의 다른 선택 요소에 의도하지 않은 스타일이 지정되는 것을 방지할 수 있습니다.

다음은 배경색을 변경하는 예제입니다:

select {    
background-color: #fff;    
 border: 1px solid #ccc;    
 padding: 5px;
}

스위처의 글꼴 및 텍스트 색상을 스타일링하는 방법은 다음과 같습니다:

select {    
font-family: 'Arial', sans-serif; /* Change font type */    
 font-size: 16px; /* Set font size */    
 color: #333; /* Text color */
}

select option {    
background-color: #f9f9f9; /* Background color for options */    
 color: #555; /* Text color for options */
}

호버 효과를 추가하고 테두리 크기를 변경할 수도 있습니다:

select {    
border-radius: 5px; /* Rounded corners */    
 border: 2px solid #007bff; /* Blue border */}

select:hover {    
border-color: #0056b3; /* Darker blue on hover */    
background-color: #e9ecef; /* Light gray background on hover */
}

5. 수정 후 '저장'을 클릭하여 변경 사항을 적용하세요. 이제 언어 전환기가 설정된 대로 스토어에 표시됩니다.

Weglot 언어 전환기로 Shopify 스토어 강화하기

Shopify 기본 언어 전환기는 기능적이지만, Weglot 와 같은 전용 Shopify 번역 앱은 더 많은 맞춤 설정 옵션을 제공하며, 국제 고객을 위한 스토어 경험을 진정으로 현지화하려는 분들을 위한 추가적인 Shopify 번역 기능도 함께 제공합니다.

Shopify 언어 전환기와 달리 Weglot 결제 페이지, 이메일 알림, SEO 메타데이터를 포함해 110개 이상의 언어 중에서 선택한 사이트 콘텐츠를 100% Weglot 번역하며, 검색 엔진 최적화(SEO) 를 위해 이를 최적화합니다.

Weglot 사용하면 전체 Shopify 스토어가 자동 번역의 이점을 활용하여 확장 프로젝트를 가속화할 수 있습니다. 각 언어에 대해 개별 번역사를 고용하는 것과 비교하여 Weglot자동화를 통해 새로운 언어 버전의 출시 시간을 크게 단축할 수 있습니다.

그러나 Weglot기능은 자동 번역에서 멈추지 않습니다. Weglot 사용하면 사이트의 번역된 콘텐츠를 완벽하게 편집할 수 있습니다. 플랫폼을 통해 전문 번역사를 직접 고용할 수도 있습니다.

또한 Weglot AI 언어 모델을 사용하여 브랜드에 맞는 번역을 즉시 생성할 수 있습니다. 지침, 용어집 및 수동 번역 기록을 학습하여 사용자처럼 들리는 문맥 인식 번역을 즉시 제공합니다.

또한 Weglot Dawn 및 Prestige와 같은 테마에 대한 사용자 지정을 포함하여 Shopify의 기존 기능 및 인기 타사 앱과 통합됩니다. 따라서 필요에 따라 언어를 추가, 게시, 게시 취소 또는 삭제할 수 있으므로 여러 스토어를 관리하거나 수동으로 번역해야 하는 번거로움을 없앨 수 있습니다.

Weglot 단순한 번역을 넘어 앱 핵심에 다국어 SEO 혜택을 제공합니다. 플랫폼은 각 언어 버전에 대해 자동으로 서브도메인 또는 서브디렉터리를 생성하고 hreflang 태그를 구현하여 현지 검색 엔진에 최적화된 사이트를 구축합니다. 또한 저희의 Visual Editor 을 통해 번역을 손쉽게 맞춤 설정할 수 있어 브랜드의 목소리에 맞춰 세밀하게 조정할 수 있습니다.

가장 좋은 점은 Weglot 언어 전환기 맞춤 설정이 단 몇 분 만에 가능하다는 것입니다! 함께 살펴보시죠.

Shopify 스토어에서 Weglot 설정하기

Shopify 스토어에서 Weglot 설정하는 것은 매우 간단합니다. 다음은 시작하는 데 도움이 되는 가이드입니다:

1. 먼저 Shopify 앱 스토어를 방문합니다:

• 검색창에 다음을 입력합니다. Weglot 을 입력하고 Weglot 앱을 찾습니다.
• 설치를 클릭하고 지시에 따라 스토어에 추가합니다.

2. 앱을 설치한 후 계정을 설정해야 합니다:

• Shopify 대시보드에서 Weglot 앱을 엽니다.
• 이메일 주소를 입력하고 비밀번호를 선택합니다.

3. 3. 언어 설정을 구성합니다:

• 그런 다음 원래 언어(Shopify 스토어의 언어)를 선택합니다.
• 그런 다음 콘텐츠를 번역할 대상 언어를 선택합니다.

언어를 선택하면 메타데이터와 타사 앱의 콘텐츠를 포함하여 스토어에 있는 모든 콘텐츠를 자동으로 스캔합니다. 자동 감지를 통해 번역할 콘텐츠를 수동으로 수집할 필요가 없으므로 Weglot 모든 작업을 대신 수행합니다!

그러면 주요 기계 번역을 사용하여 사이트가 즉시 번역되고 Weglot 대시보드에서 선택한 구조에 따라 언어 하위 디렉터리 또는 하위 도메인 아래에 표시됩니다.

Weglot 언어 전환기 맞춤 설정: 디자인 및 배치 옵션

Weglot언어 전환기에는 광범위한 맞춤 설정 옵션이 제공되어, 스토어의 브랜딩에 맞게 조정하여 매우 전문적인 최종 결과를 얻을 수 있습니다. 맞춤 설정 방법은 다음과 같습니다:

1. 시각적 언어 전환기 편집기에 접근하기: Weglot 이동하여 설정 > 언어 전환기로 이동하세요.
2. 모양을 변경합니다: 드롭다운, 버튼 또는 플래그와 같은 다양한 형식 중에서 선택하여 언어 옵션을 표시합니다. 예: 일부 텍스트
   • 빠른 인식을 위해 플래그를 사용하세요.
   • 더 눈에 잘 띄는 디스플레이를 위해 버튼을 선택하세요.

3. 위치 조정하기: 레이아웃에 가장 적합한 위치에 따라 머리글, 바닥글, 사이드바 등 주요 영역에 스위처를 배치할 수 있습니다.
4. 색상 및 스타일을 수정합니다: Weglot 설정에서 색상과 스타일을 스토어 브랜딩에 맞게 사용자 지정합니다.

중요한 점은 언어 전환기를 테마 수정 없이도 쉽게 재배치할 수 있어, 스토어의 다양한 페이지에서 접근성과 사용자 편의성을 유지할 수 있다는 것입니다. 고급 배치 방법은 아래 'Shopify 스토어 현지화 시 흔히 발생하는 문제 해결' 섹션을 참조하십시오.

고급 사용자 지정: 개발자를 위한 코딩 팁

Weglot Shopify 스토어를 개선하려는 개발자에게 사용자 지정은 맞춤형 다국어 환경을 만드는 데 핵심이 될 수 있습니다. Weglot유연성을 통해 개발자는 기술 전문가가 아닌 사용자도 쉽게 사용할 수 있는 맞춤형 다국어 환경을 만들 수 있습니다.

다음은 고려해야 할 몇 가지 코딩 팁입니다:

CSS를 활용한 언어 전환기 외관 미세 조정

개발자는 스토어의 브랜딩에 맞게 배경색, 글꼴 크기, 패딩 등의 스타일을 수정할 수 있습니다. 예를 들어

select {    
background-color: #f0f0f0;    
 border: 2px solid #007bff;    
 border-radius: 5px;    
 padding: 10px;
}

사용자 정의 기능을 위한 자바스크립트 구현

개발자는 JavaScript를 사용하여 페이지의 다른 요소를 업데이트하거나 분석을 위해 언어 변경 사항을 추적하는 등 언어가 선택되면 특정 작업을 트리거할 수 있습니다. 예를 들어 이벤트 리스너를 구현할 수 있습니다:

document.addEventListener('DOMContentLoaded', function() {
var languageSelector = document.querySelector('select[name="locale"]');    
 if (languageSelector) {        
  languageSelector.addEventListener('change', function(event) {            
    // Custom functionality here            
     // For example, track language change event            
     console.log('Language changed to: ' + event.target.value);
   });    
 }
});

언어 간 원활한 페이지 전환을 위한 Weglot 구현하기

Weglot주요 기능 중 하나는 사이트의 프랑스어 버전에 대한 example.com/fr과 같은 언어별 URL을 자동으로 생성하는 기능입니다. 올바른 URL 구조는 검색 엔진이 각 언어 버전을 색인화할 수 있도록 하여 다국어 SEO 노력을 개선합니다.

Weglot 고객이 제품을 검색하거나 결제하는 등 쇼핑 경험 중에 언어를 쉽게 전환할 수 있도록 지원합니다. 고객이 영어 제품 페이지에서 해당 언어(예: 스페인어)로 전환할 때 쇼핑 여정에서 자신의 위치를 잃지 않고 원활하게 전환할 수 있습니다. 이러한 기능은 사이트 체류 시간 및 전환율과 같은 주요 지표에 영향을 미쳐 고객 만족도를 향상시키고 궁극적으로 글로벌 성장을 촉진할 수 있습니다.

예를 들어 Weglot 사용하여 12개 언어로 다국어 웹사이트를 제작한 Everyone.org는 전체 방문자가 40% 증가했으며 프랑스어 사용자의 전환율이 사이트 전체 평균 전환율의 거의 두 배에 달했습니다.

다국어 SEO 최적화 및 페이지 일관성 유지

다국어 SEO는 다양한 언어로 검색하는 사용자가 제품을 검색할 수 있도록 하여 온라인 트래픽을 유도합니다. 다국어 SEO의 기본적인 측면은 적절한 URL 구조를 갖는 것이며, 하위 디렉터리를 사용하면 검색 엔진이 다양한 언어 페이지를 식별하고 순위를 매기는 데 도움이 됩니다.

이 과정에서 Hreflang 태그는 페이지의 언어 및 지역 타겟팅에 대해 검색 엔진에 알려줌으로써 중요한 역할을 합니다. 이를 통해 사용자를 가장 관련성이 높은 버전의 사이트로 안내할 수 있습니다.

제목 태그와 설명을 포함한 번역된 메타데이터는 검색 가시성 향상에 더욱 기여합니다. Weglot 기술적인 SEO 작업의 상당 부분을 자동화하여 수동 개입 없이도 언어별 URL을 자동으로 생성하고 hreflang 태그를 구현합니다.

또한 Weglot Visual Editor 언어 용어집을 통해 스토어 운영자는 번역의 일관성을 유지할 수 있습니다.

다국어 SEO를 더욱 강화하기 위해 Shopify 스토어 소유자는 다음을 수행할 수 있습니다:

• 각 타겟 시장에 대해 현지화된 키워드 조사를 수행합니다.
• 메타데이터를 포함한 모든 콘텐츠가 정확하게 번역되었는지 확인하세요.
• 언어 트렌드의 변화를 반영하기 위해 번역을 정기적으로 검토합니다.

효과적인 다국어 SEO는 더 많은 시장 기회로 이어질 수 있다는 점을 기억하세요! 다국어 최적화를 위해 Weglot 구현한 후, Shopify 스토어인 Ron Dorff는 이전에는 미개척지였던 독일 시장에서 상당한 수요를 발견했습니다. 콘텐츠를 번역하고 SEO를 최적화함으로써 해외 매출이 400%나 증가하는 놀라운 성과를 거두었습니다.

Shopify 스토어 현지화의 일반적인 문제 극복하기

Shopify 스토어를 현지화하려면 몇 가지 고유한 문제를 해결해야 하지만 Weglot 프로세스를 쉽게 진행할 수 있는 효과적인 솔루션을 제공합니다.

Shopify 사이트에서 Weglot 전환기의 위치를 변경하려면 다음 네 가지 방법 중 하나를 사용할 수 있습니다:

1. 스위처 에디터 기능

스위치어 에디터를 활용하여 언어 전환기를 웹사이트의 실시간 미리보기 화면에 직접 드래그 앤 드롭하세요. 이 방법은 사이트가 운영 중이어야 합니다.

2. 메뉴에 추가

메인 메뉴에 Weglot 연결하여 맞춤 언어 전환기를 생성하세요. Shopify 관리자 > 온라인 스토어 > 탐색으로 이동하여 각 언어별로Weglot 형식(예: 영어의 경우Weglot)으로 메뉴 항목을 추가하세요. 언어용 드롭다운 메뉴를 생성할 수도 있습니다.

3. Weglot 옵션

다음 코드 snippet 원하는 위치에 Theme.liquid snippet 삽입하세요:

<div id="weglot_here"></div>

이 코드는 커뮤니티 포럼에서 논의된 일반적인 배치 제한 사항을 해결하며, 코드를 배치하는 위치에 언어 전환기를 배치합니다.

4. 스위처 옵션

weglot.liquid에서 Weglot 초기화 코드를 수정하여 스위처를 수동으로 통합합니다. 스위처 옵션을 포함하고 스위처를 표시할 위치에 대한 대상 CSS 선택기를 지정합니다:

Weglot.initialize({  
api_key: "YOUR_API_KEY",  
 switchers: [{     
  location: { target: ".header-nav" }   
 }]
});

.header-nav를 원하는 요소의 CSS 선택기로 바꾸어야 합니다.

Weglot 사용하면 다음과 같은 현지화 이점도 얻을 수 있습니다:

• 동적 콘텐츠 번역: Weglot JavaScript로 생성된 콘텐츠와 AJAX로 로드된 요소를 효과적으로 번역하여 모든 동적 콘텐츠가 캡처되고 번역되도록 합니다.
• Shopify용 다국어 SEO: Weglot hreflang 태그 구현을 자동화하고 언어별 사이트 맵을 생성합니다. 이는 Shopify의 기본 제공 SEO 기능을 보완하여 검색 엔진이 사용자에게 올바른 언어 버전을 제공할 수 있도록 합니다.

• Shopify 특정 요소 번역: Weglot 결제 페이지, 이메일 알림, 메타 필드 등 스토어 전체에 대한 번역을 처리하여 Shopify 문서에 명시된 한계를 극복합니다. 예를 들어 결제 언어는 일반적으로 고정되어 있지만 Weglot 사용하면 사용자가 선택한 언어를 결제에 반영할 수 있습니다.

• 번역 워크플로우 최적화: Weglot번역 메모리 및 용어집 기능을 사용하면 대규모 제품 카탈로그에서 일관성을 유지할 수 있습니다. 이를 통해 용어가 균일하게 번역되어 브랜드 메시지가 여러 언어에 걸쳐 일관성을 유지할 수 있습니다.

Weglot Shopify 기본 언어 전환기 비교

Shopify는 사용자에게 스토어를 여러 언어로 번역하는 데 필요한 기본 도구를 제공하지만 제한이 있습니다.

반면 Weglot 포괄적인 번역 솔루션을 제공하며 Shopify의 한계를 정면으로 극복합니다. 따라서 이 플랫폼은 다국어 콘텐츠 관리에 대한 손쉬운 접근 방식을 원하는 사용자에게 더 적합한 옵션입니다.

언어 장벽을 극복하세요: Shopify 스토어에 Weglot 구현하기

우리가 살펴본 바와 같이, Weglot Shopify 스토어에 독보적인 이점을 Weglot 온라인 언어 장벽을 극복하는 이상적인 솔루션입니다. Weglot언어 전환기를 통해 사용자 경험을 개선할 수 있는 추가 맞춤 설정을 얻을 수 있으며, Visual Editor 문맥에 맞는 번역이 Visual Editor 필요한 곳 어디에서나 콘텐츠를 세밀하게 조정할 수 있습니다. 더 높은 정확도를 위해 대시보드에서 직접 전문 번역을 주문할 수도 있습니다.

Weglot 스마트 검색 도구 및 이미지 갤러리를 비롯한 인기 있는 Shopify 앱과 통합되어 스토어가 여러 언어로 완벽하게 작동하도록 보장합니다. 또한 언어별 하위 도메인 또는 하위 디렉터리를 생성하여 SEO 노력을 크게 향상시킬 수 있습니다.

무엇보다도 Weglot 모든 콘텐츠 관리 시스템과 호환되므로 Shopify를 떠나더라도 Weglot 이점을 잃을 필요가 없습니다.

지금 Weglot 10일 무료 체험을 시작하고 몇 분 안에 다국어 사이트를 즐겨보세요!