티스토리 글에 번역기 다는 법

티스토리에 번역기 다는 법 서론

블로그 글이 자동으로 번역된다면 좋겠다는 생각이 들어서 인터넷으로 어떻게 번역기를 다는지 찾아보았다. 본 글은 Egoish 이고 님 블로그에서 티스토리 해외 유입 늘리기라는 글을 보고 실천하여 작성한 글이다. 똑같이 하지는 않고 약간의 수정을 가했는데 이를 설명하고자 한다. 이고님 방법 외에도 인터넷에 있는 Gtanslate 이라는 사이트에서 번역기 배너를 다는 법도 있었다. 코드를 보면 알겠지만 이고님 방법도 Gtranslate 을 이용한 방법이고 구글 번역기를 이용하는 방법이다. 이고님 블로그에서 설명된 바와 같이 이 방법은 배너를 바로 삽입하는 것과 달리 블로그 포스팅 자체에 번역기를 보여주는 방법이라서 이걸 이용하기로 했다. 이용한 코드는 이고님 블로그에서 다운 받아서 이용하였다.

번역기 코드 설명

코드는 HTML 형식으로 글쓰기에서 HTML 모드에 들어가서 입력하면 된다. 참고로 코드를 잘 아는 건 아니고 그냥 대충 이부분이 이런 역할을 하는 구나 정도만 알고 있다. 혹시 커스터마이즈를 하고 싶은 분께 도움이 될 수 있을 거 같아서 설명하는 글을 쓰게 되었다. 코드는 세 가지로 구성되어 있다.

실제 번역을 수행하는 코드.
국기 그림을 클릭하면 해당 국가에서 쓰는 언어로 자동 번역해 주는 코드.
Select language를 클릭에서 원하는 언어가 있을 경우 이를 눌러서 번역하는 코드.

즉, 해당 코드에서 원하는 언어의 순서의 코드 순서를 바꾸는 식으로 응용할 수 있다.

아래 간단화한 코드를 가지고 왔다. 이해를 돕기 위해 한국어에서 영어로 바꾸는 코드만 남겨 두었다.

<select onchange="doGTranslate(this);">
<option value="">Select Language</option>
<option value="ko|en">English</option>
</select><div id="google_translate_element2"></div>

<script type="text/javascript">
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'ko',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>

</div>

1. 실제 번역을 수행하는 코드

<script type="text/javascript">
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'ko',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>

이 코드에 보이다 시피 자바 스트립트로 기능은 구글 번역이다. 그래서 주소도 구글 닷 트랜스레잇 이다. 페이지 랭귀지 (pageLanguage) 즉, 원래 블로그 글은 한국어로 쓰였다는 점에서 'ko'라고 표현되어 있다.

위에 부분만 html 서식으로 붙여 넣어도 구글 자동 번역 배너가 생긴다.

2. 국기 그림을 클릭하면 해당 국가에서 쓰는 언어로 자동 번역해 주는 코드.

<a href="#" onclick="doGTranslate('ko|en');return false;" title="English" class="gflag nturl" style="background-position:-0px -0px;"><img src="//gtranslate.net/flags/blank.png" height="24" width="24" alt="English" /></a>


<style type="text/css">
<!--
a.gflag {vertical-align:middle;font-size:24px;padding:1px 0;background-repeat:no-repeat;background-image:url(//gtranslate.net/flags/24.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(//gtranslate.net/flags/24a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
-->
</style>

이 부분이다. 맨 첫 줄의 "doGTranlsate('ko|en') 이 부분이 ko (한국어)를 en(영어)로 바꾸라는 명령어와 국가그림을 링크한 부분이다. 여기 있는 img src가 국기가 그려져 있는 그림 주소인데, 이렇게 외부 사이트 주소가 싫다면, 위 이미지를 다운 받아서 html 서식의 이미지 업로드에 올려두고 본인 블로그 이미지 주소로 넣어주어도 된다. 여기에 있는 position -0px -0px는 해당 그림에서 국기가 있는 위치이다.

여기서 <style > ... </style> 부분이 있어야 실제로 기능한다.

중국어로 바꾸고 싶다면

첫 번째 줄을 복사 한후 아래 부분을 바꿔주고 그걸 추가해주면 된다.

doGTranslate('ko|zh-CN')

style="background-position:-300px -0px;"

title="Chinese (Simplified)

alt="Chinese (Simplified)"

일본어로 바꾸고 싶다면

아래와 같이 바꿔주면 된다.

doGTranslate('ko|ja')

style="background-position:-700px -100px;"

title="Japanese"

alt="Japanese"

즉, 이와 같이 일본어와 중국어를 추가할 경우 맨 윗 줄 코드는 아래와 같이 바뀐다.

<a href="#" onclick="doGTranslate('ko|en');return false;" title="English" class="gflag nturl" style="background-position:-0px -0px;"><img src="//gtranslate.net/flags/blank.png" height="24" width="24" alt="English" /></a>
<a href="#" onclick="doGTranslate('ko|zh-CN');return false;" title="Chinese (Simplified)" class="gflag nturl" style="background-position:-300px -0px;"><img src="//gtranslate.net/flags/blank.png" height="24" width="24" alt="Chinese (Simplified)" /></a>
<a href="#" onclick="doGTranslate('ko|ja');return false;" title="Japanese" class="gflag nturl" style="background-position:-700px -100px;"><img src="//gtranslate.net/flags/blank.png" height="24" width="24" alt="Japanese" /></a>

2. Select language를 클릭에서 원하는 언어가 있을 경우 이를 눌러서 번역하는 코드.

<select onchange="doGTranslate(this);">
<option value="">Select Language</option>
<option value="ko|en">English</option>
</select><div id="google_translate_element2"></div>

위 부분이 바로 메뉴에서 언어를 선택해서 해당 언어로 바꾸어 주는 코드 이다.

드랍 다운 메뉴에 나오는 안내문이 < option value=""> "Select Language"</option> 부분이다.

그리고 가능한 메뉴들이 <option value="ko|en">English </option>이다.

이 코드를 해석 하면 위에서 본 대로 "ko|en" 즉 한국어를 영어로 바꾼다는 값이 쓰여 있고 이건 "English"로 보인다고 나와있는 것이다.

즉 다른 언어를 추가하고 싶다면 이 부분을 추가하면 된다.

 <option value="ko|zh-CN">Chinese (Simplified)</option>
 <option value="ko|ja">Japanese</option>
 <option value="ko|vi">Vietnamese</option>
 <option value="ko|tl">Filipino</option>
 <option value="ko|fr">French</option>
 <option value="ko|it">Italian</option>
 <option value="ko|th">Thai</option>

위에서 부터 중국어, 일본어, 베트남어, 필리핀어, 프랑스어, 이탈리어, 태국어 이다. 이 외에도 본인이 원하는 번역 옵션을 넣어주면 된다.

이 때 두가지 스크립트 코드가 꼭 있어야 한다.

첫번째 스크립트는 1번에서 다룬 구글 기능이고 2번째는 모든 구글 언어 중 위에 옵션으로 선택한 것들만 그랍다운 메뉴에 있도록 하는 기능이다.

<script type="text/javascript">
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'ko',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>


<script type="text/javascript"> 
/* <![CDATA[ */ 
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{})) 
/* ]]> */ 
</script>

후기

html에 넣으면 잘 작동한다. 막상 이렇게 코드를 적용하고 나서 드는 생각은 자동 번역 된 글이 구글에서 검색되는게 아닌 이상 별 의미가 없겠다는 생각이 들었다. 한국인이 한글로 블로그를 검색해서 글을 읽고, 이걸 다른 언어로 번역할리가 없다고 생각들어서 이다. 그래도 일단 서식에 넣어두고 몇몇 글에 이용해서 어떤 효과가 있을지 확인해볼 예정이다. 물론 그 전에 글을 보러 사람들이 들어와 주어야 하겠지만 말이다.

또한 서식으로 저장한 것을 쓰거나 글을 수정 할 때 위에서 언급한 script 코드 중 text/css 가 가끔 사라져서 다시 넣어주어야 하는 단점이 있다. 이건 내가 아직 코드를 완벽하게 이해하지 못해서 일 텐데 앞서 말했듯이 유용성에 대해서 의문이 들기 때문에 그냥 이대로 두려고 한다.

만약 본 글에서 더 필요하다고 생각되는 부분이 있다면 댓글로 알려주시길 바란다.

모든 포스트 내 사진과 글은 무단도용, 영리목적의 사용, 저작물의 변경 등을 허용하지 않습니다.

728x90

저작자표시 비영리 변경금지

'info : 유용한 정보, 체험기' 카테고리의 다른 글

이직 또는 진로 찾기를 위한 구체적인 활동 예시 다섯 가지 (0)	2023.12.29
진로와 직업 찾는 방법 - 아카데미 외 진로 준비 방법은? (0)	2023.12.28
비행기 경유 또는 환승 시간에 대한 후기 - 국내선은 한시간 반, 미국 들르는 국제선은 최소 두시간 반에서 세시간 추천. (0)	2023.12.18
딥러닝 생초보 무료 강의 코세라 (coursera) generative AI for everyone (모두를 위한 제너레이티브 에이아이) 추천 vs 비추천 (0)	2023.11.05
드랍박스 플랜 비교 - 개인, 패밀리, 스탠다드 등 Dropbox for individual vs business vs family (0)	2023.08.24