참고로, 게시글 포함 Discourse 전체 번역이 가능합니다

다국어 Discourse 사이트를 운영하시는 분들을 위해, 최근 제가 호스팅 중인 사이트에 성공적으로 통합한 제품 정보를 공유하고자 합니다. 저는 해당 회사와 고객 외에는 어떠한 관련도 없으며, 보상도 받지 않습니다. 단순히 이 기술에 깊은 인상을 받아, 번역이 얼마나 어려운 작업인지 알기에 이 제품이 그 난이도를 얼마나 쉽게 해결하는지 알려드리고 싶었습니다.

이 제품의 이름은 Linguise입니다. Discourse(또는 유사한 기술)와 어떻게 연동되는지 확인하시려면 이 영상을 참고하세요.

기본적으로 계정을 생성하면(30일간 무료) 사이트의 메인 도메인에 2글자 언어 접두사가 포함된 DNS CNAME을 설정하는 과정을 안내해 줍니다. 예를 들어, 제공하려는 각 언어별로 fr.mysite.com, es.mysite.com과 같은 서브도메인을 설정하는 방식입니다.

이후 Discourse 사이트에 포함해야 하는 맞춤형 요소를 제공합니다. 가장 쉬운 방법은 새로운 테마 컴포넌트를 생성한 후, 그들의 스크립트 명령을 <Head> 섹션에 배치하는 것입니다.

이것만으로 모든 설정이 끝납니다. 이제 사이트에 언어 전환기가 표시됩니다(위치와 기타 특성도 쉽게 조정할 수 있습니다).

해당 전환기를 클릭하여 다른 언어를 선택하면 페이지가 새로고침됩니다. 화면 요소들이 1~2초간 흐려졌다가, 곧이어 전체 페이지가 기계 번역된 모습으로 나타납니다.

메뉴, 제목, 카테고리 이름, 게시글 제목, 게시글 본문 등이 모두 포함되며, 관리자 화면과 설정 화면까지 번역됩니다.

정말 놀라운 기능입니다. 85개 언어 중 선택할 수 있으며, 요금제는 번역되는 단어 수에 기반합니다. 어떤 언어가 사용되었는지는 중요하지 않습니다. 월 약 15달러부터 시작하며, 무제한 사용 시 월 최대 45달러까지입니다.

이 기술은 거의 모든 웹사이트에서 작동합니다. Wordpress, Joomla, Squarespace, Wix, Drupal 및 수많은 전자상거래 사이트 등을 직접 지원합니다. 그러나 Discourse에서 이 기술이 작동하는 방식은 소스 코드나 백엔드 접근 권한이 없는 사이트에서도, 해당 태그를 포함할 수 있는 방법만 있다면 어떤 사이트든 번역할 수 있는 일반적인 메커니즘입니다.

6개의 좋아요

테마 컴포넌트를 공유해 주실 수 있을까요?

번역(카테고리 이름, 토픽 제목 등)을 사용자 정의할 수 있나요?

3개의 좋아요

Linguise의 비디오 가이드만으로는 내 Discourse 사이트를 번역하도록 설정하는 데 충분하지 않습니다.

플랫폼을 선택해야 하는 첫 번째 단계에서 'Discourse’가 옵션으로 제공되지 않습니다. 또한, Discourse 사이트를 사용하는 경우 해당 목록에서 무엇을 선택해야 하는지에 대해 유튜브 영상에서는 아무런 설명이 없습니다(올바른 선택을 하지 않으면 다음 단계로 진행할 수 없습니다).

바스힌다님, 안녕하세요. "기타 클라우드 호스팅 CMS"를 선택하셨네요.

2개의 좋아요

Thomas님,

관리자/테마/컴포넌트(Admin/Themes/Components)로 이동하여 빈 테마 컴포넌트를 쉽게 직접 만들 수 있습니다.

설치(Install) 버튼을 클릭한 후, 나타나는 대화 상자에서 새 항목 만들기(Create New)를 클릭하세요:

다음 대화 상자에서 이름을 지정하세요:

이렇게 하면 빈 컴포넌트가 생성됩니다. 이제 CSS/HTML 편집(Edit) 버튼을 클릭하기만 하면 됩니다:

Head 탭으로 이동하세요. 여기서 Linguise 웹사이트에서 설정을 완료할 때 제공받은 커스텀 스크립트 태그를 붙여넣으면 됩니다:

제 이미지에는 몇 가지 주석이 포함되어 있지만, 실제로는 빈 목록이 표시되며 여기에 Linguise의 커스텀 URL을 붙여넣게 됩니다.

참고로, Linguise 기술 지원팀과 함께 작업하던 중 언어를 변경할 때 페이지가 수동으로 새로 고침되는 문제가 발생하여 스크립트 태그를 약간 수정해야 한다는 사실을 발견했습니다.

태그의 시작 부분을 <script defer src=로 변경하면 수동 새로 고침 문제가 해결됩니다.

부연 설명으로, 이러한 간단한 커스텀 컴포넌트는 현재 사용 중인 테마에 오버라이드를 적용하고 여러 화면 요소에 영향을 주기 위한 안전하고 우아한 방법으로 사용할 수 있습니다.

예를 들어, 제 사이트에서는 사용자들에게 혼란을 줄 수 있다고 판단된 여러 화면 요소를 비활성화했습니다. 이를 위해 CSS 탭에 display: none 속성을 가진 몇 가지 CSS 선택자를 추가했습니다.

예를 들어, 아래 코드는 사이드바의 섹션 추가(Add Section) 버튼을 숨깁니다:

.sidebar-wrapper .sidebar-footer-wrapper .btn-flat.add-section {
    display: none;
}

가장 까다로운 부분은 CSS 선택자(즉, 왼쪽 중괄호 앞부분)를 파악하는 것입니다. 하지만 웹 브라우저의 개발자 도구를 사용하면 일반적으로 화면 항목을 찾고 해당 선택자를 복사할 수 있습니다.

성공을 기원합니다!

3개의 좋아요

정말 훌륭하고 자세한 설명입니다.
감사합니다.

1개의 좋아요

Linguise를 Discourse와 잘 연동하는 과정에서 얻은 추가적인 세부 사항에 대해 후속 보고를 드리려 합니다.

우선, 저희 사이트에서는 다른 사용자 저장소와 사용자를 인증하기 위해 Discourse SAML 플러그인을 사용하고 있습니다. 해당 환경에서 쿠키 관련 문제가 발생한다는 것을 발견했습니다.

다행히 Discourse의 탁월한 호스팅 업체인 Communiteq(https://www.communiteq.com/) 팀이 문제를 분석하고, 이를 해결하기 위한 작은 수정 사항을 플러그인 형태로 제공해 주었습니다. 다만 대부분의 사용자에게는 이 플러그인이 필요하지 않을 것입니다.

알아두셔야 할 한 가지 제한 사항이 있습니다. Linguise는 기본 언어로 설정된 상태에서는 번역을 수행하지 않습니다. 저희의 경우 기본 언어는 영어입니다.

보통은 문제가 되지 않지만, 예외적인 경우가 하나 있습니다. 다른 언어(예: 스페인어)로 작성된 게시글은 Linguise가 영어로 설정되어 있을 때 스페인어로 그대로 표시됩니다. 다른 언어로 설정되어 있다면 번역이 되지만, 기본 언어인 영어에서는 번역되지 않습니다.

Linguise가 향후 이 부분을 개선할 수 있지만, 이에 대한 확약은 없습니다.

이 문제를 우회하기 위해서는 Discourse Translator 플러그인도 함께 사용하는 것이 좋습니다. Google, Yandex, Microsoft 등 번역 서비스 제공업체 중 하나에 대한 API 접근 권한을 설정한 후, 해당 자격 증명을 플러그인에 구성해야 합니다.

이렇게 설정하면, 영어로 스페인어 사용자의 게시글을 읽을 때 작은 지구본 아이콘이 표시됩니다.

이 아이콘을 클릭하면 원문 아래에 번역된 내용이 표시됩니다.

두 플러그인을 함께 사용하면 모든 상황을 커버할 수 있지만, 제가 원했던 만큼 우아하지는 않습니다.

저희는 월 50만 단어까지 무료인 Google Cloud 계정을 사용하며, 이 한도를 초과하는 경우는 드뭅니다. 다른 벤더들도 유사한 프로모션을 제공하고 있을 것으로 생각합니다.

이 정보가 누군가에게 도움이 되기를 바랍니다.

3개의 좋아요