현지화할 때 디자인이 깨졌다면? 번역을 눈으로 보면서 고쳐봐요

웹사이트 로컬라이제이션은 전 세계 고객을 대상으로 하는 모든 비즈니스 또는 조직에 매우 중요한 조치입니다. 방문자의 사이트 접근성을 높일 뿐만 아니라 사이트의 개인화 수준을 향상시킬 수 있으며, 이는 산업 전반의 경쟁이 점점 더 치열해지면서 점점 더 중요해지고 있는 부분입니다.

물론 자체 사이트의 로컬라이제이션에 있어 번역은 큰 역할을 합니다. 그러나 한 언어에서 다른 언어로 번역하여 웹사이트를 로컬라이즈하는 것은 필요한 단계이지만 디자인 문제를 일으킬 가능성이 있습니다.

이러한 문제는 언어마다 주어진 문장에서 단어가 차지하는 공백이 다를 수 있다는 사실에서 비롯되는 경우가 많습니다. 이로 인해 문자열이 끊어지거나 텍스트가 겹치는 등의 문제가 발생할 수 있으며, 이는 새로운 해외 고객을 유치하려는 경우 이상적이지 않습니다.

다행히도, 이러한 디자인 문제는 Weglot직관적인 시각적 편집 도구를 통해 쉽게 해결할 수 있습니다. 따라서 이번 글에서는 Weglot visual editor 살펴보고 visual editor 웹사이트 번역 과정에서 발생할 수 있는 원치 않는 디자인 문제를 해결하는 visual editor 어떻게 도움이 되는지 알아보겠습니다 visual editor

visual editor 장점은 무엇인가요?

visual editor 사용하면 웹사이트의 실시간 미리보기에서 번역 내용을 확인하고 편집할 수 있습니다. 이를 통해 사이트에 표시될 번역된 콘텐츠의 정확한 모습을 확인할 수 있으며, 사이트 디자인에 어떤 영향이 있을지 여부를 판단할 수 있습니다.

텍스트를 한 언어에서 다른 언어로 번역할 때 번역된 텍스트의 길이가 원본과 다를 수 있습니다. W3.org에 따르면 중국어와 영어의 텍스트는 일반적으로 매우 간결하기 때문에 이러한 언어 중 하나에서 다른 언어로 번역할 때 텍스트 길이와 관련하여 상당히 큰 차이가 발생할 수 있습니다.

실제로 IBM의 '글로벌 솔루션 설계 가이드라인'에 따르면 영어에서 다른 유럽 언어로 번역된 70자 이상의 텍스트의 경우 평균 확장률이 130%에 달합니다.

즉, 이제 번역된 버전의 사이트는 원본 사이트보다 텍스트가 차지하는 전면 사이트 공간이 30% 더 많아집니다. 이와 관련된 문제에는 다음과 같은 것들이 포함될 수 있습니다:

• 겹치는 텍스트
• 접힌 문자열
• 사이트 전체 디자인과의 비대칭성

이러한 문제 해결에 visual editor 어떻게 도움이 되는지, 그리고 그 도구가 어떤 모습인지 더 자세히 알아보기 위해, Weglot visual editor 심층적으로 살펴보고 다양한 언어로 디자인을 미리 볼 수 있도록 지원하는 방법을 소개하겠습니다.

Weglot Visual Editor

visual editor 접근하려면 Weglot visual editor 후 "번역" 탭을 선택하고 "visual editor탭을 클릭하세요.

그러면 웹사이트의 실시간 미리보기로 이동합니다. 처음에는 홈페이지에 있지만, 실제 웹사이트에 있는 것처럼 다른 페이지를 클릭하여 웹사이트의 모든 URL에 액세스할 수 있습니다.

이 단계에서 추가한 다양한 언어로 웹사이트가 정확히 어떻게 보이는지 확인할 수 있습니다. 언어 전환기를 사용하여 언어를 전환하면 디자인 오류를 즉시 발견하고 수정할 수 있습니다. 번역에 대한 모든 편집 내용은 실시간으로 업데이트됩니다.

한 가지 기억할 점은 편집 단계에 있다면 번역에서 아직 '공개'를 누르고 싶지 않을 가능성이 높다는 것입니다. 따라서 번역 목록에서 '공개로 설정'을 해제하여 팀원 이외의 다른 사람이 다국어 웹사이트에 액세스할 수 없도록 하세요. (참고: 번역을 실시간으로 보려면 URL 끝에 ?weglot 추가하세요).

아래 예에서는 프랑스어와 스페인어를 추가했습니다. 언어를 전환하면 웹사이트 디자인, 특히 웹사이트의 헤드라인에서 각 언어가 차지하는 공간의 차이를 즉시 확인할 수 있습니다.

원래 언어로 웹사이트를 만드는 데 많은 시간을 들였을 것이며, 디자인은 브랜드/회사가 인식되는 방식에 큰 영향을 미칩니다. 그렇기 때문에 추가한 새 언어가 해당 디자인에 어떻게 어울리는지 확인하는 것이 기존 웹사이트의 인상적인 효과를 그대로 유지하는 데 중요한 단계입니다.

위 예시에서 볼 수 있듯이 메인 헤더의 텍스트가 프랑스어와 스페인어에서는 훨씬 더 길다는 점이 흥미롭습니다. Visual Editor 사용해 보면 웹사이트 소유자가 이 부분을 조정하고 싶어 할 Visual Editor 분명합니다.

Visual Editor 디자인 팀뿐만 아니라 팀 내 모든 구성원이 사용할 수 있도록 Visual Editor . 웹사이트에서 번역이 실제로 표시되는 컨텍스트 내에서 편집할 수 있는 훌륭한 도구입니다. 편집 기능에 대해 자세히 알아보기 여기에서 자세히 알아보세요.

그렇다면 디자인에 문제가 있다면 어떻게 될까요?

Visual Editor 사용할 때 번역된 텍스트가 전체 디자인에 표시되는 방식에 몇 가지 문제가 있음을 눈치챌 수 Visual Editor . 이제 이러한 잠재적 문제를 예상하고 그에 따라 조정할 수 있습니다. 다음과 같은 몇 가지 수정 조치를 취할 수 있습니다:

콘텐츠의 문구를 바꾸거나 합성하는 것을 고려하세요: 번역된 콘텐츠 버전이 디자인 문제를 일으키는 경우, 번역이 잘 되지 않거나 너무 많은 공간을 차지하는 특정 부분을 주저하지 말고 벗겨내고 편집하세요. 이 작업은 팀 내에서 수행하거나 Weglot 대시보드에서 직접 전문 번역가와 협력하여 수행할 수 있습니다.

예를 들어 영어로 된 '회사 소개' 탭은 프랑스어로 "A propos de nous"로 번역되지만 사이트의 할당된 공간에 맞지 않을 가능성이 높습니다. 그러나 이 경우 간단한 해결책은 예를 들어 "A propos de nous"를 "Equipe"로 수동으로 편집하는 것입니다.

Weglot 대시보드를 사용하여 전문 번역을 위해 번역을 보내는 경우, 이 메모 섹션은 번역가에게 다르게 표현할 수 있는 단어를 발견한 것을 알려줄 수 있는 좋은 장소입니다.

웹사이트 글꼴 크기 변경: 한 언어에서 다른 언어로 번역할 때 번역된 언어의 텍스트가 너무 크거나(또는 너무 작게) 표시된다고 느끼신다면, 번역된 언어의 글꼴 크기를 줄이거나 늘릴 수 있습니다. 이는 Weglot 언어 전환기 아래 맞춤 CSS 섹션에서 쉽게 설정할 수 있습니다.

예를 들어 아래 CSS는 독일어 글꼴의 크기를 16px로 조정합니다:

html[lang=de] body {

글꼴 크기 : 16px;

}

웹사이트의 글꼴 변경: 또는 텍스트를 다른 언어로 번역할 때 사용되는 글꼴을 변경하는 것이 합당한 경우도 있습니다. 일부 글꼴은 특정 언어에서 잘 작동하지 않아 디자인 문제를 악화시킬 수 있기 때문입니다. 예를 들어 사이트의 프랑스어 버전에는 Roboto 글꼴을 사용하고 아랍어 버전에는 해당 언어에 훨씬 더 적합한 Arial 글꼴을 사용하려는 경우 다른 CSS 규칙을 사용하면 가능합니다.

아래 CSS는 사이트가 아랍어인 경우 글꼴을 Arial로 조정합니다:

html[lang=ar] body {

글꼴-가족 : arial;

}

글로벌 웹 디자인을 고려하세요: 물론 다소 늦은 감이 있지만 웹사이트 제작 초기 단계이고 여러 언어를 추가하려는 경우 나중에 발생할 수 있는 문제를 방지하기 위해 웹사이트 디자인에 여유 공간을 남겨두는 것을 고려할 수 있습니다. 여기에서 더 많은 초기 디자인 팁을 확인하세요.

Visual Editor 디자인에 민감한 도구로 Goodpatch에 완벽하게 어울립니다

Weglot visual editor 활용해 디자인 오류를 완벽히 수정해낸 기업의 사례로 독일 디자인 회사 굿패치가 있습니다 . 이미 영어 버전의 웹사이트를 운영 중이었지만, 디자인에 민감한 독일어권 시장을 더 많이 끌어들이기 위해 독일어 버전 출시를 추진했습니다.

이 프로젝트에 착수할 때 가장 큰 의구심 중 하나는 이 프로젝트가 웹 디자인에 미칠 영향이었습니다. 하지만 Weglot 만나자마자 걱정이 사라졌습니다.

굿패치 팀으로부터 큰 피드백을 받아 성공 사례에 대한 사례 연구를 만들었습니다. 굿패치의 UX 및 UI 디자이너 팀은 번역된 언어가 웹 페이지에 어떻게 표시되는지 확인할 수 있다는 점을 매우 중요하게 생각했고, 이를 통해 긴 카피에 맞게 수정해야 할 부분이나 디자인에서 개선할 수 있는 부분을 확인할 수 있었습니다.

굿패치의 팀은 다른 번역 솔루션도 조사해 보았지만, 반복적이고 시각적이며 경험을 우선시하는 디자인 중심 회사로서의 접근 방식을 반영하는 Weglot역량을 높이 평가했습니다.

결론:

보셨듯이, Weglot visual editor 사용하는 것은 visual editor 디자인 측면에서의 현지화에 대한 걱정을 덜어줍니다. 디자인을 위해 번역을 희생하지 마시고, 번역을 위해 디자인을 희생하는 일도 절대 없어야 합니다. 때로는 정말로 두 마리 토끼를 모두 잡을 수 있습니다 😉

Weglot 10일 무료 체험판을 사용해보고 번역을 시각적으로 편집하는 것이 얼마나 쉬운지 직접 확인해 보세요!

‍