티스토리에 구글 웹페이지 번역 적용하는 방법_나름 간편

티스토리로 홈페이지를 이전하기로 맘을 먹고, 몇 가지 기존에 개인 홈페이지에서는 처리하기 쉽지 않았던 문제들을 적용해 보기로 했다.

 

그중에 하나는 외국어 버전을 제공하는 것이었다.

 

물론 현재 인터넷을 통해서 무료로 제공되고 있는 외국어 번역 서비스는 아직까지 그 완성도가 상당히 떨어져서, 자동 번역한 결과물을 보면 웃기지도 않는 경우가 많다.

 

2018/03/12 - [세상이야기/Enjoying English(영어 즐기기)] - 영어 번역 서비스 비교(Google vs Papago)

 

 

하지만, 이걸 혼자서 영문으로 바꾸기에는 효과 대비 노력이 너무 많이 소요되기 때문에 당장 하기에는 곤란하다는 판단이다.

그래서 차선으로 선택한 것이 바로 구글에서 제공하는 웹페이지 번역 서비스였다.

 

검색을 해 보니, 티스토리를 이용자들 중에 해당 서비스를 벌써 적용한 사람들이 많고, 그 방법을 설명한 게시물들도 상당히 있었다.

 

그런데, 문제는 이용자들마다 자신들이 사용하는 스킨이나 레이아웃이 다르고, 그러다 보니 내가 사용 중인 스킨으로는 적용이 어렵거나 적용을 하면 레이아웃이 깨져 버리는 문제가 발생하였다.

 

그래서 허접하지만, 내 나름대로 해결한 방법을 올리고... 혹시나 나와 비슷한 고민을 하는 분이 있다면, 조금이나마 도움이 될 수 있기를 바라며 해당 내용을 정리해 본다.

 

 

[구글에서 코드 받기]

 

 

 

 

구글에서 '웹페이지 번역'을 검색한다.

그러면 위와 같이 상단에  Google 번역 사이트가 나타난다.

 

검색을 하기에 앞서서 gmail 가입을 하는 것이 좋다. 왜냐하면 다음에 진행할 '웹사이트에 지금 추가'에서 로그인 과정을 요구하기 때문이다.

 

 

 

 

위에 보이는 화면에서 '웹사이트에 지금 추가'를 누른다.

로그인 과정은 따로 설명하지 않기로 한다.

 

 

 

 

 

위에 네모 박스 안에 원하는 사이트의 url를 입력한다.

나의 경우는 geoever.tistory.com 을 입력했는데, 한번 했던 거라서 이번에 화면 캡처할 땐 다른 주소를 넣었다.

 

이 과정에서 실수가 있더라도 전혀 부담 느낄 필요가 없다.

 

구글 자동번역기 소스를 얻기 위한 것 뿐이기 때문에, 틀리면 몇 번을 다시 해도 상관없기 때문이다.

 

웹사이트 언어는 한국어를 선택해 준다. (다른 언어을 기반으로 만든 경우라면, 당연히 해당 언어를 선택하면 되겠다)

 

 

 

 

이 부분에서는 좀 옵션이 많은데... 그렇다고 어려운 내용은 없으니, 한 번씩 선택해 보면 된다.

 

먼저 번역 언어는 모든 언어를 하면 너무 많고, 필요도 없을 것 같아서 나의 경우엔 특정 언어로 해서 영어, 태국어, 베트남어, 중국어 등 몇가지만 선택을 했다.

 

나의 경우엔 Google 애널리틱스를 적용해 두었기 때문에 외국에서 접속한 통계를 볼 수 있어서, 나중에 해당 데이터를 참고로 필요하면 추가를 하거나 제거를 하면 된다.

 

 

표시 모드에는 '본문에 표시', '탭으로 표시', '자동'의 3가지 옵션이 있는데, 나는 PC 기반으로 우선 '본문에 표시'를 선택했다.

그런데, 지금까지의 방문자 데이터를 보면 모바일 검색이 차지하는 비중이 높아서... 이 부분은 좀 더 생각해 봐야겠다.

(아직은 방문자수도 그리 많지 않으니...)

 

그리고 또 한 가지... 번역 서비스가 웹 페이지상에서 표시되는 모양을 선택하도록 되어 있는데...

3 가지를 차례로 보면서, 본인의 필요나 선호에 따라서 정하면 되겠다.  나의 경우는 '드롭다운만' 방식으로 했다.

 

고급에서는 다른 언어 사용자를 위한 자동 번역 배너 표시가 default로 체크되어 있는데, 필요에 따라서 선택하면 되겠다.

Google 애널리틱스에 대해서는 위에서 한번 언급을 했는데, 여기에서 적용을 하려면 우선 해당 서비스를 신청해서 ID를 받아야 가능하다.

 

이제 코드 받기를 누르면 구글에서 할 일은 끝이 난다.

 

 

 

위와 같이 앞에서 선택한 옵션이 적용된 코드가 나온다.

 

그러면 우선, 해당 코드를 복사해서 메모장 등에 임시로 저장을 해 둔다. 물론 저장을 안 해도 상관없지만, 중간에 실수하거나 시간이 걸려서 다시 해야 하는 상황이 생기면... 이 또한 번거롭고 귀찮은 일이 될 수 있으니... 임시 저장이 나은 선택일 수 있다.

 

 

 

[티스토리에 적용하기]

 

이제, 소스는 받았으니, 티스토리 관리 모드에 들어와서 적용하는 일이 남았다.

 

 

 

 

관리 모드에 들어오면, '꾸미기' 메뉴가 나오는데...

여기서 기존에 다른 분들이 설명한 방식과 나의 방식이 차이가 난다.

 

다른 분들이 올린 게시물에서는 '사이드바'에서 모듈을 이용해서 구글 웹페이지 번역을 적용하도록 되어 있다.

 

그런데, 내가 사용하는 스킨에는 그와 같은 기능이 반영되어 있지 않다. 아니, 어쩌면 반영은 되어 있는데 내가 그 사용법을 제대로 이해하지 못하고 있는지도 모르겠다.

 

아무튼 나는 그와 같은 방식으로 적용을 하기가 쉽지 않았고...

다른 분들의 도움으로 어찌어찌해서 적용할 수 있는 방법을 알게는 되었지만, 그 결과로 레이아웃이 깨지는 결과물이 나왔다.

 

 

그래서 내가 선택한 것은 '스킨 편집'으로 들어가서 html 코드를 손을 보는 방법이었다.

 

내가 원하는 결과는 웹페이지 상단 우측 한 구석에 구글 번역기가 위치하는 것이다.

(어쩌면, 내가 그렇게 까다로운 사람이 아니어서 다행이다.)

 

 

 

'스킨 편집'에 들어가면 'html 편집'이라는 메뉴를 볼 수 있다.

 

그걸 클릭하면 위에서 보이는 것처럼 html tag가 보인다.

 

그럼 그중에서 <body로 시작되는 부분을 찾는다...

 

그리고 그 tag가 끝나는 다음 줄에 구글 번역 코드를 삽입한다.

 

이때, 해당 코드가 구현되는 레이아웃의 위치를 정해 주어야 하는데... 이때 내가 사용한 것이

 

<div stlye="float:right;">   구글 번역 코드    </div>

 

이와 같은 방식이다. 해당 tag에서 위치에 대한 옵션은 left, center, right 3가지가 있다.

 

만약 다른 결과물을 기대한다면, 나와 같이 본인이 할 수 있는 범위 내에서 또 다른 방법을 찾아봐야 할 것이다.

 

 

위와 같이 해서 적용된 내용은 아래와 같다.