블로그에 한국어와 일본어로 동시에 글을 쓰고 싶다!
2011년 처음에 티스토리에 블로그를 개설할 때부터 고민했던 부분이었습니다. 그 당시에는 일본 생활 5년차라서 어느 정도 일본어도 할 줄 알았고 일본어로 글을 쓰면 일본인들도 내가 쓴 글을 봐 줄 것이라는 생각을 했었죠. 웹에 관한 지식이 없던 저는 그냥 단순하게 티스토리에 블로그를 2개 개설해서 각각 한국어와 일본어로 포스팅을 했었습니다. 그러나 오래 가지 못하고 일본어 블로그 쪽은 폐쇄했습니다.
2개의 블로그를 관리하기가 귀찮았고 방문자들도 양쪽으로 나눠지기 때문에 글 노출에는 도움이 되지 않는 것 같았습니다. 그 이후로는 한국어와 일본어를 문단마다 번갈아서 쓰도록 하는 방법을 사용하고 있었습니다. 글이 좀 길어지면 따로 올리는 방법도 썼었지요.
그러다 최근에 문득 이런 생각이 들었습니다.
더 많은 사람들에게 보여주기 위한 내 욕심 때문에 방문객들에게 피해를 주고 있는건 아닌가?
한국어를 공부하는 일본인이나 일본어를 공부하는 한국인 입장에서 본다면 양쪽 다 있는 것이 약간의 도움이 될지는 모릅니다. 그러나 그렇지 않은 방문객들 입장에서 보면 일본어를 모르는 사람들에게 있어서 한국어 문장 바로 아래에 있는 일본어 문장은 그냥 글을 읽는데 방해만 될 뿐입니다. 반대로 일본인 방문객도 마찬가지 일 겁니다.
그래서 열심히 검색해봤는데 워드프레스에서 다국어 블로그를 구축하는 방법과 번역기를 다는 방법 뿐이고, 티스토리에서 만드는 방법은 0%에 가까울 정도로 정보가 없었습니다.
티스토리에서 다국어 블로그를 만드는 방법
번역기를 다는 방법은 언급하지 않겠습니다. 번역기를 사용할 거면 저처럼 고민할 필요도 없었겠지요. 그리고 기계번역은 짧은 문장이라면 달아도 괜찮겠지만 정보성 글에서 이상하게 번역되면 혼란만 초래할 테니까요.
몇 가지 방법이 있습니다.
한국어블로그와 외국어블로그를 각각 다른 계정이나 다른 도메인을 따로 사용
한국어 블로그와 외국어 블로그가 각각 독립적으로 운영되기 때문에 더 많은 노력이 더 필요할 수 밖에 없습니다. 그 대신에 각각의 언어로 서로 다른 디자인이나 콘텐츠를 작성할 수 있는 장점이 있습니다. 같은 내용끼리는 서로 링크를 걸어서 연결하면 됩니다.
한개의 포스트에 각각의 언어로 포스팅
해당 언어를 선택해주는 버튼을 만들어서 방문객이 클릭하면 해당 언어를 표시하도록 합니다. 아무래도 2개의 블로그를 관리하기보다는 좀 수월한 점이 있겠죠. 이미지가 많고 그 이미지를 설명하는 글이 많을 때 이 방법이 적합할 수 있습니다.
하나의 계정에서 각각의 언어로 따로 포스팅
포스팅을 할 때 각각의 언어로 두 번 포스팅하는 방법이 있습니다. 이것 또한 한 개의 블로그라서 관리는 쉽겠지만 글 목록을 볼 때 한국어 글 제목과 일본어 글 제목이 섞여있기 때문에 모양새가 안 좋습니다. 이미지가 적고 단순히 문장으로만 설명하는 경우에는 위의 2번보다 이 방법이 더 좋을 수 있습니다.
구글에서는 다국어 블로그를 구축하는 방법에 대해서 첫번째 방법을 추천하고 있습니다.
첫번째 방법은 이미 시도해보았지만 일본어 포스팅의 검색유입이 너무 적어서 그냥 접었던 경험이 있습니다.
이번에는 SEO같은것 크게 신경쓰지 말고 일본어 작문을 연습하기 위하여 두번째 방법을 사용하기로 했습니다. 참고로 저는 한국어와 일본어, 2개국어를 사용하고 있습니다. 영어는 못합니다ㅜㅜ
게다가 저는 html, css, java를 따로 공부한 사람이 아닙니다. 그냥 만들어져 있는 스킨을 조금 수정만 할 줄 아는 정도입니다. 지금부터 소개하는 소스가 최적화 된 것이 아닐 가능성이 크다는 것을 염두해 두시고 참고만 하시기 바랍니다. 스킨이나 브라우저에 따라서 안 될 수도 있습니다. 제 블로그에선 잘 작동했습니다.. 확인된 브라우저는 윈도우7의 익스플로러11, Chrome, 그리고 iphone의 사파리 등입니다.
티스토리 다국어 적용방법
자, 그럼 위의 2번째에서 언급한 「한 개의 포스팅에 각각의 언어로 포스팅」하는 방법을 적용해보도록 하겠습니다.
먼저 방문객의 브라우저 언어가 일본어인지를 판단합니다. 일본어일 경우에만 일본어로 출력하고 일본어가 아닐 경우 무조건 한국어로 출력하게 했습니다. 일본도 아니고 한국도 아닌 다른 나라에서 온 방문객은 해외에 거주중인 한국인일 경우가 많을 것이기 때문입니다.
만약 한국어와 영어 조합으로 하신다면 브라우저 언어가 한국어인지를 판단해서 한국어를 표시하고 그 외의 언어는 영어로 표시하는 게 좋겠죠. 아무래도 영어는 세계 공용어인 만큼 더 많은 방문객을 불러올 가능성이 있으니까요.
스크립트 삽입
아래의 코드를 <head>와 </head>사이에 넣습니다.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
var lang = 'ko';
if (navigator.language!=null)
{
lang = navigator.language;
} else if (navigator.userLanguage!=null) {
lang = navigator.userLanguage;
} else if (navigator.systemLanguage!=null) {
lang = navigator.systemLanguage;
} else {
lang='ko';
}
lang = lang.toLowerCase();
lang = lang.substring(0, 2);
if (lang == 'ja')
{
$('input[name=languagee]:eq(1)').prop('checked', true);
$('.kr').each(function (){
$(this).hide();
langvalue = "2";
});
}
else {
$('input[name=languagee]:eq(0)').prop('checked', true);
$('.jp').each(function (){
$(this).hide();
});
}
// 여기부터 언어선택 버튼
$('input[type=radio]').change(function() {
if ($("input:radio[name='languagee']:checked").val() == "1") {
$('.jp').hide();
$('.kr').show();
} else if ($("input:radio[name='languagee']:checked").val() == "2") {
$('.kr').hide();
$('.jp').show();
} else if($("input:radio[name='languagee']:checked").val() == "3") {
$('.kr,.jp').show();
}
}).trigger('change');
// 여기부터 언어선택 버튼 보이기-숨기기
if ($(".article p, .article div").hasClass("jp")) {
$(".lng").show();
}
else {$(".lng").hide();
}
});
</script>- STEP1Jquery라이브러리 호출
이미 Jquery를 호출해서 사용하고 계신 분은 이 부분 생략해주세요. 중복호출되면 에러납니다.
- STEP2사용자의 언어 판정
사용자의 브라우저 언어를 읽어서 취득합니다.
먼저 브라우저의 언어를 알아내는 시도를 하고, 실패하면 사용자에 의해 사용되는 언어(지역 언어)를 알아냅니다. 이것도 실패하면 마지막으로 사용자의 OS의 언어를 알아냅니다. 그럴 일은 없을 테지만 혹시라도 알아내지 못했다면 그냥 한국어로 설정하도록 했습니다. - STEP3언어코드를 앞의 2글자만 취득
알아낸 값을 소문자로 변경하고 앞의 2글자만 따기로 합니다. 보통은 ko, ja, en처럼 원래 2글자인데 어떤 브라우저는 ko-KR, ja-JP, en-US 등으로 나오기 때문입니다.
- STEP4선택된 언어를 표시
초기설정은 한국어입니다. 만일 STEP2~3에서 알아낸 값이 일본어(ja)라면 한국어를 숨기고 그렇지 않다면 일본어를 숨깁니다.
- STEP5사용자가 버튼으로 언어를 선택
다음은 사용자가 언어 선택을 할 수 있는 라디오버튼 부분입니다.
한국어에는 1이라는 값을, 일본어에는 2라는 값을, 그리고 한국어+일본어에는 3이라는 값을 정했습니다.- 1번의 한국어가 선택되면 jp라는 클래스를 숨기고 kr이라는 클래스를 나타나게 합니다. (한국어O, 일본어X)
- 2번의 일본어가 선택되면 kr이라는 클래스를 숨기고 jp라는 클래스를 나타나게 합니다. (한국어X, 일본어O)
- 3번의 한국어+일본어가 선택되면 kr과 jp클래스, 양쪽 다 나타나게 합니다. (한국어O, 일본어O)
2개 언어로 포스팅을 한다고 해도 내용이나 기분(?)에 따라서는 한쪽 언어로만 글을 쓸 경우가 있습니다. 이럴 때는 p태그나 div태그에 클래스를 지정하지 말고 그냥 평소처럼 글을 작성하면 됩니다. 그러면 어느 언어를 선택하든지 간에 본문이 표시됩니다. 그렇지 않으면, 해당 언어가 아닐 경우 본문내용이 아무것도 안 보일테니까요. 저는 아예 언어선택버튼이 나타나지 않도록 했습니다.
p태그 또는 div태그에 jp라는 클래스가 있다면 lng라는 클래스를 보이게 하고 아니면 숨겨라
아래의 코드를 보면 <div class=”lng”>로 언어선택부분을 감싸고 있습니다. 그리고 이 부분은 한국어로만 작성했을 때는 안 보이도록 설정했습니다. p태그나 div태그에 kr이나 jp를 설정하지 않고 글을 작성하면 이 부분은 나타나지 않게 됩니다.
참고 위의 자바스크립트의 가장 아랫부분
언어 선택 버튼 추가
방문객이 언어를 선택할 수 있는 버튼입니다. 포스트의 본문 안에 다국어로 작성할 때마다 넣어도 되고 skin.html안에 넣어도 됩니다. skin.html안에 넣을 경우, 본문 위나 본문 아래에 넣어주는 게 무난하겠죠. 저는 skin.html안의 본문 위에 넣었습니다. 바로 위에서 설명했듯이 1개의 언어로만 작성되었고 클래스를 지정하지 않았다면 이 선택버튼은 보이지 않게 됩니다.
참고 위의 자바스크립트의 아래에서 2번째부분
<div class="lng">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Language :</legend>
<p>이 포스트는 한국어와 일본어로 작성되어 있습니다.</p>
<p>この記事は日本語と韓国語で作成されています。</p>
<input type="radio" name="languagee" id="radio-ko" value="1" />
<label for="radio-ko"><span class="flag-ko"></span>한국어</label>
<input type="radio" name="languagee" id="radio-jp" value="2" />
<label for="radio-jp"><span class="flag-jp"></span>日本語</label>
<input type="radio" name="languagee" id="radio-kj" value="3" />
<label for="radio-kj"><span class="flag-kj"></span>한국어+日本語</label>
</fieldset>
</div>
</div>css 스타일 추가
언어선택버튼 부분의 스타일을 정의하기 위해 style.css에 다음을 추가합니다. 이 부분은 취향에 따라 변경하시면 됩니다.
.lng {
display: none;
/* font-size: 14px;
font-size: 1.4rem;
line-height: 160%;*/
border: 1px solid #c0c0c0;
}
.lng p {
margin-bottom: 2px;
}
fieldset {
/* border: 1px solid #c0c0c0;*/
margin: 0 2px;
padding: 0.35em 0.625em .75em;
}
input[type=radio] {
display:none;
}
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#8BE0FE;
}
input[type=radio] + label {
margin-top: 5px;
}
/* 이하, 선택버튼 옆에 국기 이미지 추가 // 불필요시 제거가능 */
.flag-ko {
padding-left: 20px;
background-image: url(images/flag-korea.png);
background-repeat: no-repeat;
}
.flag-jp {
padding-left: 20px;
background-image: url(images/flag-japan.png);
background-repeat: no-repeat;
}
.flag-kj {
padding-left: 34px;
background-image: url(images/flag-korea-japan.png);
background-repeat: no-repeat;
}본문 작성 시
본문 p태그 또는 div태그에 클래스를 정의합니다. 저의 경우, 한국어 문장에는 kr클래스를, 일본어 문장에는 jp클래스를 설정했습니다.
포스팅을 작성할 때는 크게 2가지 방법이 있습니다.
첫번째 방법 : 각 문장 또는 단락마다 언어를 계속 바꿔가면서 쓰기
예를 들면
<p class="kr">p태그영역의 한국어 문장 1입니다.</p>
<p class="jp">pタグで囲まれた日本語の文章1です。</p>
<p class="kr">p태그영역의 한국어 문장 2입니다.</p>
<p class="jp">pタグで囲まれた日本語の文章2です。</p>물론, p태그대신 div태그를 써도 되고, span태그를 써도 됩니다. 이 부분의 포인트는 각 문장마다 언어를 바꿔가며 쓰는 경우입니다.
두번째 방법 : 일단 한국어로 쭈욱 쓴 후에 바로 이어서 일본어로 쭈욱 쓰기
만약 한국어와 일본어를 통째로 나눈다면 div태그로 감싸는 게 더 간단하겠지요.
예를 들면
<div class="kr">
<p>div태그영역의 한국어 문장3입니다.</p>
<p>div태그영역의 한국어 문장4입니다.</p>
<p>div태그영역의 한국어 문장5입니다.</p>
</div>
<div class="jp">
<p>divタグで囲まれた日本語の文章3です。</p>
<p>divタグで囲まれた日本語の文章4です。</p>
<p>divタグで囲まれた日本語の文章5です。</p>
</div>저는 본문에 이미지를 많이 넣는 편이라서 첫번째 방법으로 했습니다. 이미지보다 글 위주로 포스팅하시는 분은 두번째 방법이 더 편하시겠죠.
결과
div태그영역의 한국어 문장4입니다.
div태그영역의 한국어 문장5입니다.
divタグで囲まれた日本語の文章4です。
divタグで囲まれた日本語の文章5です。
마치며
이제 스위치 하나로 깔끔하게 여러 언어를 구사할 수 있게 되었습니다. 그러나 언어가 바뀌는 부분은 본문내용 뿐입니다. 그 외의 부분은 바뀌지 않습니다. 포스팅 제목, 메뉴, 카테고리, 댓글과 방명록의 쓰기 메뉴 등등.
저의 경우, 포스팅 제목과 카테고리는 한글과 일본어를 같이 쓰고 있고 다른 부분은 될 수 있으면 영문으로 바꾸어 놓은 상태입니다. 티스토리에서 할 수 있는 건 이게 최선이 아닌가 싶습니다.
댓글
하아~ 저도 일본어 포스팅을 생각중인데요…. 일본인들이 많이 방문하는지요???? 흑…
영문 페이지 구글 권장 사항대로 만들려고하는데 어디서 부터 손을 대야 하는지 도통 모르겠습니다.
멋지시네요!
방문해주신것도 감사한데 댓글까지 달아주셔서 감사합니다 😀
구글 블로그에서는 작동이 되질 않는데 이유가 있을까요??
제가 구글 블로그를 사용하지 않아서 잘 모르겠습니다.
혹시 제이쿼리 라이브러리는 호출하셨나요? 지금보니 제 포스팅 내용에 제이쿼리를 언급하지 않았네요.
<head> ~ </head>태그 사이에 아래 코드를 삽입해보시겠어요?
바로 딱 됐어요! 정말 감사해요. 써주신 글 저한텐 바이블입니다!!
해결되었다니 다행입니다.
2개국어로 블로그하는 게 쉽지 않으실텐데 건투를 빌겠습니다 😀
감사합니다.^^
안녕하세요 잘봣습니다. 혹시 skin.html에 넣는 방법을 알 수 있을까요? 북클럽 스킨 사용하고 있습니다.
안녕하세요. 댓글 감사합니다.
언어선택버튼 부분 말씀하시는 건가요?
제가 이제는 티스토리를 사용하지 않아서 잘 모르겠습니다만, 북클럽 스킨을 살짝 검색해보고 추측으로만 말씀드리자면,
skin.html에서 [##_article_rep_desc_##]를 검색해서 찾으시고 바로 위에 붙여넣으시면 됩니다.
즉, <div class=”entry-content”>와 [##_article_rep_desc_##]사이에 넣으시면 됩니다.
2개가 나올텐데 첫번째에 나오는 것은 페이지 관련부분이고 두번째에 나오는 것이 포스팅에 관련된 것이라서 두번째에 나오는 [##_article_rep_desc_##]위에 넣으시면 됩니다. 잘 모르시겠으면 양쪽 다 넣으셔도 됩니다.
그리고 예전에는 본문태그가 <div class=”article”>이였는데 바뀌었나보네요.
스킨에 따라 본문 class명이 다른 것 같습니다. 따라서 아래의 자바스크립트 부분도 수정하셔야 합니다.
// 여기부터 언어선택 버튼 보이기-숨기기 if ($(".article p, .article div").hasClass("jp")) {북클럽이시라면 자바스크립트의 위의 부분에서 .article p, .article div를 .entry-content p, .entry-content div로 수정하시면 될 것 같습니다.
작동하는지는 확인하지 못했습니다. 어디까지나 추측일 뿐입니다.
잘 해결되시길 바랍니다.
너무 친절하게 알려주셔서 감사드립니다. 염치없이 하나만 더 여쭙겠습니다. 티스토리에 외국어를 적용했을 때 실제로 글로벌한 유입이 얼마나 될까요? 구글최적화가 잘되었다는 가정하게 어떨지 궁금하네요. 국내 유입 목적이라면 차라리 네이버로 가는 게 낫고… 해외유입이라면 아메바나(관심사가 이쪽이라) 구글 블로거로 가는 게 나을까… (지인들 도움으로 번역을 부탁할까 하구요) 매너리즘에 빠져있어서…고민되는데, 혹시 의견을 좀 여쭤봐도 될까요? 부탁드립니다.
아메바를 언급하신 걸 보니 저처럼 일본어쪽이신 것 같습니다.
제가 처음에 티스토리에서 한국어와 일본어로 포스팅 했을 때는 블로그를 잘 모를 때였고, 그 당시에 제가 썼던 포스팅들은 정말 쓰레기같은 글들이었습니다. 그 쓰레기 글들은 여전히 남아있는 상태입니다.
게다가 애널리틱스같은 것도 사용하지 않아서 국가별 방문자를 전혀 파악하지 않았기 때문에, 제가 조언을 말씀드릴 입장은 못 됩니다.
다만 지금까지의 경험과 지식으로 판단하건데, 외국어 포스팅은 별도의 도메인으로 따로 운영하시는 게 좋을 듯 합니다.
해외유입과 수익을 같이 노리신다면 무조건 워드프레스입니다. 일본은 워드프레스가 대세입니다. 대세를 거스르기는 쉽지 않습니다.
수익없이 해외유입만 노리신다면 아메바, 라이브도어, 하테나(여기는 아마 수익화 가능) 정도가 좋을 것 같습니다.
구글 블로그는 글쎄요~ 그다지 추천하지는 않습니다.
물론 수익을 노리지 않는다고 해도 워드프레스 사용하셔도 됩니다.
저는 티스토리에서 워드프레스로 옮기면서 일본어 글을 서브도메인으로 분리하였습니다.
눈치채셨을지 모르겠지만 저의 일본어 블로그는 아직 남아있습니다.
PC는 상단메뉴, 모바일은 최하단에 日本語ブログ라는 메뉴를 들어가 보시면 구경하실 수 있습니다. 쓰레기 글들이라 읽을 가치는 없습니다. 글 전혀 안 쓰고 있구요ㅠㅠ
요즘 애드센스에 관심이 많아져서 다시 시작할까 고민하는 중입니다. 🙂
이렇게 하시라는 건 아니고, 그냥 이런식으로도 운영이 가능하다는 걸 알려드립니다.
최적화가 잘 되어있고 글 내용도 풍부하다면, 어느 정도는 유입을 기대해 볼 수 있다고 봅니다.
그러나 팩트는, 제 경험상, 궁금한 것을 구글에서 일본어로 검색했을 때, 티스토리가 구글 상단에 노출되는 경우는 본 적이 없습니다.
물론 키워드나 주제가 매칭되지 않았을 수도 있지요.
그렇다고는 해도 제 생각에는 일본에서의 유입이 많을 가능성은 적을 것 같습니다. 해외에 거주하는 한국인의 유입도 있어서 통계를 내기도 쉽지 않습니다.
그리고 서버위치와 도메인도 무시 못합니다.
장기적으로 봤을 때, 티스토리에서 외국어로 블로그를 운영하다보면은 분명 한계가 있을 겁니다.
구글에는 최적화가 될 지 몰라도, 일본에도 최적화가 될 지는 미지수입니다.
주저리주저리 쓰다보니 글이 너무 길어졌네요.
위의 언급한 내용들은 단순히 저의 뇌피셜이므로 너무 맹신하지 않으셨으면 합니다.
잘 생각해보시고 좋은 결정 내리시길 바랍니다.