글로벌 시대에 맞게 외국인 방문자가 늘어날 것이라는 기대감을 가지고 블로그에 외국어 번역기를 설치했습니다. 구글 크롬 브라우저의 경우는 오른쪽 클릭하고 번역 누르면 웹페이지가 번역되는 기능이 있지만, 모든 사람이 다 크롬 브라우저를 사용하는 것이 아니기 때문에 서비스 차원에서 설치해 봤습니다.
1. 번역기
1) 구글 번역기
2018년도쯤 까지는 구글에서 사이트 번역기를 무료로 제공해 주었는데, 지금은 무료 제공이 없어졌습니다. 즉, 사용자가 많아져 사업화가 된 것으로 보입니다.
2) GTranslate
이번에 블로그에 설치할 번역기는 GTranslate입니다. 유료로 제공되는 번역기입니다. 그러나, 기능이 제한된 코드를 무료로 얻을 수 있습니다. 구글 번역기의 유료 판이라고 생각하시면 됩니다.
1. HTML 선택 - 티스토리 블로그의 사이드바에 설치를 하기 위해서 html 코드를 생성합니다. 2. 번역기 종류 선택 - 번역기 종류가 3가지가 있습니다. "On Fly" 를 선택합니다. 번역 품질은 잘 모르겠고, 번역기 디자인이 개인적으로 제일 낫다고 생각되어 선택했습니다. 3. 기본 언어 - 블로그 기본 언어를 선택합니다. "한국어" 설정합니다. 4. 국기 크기 설정 - 번역기에 언어 바로가기 기능이 있습니다. 국기로 아이콘이 나타납니다. 16, 24, 32 px 사이즈가 있습니다. 디자인상 24px를 선택했습니다. 5. 국기 종류 설정 - 번역 언어 바로가기 국기를 국가별로 선택할 수 있습니다. 티스토리 사이드 바에서 디자인상 7개 정도가 좋습니다. - 국기의 순서는 자동으로 생성되기 때문에 순서를 바꾸기 위해서는 코드에서 순서를 바꿔야 합니다. - 제 번역기에서는 태극기가 맨 앞으로 오도록 조정했습니다.
3. 번역기 코드 설정
1) 배너출력 플러그인
티스토리 사이드바에 애드센스 광고든, 번역기 등을 설치하기 위해서는 배너 출력 플러그인이 설치되어 있어야 합니다. 플러그 메뉴에서 설치하시면 됩니다.
배너 출력 플러그인 설치 화면
2) 코드 삽입
- "꾸미기 > 사이드바" 로 이동합니다.
- 좌측 기본 모듈에 "HTML 배너 출력"을 끌어서 "사이드바 1" 위치에 놓습니다. 다른 모듈이 사이드바 1에 있다면 모두 사이드바 2로 옮겨주시면 디자인상 보기가 좋습니다.
- 옮겨진 HTML 배너출력의 편집을 눌러서 팝업이 뜨면 위에 코드 제목을 넣으시고, 아래에 GTranslate에서 만든 코드를 집어넣습니다.
GTranslate 번역기가 제대로 설치된 경우 아래와 같이 나오는 것을 확인할 수 있습니다. 물론 작동 확인도 하실 수 있습니다. 제 스킨은 북클럽 스킨으로 우측에 사이드바가 있습니다. 블로그 화면의 우측 상단에서 아래 번역기를 확인할 수 있습니다.
GTranslate 번역기 사이드바 설치 화면
5. 디자인 수정 (업데이트)
1) 문제 발견
구글 블로그스팟 블로그에 번역기를 설치하다 보니, 블로그스팟에는 번역기의 위치를 상당히 자유롭게 설치할 수 있는 것을 봤습니다. 그런데, 티스토리는 간단하게 설치하려면 사이드바를 이용해야 하는데, 사용자 입장에서 불편함이 있습니다. 사이드 바를 외국어 번역기를 설치할 경우에는 모바일을 사용했을 때, 누구도 사용하지 않게 되는 문제점이 있습니다. 모바일 화면에서 사이드바를 꺼내는 상당히 불편합니다.
2) 디자인 변경
때문에 외국어 번역기를 티스토리에서 본문 최상단에 두기로 했습니다. 모바일 화면에서 가장 문에 잘 들어오는 것을 볼 수 있었습니다.
카카오 애드핏의 상단 광고를 활성화 시켜도 위에 외국어 번역기가 나옵니다.
3) 코드 넣기
문제는 스킨에 코드를 넣는 것 인데, 위치를 찾는데 조금 예를 먹었습니다만, 의외로 간단했습니다.
ㄱ. 본문 치환자 검색
- "article_rep_desc" 를 스킨의 HTML 편집에서 검색합니다.
- 북클럽 기준으로 2개가 검색이 되는데, 두 번째를 찾으시면 된니다. 다른 스킨은 다른 개수가 나올수 있는데, 알맞은 것을 찾아야 합니다.
ㄴ. 번역기 코드 삽입
아래와 같이 찾은 스킨 코드에서 '
글로벌 시대에 맞게 외국인 방문자가 늘어날 것이라는 기대감을 가지고 블로그에 외국어 번역기를 설치했습니다. 구글 크롬 브라우저의 경우는 오른쪽 클릭하고 번역 누르면 웹페이지가 번역되는 기능이 있지만, 모든 사람이 다 크롬 브라우저를 사용하는 것이 아니기 때문에 서비스 차원에서 설치해 봤습니다.
1. 번역기
1) 구글 번역기
2018년도쯤 까지는 구글에서 사이트 번역기를 무료로 제공해 주었는데, 지금은 무료 제공이 없어졌습니다. 즉, 사용자가 많아져 사업화가 된 것으로 보입니다.
2) GTranslate
이번에 블로그에 설치할 번역기는 GTranslate입니다. 유료로 제공되는 번역기입니다. 그러나, 기능이 제한된 코드를 무료로 얻을 수 있습니다. 구글 번역기의 유료 판이라고 생각하시면 됩니다.
1. HTML 선택 - 티스토리 블로그의 사이드바에 설치를 하기 위해서 html 코드를 생성합니다. 2. 번역기 종류 선택 - 번역기 종류가 3가지가 있습니다. "On Fly" 를 선택합니다. 번역 품질은 잘 모르겠고, 번역기 디자인이 개인적으로 제일 낫다고 생각되어 선택했습니다. 3. 기본 언어 - 블로그 기본 언어를 선택합니다. "한국어" 설정합니다. 4. 국기 크기 설정 - 번역기에 언어 바로가기 기능이 있습니다. 국기로 아이콘이 나타납니다. 16, 24, 32 px 사이즈가 있습니다. 디자인상 24px를 선택했습니다. 5. 국기 종류 설정 - 번역 언어 바로가기 국기를 국가별로 선택할 수 있습니다. 티스토리 사이드 바에서 디자인상 7개 정도가 좋습니다. - 국기의 순서는 자동으로 생성되기 때문에 순서를 바꾸기 위해서는 코드에서 순서를 바꿔야 합니다. - 제 번역기에서는 태극기가 맨 앞으로 오도록 조정했습니다.
3. 번역기 코드 설정
1) 배너출력 플러그인
티스토리 사이드바에 애드센스 광고든, 번역기 등을 설치하기 위해서는 배너 출력 플러그인이 설치되어 있어야 합니다. 플러그 메뉴에서 설치하시면 됩니다.
배너 출력 플러그인 설치 화면
2) 코드 삽입
- "꾸미기 > 사이드바" 로 이동합니다.
- 좌측 기본 모듈에 "HTML 배너 출력"을 끌어서 "사이드바 1" 위치에 놓습니다. 다른 모듈이 사이드바 1에 있다면 모두 사이드바 2로 옮겨주시면 디자인상 보기가 좋습니다.
- 옮겨진 HTML 배너출력의 편집을 눌러서 팝업이 뜨면 위에 코드 제목을 넣으시고, 아래에 GTranslate에서 만든 코드를 집어넣습니다.
GTranslate 번역기가 제대로 설치된 경우 아래와 같이 나오는 것을 확인할 수 있습니다. 물론 작동 확인도 하실 수 있습니다. 제 스킨은 북클럽 스킨으로 우측에 사이드바가 있습니다. 블로그 화면의 우측 상단에서 아래 번역기를 확인할 수 있습니다.
GTranslate 번역기 사이드바 설치 화면
5. 디자인 수정 (업데이트)
1) 문제 발견
구글 블로그스팟 블로그에 번역기를 설치하다 보니, 블로그스팟에는 번역기의 위치를 상당히 자유롭게 설치할 수 있는 것을 봤습니다. 그런데, 티스토리는 간단하게 설치하려면 사이드바를 이용해야 하는데, 사용자 입장에서 불편함이 있습니다. 사이드 바를 외국어 번역기를 설치할 경우에는 모바일을 사용했을 때, 누구도 사용하지 않게 되는 문제점이 있습니다. 모바일 화면에서 사이드바를 꺼내는 상당히 불편합니다.
2) 디자인 변경
때문에 외국어 번역기를 티스토리에서 본문 최상단에 두기로 했습니다. 모바일 화면에서 가장 문에 잘 들어오는 것을 볼 수 있었습니다.
카카오 애드핏의 상단 광고를 활성화 시켜도 위에 외국어 번역기가 나옵니다.
3) 코드 넣기
문제는 스킨에 코드를 넣는 것 인데, 위치를 찾는데 조금 예를 먹었습니다만, 의외로 간단했습니다.
ㄱ. 본문 치환자 검색
- "article_rep_desc" 를 스킨의 HTML 편집에서 검색합니다.
- 북클럽 기준으로 2개가 검색이 되는데, 두 번째를 찾으시면 된니다. 다른 스킨은 다른 개수가 나올수 있는데, 알맞은 것을 찾아야 합니다.
ㄴ. 번역기 코드 삽입
아래와 같이 찾은 스킨 코드에서 '" 의 바로 위에 아래 모바일 버전 번역기 코드를 추가합니다.
별도로 CSS를 수정할 필요는 없습니다. 그러나, GTranslate 사이트에서 코드 생성시, 설정 메뉴에서 "Add new line" 를 체크를 해제해 주어 화면 넓이에 따라서 디자인이 변하게 해 주었습니다. 사이드바는 두줄 고정 디자인입니다. (2.2 번역기 설정 참조)
모바일 본문 상단 번역기 모습
6. 업데이트 (Problem & Solve)
2022년 9월 28일
번역기가 작동하지 않는다는 신고를 받고 살펴봤습니다. "URL structure"의 "free"모드를 사용하고 있었는데, 어느 순간 "subdomain" 모드로 바뀌어있었습니다. (URL을 보시면, 주소앞에 영어면 EN,일본어이면 JA등 변환되는 언어의 서브도메인이 붙던지, 티스토리주소 사이에 /en/ 같은 주소가 들어갑니다.) 아마도, 무료 사용자를 페이 사용자로 넘기는 장치가 되어 있는 것 같습니다. 다시 무료 코드가져다가 바꾸었는데, 작동이 다시 잘 됩니다. 위에 코드 파일도 다시 수정을 했습니다. 요즘 구글에서 검색시 번역기능도 제공을 해 주는데, 이런 문제가 지속적으로 발생한다면 사용할 필요가 있는지도 의문스럽습니다.
글로벌 시대에 맞게 외국인 방문자가 늘어날 것이라는 기대감을 가지고 블로그에 외국어 번역기를 설치했습니다. 구글 크롬 브라우저의 경우는 오른쪽 클릭하고 번역 누르면 웹페이지가 번역되는 기능이 있지만, 모든 사람이 다 크롬 브라우저를 사용하는 것이 아니기 때문에 서비스 차원에서 설치해 봤습니다.
1. 번역기
1) 구글 번역기
2018년도쯤 까지는 구글에서 사이트 번역기를 무료로 제공해 주었는데, 지금은 무료 제공이 없어졌습니다. 즉, 사용자가 많아져 사업화가 된 것으로 보입니다.
2) GTranslate
이번에 블로그에 설치할 번역기는 GTranslate입니다. 유료로 제공되는 번역기입니다. 그러나, 기능이 제한된 코드를 무료로 얻을 수 있습니다. 구글 번역기의 유료 판이라고 생각하시면 됩니다.
1. HTML 선택 - 티스토리 블로그의 사이드바에 설치를 하기 위해서 html 코드를 생성합니다. 2. 번역기 종류 선택 - 번역기 종류가 3가지가 있습니다. "On Fly" 를 선택합니다. 번역 품질은 잘 모르겠고, 번역기 디자인이 개인적으로 제일 낫다고 생각되어 선택했습니다. 3. 기본 언어 - 블로그 기본 언어를 선택합니다. "한국어" 설정합니다. 4. 국기 크기 설정 - 번역기에 언어 바로가기 기능이 있습니다. 국기로 아이콘이 나타납니다. 16, 24, 32 px 사이즈가 있습니다. 디자인상 24px를 선택했습니다. 5. 국기 종류 설정 - 번역 언어 바로가기 국기를 국가별로 선택할 수 있습니다. 티스토리 사이드 바에서 디자인상 7개 정도가 좋습니다. - 국기의 순서는 자동으로 생성되기 때문에 순서를 바꾸기 위해서는 코드에서 순서를 바꿔야 합니다. - 제 번역기에서는 태극기가 맨 앞으로 오도록 조정했습니다.
3. 번역기 코드 설정
1) 배너출력 플러그인
티스토리 사이드바에 애드센스 광고든, 번역기 등을 설치하기 위해서는 배너 출력 플러그인이 설치되어 있어야 합니다. 플러그 메뉴에서 설치하시면 됩니다.
배너 출력 플러그인 설치 화면
2) 코드 삽입
- "꾸미기 > 사이드바" 로 이동합니다.
- 좌측 기본 모듈에 "HTML 배너 출력"을 끌어서 "사이드바 1" 위치에 놓습니다. 다른 모듈이 사이드바 1에 있다면 모두 사이드바 2로 옮겨주시면 디자인상 보기가 좋습니다.
- 옮겨진 HTML 배너출력의 편집을 눌러서 팝업이 뜨면 위에 코드 제목을 넣으시고, 아래에 GTranslate에서 만든 코드를 집어넣습니다.
GTranslate 번역기가 제대로 설치된 경우 아래와 같이 나오는 것을 확인할 수 있습니다. 물론 작동 확인도 하실 수 있습니다. 제 스킨은 북클럽 스킨으로 우측에 사이드바가 있습니다. 블로그 화면의 우측 상단에서 아래 번역기를 확인할 수 있습니다.
GTranslate 번역기 사이드바 설치 화면
5. 디자인 수정 (업데이트)
1) 문제 발견
구글 블로그스팟 블로그에 번역기를 설치하다 보니, 블로그스팟에는 번역기의 위치를 상당히 자유롭게 설치할 수 있는 것을 봤습니다. 그런데, 티스토리는 간단하게 설치하려면 사이드바를 이용해야 하는데, 사용자 입장에서 불편함이 있습니다. 사이드 바를 외국어 번역기를 설치할 경우에는 모바일을 사용했을 때, 누구도 사용하지 않게 되는 문제점이 있습니다. 모바일 화면에서 사이드바를 꺼내는 상당히 불편합니다.
2) 디자인 변경
때문에 외국어 번역기를 티스토리에서 본문 최상단에 두기로 했습니다. 모바일 화면에서 가장 문에 잘 들어오는 것을 볼 수 있었습니다.
카카오 애드핏의 상단 광고를 활성화 시켜도 위에 외국어 번역기가 나옵니다.
3) 코드 넣기
문제는 스킨에 코드를 넣는 것 인데, 위치를 찾는데 조금 예를 먹었습니다만, 의외로 간단했습니다.
ㄱ. 본문 치환자 검색
- "article_rep_desc" 를 스킨의 HTML 편집에서 검색합니다.
- 북클럽 기준으로 2개가 검색이 되는데, 두 번째를 찾으시면 된니다. 다른 스킨은 다른 개수가 나올수 있는데, 알맞은 것을 찾아야 합니다.
ㄴ. 번역기 코드 삽입
아래와 같이 찾은 스킨 코드에서 '" 의 바로 위에 아래 모바일 버전 번역기 코드를 추가합니다.
별도로 CSS를 수정할 필요는 없습니다. 그러나, GTranslate 사이트에서 코드 생성시, 설정 메뉴에서 "Add new line" 를 체크를 해제해 주어 화면 넓이에 따라서 디자인이 변하게 해 주었습니다. 사이드바는 두줄 고정 디자인입니다. (2.2 번역기 설정 참조)
모바일 본문 상단 번역기 모습
6. 업데이트 (Problem & Solve)
2022년 9월 28일
번역기가 작동하지 않는다는 신고를 받고 살펴봤습니다. "URL structure"의 "free"모드를 사용하고 있었는데, 어느 순간 "subdomain" 모드로 바뀌어있었습니다. (URL을 보시면, 주소앞에 영어면 EN,일본어이면 JA등 변환되는 언어의 서브도메인이 붙던지, 티스토리주소 사이에 /en/ 같은 주소가 들어갑니다.) 아마도, 무료 사용자를 페이 사용자로 넘기는 장치가 되어 있는 것 같습니다. 다시 무료 코드가져다가 바꾸었는데, 작동이 다시 잘 됩니다. 위에 코드 파일도 다시 수정을 했습니다. 요즘 구글에서 검색시 번역기능도 제공을 해 주는데, 이런 문제가 지속적으로 발생한다면 사용할 필요가 있는지도 의문스럽습니다.
별도로 CSS를 수정할 필요는 없습니다. 그러나, GTranslate 사이트에서 코드 생성시, 설정 메뉴에서 "Add new line" 를 체크를 해제해 주어 화면 넓이에 따라서 디자인이 변하게 해 주었습니다. 사이드바는 두줄 고정 디자인입니다. (2.2 번역기 설정 참조)
모바일 본문 상단 번역기 모습
6. 업데이트 (Problem & Solve)
2022년 9월 28일
번역기가 작동하지 않는다는 신고를 받고 살펴봤습니다. "URL structure"의 "free"모드를 사용하고 있었는데, 어느 순간 "subdomain" 모드로 바뀌어있었습니다. (URL을 보시면, 주소앞에 영어면 EN,일본어이면 JA등 변환되는 언어의 서브도메인이 붙던지, 티스토리주소 사이에 /en/ 같은 주소가 들어갑니다.) 아마도, 무료 사용자를 페이 사용자로 넘기는 장치가 되어 있는 것 같습니다. 다시 무료 코드가져다가 바꾸었는데, 작동이 다시 잘 됩니다. 위에 코드 파일도 다시 수정을 했습니다. 요즘 구글에서 검색시 번역기능도 제공을 해 주는데, 이런 문제가 지속적으로 발생한다면 사용할 필요가 있는지도 의문스럽습니다.
댓글