[JavaScript] Google 사이트번역 API 사용법

Google의 사이트 번역 기능을 페이지에 삽입하는 방법을 알아보겠습니다.

기존 사용법

기존에 사용하던 API 키를 발급하여 사이트 번역을 하던 방식(여기)은 더 이상 지원되지 않습니다.

그렇다고 이런 편리한 기능을 안 쓰기는 아쉬우니 다른 방법으로 접근하여 보겠습니다.

웹 브라우저의 기능을 사용하세요... :(

다른 사용법

위의 방법과 동일한 결과물을 볼 수 있는 다른 방법입니다.

<!-- Google 번역 -->
<div id="google_translate_element" class="hd_lang"></div>
<script>
	function googleTranslateElementInit() {
		new google.translate.TranslateElement({
			pageLanguage: 'ko',
			includedLanguages: 'ko,zh-CN,zh-TW,ja,vi,th,tl,km,my,mn,ru,en,fr,ar',
			layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
			autoDisplay: false
		}, 'google_translate_element');
	}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- //Google 번역 -->

위의 소스를 통해 아래와 같은 결과물을 볼 수 있습니다.

 

<!-- Google 번역 -->
<div id="google_translate_element" class="hd_lang"></div>
<script>
	function googleTranslateElementInit() {
		new google.translate.TranslateElement({
			pageLanguage: 'ko',
			includedLanguages: 'ko,zh-CN,zh-TW,ja,vi,th,tl,km,my,mn,ru,en,fr,ar',
			//layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
			autoDisplay: false
		}, 'google_translate_element');
	}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- //Google 번역 -->

옵션 조절을 통해 디자인 변경 및 표시할 언어, 페이지 기본 언어 등을 선택해 줄 수 있습니다.

 

언어(ISO 639)

위의 API에서 언어 코드를 많이 사용하게 되는데, 이때 참고할 만한 위키백과 링크입니다.

○○○어 의 형식으로 검색하면 해당 국가의 언어로 넘어갑니다.

ISO 639 코드 목록과 해당 국가의 언어 부호를 정보로 사용하였습니다.