Smartcat 웹사이트 번역기: 기능과 작동 원리

Smartcat의 웹사이트 번역기는 CMS, 백엔드 또는 코드베이스를 변경하지 않고 웹사이트를 번역하는 스크립트 기반 현지화 도구입니다.

여러 개의 URL로 구성된 별도의 언어 버전을 만드는 대신, 이 도구는 브라우저에서 렌더링된 페이지에 직접 적용됩니다. 사이트에 간단한 자바스크립트 코드 조각을 추가하고 대상 언어를 선택하기만 하면, 페이지가 자동으로 번역되어 전 세계 방문자에게 제공됩니다.

번역된 콘텐츠는 CDN에 저장되어 있으며, 방문자가 사이트를 불러올 때 동적으로 렌더링됩니다.

번역 작업은 백엔드가 아닌 렌더링된 웹사이트를 기반으로 이루어지기 때문에, 대개 엔지니어링 팀의 큰 개입 없이도 배포할 수 있습니다. 즉, Smartcat을 사용하면 콘텐츠 및 마케팅 팀에서 직접 번역을 처리할 수 있습니다.

Smartcat의 번역 기능은 간단히 말해 - 사용자가 브라우저에서 보는 내용을 번역하는 것입니다.

누군가 귀하의 사이트를 방문하면, 브라우저가 HTML, CSS, 자바스크립트를 바탕으로 페이지를 렌더링하며, 이 세 가지가 결합되어 최종적인 화면이 생성됩니다.

이 렌더링된 페이지는 DOM( Document Object Model )이라는 구조로 존재하며, 번역기는 바로 이 구조를 기반으로 작동합니다.

사이트에 추가된 작은 자바스크립트 코드 조각이 페이지가 로드될 때 실행됩니다. 이 코드는 방문자의 언어 설정을 감지하고, Smartcat의 CDN에서 해당 언어로 번역된 내용을 가져와 페이지에 표시된 텍스트를 대체합니다. 사용자는 수동으로 언어를 전환할 수 있으며, 사이트 내를 이동할 때도 설정한 언어가 유지됩니다.

전체 번역 시스템이 브라우저 레이어에서 작동하기 때문에, 웹사이트의 백엔드 스택은 여기서 중요하지 않습니다. 사이트가 워드프레스, 쇼피파이, 웹플로우, 리액트 프론트엔드로 구축되었든, 심지어 구형 레거시 시스템으로 구축되었든 상관없습니다. 사이트가 브라우저에서 렌더링되기만 하면 번역기가 작동합니다.

또한 스크립트는 초기 페이지 로딩이 끝난 후에도 계속 실행됩니다.. 최신 웹사이트들은 모든 요소를 한 번에 불러오지 않습니다. 클릭 후 모달 창이 나타나거나, API를 통해 드롭다운 메뉴가 채워지거나, 양식 제출 후 유효성 검사 메시지가 표시되는 경우가 있습니다.

따라서, 스크립트는 페이지를 한 번 스캔하고 중단하는 대신, DOM에 새로운 텍스트 노드가 나타나는지 지속적으로 감시하며, 렌더링되는 즉시 이를 번역합니다.

Smartcat의 설정 과정은 생각보다 훨씬 간단합니다.

사이트의 URL을 입력하고 대상 언어를 선택하면 프로젝트가 시작됩니다. 그러면 Smartcat은 렌더링된 페이지를 프록시 처리하여 번역한 후, 자체 인터페이스 내에서 사이트의 미리보기 버전을 생성합니다.

다음으로, 콘텐츠 팀은 번역된 페이지를 검토하고, 수정을 가한 후 최종 버전을 승인할 수 있습니다.

번역이 승인되면 Smartcat은 이를 경량 JSON 자산으로 변환하여 자사 CDN에 게시합니다. 이후에는 웹사이트 페이지 헤더에 단 하나의 자바스크립트 스니펫을 추가하기만 하면 라이브 사이트에서 번역이 활성화됩니다.

이후 사용자가 사이트를 방문할 때마다 CDN에서 번역된 콘텐츠를 불러와 방문자가 선호하는 언어로 제공합니다.

다음 링크에서 단계별 설정 가이드를 여기에서 확인하실 수 있습니다.

Smartcat의 아키텍처는 기존의 번역 방식에 비해 몇 가지 주요 이점을 제공합니다. 그 내용은 다음과 같습니다:

기존 웹사이트 번역 도구의 가장 큰 단점 중 하나는 번역 범위가 제한적이라는 점입니다. 메인 페이지의 콘텐츠는 번역되지만, 상호작용 요소는 종종 번역되지 않습니다.

양식은 원어 그대로 유지되고, 조동사는 그대로 표시되며, 드롭다운 메뉴와 유효성 검사 메시지는 번역되지 않은 채 남습니다. 방문자에게는 사이트가 부분적으로만 번역된 것처럼 보입니다.

Smartcat Translator는 렌더링된 DOM에서 직접 작동하기 때문에, 초기 페이지 로드 후 표시되는 콘텐츠도 처리할 수 있습니다. 여기에는 모달, 팝업, 알림, 드롭다운과 같은 동적으로 렌더링되는 UI 요소와, 페이지가 상호작용 가능한 상태가 된 후 JavaScript 프레임워크에 의해 렌더링되는 모든 구성 요소가 포함됩니다.

따라서, 페이지의 정적 스냅샷을 번역하는 대신, 이 스크립트는 인터페이스에 나타나는 새로운 텍스트를 지속적으로 감지하여 렌더링되는 즉시 번역합니다.

Smartcat 는 자체 서버에서 직접 전송하는 대신 CDN을 통해 번역물을 제공합니다.

그 결과, 번역 자산은 용량이 작고 캐시되어 방문자와 가까운 에지 위치에서 제공되므로, 대규모 다국어 사이트에서도 빠른 전송이 가능합니다.

이는 또한 복원력을 의미합니다. 번역물이 게시되면, Smartcat이 다운되어 일시적으로 이용할 수 없는 상황에서도 계속 작동합니다.

또한 이 시스템은 모든 페이지를 미리 번역할 필요가 없습니다.

방문자가 번역되지 않은 콘텐츠 페이지에 접속하면, 스크립트가 필요에 따라 번역본을 생성하여 캐시에 저장하고, 이후 방문 시 이를 재사용할 수 있습니다. 따라서 그 이후의 모든 방문자는 즉시 캐시된 버전을 확인할 수 있습니다. Smartcat은 이 메커니즘을 "크라우딩(crowding)"이라고 부릅니다.

유일한 단점은 새로운 콘텐츠나 업데이트된 콘텐츠를 처음 방문할 때 발생하는 약간의 지연, 즉 번역 지연입니다.

Smartcat은 Google, DeepL, Gemini, ChatGPT, Claude, Apple, Amazon, Microsoft 등 다양한 번역 서비스 제공업체를 지원하며, 자체 로직을 적용해 각 언어 쌍에 가장 적합한 서비스를 선정합니다.

웹사이트에서는 종종 일관되게 재사용해야 하는 특정 용어, 브랜드 고유 명칭 및 업계 전문 용어를 사용합니다. 이러한 용어들은 번역 과정에서 종종 제대로 전달되지 않을 수 있습니다.

Smartcat은 번역 메모리를 지원하며, 언어 간에 특정 용어를 일관되게 재사용할 수 있게 해줍니다. 또한 LLM 엔진을 위한 맞춤형 프롬프트를 통해 어조와 스타일을 세밀하게 조정하여 번역 품질을 높일 수 있습니다.

웹사이트에는 헤더, 푸터, 탐색 메뉴, 배너와 같이 여러 페이지에 걸쳐 반복적으로 나타나는 섹션들이 있습니다.

st-shared-section 속성을 사용하면 팀이 공유 섹션을 정의할 수 있어, 반복적으로 사용되는 요소를 한 번만 번역하고 모든 곳에서 일관되게 재사용할 수 있습니다.

표면적인 본문 텍스트 외에도, Smartcat은 SEO에 영향을 미치는 요소들을 번역할 수 있는 옵션을 제공합니다.

페이지 제목, 설명, 이미지 대체 텍스트, 자리 표시자 텍스트, ARIA 레이블, hreflang 태그와 같은 사이트의 메타데이터도 번역됩니다.

일부 웹사이트에는 번역 처리를 해서는 안 되는 개인 정보나 민감한 정보가 포함되어 있을 수 있습니다.

이를 해결하기 위해, Smartcat은 사이트 소유자가 페이지의 특정 섹션을 번역 대상에서 명시적으로 제외할 수 있도록 지원합니다.

st-ignore 속성이 지정된 요소는 해당 요소 내부의 콘텐츠와 함께 번역 시스템에서 완전히 건너뜁니다. 이를 통해 팀은 계정 데이터, 결제 정보, 내부 도구 또는 기타 민감한 인터페이스 영역을 번역 워크플로에서 분리할 수 있습니다.

데이터 처리를 보다 엄격하게 통제하고자 하는 사이트의 경우, 주문형 번역 기능을 완전히 비활성화하고 미리 게시된 번역 자료만 사용할 수도 있습니다.

모든 번역 모델에는 장단점이 따릅니다. Smartcat의 스크립트 기반 접근 방식은 앞서 언급한 여러 장점을 가지고 있지만, 주로 작동하는 브라우저 환경으로 인해 몇 가지 제약 사항도 있습니다.

가장 큰 장애물 중 하나는 도메인 간 iframe입니다.

사이트에 타사 예약 도구, 결제 양식, 내장형 일정 관리 도구 또는 외부 위젯이 포함된 경우, 브라우저 보안 규칙으로 인해 스크립트가 해당 콘텐츠에 접근하는 것이 차단됩니다..

이 제한 사항은 모든 브라우저 기반 번역 시스템에 적용됩니다. 유일한 해결 방법은 iframe 내에 번역 스크립트를 별도로 설치하는 것인데, 이는 임베드된 소스도 직접 제어할 수 있는 경우에만 가능합니다.

레이아웃은 또 다른 흔한 특수 사례로, 특히 아랍어나 히브리어와 같은 RTL 언어에서 자주 발생합니다. Smartcat은 브라우저의 기본 RTL 지원 기능을 사용하여 페이지 방향을 전환할 수 있지만, 사이트의 CSS를 재작성할 수는 없습니다.

고정 너비 컨테이너, 하드코딩된 위치 지정, 또는 좌우 배치를 전제로 한 레이아웃은 번역된 텍스트가 길어지거나 인터페이스가 거울처럼 반전될 경우 종종 깨집니다.

독일어나 프랑스어와 같은 언어에서 텍스트 확장 시에도 동일한 문제가 발생합니다. 인컨텍스트 에디터는 검토 과정에서 이러한 문제를 파악하는 데 도움이 되지만, 근본적인 레이아웃 문제를 해결하는 것은 Smartcat의 범위를 벗어납니다. 웹사이트 소유자나 엔지니어링 팀에서 레이아웃 문제를 해결해야 합니다.

방문자가 아직 번역되지 않은 콘텐츠에 접속하면, 시스템은 해당 콘텐츠를 제공하기 전에 번역을 생성하고 캐시에 저장합니다.

이후 방문자들은 캐시된 버전을 즉시 확인할 수 있지만, 첫 방문 시에는 잠시 지연이 발생할 수 있습니다.

Cloudflare와 같은 봇 방지 시스템은 요청이 AWS IP 주소에서 발생하고 자동화된 트래픽처럼 보이기 때문에, 설정 과정에서 Smartcat의 미리보기가 로드되는 것을 차단하는 경우가 있습니다. 이를 해결하려면 Smartcat의 고정 IP 주소를 허용 목록에 추가해야 합니다.

React와 같은 프레임워크로 구축된 단일 페이지 애플리케이션은 번역된 HTML 구조가 올바르게 유지되지 않을 경우 가끔 렌더링 충돌이 발생할 수 있습니다.

DOM에 콘텐츠를 삽입하는 브라우저 확장 프로그램 역시 번역 레이어가 처리해야 하는 불필요한 데이터를 생성할 수 있습니다. Smartcat은 이를 완화하기 위해 알려진 확장 프로그램에 대한 필터와 원문 언어 감지 기능을 제공합니다.

Smartcat Website Translator는 모든 사이트에 적합한 것은 아닙니다.

이는 기존 인프라를 재구축하지 않고도 다국어를 지원해야 하는 팀에게 가장 유용합니다.

이러한 사례로는 해외 사용자를 대상으로 하는 SaaS 제품, 콘텐츠가 풍부한 웹사이트, 그리고 엔지니어링 릴리스 주기와 연동된 현지화를 원치 않으면서 새로운 시장으로 진출하는 기업들이 있습니다.

페이지가 몇 개 안 되거나 대상 언어가 한두 개뿐인 소규모 사이트의 경우, 간단한 CMS 플러그인이나 수동 워크플로우만으로도 충분한 경우가 많습니다.

콘텐츠의 양, 지원 언어 수, 업데이트 빈도가 늘어날수록 Smartcat과 같은 브라우저 기반 번역 시스템의 장점이 더욱 두드러집니다.

따라서, 웹사이트용 번역 도구를 찾고 계시면서 코드 기반을 변경하거나 중복 URL을 관리하는 번거로움을 피하고 싶으시다면, Smartcat 웹사이트 번역기 를 확인해 보세요.