'번역기'에 해당되는 글 1건

웹사이트를 운영하다보면 국내 사용자뿐 아니라 다른 외국방문객이 있을 수 있습니다. 미국, 캐나다, 영국, 일본, 중국 등등 다양한 방문자가 방문할 것인데 영어권 빙문자가 한글로 된 웹사이트에 접속하여 언어문제로 들어왔다가 그냥가버린다면 아쉬움이 많을 것이라 생각됩니다.


더욱이 필요로 하는 정보가 있지만 언어문제로 다른 사이트를 찾아야하는 불편한 점도 있을 것이고, 번역하기 위해 구글로 URL 접속해서 번역하는 과정도 불편하겠지요. 그래서 본인의 웹사이트나 구글에 구글번역기를 설치해서 자동번역되게 하거나 원하는 언어로 번역하면 다소 불편함이 해소가 되거나 좋은 인상을 남길수도 있을 것이라 생각됩니다.


저의 경우는 일본에서의 방문자가 구글을 통해 일부 들어오기 때문에 꼭 필요한 기능이라 보고 있습니다. 설치하는 방법은 https://translate.google.com/manager/website 에 접속해서 로그인을 합니다. 로그인 아이디가 없다면 http://gmail.com 에 회원가입하고 다시 링크로 접속해서 구글번역기 설치과정을 진행하면 됩니다.



저는 이미 번역기 코드를 생성했기 때문에 위 그림처럼 보이겠지만 처음 방문시 아무것도 없을 것이므로 빨간색 부분 "새 웹사이트 추가"를 클릭합니다.



웹사이트 URL은 웹사이트에 번역기를 설치할 도메인을 입력하는 부분이므로 도메인이 test.tistory.com 이라면 그대로 적어주면 됩니다. 언어는 원본이 한국어 이므로 한국어를 선택하고 "다음"을 클릭합니다.



"번역 언어"는 크게 두가지 입니다. "모든 언어"는 구글번역기가 지원가능한 모든 언어를 말하며, "특정 언어"란 원하는 특정 소수 언어만 선택해서 서비스하고자 할 때이고, 고급 기능은 그대로 두시고, 표시모드에서 원하는 모드를 선택해서 "다음"을 클릭하면 됩니다.


구글은 인라인 모드에 다음 3가지 타입을 지원합니다.


세로

 가로

 드롭다운만

 

 

 


표시 모드에는 인라인 모드, 탭 모드, 자동 모드를 선택할 수 있으며 자동모드는 방문자 웹브라우저의 기본 언어가 웹페이지 언어와 다를 때만 번역 배너가 자동으로 표시되는 기능입니다. 같은 한국어 브라우저라면 배너가 보여지지 않지만 언어가 다른 브라우저라면 인라인 모드가 표시되는 말그대로 자동 모드입니다. 다음을 클릭하면 다음 결과 화면이 나오게 됩니다.



메타태그는 <head>와 </head>사이에 삽입하면 되고, 나머지 코드는 원하는 위치에 삽입하면 됩니다. 티스토리에 삽입하고자 한다면 다음 화면의 <head>와 </head>사이에 <meta name="google-translate-customization" content="b7ad890bf9d5b7eb-945850659ed56b8c-g937388a6813bc9f5-a"/> 태그를 삽입하고, 나머지 태그는 <body>와 </body>사이에 원하는 위치에 삽입해 줍니다.



이제 정상적으로 되는지 확인해 봅니다.



다음은 일본어로 번역한 그림입니다.



혹시나 수정이 필요하면 다음 그림의 왼쪽 하단 링크 "설정"을 선택하면 재수정이 가능합니다.



다음은 "드롭 다운만" 태그입니다.


 <div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


다음은 "가로"태그이고,


 <div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ko', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


다음은 "세로"태그입니다.


 <div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ko'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


디자인을 입히고 싶다면 다음의 형식처럼 html과 css를 감싸 주거나 넣어주면 되겠습니다.


 <div id="google_translate">

 <div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ko'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

 </div>


마지막으로 style.css 에 작당한 위치에 다음 코드를 넣어 주고, b_grad.gif 파일을 서버로 업로드해줍니다.


 #google_translate {
    background: #eee url(images/b_grad.gif);
    padding:5px 15px;
    border:1px #999;
 }


블로그 이미지

하보니

하보니와 함께하는 phP 초보

Tag

댓글을 달아 주세요