자신의 블로그에 구글 번역 기능 달기

개요

워드프레스의 플러그인으로도 있는 구글 번역 기능을 자신의 블로그에도 달아봅시다.
이 포스트에서의 구현 방식은 구글 번역 서비스의 URL의 구조적 특성을 이용하여 자바스크립트를 이용해 인자를 전달받아, 페이지를 이동시키는 방식입니다.

들어가며

구글 번역 기능을 이용하여 자신의 블로그를 외국어로 보여주고자 한다면, 먼저 구글 번역 서비스의 URL이 어떤 구조로 이루어져 있는지부터 알아야 합니다.

구글 번역 페이지로 가서 출발어를 영어로, 도착어를 한국어로 하여 아무 URL이나 입력해 보신 후, 번역된 페이지의 링크를 복사해 보면 다음과 같을 겁니다.

http://translate.google.com/translate?sl=en&tl=ko&u=http://google.com

이 url 의 구조를 보면, 페이지를 번역하는데에 필요한 인자들을 &로 받는다는 것을 쉽게 알 수 있습니다.

하나씩 따져 보도록 하죠.

sl=en
출발어를 영어로 선택하였으니, sl 은 출발어를 지칭하는 것일 겁니다.

tl=ko
도착어를 한국어로 선택하였으니, tl 은 도착어를 지칭하는 것일 겁니다.

u=URL
입력하였던 URL이므로, 번역할 페이지를 지칭하는 것임을 알 수 있습니다.

이를 종합해서 정리해 보면, 우리가 다른 언어의 페이지를 포스팅 할 일은 없으니 출발어는 언제나 '한국어'가 될 것입니다. 그러므로 sl=ko 확정!

그리고 도착어를 정하여 링크를 걸어야 하는데, 번역할 각 언어당 하이퍼링크를 일일히 걸어주게 되면 'tl' 에 해당하는 부분만이 다름에도 불구하고 긴 경로를 적어주어야 하기 때문에 여러모로 번거로운 노가다 작업이 되어버립니다.

물론 그렇게 작업해도 상관은 없습니다만, 만약 나중에 경로를 수정해야 할 일이 생겨버리면 이를 또 일일히 노가다로 수정해 주어야만 하고, 또, 페이지 용량도 쓸데없이 커진다는 단점이 있습니다.

그러므로 여기에서는 조금 잔꾀를 부려, 자바스크립트 내에서 함수를 만들어서 이를 이용해 보도록 하겠습니다.

페이지 이동을 위한 자바스크립트

만들어낼 함수에서의 초점은 tl의 값 만이 변한다는 것이므로, tl의 값을 함수의 인자 형태로 받도록 만들면 추후 관리도 편리해지고, 전체적인 코드도 많이 간소화 되는 이점이 있을 것입니다.

<script language="javascript">
function translate(targetlang) {
    document.location.href = 'http://translate.google.co.kr/translate?u=' + 블로그 주소 + '&sl=ko&tl=' + targetlang;
}
</script>

요렇게 만들어버린 다음, <span onclick="translate(en)"> 이런 식으로 필요한 곳에서 호출하면 간단하게 활용이 가능하죠.

만약 현재 보고 있는 페이지를 바로 번역해주는 링크를 만들어 두고 싶다면?

위의 스크립트에서 '블로그 주소'에 해당되는 부분을, window.location.href 로 변경해주기만 하면 됩니다.

<script language="javascript">
function translate(targetlang) {
    document.location.href = 'http://translate.google.co.kr/translate?u=' + window.location.href + '&sl=ko&tl=' + targetlang;
}
</script>

요렇게 말이죠.

그리고서는 필요한 부분에 다음과 같이 둘러 싸면 됩니다.

<a href="#" onclick="translate('en')">Translate to English</span><br />

샘플 다운로드

sample.zip

※ IE 에서는 로컬에서의 자바스크립트 실행을 제한하므로, 차단된 컨텐츠를 허용해 주시기 바랍니다.
※ 예제에서는 span 에 onclick 을 걸었지만, 하이퍼링크에 걸어도 됩니다.