Language :

이 포스트는 한국어와 일본어로 작성되어 있습니다.

この記事は日本語と韓国語で作成されています。

この記事は日本語でも書いてあります。日本語の記事へ

티스토리에서 다국어 블로그 만들기


약 6분정도면 읽어요~


‘블로그에 한국어와 일본어로 동시에 글을 쓰고 싶다’

2011년 처음에 티스토리에 블로그를 개설할때부터 고민했던 부분이었습니다. 당시에는 일본생활 5년차라서 어느정도 일본어도 할 줄 알았고 일본어로 글을 쓰면 일본인들도 내가 쓴 글을 봐줄것이라는 생각을 했었죠. 웹에 관한 지식이 없던 저는 그냥 단순하게 티스토리에 블로그를 2개 개설해서 각각 한국어와 일본어를 포스팅했었습니다. 그러나 오래 가지 못하고 일본어블로그 쪽은 폐쇄했습니다.


2개의 블로그를 관리하기가 귀찮았고 방문자들도 양쪽으로 나눠지기 때문에 글 노출에는 도움이 되지 않는것 같았습니다. 그 이후로는 한국어와 일본어를 문단마다 번갈아서 쓰도록하는 방법을 사용하고 있었습니다. 글이 좀 길어지면 따로 올리는 방법도 썼었지요.


그러다 최근에 문득 이런 생각이 들었습니다.

‘더 많은 사람들에게 보여주기 위한 내 욕심 때문에 방문객들에게 피해를 주고 있는건 아닌가’

한국어를 공부하는 일본인이나 일본어를 공부하는 한국인 입장에서 본다면 양쪽 다 있는 것이 약간의 도움이 될지는 모릅니다. 그러나 그렇지 않은 방문객들 입장에서 보면 일본어를 모르는 사람들에게 있어서 한국어문장 바로아래에 있는 일본어문장은 그냥 글을 읽는데 방해만 될뿐입니다. 반대로 일본인 방문객도 마찬가지 일겁니다.


그래서 열심히 검색해봤는데 워드프레스에서 다국어 블로그를 구축하는 방법과 번역기를 다는 방법 뿐이고, 티스토리에서 만드는 방법은 0%에 가까울 정도로 정보가 없었습니다.


티스토리에서 다국어 블로그 만들기


티스토리에서 다국어 블로그를 만드는 방법

몇가지 방법이 있습니다.

1. 한국어 블로그와 외국어 블로그를 각각 다른 계정이나 다른 도메인을 따로 사용

한국어 블로그와 외국어 블로그가 각각 독립적으로 운영되기 때문에 더 많은 노력이 더 필요할 수 밖에 없습니다. 그 대신에 각각의 언어로 서로 다른 디자인이나 콘텐츠를 작성할수 있는 장점이 있습니다. 같은 내용끼리는 서로 링크를 걸어서 연결하면 됩니다.


2. 한개의 포스트에 각각의 언어로 포스팅

해당 언어를 선택해주는 버튼을 만들어서 방문객이 클릭하면 해당 언어를 표시하도록 합니다. 아무래도 2개의 블로그를 관리하기보다는 좀 수월한 점이 있겠죠.


3. 하나의 계정에서 각각의 언어로 따로 포스팅

한개의 블로그라서 관리는 쉽겠지만 글 목록을 볼때 한국어 글제목과 일본어 글제목이 번갈아 나오기 때문에 모양새가 좀 그렇습니다. 이 방법 역시 같은 내용끼리는 서로 링크를 걸어서 연결하면 됩니다.


번역기를 다는 방법은 언급하지 않겠습니다. 번역기를 사용할 거면 저처럼 고민할 필요도 없었겠지요. 그리고 기계번역은 짧은 문장이라면 달아도 괜찮겠지만 정보성 글에서 이상하게 번역되면 혼란만 초래할테니까요.


구글에서는 다국어 블로그를 구축하는 방법에 대해서 첫번째 방법을 추천하고 있습니다.

참고 : https://support.google.com/webmasters/answer/182192?hl=ko


첫번째 방법은 이미 실패한 경험도 있고 저는 SEO같은것 크게 신경쓰지 않기 때문에 두번째 방법을 사용하기로 했습니다. 그래서 생각한 방법은 다음과 같습니다. 참고로 저는 한국어와 일본어, 2개국어를 사용하고 있습니다. 영어는 못합니다 ㅜㅜ

게다가 저는 html, css, java를 따로 공부한 사람이 아닙니다. 그냥 만들어져 있는 스킨을 조금 수정만 할 줄 아는 정도입니다. 지금부터 소개하는 소스가 최적화 된 것이 아닐 가능성이 크다는 것을 염두해 두시기 바랍니다. 스킨이나 브라우저에 따라서 안 될수도 있습니다. 제 블로그에선 잘 동작합니다. 동작이 확인된 브라우저는 윈도우7의 익스플로러11, Chrome, 그리고 iphone의 사파리 등입니다.



티스토리에서 다국어 블로그 만들기


방문객의 브라우저 언어가 일본어인지를 먼저 판단합니다. 일본어일 경우에만 일본어로 출력하고 일본어가 아닐경우 무조건 한국어로 출력하게 했습니다. 일본도 아니고 한국도 아닌 다른 나라에서 온 방문객은 해외에 거주중인 한국인일 경우가 많을것이기 때문입니다. 만일 한국어와 영어 조합으로 하신다면 브라우저 언어가 한국어인지를 판단해서 한국어를 표시하고 그 외의 언어는 영어로 표시하는 게 좋겠죠. 아무래도 영어는 세계 공용어인 만큼 더 많은 방문객을 불러올 가능성이 있으니까요.


스크립트 삽입

아래의 코드를 <head>와 </head>사이에 넣습니다.


<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'); //←(1)
// 여기부터 언어선택 버튼 보이기-숨기기
	if ($(".article p, .article div").hasClass("jp")) {
		$(".lng").show();
	}
	else {$(".lng").hide();
	}
});
</script>

사용자의 브라우저 언어를 읽어서 해당언어가 아닌 쪽을 숨기는 역할을 합니다.

먼저 브라우저의 언어를 알아내는 시도를 하고, 실패하면 사용자에 의해 사용되는 언어(지역 언어)를 알아냅니다. 이것도 실패하면 마지막으로 사용자의 OS의 언어를 알아냅니다. 그럴 일은 없을테지만 혹시라도 알아내지 못했다면 그냥 한국어로 설정하도록 했습니다.


알아낸 값을 소문자로 변경하고 앞의 2글자만 따기로 합니다. 보통은 ko, ja, en처럼 원래 2글자인데 어떤 브라우저는 ko-KR, ja-JP, en-US 등으로 나오기 때문입니다. 만일 알아낸 값이 일본어(ja)라면 한국어는 숨기고 그렇지 않다면 일본어를 숨깁니다.


다음은 사용자가 언어 선택을 할 수 있는 라디오버튼 부분입니다.

“한국어”에 “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개의 언어로만 작성되었고 클래스를 지정하지 않았다면 이 선택버튼은 보이지 않게 됩니다.


<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">한국어</label>
			<input type="radio" name="languagee" id="radio-jp" value="2"  />
			<label for="radio-jp">日本語</label>
			<input type="radio" name="languagee" id="radio-kj" value="3"  />
			<label for="radio-kj">한국어+日本語</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-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#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;
}
input #radio-ko{
	background-image: url(images/south_korea.png);
}


본문 작성 시

포스팅을 작성할때는 본문 p태그에 클래스를 정의합니다. 저의 경우, 한국어 문장에는 kr클래스를, 일본어 문장에는 jp클래스를 설정했습니다.

예를들면

<p class="kr">이것은 한국어 문장1입니다</p>
<p class="jp">これは日本語の文章1です</p>
<p class="kr">이것은 한국어 문장2입니다</p>
<p class="jp">これは日本語の文章2です</p>


만약 한국어와 일본어를 통째로 나눈다면 div태그로 감싸는게 더 간단하겠지요.

예를 들면

<div class="kr">
	<p>이것은 한국어 문장4입니다</p>
	<p>이것은 한국어 문장5입니다</p>
	<p>이것은 한국어 문장6입니다</p>
</div>
<div class="jp">
	<p>これは日本語の文章4です</p>
	<p>これは日本語の文章5です</p>
	<p>これは日本語の文章6です</p>
</div>

저는 본문에 이미지를 많이 넣는 편이라서 첫번째 방법으로 했습니다. 이미지보다 글 위주로 포스팅하시는 분은 두번째 방법이 더 편하시겠죠.


결과

Language :

이 포스트는 한국어와 일본어로 작성되어 있습니다.

この記事は日本語と韓国語で作成されています。

이것은 한국어 문장1입니다

これは日本語の文章1です

이것은 한국어 문장2입니다

これは日本語の文章2です


이것은 한국어 문장3입니다

이것은 한국어 문장4입니다

이것은 한국어 문장5입니다

これは日本語の文章3です

これは日本語の文章4です

これは日本語の文章5です

마지막으로

이제 스위치 하나로 깔끔하게 여러 언어를 구사할 수 있게 되었습니다. 그러나 언어가 바뀌는 부분은 본문내용 뿐입니다. 그 외의 부분은 바뀌지 않습니다. 포스팅 제목, 메뉴, 카테고리, 댓글과 방명록의 쓰기 메뉴 등등. 저의 경우, 포스팅 제목과 카테고리는 한글과 일본어를 같이 쓰고 있고 다른 부분은 될수 있으면 영문으로 바꾸어 놓은 상태입니다. 티스토리에서 할 수 있는 건 이게 최선이 아닌가 싶습니다.

sponsored link
큰사각형

댓글

  1. 김형준 댓글:

    하아~ 저도 일본어 포스팅을 생각중인데요…. 일본인들이 많이 방문하는지요???? 흑…