국내에서 사이트나 블로그를 운영하다 보면 종종 해외에서 접속하는 경우가 있습니다.
구글 애드센스나 구글 애널리틱스 등을 사용하게 되면 어느 지역에서 내 사이트를 접속하시는 쉽게 알 수 있습니다. (직접 IP를 확인할 수도 있고, 기타 다른 도구를 사용할 수도 있지만, 구글에서 이러한 도구를 쉽게 제공해 주고 있죠.)
접속 로그 등을 보다 보면 대부분 국내 접속이 많으나, 구글이나 야후재팬, 바이두, 빙 등 해외 검색 도구에도 등록된 경우에 종종 해외에서 접속하는 경우도 보시게 됩니다.
제 블로그(ozit.co.kr)의 특정 기간 동안에 발생한 페이지 뷰의 로그를 국가별로 집계한 데이터입니다.
대한민국이 압도적으로 많지만, 중국이나, 미국, 일본 등에서도 제 블로그를 많이 방문하는 것을 볼 수 있습니다.
물론 해당 지역에 거주하는 대한민국 국민 또는 한국어를 잘하는 외국인(?ㅎㅎ)일 수도 있지만, 외국인이 특정 자료를 찾기 위해 검색을 통해 제 블로그까지 오게 되었을 가능성도 배제할 수 없습니다.
그러면 이런 외국인들이 한국어로 구성된 제 블로그를 보고, 그냥 나갈 수도 있고, 자체 번역기를 이용하여 번역하여 보려고 할 수도 있습니다.
만약 제 블로그를 쉽게 외국인이 번역하여 볼 수 있다면 그들은 좀 더 제 블로그에 머물고, 관심있게 자료를 자세히 읽어 보려할 것입니다.
그럼 블로그에 무료이고, 성능이 그런저런 괜찮은 번역기를 어떻게 달 수 있을까요?
바로 구글에서 구글 번역기(Google Translator)를 자신의 웹 사이트에 달 수 있는 기능을 제공해줍니다!! (무료이구요!)
(성능이 괜찮다는 것은 어느 정도의 수준을 원하느냐에 따라서 달라지겠지만, 사실 만족스러운 성능의 번역기는 아직까지 없는 것 같습니다. 특히 한국어의 경우, 한국어<->영어, 영어<->한국어는 구글 번역기로 어느 정도의 문맥 파악 정도는 가능하나, 다른 번역기와 마찬가지로 문장이 길어지거나 다의어를 포함하는 경우, 그 번역 성능이 상당히 떨어집니다. 그나마 문법이나 어법 등의 규칙이 유사한 언어간에는 그런대로 괜찮은 성능을 보이는 것 같습니다.)
그럼 성능 수준에 대한 내용은 여기서 각설하고, 구글 번역기를 나만의 사이트에 다는 방법에 대해 알아보겠습니다.
1. 구글 번역 사이트에 접속합니다.
구글 번역 사이트는 https://translate.google.co.kr 입니다.
구글 번역 사이트에 접속한 후, 하단의 [웹사이트 번역기] 링크를 클릭합니다.
구글에 먼저 로그인 해주세요~ (구글 번역기를 웹사이트에 달려면 로그인 되어 있으셔야 합니다.)
2. 웹사이트 번역기 페이지입니다.
- 저는 과거에 제 블로그(ozit.tistory.com)에 구글 번역기를 달았기 때문에 화면에 ozit.tistory.com 사이트 정보가 표시되고 있습니다. 대부분 처음 구글 번역기를 다시는 것이기 때문에 제 화면과 조금 다를 것입니다. (차 후, 구글 번역기를 단 이 후에 해당 페이지에서 번역기 플러그인 옵션을 변경하실 수 있습니다. - 우측 메뉴 참조)
- [새 웹사이트 추가] 버튼은 존재할 것이므로 이 버튼을 클릭합니다.
3. 본격적으로 웹사이트에 구글 번역기를 다는 작업입니다.
- 먼저 구글 번역기를 달려는 웹 사이트의 정보를 입력합니다.
1) 웹사이트의 URL을 입력합니다. 사이트, 블로그 모두 가능합니다.
2) 웹사이트의 기본 언어를 선택합니다. 대한민국에서 서비스하는 웹사이트라면 기본 언어가 '한국어' 일 것입니다. 한국어를 선택합니다.
[다음] 버튼을 클릭하여 다음 단계로 이동합니다.
4. 구글 번역기 플로그인에 대해 설정합니다.
1) 번역 언어 : 한국어로 된 사이트를 모든 언어로 번역할 수 있는 기능을 제공할 것인지, 아니면 특정 언어로만 번역할 수 있는 기능을 제공할 것인지 선택합니다. '특정 언어'를 선택하면 자신이 원하는 언어로만 번역할 수 있는 옵션이 나타납니다.
모든 언어를 선택하여 전세계인이 제 사이트를 번역하여 볼 수 있도록 합니다.
2) 표시 모드 : 번역기를 어떤 형태로 보여줄지 선택합니다.
표시 모드는 크게 인라인, 탭으로 표시, 자동 이렇게 3가지 선택이 가능하며, 3가지 선택에 따라 세부적인 추가 옵션이 있습니다. 번역기가 어떤 형태로 달리는지는 표시 모드 선택 우측에 샘플로 표시됩니다.
* [인라인] - [드롭다운만]으로 선택하면 아래 Select Language가 디폴트로 표시되는 선택 박스(Select Box) 형태로 표시됩니다. 각각 어떻게 표시되는지는 직접 선택해 보시고, 마음에 드시는 것으로 선택하세요. 단 '자동'으로 선택하는 경우에는 별도의 세부 선택 옵션이 없으며, 번역 배너 표시 여부가 자동으로 동작합니다.
3) 고급 옵션 : 다양한 옵션이 있습니다.
* 페이지에 표시된 언어와 다른 언어를 사용하는 사용자를 위해 자동으로 번역 배너 표시 : 한국어를 기본으로 하지 않는 브라우저로 접속하였을 때, 자동으로 페이지를 번역하여 표시합니다.
* 페이지에 다국어 콘텐츠가 있음 : 이 부분은 다국어로 된 컨텐츠가 존재하는 경우, 이를 고려하여 번역 대상을 선택하는 것으로 알고 있습니다. (실제 적용했을 때와 적용하지 않았을 때의 차이점을 발견하지 못하였는데, 혹시 아시는 분 있으시면 댓글 부탁드립니다.^^)
* Google 웹로그 분석을 사용하여 번역 트래픽을 추적 : 이는 구글 애널리틱스와 관계된 부분이므로 설명을 생략합니다. (자세히 알아보기 버링크를 클릭하여 좀 더 자세히 보실 수 있습니다.)
일단 첫번쩨 고급 옵션만 선택한 후, 하단의 [코드 받기] 버튼을 클릭합니다.
5. 구글 번역기를 웹 사이트에 삽입할 코드를 확인합니다.
구글 번역기를 위한 메타 태그와 실제 번역 선택 옵션(플러그인)을 위한 div 태그와 스크립트 코드가 주어졌습니다.
메타 태그는 사이트의 공통 head 태그 내에 복사하고, 번역 플러그인을 배치할 div + script 코드는 원하는 곳에 위치시킵니다.
번역 플러그인은 가급적 모든 페이지에서 표시되어야 하므로 공통 frame 페이지나, gnb (Global Navigation Bar) 가 속하는 페이지 영역에 배치시키는 것을 권장합니다.
(메타 태그 내 고유 번호를 모자이크 처리했는데, 사실 웹사이트에 접속하는 클라이언트에서도 모두 확인 가능한 값입니다. 비밀 스런 값이 아닙니다. ㅡ.ㅡ; 근데 왜 모자이크 처리한거야!! ㅎㅎㅎ)
6. 사이트의 frame 페이지 내에 코드를 삽입합니다.
* 아래 페이지 코드들은 포스팅 설명을 위해 작성한 샘플 코드들입니다.
[frame 페이지의 <head 태그>]
[frame 페이지의 footer 영역]
7. 사이트를 확인해 볼까요?
사이트 하단에 SelectBox 형태의 [언어 선택] 이라는 옵션이 표시되고, 클릭하면 특정 언어를 선택할 수 있는 화면이 표시됩니다.
한번 다른 나라어로 사이트를 번역해 보겠습니다... 잘 모르는 펀자브어 라는 걸 선택해 보겠습니다. ㅡ.ㅡ; 어디지?
네. 맞게 번역되었는지는 잘 모르겠지만, 뭔가 재미있게 생긴 형태의 언어로 번역된 것을 보실 수 있습니다. (이미지로 된 텍스트는 번역이 안되었군요. ㅎㅎ 당연한거죠.^^)
블로그나 사이트 모두 공통이며, 티스토리 같은 블로그는 실제 CSS나 HTML 코드를 직접 수정하는 부분이 있으니, 해당 부분에 구글 플러그인 코드를 삽입해주시면 됩니다.
여기까지입니다!!
잠깐!! 마지막으로 추가로 하나 더 설명드리자면 위의 구글 번역기 플러그인 옵션에서 고급 옵션이라는 것이 있었는데, 이 옵션의 선택에 따라서 구글 플러그인 코드가 어떻게 바뀌는지 간단히 보겠습니다.
* '페이지에 표시된 언어와 다른 언어를 사용하는 사용자를 위해 자동으로 번역 배너 표시' 를 선택하지 않으면
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
- autoDisplay 옵션이 나타나고, 설정 값이 false로 설정됩니다.
- '페이지에 표시된 언어와 다른 언어를 사용하는 사용자를 위해 자동으로 번역 배너 표시' 를 선택하는 경우에는 해당 옵션 항목 자체가 포함되어 있지 않습니다. 즉 autoDisplay: true 가 기본값입니다.
* '페이지에 다국어 콘텐츠가 있음' 를 선택한 경우
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
- multilanguagePage 옵션이 나타나고, 설정 값이 true 입니다.
* 구글 번역기 플러그인 설정 옵션 값을 바꿔가면서 코드를 보시면 기본 언어 (한국어 : ko), 표시 모드 (TranslateElement.InlineLayout.SIMPLE), 기타 고급 옵션에 대해 어떻게 값이 변경되는지 확인하실 수 있습니다.
'개발&컴퓨터 > API연동&기타' 카테고리의 다른 글
| 내 블로그 및 사이트에 접속한 사용자 공인 아이피 얻는 API 정보 (1) | 2022.08.29 |
|---|---|
| HTTP 서버 응답 코드 (Response Code) 정리 (1) | 2015.06.27 |
| 다음에디터(Daum Editor) 연동 시, 에디터 입력창에 DEVELOPMENT MODE 가 뜬다면? (2) | 2015.01.08 |
| 내 블로그(또는 사이트에) 유튜브 영상 게시(공유)하기 + 옵션! (0) | 2014.09.01 |
| 페이스북 웹페이지 캐시 삭제하는 방법 (캐시 갱신) (0) | 2014.08.26 |
