블로그에 일본어 루비 문자 후리가나 입력 방법 (워드프레스 & 티스토리)

Last Updated: 2024년 09월 29일 댓글

일본어로 블로그를 운영하는 경우 콘텐츠를 작성할 때 한자 위에 루비(후리가나)를 추가하는 방법에 대해 궁금해 하실 것입니다. 루비를 추가하는 방법을 모르는 분들은 아마 한자 옆에 괄호로 후리가나를 넣거나, 한자 위에 폰트 크기를 작게 조정하여 스페이스로 간격을 조절하면서 수작업으로 조정하는 방법을 사용할 것 같습니다. 이런 방법은 매우 번거롭고 시간도 많이 소요됩니다.

워드프레스와 티스토리 블로그에서는 HTML의 <ruby> 태그를 사용하여 간편하게 한자 위에 루비를 추가할 수 있습니다. 이 글에서는 워드프레스와 티스토리에서 루비 문자를 입력하는 방법에 대하여 살펴보겠습니다.

루비 문자

일본어 서적에서는 한자 위나 옆에 히라가나나 카타카나로 된 발음 표시를 자주 볼 수 있습니다. 이런 작은 글자를 후리가나라고 합니다.

일본어에서 루비 문자(ルビ, Ruby)는 주로 어려운 한자나 어린이가 읽기 어려운 글자 위나 옆에 작은 글씨로 표시되는 발음 가이드를 말합니다. 이 발음 가이드는 히라가나나 카타카나로 된 후리가나로 표기되며, 독자가 정확한 발음과 의미를 쉽게 파악할 수 있도록 도움을 줍니다.

일본어 출판물, 특히 어린이 책, 만화, 학습 자료, 신문 등에서 자주 사용됩니다. 세로 쓰기에서는 한자의 오른쪽에, 가로 쓰기에서는 한자의 위에 위치하는 것이 일반적입니다.

워드프레스 블로그나 티스토리 블로그에서는 HTML 모드에서 HTML 태그로 루비 문자를 표시할 수 있습니다. 루비 문자 예시:

<ruby>
  漢字 <rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>

각 태그에 대한 설명:

  1. <ruby>: 루비 텍스트를 감싸는 태그입니다.
  2. <rt>: 루비 문자(발음 가이드)를 넣는 태그입니다.
  3. <rp>: 루비 문자를 지원하지 않는 브라우저에서 표시될 괄호를 정의하는 태그로, 선택 사항입니다.

일본어 한자/문장에 루비 문자 <ruby> 태그 만들기

HTML에 익숙한 경우 HTML로 직접 <ruby> 태그를 추가하여 루비 문자를 입힐 수 있을 것입니다. <ruby> 태그를 변환해 주는 온라인 사이트를 이용하는 것도 가능합니다.

하지만 간단하게는 챗GPT 등의 생성형 AI에 요청하면 쉽게 루비 태그를 만들 수 있을 것입니다.

구글에서 일본어로 검색하여 몇몇 일본어 블로그나 사이트를 살펴보니 대부분 루비 문자를 입력하지 않고 한자만 표시하는 것 같습니다.

일본 정부기관(문화청) 홈페이지의 문서를 살펴보니 한자에 후리가나 발음 표시가 없이 한자만 사용되고 있네요. 구글링한 다른 일본어 웹사이트들도 마찬가지로 루비 문자를 사용하지 않은 것으로 봐서, 일본어 웹 문서에서는 루비 문자를 사용하지 않는 경우가 많은 것 같습니다. (어쩌면 제가 살펴본 사이트들만 그럴 수도 있고요.)

일본 문화청 홈페이지의 한 문단을 복사하여 챗GPT에 루비 문자를 추가해달라고 요청해보았습니다.

HTML 코드에 ruby 태그를 추가하고 블로그의 HTML 모드에서 이를 적용하면, 블로그에 루비 문자가 포함된 일본어 텍스트가 표시됩니다. 오류가 있을 수 있으므로 체크하여 오류가 있으면 직접 수정하도록 합니다.

워드프레스에 일본어 루비 문자 입력하기

워드프레스의 블록 에디터(구텐베르크 편집기)에서는 사용자 정의 HTML 블록에 HTML 코드를 추가할 수 있습니다.

블록 에디터 편집기 화면에서 /html을 입력한 다음, 사용자 정의 HTML 블록을 쉽게 선택할 수 있습니다(키보드 단축키 사용하기 참조).

사용자 정의 HTML 블록에 일본어 문장에 루비 문자 문자를 추가한 HTML 코드를 입력합니다.

그러면 아래와 같이 일본어 한자 위에 루비 문자가 표시되어 일본어가 표시됩니다.

ほんガイドラインは,出入国しゅつにゅうこく在留ざいりゅう管理かんり庁と文化ぶんか庁が,共生きょうせい社会しゃかい実現じつげん向けむけたやさしい日本語にほんご活用かつよう促進そくしんするため,学識がくしき有識者ゆうしきしゃ地方ちほう自治体じちたい外国人がいこくじん支援しえんする団体だんたい関係者かんけいしゃ等からなる「在留ざいりゅう支援しえんのためのやさしい日本語にほんごガイドラインがいどらいん関するかんする有識者ゆうしきしゃ会議かいぎ」を開催かいさい作成さくせいしました。

사용자 정의 HTML 블록을 사용하지 않고 [ruby]한자|발음기호[/ruby]와 같은 형식으로 입력하고 싶은 경우 [ruby]...[/ruby] 숏코드를 루비 문자 태그로 변환하는 플러그인을 만들어서 활용할 수 있을 것입니다.

티스토리 블로그에 일본어 루비 문자 입력하기

티스토리에서도 비슷한 방법으로 가능합니다.

포스트 작성 화면에서 입력 모드를 HTML 모드로 변경하도록 합니다.

HTML 모드에서 원하는 위치에 <ruby> 태그가 추가된 일본어 텍스트를 입력하면 됩니다.

하지만 티스토리에서 <p> 태그를 강제로 입력할 수 있습니다. 이 때문에 의도치 않게 ruby 태그가 들어간 곳에 <p> 태그가 입력되어 여러 라인으로 표시될 수 있습니다. 만약 <p> 태그가 강제로 입력되어 일본어 텍스트가 어색하게 표시된다면 다음 그림과 같이 일본어 텍스트를 <div> 태그로 감싸는 것을 고려할 수 있습니다.

문서를 저장한 후에 블로그 글을 살펴보면 일본어 루비 문자가 올바르게 표시될 것입니다.

위의 방법이 번거롭고 일본어 루비 문자를 입력해야 할 일이 많은 경우, [ruby*한자|발음*]으로 입력하면 자동으로 <ruby> 태그로 변환하도록 코드를 만드는 것을 고려할 수 있습니다. 챗GPT에 요청해보면 비슷하게 만들어 줄 것입니다.

이런 작업에 어려움을 겪는 경우 여기에서 서비스(유료)를 요청하실 수 있습니다.

마치며

이상으로 워드프레스와 티스토리 블로그에서 일본어 루비 문자를 입력하는 방법에 대하여 살펴보았습니다.

일본인들은 한자에 대한 자부심(?)이 대단하다는 글을 본 기억이 납니다. 하지만 디지털 시대에 일본어를 입력하는 것이 여간 불편한 것이 아니네요. 우리나라는 한자를 완전 폐지함에 따라 한자로 된 우리나라 단어들을 제대로 이해하지 못하여 문해력 저하 문제가 간혹 언론을 통해 지적되곤 합니다. 한자를 배우면 좋은 점도 있지만, 그만큼 많은 시간과 노력이 들어가야 하기 때문에 무엇이든 장단점이 있는 것 같습니다.

참고


댓글 남기기

Leave a Comment