ConveyThis를 활용한 다국어 웹사이트 디자인 팁

ConveyThis를 사용한 다국어 웹사이트 디자인 팁: 실용적인 디자인 전략을 통해 사용자 경험과 글로벌 도달 범위를 향상합니다.
Conveythis 데모
Conveythis 데모
다국어 디자인 팁

이제 수많은 웹사이트에는 다양한 언어 옵션이 있어 전 세계 방문자가 편안하게 탐색할 수 있습니다. 인터넷은 시장을 글로벌 경험으로 만드는 데 도움이 되었습니다. 따라서 웹사이트를 보유함으로써 귀하는 인터넷에 연결된 모든 사람에게 귀하의 비즈니스에 대한 문을 열어준 것입니다. 그러나 언어를 이해하지 못하면 머물지 않습니다. 다국어 웹사이트는 쉽습니다.

다행스럽게도 웹 사이트를 다국어로 전환하는 과정은 매우 간단합니다. ConveyThis는 몇 분 만에 사이트의 번역된 버전을 생성할 수 있으며 언어 전환기의 모양과 배치를 사용자 정의하고, 단어 또는 오른쪽에서 왼쪽으로 언어에 맞게 일부 레이아웃을 변경하고 원본이 있는 경우 색상과 이미지를 변경할 수 있습니다. 대상 문화에 적합하지 않습니다.

프로세스가 완전히 자동화되지 않았으므로 사전에 몇 가지 조사를 수행해야 합니다. 이 가이드는 다국어 웹사이트와 뛰어난 디자인의 세계에 편안하게 발을 들일 수 있도록 웹사이트 디자인의 몇 가지 측면을 설명합니다.

일관된 브랜딩

사용자 경험은 방문하는 언어 버전에 관계없이 일관되어야 합니다. 모양과 느낌은 모든 버전에서 매우 유사해야 하며 언어 또는 문화 차이로 인해 약간의 차이가 필요할 수 있지만 언어 간에 전환하는 경우 완전히 다른 사이트로 리디렉션된 것처럼 느껴지지 않아야 합니다.

따라서 레이아웃 및 비즈니스의 특정 브랜딩 스타일과 같은 디자인 요소는 모든 언어에서 동일하게 유지되어야 합니다.

이것은 ConveyThis WordPress 할 수있는 매우 쉽습니다, 그 완벽하게 당신이 선택한 테마에 관계없이 텍스트를 식별하고 (그것은 사용자 정의 된 경우에도!) 자동으로 번역, 당신은 다른 플러그인과 함께 작업하는 경우에도.

이렇게 하면 모든 언어에 대해 동일한 테마를 사용하여 동일한 사용자 경험을 제공하는 전역 템플릿을 사용할 수 있습니다.

에어비앤비 홈페이지가 좋은 예입니다. 호주 버전을 살펴보겠습니다.

다중 언어

그리고 일본어 버전은 다음과 같습니다.

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

의심 할 여지없이 이것은 같은 웹 사이트입니다. 배경은 동일하고 검색 기능도 동일합니다. 통합된 디자인을 사용하면 브랜드 아이덴티티에 도움이 되고 새 언어를 추가하거나 업데이트할 때 시간과 노력을 절약할 수 있습니다.

언어 전환기 지우기

언어 전환기의 눈에 잘 띄는 위치(예: 웹사이트의 네 모서리)를 선택하고 홈페이지뿐만 아니라 모든 페이지에 배치합니다. 숨겨진 버튼을 찾는 사람은 아무도 없기 때문에 쉽게 찾을 수 있어야 합니다.

언어 이름은 해당 언어로 하는 것이 좋습니다. 예를 들어 "Spanish" 대신 "Español"은 놀라운 일을 할 것입니다. Asana는 이 작업을 수행하며 사이트에는 사용 가능한 언어 옵션이 있는 드롭다운 상자가 있습니다.

무제3

이렇게 하면 방문자가 환영받는다고 느낄 수 있습니다. 웹사이트가 번역된 경우 언어 목록에 이를 반영해야 합니다. 영어 웹사이트에서 "독일어, 프랑스어, 일본어"를 읽는 것은 사람들이 쉽게 탐색할 수 있도록 하지 않으며 영어 버전이 가장 중요하다는 인상을 줍니다.

'언어'가 '지역'보다 낫습니다.

많은 대형 국제 브랜드는 귀하의 언어로 웹 사이트를 읽을 수 있도록 지역을 전환하도록 합니다. 이것은 방문자가 브라우징을 더 어렵게 만드는 끔찍한 생각입니다. 이러한 웹 사이트는 사용자가 해당 언어가 사용되는 지역에서 탐색하고 있다는 가정하에 작동하므로 사용자의 언어로 된 텍스트를 얻지만 관심 있는 지역에 대한 콘텐츠를 얻지 못할 수도 있습니다.

다음 이미지는 Adobe 웹 사이트에서 가져온 것입니다.

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P vOTNbP2pFSp17B530ArONrjgjryMZYqcQl5 WQuEAYvm6LArZbXFsMD9AiSX mEzsJilUu4a

언어는 해당 지역과 불가분의 관계가 있어서는 안 됩니다. 뉴욕, 런던, 파리와 같은 모든 국제 도시를 예로 들어 보겠습니다. 영국에 거주하는 벨기에인이 영국 사이트에서 구매하고 싶지만 프랑스어로 탐색할 수 있습니다. 그들은 벨기에 사이트에서 모국어로 구매하거나 영국 사이트에서 영어로 구매하는 것 중에서 선택해야 하며 둘 다 원하지 않습니다. 따라서 실수로 장벽을 만들었습니다. 언어와 지역을 따로 지정할 수 있는 웹사이트, 우버 웹사이트를 살펴보자.

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

이것은 뛰어난 디자인입니다. 이 경우 언어 전환 옵션이 왼쪽 바닥글에 배치되었으며 다양한 옵션으로 인해 드롭다운 상자 대신 모달이 있습니다. 언어 이름은 해당 언어로도 참조됩니다.

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

보너스로 사용자가 선택한 언어를 "기억"할 수 있으므로 첫 방문부터 더 이상 전환할 필요가 없습니다.

위치 자동 감지

이 기능은 방문자가 잘못된 언어를 통해 액세스하지 않도록 매우 유용합니다. 그리고 사용자 측에서 시간을 절약하여 언어 전환기를 찾을 필요가 없습니다. 이것이 작동하는 방식입니다. 웹사이트는 브라우저가 있는 언어 또는 위치를 식별합니다.

그러나 사용자가 관광객이고 현지 언어에 익숙하지 않은 경우 주의해야 합니다. 언어 전환을 위해 언어 버튼이 필요하기 때문입니다. 이러한 이유로 도구가 항상 정확한 것은 아닙니다.

다중 언어 사이트를 디자인할 때 언어 자동 감지와 언어 전환기 중에서 선택하지 마십시오. 후자는 필수이고 전자는 선택 사항입니다.

플래그는 언어 이름을 대체하기에 적합하지 않습니다.

21개의 스페인어 사용 국가와 18개의 영어 사용 국가가 있으며 중국에는 8개의 기본 방언이 있으므로 국기는 언어 이름을 대체할 수 없습니다. 또한 플래그는 플래그를 인식하지 못하는 사람들을 혼란스럽게 할 수 있기 때문에 유용한 지표가 아닐 수 있습니다.

텍스트 공간을 유연하게 사용하세요.

이것은 어려울 수 있지만 번역이 원본 텍스트와 동일한 공간을 차지하지 않는다는 것은 부인할 수 없습니다. 일부는 더 짧을 수 있고 다른 일부는 더 길 수 있으며 일부는 더 많은 수직 공간이 필요할 수도 있습니다!

wsEceoJKThGv2w9Qzxu 김 H YPX39kktoHXy4vJcu aanoASp V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

한자는 많은 정보를 포함하므로 많은 공간이 필요하지 않은 반면 이탈리아어와 그리스어는 더 단어가 많고 두 배의 줄이 필요합니다. 좋은 경험 법칙은 일부 번역에는 30% 이상의 추가 공간이 필요할 수 있으므로 레이아웃을 유연하게 조정 하고 텍스트에 충분한 공간을 할당하는 것입니다. 원본 웹사이트의 이러한 타이트한 스퀴즈는 번역을 위한 공간이 전혀 없을 수 있습니다. 영어는 특히 간결한 언어입니다. 내용이 맞도록 영어로 축약해야 하는 경우, 번역할 시간.

텍스트를 늘릴 수 있는 팔꿈치 공간 외에도 버튼과 입력 필드가 커질 수 있도록 적응형 UI 요소를 갖는 것도 좋은 생각입니다. 또한 글꼴 크기를 줄일 수 있지만 너무 많이는 아닙니다.

Flickr 웹사이트는 다국어입니다. 원래 "보기" 버튼을 살펴보겠습니다.

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

환상적으로 보이고 모든 것이 훌륭하지만 '보기'는 다른 언어에서 더 긴 단어로 밝혀져 더 많은 공간이 필요합니다.

FparMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

이탈리아어에서는 3배의 공간이 필요합니다!

아랍어와 같은 많은 비라틴 스크립트는 번역이 맞도록 더 높은 높이가 필요합니다. 요약하자면 웹 사이트 레이아웃은 다양한 언어 요구 사항에 적응할 수 있을 만큼 유연해야 스위치에서 원본의 세련된 모양이 손실되지 않습니다.

웹 글꼴 호환성 및 웹사이트 인코딩

W3C에 따르면 특수 문자를 허용하는 UTF-8을 사용하여 웹 페이지를 인코딩하는 것이 좋습니다 .

매우 간단합니다. UTF 선언은 다음과 같습니다.

fbnRHXPPyY2OPijzOvFkH0y 케

또한 글꼴이 다른 언어와 호환되는지 확인하십시오. 그렇지 않으면 텍스트가 읽을 수 없게 보일 수 있습니다. 기본적으로 글꼴을 결정하기 전에 필요한 모든 스크립트와의 호환성을 확인하십시오. 러시아 시장에 진출하려면 키릴 문자가 지원되는지 확인하십시오.

다음 이미지는 Google Fonts에서 가져온 것이며 보시다시피 필요한 스크립트 버전을 다운로드하도록 선택할 수 있습니다. 문자 수가 많은 언어는 더 큰 글꼴 파일을 생성하므로 글꼴을 선택하고 혼합할 때 이를 고려하십시오.

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

오른쪽에서 왼쪽으로 언어에 관하여

중동 시장이 성장함에 따라 이 지역의 방문자를 끌어들이는 웹사이트 버전을 만드는 것을 고려할 수 있습니다. 즉, 해당 언어와 호환되도록 레이아웃을 조정해야 합니다. 대부분의 중동 언어의 특징은 오른쪽에서 왼쪽으로 읽는다는 것입니다! 이것은 큰 도전이며 솔루션은 인터페이스 미러링으로 시작됩니다.

이것은 영어와 같은 왼쪽에서 오른쪽으로 언어를 위한 Facebook의 디자인입니다.

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

이것은 아랍어와 같이 오른쪽에서 왼쪽으로 쓰는 언어를 위한 뒤집힌 디자인입니다.

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGOdxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9R T0by f2qOI9CQz2CfwdRj

자세히 보면 디자인의 모든 배치가 미러링되었습니다.

이 작업을 수행하는 방법에 대한 자세한 내용은 오른쪽에서 왼쪽으로 언어 디자인에 대한 Robert Dodis의 문서를 확인하십시오.

일부 왼쪽 언어는 아랍어, 히브리어, 페르시아어 및 우르두어이며 ConveyThis 언어 요구 사항을 수용하고 훌륭한 사용자 경험을 보장하기 위해 웹 사이트를 조정하는 데 아무런 문제가 없습니다. 그리고 가장 좋은 점은 각 언어의 모양을 사용자 지정하고 글꼴 또는 그 크기의 유형을 변경하고 필요한 경우 줄 높이를 편집 할 수 있다는 것입니다.

적절한 아이콘과 이미지 선택

비주얼은 매우 무거운 문화적 요소를 가지고 있으며 적절한 웹사이트 디자인의 핵심 요소입니다. 각 문화는 서로 다른 이미지와 아이콘에 의미를 부여하며 일부 해석은 긍정적이고 일부는 완전히 반대입니다. 일부 이미지는 한 문화의 이상에 대한 경험을 반영하지만 다른 맥락에서는 사용자가 소외감을 느끼게 합니다.

다음은 문화적으로 적합하지 않아 교체해야 했던 이미지의 예입니다. 모든 이미지가 다른 사람에게 불쾌감을 주는 것은 아니며, 사람들이 귀하의 제품에 호기심을 갖고 관심을 갖기를 원할 때 무관심을 유발할 수 있습니다.

이것은 백인 여성이 등장하는 프랑스어용 Clarin의 홈페이지입니다. 그리고 여기 한국 여성이 브랜드 홍보대사로 있는 한국 버전이 있습니다.

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvOB0 dTzQkZjuUKogNMo2sQnJD0UTAdaeIe

불쾌감을 줄 수있는 영상의 종류는 일부 문화에서는 무해한 것처럼 보이지만 다른 문화에서는 동성애 나 여성 권한 부여와 같은 불법적이거나 금기적인 행동을 보여줍니다.

이는 아이콘에도 적용됩니다. 미국에서는 두 개의 샴페인 잔을 건배하는 아이콘이 축하를 나타내는 반면, 사우디아라비아에서는 술을 마시는 것이 불법이므로 아이콘을 문화적으로 적절한 아이콘으로 대체해야 합니다.

TsA5aPbhznm2N vv qL
(이미지 출처:훔치다키위)

따라서 선택한 아이콘이 목표 시장에 적합한지 확인하기 위한 연구가 필요합니다. 확실하지 않으면 항상 안전하게 플레이할 수 있습니다.

예를 들어, 지구를 특징으로 하는 이 세 개의 아이콘은 첫 번째 아이콘은 호주 청중을 위해 디자인되었습니다. 두 번째는 아프리카 청중을 위한 것입니다. 마지막은 특정 영역이 등장하지 않기 때문에 더 크고 전 세계의 시청자에게 적합합니다.

cx90RYDHGTToOiC uMNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3oW R6X3bRxeHdjJ

마지막으로 ConveyThis는 이미지에 포함되지 않은 모든 텍스트를 번역할 수 있습니다. 소프트웨어는 그것에 쓰여진 내용을 식별할 수 없으므로 원래 언어로 유지되므로 텍스트를 포함하지 마십시오.

색상 선택

이전 섹션에서 언급했듯이 문화는 이미지를 다르게 해석하며 색상에서도 동일한 현상이 발생합니다. 그들의 의미는 주관적입니다.

예를 들어, 어떤 문화권에서는 흰색이 순수함의 색이지만 다른 문화권에서는 동의하지 않을 것입니다. 그것은 죽음의 색입니다. 빨간색도 마찬가지입니다. 아시아 문화에서는 축하 행사에 사용되지만 일부 아프리카 국가에서는 폭력과 관련되어 긍정적인 의미를 갖지 않습니다.

그러나 파란색은 일반적으로 평온과 평화와 같은 긍정적인 의미와 관련된 모든 색상 중에서 가장 안전한 것 같습니다. 많은 은행들이 신뢰와 보안을 의미할 수 있기 때문에 로고에 파란색을 사용합니다.

이 기사는 전 세계의 색상 의미 차이를 보여 주며 다국어 사이트에 가장 적합한 색상이 무엇인지 연구를 시작하는 데 매우 유용합니다.

형식 조정

날짜를 쓰는 방법은 다양하기 때문에 날짜를 쓸 때 숫자만 사용하지 않는 것이 좋습니다. 미국에서는 공식 형식이 mm/dd/yyyy이고 다른 시스템을 사용하는 다른 국가의 일부 사용자(예: dd/mm/yyyy) 혼동될 수 있습니다. 따라서 옵션은 다음과 같습니다. 번역된 버전의 날짜 형식이 조정되었는지 확인하거나 ConveyThis가 항상 올바른 날짜를 쓰도록 문자로 월을 쓰십시오.

또한 미국에서는 영국식 시스템을 사용하지만 대부분의 국가에서는 미터법을 사용하므로 사이트에서 측정값을 변환하는 것이 적합한지 여부를 결정해야 합니다.

WordPress를 위한 최고의 번역 플러그인

워드프레스 웹사이트에 번역 플러그인을 추가하는 데에는 많은 옵션이 있으며 모든 옵션이 동일한 방식으로 작동하는 것은 아니며 결과가 다를 수 있습니다. ConveyThis를 사용하면 웹사이트 디자인에 관계없이 완벽한 통합이 보장됩니다.

ConveyThis는 92개 언어를 사용할 수 있는 웹사이트 번역을 위한 최고의 선택입니다. 웹 사이트의 견고한 다국어 버전을 빠르게 사용할 수 있는 신뢰할 수 있는 WordPress 플러그인입니다. 사이트의 레이아웃을 이해하고 모든 텍스트를 감지하여 번역할 수 있습니다. ConveyThis에는 텍스트 사용자 지정을 위한 직관적인 편집기도 포함되어 있습니다.

ConveyThis에는 모든 사이트에서 기본적으로 작동하는 모든 언어 전환기 버튼이 포함되어 있지만 원하는 만큼 편집할 수도 있습니다. 또한 이 문서에 명시된 디자인 원칙을 따릅니다.

  • 웹사이트의 모든 언어 버전에서 일관된 브랜딩.
  • 언어 전환기 및 기본 언어를 선택하는 옵션을 지웁니다.
  • 웹사이트는 자동으로 UTF-8로 인코딩됩니다.
  • 오른쪽에서 왼쪽으로 언어에 적합한 인터페이스

ConveyThis: 신뢰할 수 있는 다국어 웹사이트 솔루션

일반적으로 웹 사이트 번역은 복잡한 과정이라고 믿습니다. 그러나 두통을 다루고 싶지 않기 때문에 연기 할 필요가 없습니다. 그것은 전혀 어려운 아니에요! ConveyThis 사용하면 간단하게 변환됩니다. 그것은 원활하고 빠릅니다.

빠른 설치 후 이제 형식에 영향을 주지 않고 모든 콘텐츠를 번역할 수 있으며 여기에는 다른 앱 및 체크아웃 프로세스에서 생성된 콘텐츠가 포함됩니다. ConveyThis는 다른 사람들처럼 코드를 엉망으로 만들지 않는 다국어 웹 사이트 번역을 위한 쉬운 도구입니다.

사이트의 전문 번역을 주문하는 옵션도 사용할 수 있습니다! 다국어 웹 사이트를 다문화 웹 사이트로 완전히 전환하여 고객 경험을 획기적으로 개선하는 데 도움이됩니다. 웹 사이트를 번역하는 경우 새 고객의 언어로 제공되는 고객 지원도 있어야합니다. 방문자에게 최상의 사용자 경험을 보장하기 위해 콘텐츠 현지화 및 조정에 투자하는 것을 고려하십시오.

댓글 (4)

  1. 웹 사이트에 대한 구글 번역에 대한 시야의 끝! – ConveyThis
    2019 년 12 월 8 일 댓글

    […] 스웨덴 언어로 된 컴퓨터 관련 텍스트. 이와 같은 요소는 설계 팀이 플랫폼을 방문하는 고객을위한 경로, 쉬운 번역 경험 및 이전과 같이 드롭 스크롤 인덱스를 피하는 데 도움이되었습니다.

  2. 모든 언어 플랫폼에 대한 글로벌 검색 엔진 최적화 – ConveyThis
    2019 년 12 월 10 일 댓글

    […] 다국어 플랫폼과 클라이언트 기반에 대한 아이디어가 공식화되고 다음은 언어에 대한 텍스트 성분을 살펴 보는 것입니다 […]

  3. WooCommerce 다국어를 돌리세요 – ConveyThis
    2020 년 3 월 19 일 댓글

    [...] ConveyThis 팀의 언어학자를 통해 문구와 톤이 매장 값에 적합하다는 것을 확신할 수 있도록 편집하고 편집합니다.]

  4. 사용자 정의 는 어떻게 WooCommerce? – ConveyThis
    2020 년 3 월 23 일 댓글

    […] 비주얼은 항상 문화적 의미로 가득 차 있으며, 다른 청중은 매장이 자신의 […

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필요 입력 사항은 표시되어 있습니다*