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

Reading time : about 18 minutes.

이 글은 약 5년전에 작성된 글입니다. 내용 및 정보가 현재와 다를 수도 있습니다.

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

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

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>
자바스크립트의 동작 설명
  • STEP1
    Jquery라이브러리 호출

    이미 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>

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

결과

Language :

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

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

(버튼을 클릭해서 확인해보세요)
p태그에 kr과 jp클래스 적용
p태그영역의 한국어 문장 1입니다.
p태그영역의 한국어 문장 2입니다.

div태그에 kr과 jp클래스 적용
div태그영역의 한국어 문장3입니다.
div태그영역의 한국어 문장4입니다.
div태그영역의 한국어 문장5입니다.

마치며


이제 스위치 하나로 깔끔하게 여러 언어를 구사할 수 있게 되었습니다. 그러나 언어가 바뀌는 부분은 본문내용 뿐입니다. 그 외의 부분은 바뀌지 않습니다. 포스팅 제목, 메뉴, 카테고리, 댓글과 방명록의 쓰기 메뉴 등등.

저의 경우, 포스팅 제목과 카테고리는 한글과 일본어를 같이 쓰고 있고 다른 부분은 될 수 있으면 영문으로 바꾸어 놓은 상태입니다. 티스토리에서 할 수 있는 건 이게 최선이 아닌가 싶습니다.

이 글은 워드프레스로 옮기기 전에 티스토리에서 작성한 글임을 다시 한 번 알려드립니다.

댓글

  1. 김형준 말해보세요:

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

  2. Danny 말해보세요:

    영문 페이지 구글 권장 사항대로 만들려고하는데 어디서 부터 손을 대야 하는지 도통 모르겠습니다.

  3. 임영빈 말해보세요:

    멋지시네요!

    • 유메미루피터팬유메미루피터팬 말해보세요:

      방문해주신것도 감사한데 댓글까지 달아주셔서 감사합니다 😀

  4. 청명 말해보세요:

    구글 블로그에서는 작동이 되질 않는데 이유가 있을까요??

    • 유메미루피터팬유메미루피터팬 말해보세요:

      제가 구글 블로그를 사용하지 않아서 잘 모르겠습니다.
      혹시 제이쿼리 라이브러리는 호출하셨나요? 지금보니 제 포스팅 내용에 제이쿼리를 언급하지 않았네요.
      <head> ~ </head>태그 사이에 아래 코드를 삽입해보시겠어요?

      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      
      • 청명 말해보세요:

        바로 딱 됐어요! 정말 감사해요. 써주신 글 저한텐 바이블입니다!!

        • 유메미루피터팬유메미루피터팬 말해보세요:

          해결되었다니 다행입니다.
          2개국어로 블로그하는 게 쉽지 않으실텐데 건투를 빌겠습니다 😀

  5. 하늘열차 말해보세요:

    감사합니다.^^

제목과 URL을 복사했습니다