티스토리 일본어 루비 변환기: 단락 깨짐 없이 루비 코드 표시하는 방법

일본어 루비(ruby) 티스토리 입력 오류 해결 및 변환기 사용법

그 이유는티스토리 에디터 자체에 있습니다. 티스토리 에디터는 HTML 태그를 자동으로 변환하고 정리하는 기능을 갖고 있어, 원래 의도했던 ruby 태그가 앞뒤로 p 태그와 같은 다른 태그로 자동으로 추가되어 코드가 바뀌어 표시되는 경우가 발생합니다.

또한 연속된 루비 태그가 한 줄로 붙거나, 단락 구분이 무시되는 등 원문 그대로의 레이아웃이 깨지게 됩니다. 결국 원래 의도했던 줄바꿈과 단락 구조를 유지하기 어렵고, 일본어 단어의 발음 표시가 시각적으로 올바르게 나타나지 않습니다.

이 글에서는 그 원인과 함께, 루비 코드 변환기를 사용하여 티스토리에서 안정적으로 표시하는 방법을 소개합니다.

루비(Ruby) 코드란?

일본어에서 漢字(한자) 위나 옆에 읽는 법(발음, 후리가나)을 표시할 때 사용하는 HTML 태그입니다.

漢字かんじ

와 같이 작성하면, 웹 브라우저에서 漢字 위에 かんじ가 작은 글씨로 표시됩니다.

1. 티스토리에서 루비 코드가 깨지는 이유

티스토리 에디터는 HTML 태그를 자동으로 변환하거나 정리하는 기능이 있습니다.
이 때문에 다음과 같은 문제가 발생합니다.

• ruby 태그 앞뒤에 p 태그등이 자동추가되어 루비 표시가 깨짐
• 연속된 ruby 태그가 각각 div로 나누어지지 않고 붙어서 나옴
• 줄바꿈, 빈 줄 기준 단락이 유지되지 않음

즉, 원문 그대로 루비를 입력하면 시각적으로 올바른 단락 구분과 루비 표시를 할 수 없습니다.

2. 일본 태그 문제 해결: 루비 코드 변환기 사용

이 문제를 해결하려면 블로그 운영자가 수동으로 루비 코드를 모두 수정해야 합니다. 그러나 코드를 수정하는 것은 그리 쉬운 일이 아니며, 매번 코드를 변경하려면 상당히 불편하고 많은 시간이 소요됩니다.

수동으로 수정한 코드

今日きょう公園こうえん子供こども犬いぬ
昼ひる友達ともだちお弁当おべんとう美味おい

아래 루비코드 티스토리 자동화 변환 프로그램을 사용하면, 입력된 ruby 태그를 빈 줄 기준 단락으로 나누고, 단락별로 div로 묶어 출력할 수 있습니다.
각 단어는 span class=”inline-ruby”로 감싸져, 티스토리에서도 그대로 붙여 넣을 수 있습니다.

예제 입력

ruby今日rp(/rprtきょう/rtrp)/rp/rubyは天気が良く、
ruby公園rp(/rprtこうえん/rtrp)/rp/rubyへ散歩に行きました。
ruby子供rp(/rprtこども/rtrp)/rp/rubyたちは元気に遊んでいて、
ruby犬rp(/rprtいぬ/rtrp)/rp/rubyも一緒に走り回っていました。

ruby昼rp(/rprtひる/rtrp)/rp/rubyになると、
ruby友達rp(/rprtともだち/rtrp)/rp/rubyと一緒に
rubyお弁当rp(/rprtおべんとう/rtrp)/rp/rubyを広げて
ruby美味rp(/rprtおい/rtrp)/rp/rubyしく食べました。

변환 후 출력 예시

div class="ruby-block"
span class="inline-ruby"ruby今日rp(/rprtきょう/rtrp)/rp/ruby/span
span class="inline-ruby"ruby公園rp(/rprtこうえん/rtrp)/rp/ruby/span
span class="inline-ruby"ruby子供rp(/rprtこども/rtrp)/rp/ruby/span
span class="inline-ruby"ruby犬rp(/rprtいぬ/rtrp)/rp/ruby/span
/div

div class="ruby-block"
span class="inline-ruby"ruby昼rp(/rprtひる/rtrp)/rp/ruby/span
span class="inline-ruby"ruby友達rp(/rprtともだち/rtrp)/rp/ruby/span
span class="inline-ruby"rubyお弁当rp(/rprtおべんとう/rtrp)/rp/ruby/span
span class="inline-ruby"ruby美味rp(/rprtおい/rtrp)/rp/ruby/span
/div

• 빈 줄을 기준으로 단락이 나뉘어 div class=”ruby-block” 안에 루비 코드가 묶입니다.
• 각 단어는 span class=”inline-ruby”로 감싸져 있어, 티스토리에서 줄바꿈과 단락 구조를 유지합니다.

3. 루비 코드 변환기 사용법

사용 방법

1. 위 HTML 파일을 브라우저에서 열거나, 블로그용 HTML 편집기에 삽입
2. 루비 코드를 textarea에 붙여넣기
3. 변환버튼 클릭 아래 출력창에 변환된 코드 생성
4. 복사버튼 클릭 티스토리 HTML 편집창에 붙여넣기
5. 초기화버튼으로 입력 초기화 가능

1. 루비 코드 입력

• 변환기 상단의 입력창에 ruby 태그가 포함된 텍스트를 그대로 입력합니다.

예시:

ruby今日rp(/rprtきょう/rtrp)/rp/rubyは天気が良く、
ruby公園rp(/rprtこうえん/rtrp)/rp/rubyへ散歩に行きました。

2. 단락 구분

• 문단을 나누고 싶으면 빈 줄을 추가하세요.
• 변환기는 빈 줄을 기준으로 div class=”ruby-block” 단락을 나눠줍니다.

3. 변환 버튼 클릭

• 입력창 아래의 변환 버튼을 클릭하면 루비 코드가 블록 단위로 변환되어 아래 출력창에 나타납니다.

4. 복사 버튼 클릭

• 출력창에 표시된 코드를 복사 버튼으로 클립보드에 복사합니다.
• 이제 그대로 티스토리 본문 HTML 모드에 붙여 넣으면 루비가 정상적으로 표시됩니다.

5. 초기화 버튼 클릭

• 입력창과 출력창을 비우고 싶으면 초기화 버튼을 클릭하세요.

루비 코드 변환기를 활용하면 티스토리 블로그에서 일본어 루비를 깔끔하게 표시할 수 있으며, 단락과 줄바꿈 문제를 걱정할 필요가 없습니다. 일본어 학습 자료, 문장 예제, 교재 콘텐츠 등 다양한 콘텐츠에서 일본어 한자와 발음을 정확하게 보여주고, 블로그 글의 가독성과 완성도를 높일 수 있습니다.

이제 티스토리에서 일본어 루비를 사용해도 글이 깨지지 않고, 원문과 발음이 보기 좋게 표시되는 블로그 콘텐츠를 손쉽게 작성할 수 있습니다.

일본어