정보/블로그 운영팁

나라별 사용 언어에 따라 블로그 자동 번역하는 방법

아미넴 2020. 12. 13.

나라별(사용 언어별)로 블로그가 자동 번역이 된다면 외국인들을 상대로도 접근성이 높아지겠죠.

물론 번역 된 글이 검색 사이트에 노출이 되려면 실제로 번역을 해서 글을 새로 등록하거나 자동으로 글을 번역해서 Permalink를 생성해 주는 유료 서비스를 이용해야 합니다. (블로그에도 적용가능한 서비스가 있는지는 모르겠네요.)

저도 한 때 희망을 갖고 여러 가지 노력을 해보려 했으나 외국인에게 검색되게 하는 것은 노력에 비해 많이 어렵다고 하는 글들을 많이 접하고 나서 생각을 좀 달리 하는 중입니다.

혹시 그래도 생각 있으신 분은 충분히 사전 준비 하시고 도전해 보세요.

어쨌든 검색 사이트를 통해서가 아니더라도 외국인들이 제 블로그를 볼 수 있다는 가능성을 두고 보자면 처음 방문했을 때 모국어여야 거부감이 줄어들 겁니다.

지금부터 그 방법을 생각해 보겠습니다.

번역 기능 적용

먼저 번역 기능은 기본적으로 적용되어 있어야 합니다.

이 부분은 앞서 포스팅한 글이 있기 때문에 링크로 대체 하겠습니다.

티스토리 블로그(홈페이지) GTranslate 구글 번역 위젯 적용

Select Language Afrikaans Albanian Arabic Armenian Azerbaijani Basque Belarusian Bulgarian Catalan Chinese (Simplified) Chinese (Traditional) Croatian Czech Danish Dutch English Estonian Filipino Fi..

sangminem.tistory.com

위 링크 참고하셔서 먼저 적용해 주세요 ㅎㅎ

브라우저 언어 확인

브라우저에서 사용하는 언어를 먼저 확인해야 합니다.

브라우저 기본 정보를 담고 있는 navigator 객체에서 정보를 가져 올 수 있습니다.

navigator.language;

네비게이터 객체의 language 속성 값을 살펴 보면 현재 브라우저 사용 언어를 알 수 있습니다.

대부분은 저처럼 ko(한국어) 값을 가지고 있을 겁니다.

언어별 코드

그럼 제가 자동 번역 기능을 만들기 위해 사용할 언어 코드들을 살펴 보겠습니다.

한국어	ko
영어	en
중국어(간체)	zh-CN
중국어(번체)	zh-TW
일본어	ja
스페인어	es

대략 이 정도만 알면 될 것 같네요.

코드 작성

관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

html 편집을 클릭합니다.

그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

body 태그 안쪽 맨 아래 작성하시면 됩니다.

다음 코드를 붙여넣기만 하면 됩니다.

$(document).ready(function(){
    var lang = window.localStorage.getItem('lang')||navigator.language;
    var param = 'ko|';
    if(lang.indexOf('zh-CN') > -1) {
        param += 'zh-CN';
    } else if(lang.indexOf('zh-TW') > -1) {
        param += 'zh-TW';
    } else if(lang.indexOf('ja') > -1) {
        param += 'ja';
    } else if(lang.indexOf('es') > -1) {
        param += 'es';
    } else {
        param += 'en';
    }
    
    if(window.localStorage.getItem('lang') == null) {
        window.localStorage.setItem('lang', lang);
        if(lang.indexOf('ko') < 0) {
            doGTranslate(param);
        }
    }
});

브라우저 언어를 판단하여 중국어(간체 또는 번체), 일본어, 스페인어 그리고 그 외 언어는 모두 영어로 번역되도록 작성한 코드입니다.

블로그 접속 시 한국어가 아닐 경우는 해당 언어로 모두 번역 기능을 적용합니다.

물론 영어 환경의 브라우저에서 한국어를 보고 싶을 수도 있는데 계속 영어로만 번역된다면 안 되겠죠.

그래서 최초 접속한 사람에 한하여 적용될 수 있도록 localStorage를 이용하여 정보를 저장하였습니다.

결과 확인

크롬 브라우저 설정을 일본어로 바꾸고 테스트를 해 보았습니다.

보시는 바와 같이 잘 작동하는군요.

다른 사이트 갔다가 다시 들어와도 계속 설정이 유지되며 사이드바에 있는 다국어 기능에서 다시 한국어로 변경해도 설정한 값이 그대로 유지되므로 매번 바꿔줘야 하는 부담감도 없습니다.

한국어만 이용하시는 분은 변화가 전혀 없습니다.

외국인에게 내 블로그를 공유할 필요가 있거나 외국인 유입(검색유입 제외)을 노리시는 등 필요한 분만 적용하시면 될 것 같습니다.

감사합니다 :)

그리드형(광고전용)

'정보 > 블로그 운영팁' 카테고리의 다른 글

티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전) (54)	2020.12.20
구글 애드센스 청구서 주소 확인 PIN 번호 입력하기 (11)	2020.12.19
티스토리 떠 다니는 플로팅 목차 만드는 방법 (초급 버전) (55)	2020.12.17
티스토리 목차 글머리 서식 변경하기 (54)	2020.12.14
나라별 사용 언어에 따라 블로그 자동 번역하는 방법 (22)	2020.12.13
티스토리 블로그 속도 개선 후 구글, 네이버 지표 변화 (10)	2020.12.12
티스토리 글에 자동으로 목차 넣기 (265)	2020.12.12
티스토리 공감 구독 버튼 꾸미기: 가운데 정렬, 말풍선 강조 (43)	2020.12.11
티스토리 글 상단에 애드센스 광고 2개 삽입하는 방법 (82)	2020.12.11