BudouX는 웹을 비롯한 다양한 플랫폼에서 읽기 쉬운 텍스트 줄바꿈을 구현하기 위한 경량 분절 도구입니다. Adobe.com에서의 활용 사례와 함께 JavaScript, Python, Java에서의 사용법을 소개합니다.
일본어권 개발자를 위한 로컬 블로그
2023년 9월 24일 일요일
BudouX는 웹을 비롯한 다양한 플랫폼에서 읽기 쉬운 텍스트 줄바꿈을 구현하기 위한 경량 분절 도구입니다. 오픈소스 프로젝트로 GitHub에서 공개되어 있으며, 현재 시점에서는 일본어와 중국어(간체, 번체)를 지원합니다. 2016년에 공개한 Budou의 후속이지만, Budou와는 달리 서드파티 API나 분절 라이브러리에 의존하지 않고 동작합니다. 분절을 위한 기계 학습 모델을 포함해도 약 20 KB 정도에 불과하므로, 웹브라우저에 배포하는 JavaScript 파일에 함께 포함하는 것도 가능합니다.
단어와 단어 사이를 공백으로 띄어 쓰는 영어 등의 언어와 달리, 일본어와 중국어를 비롯한 아시아권의 일부 언어는 분절 표기를 하지 않습니다. 따라서 웹사이트나 모바일 애플리케이션에서 일본어나 중국어를 표시할 때, 화면 크기에 따라 바람직하지 않은 줄바꿈이 발생할 수 있습니다. 이러한 문제에 대한 해결책으로는 줄바꿈 요소나 줄바꿈 가능 요소를 삽입하거나, 특정 요소의 줄바꿈을 금지하는 방법 등을 생각할 수 있습니다. 하지만 그 어느 방법이든 대상 언어에 능숙한 사람이 수작업으로 처리해야 하므로, 대량의 텍스트가 있는 경우 대응하기가 어렵습니다.
이 문제를 자동으로 해결하기 위해 개발된 것이 BudouX입니다. BudouX는 문자 N-그램에 AdaBoost 알고리즘을 적용한 기계 학습 모델을 사용합니다. 이 기계 학습 모델은 텍스트의 각 문자에 대해, 다음 문자와의 사이에서 구분해야 하는지 여부를 판단하는 이진 분류 문제를 다룹니다. 예측값이 양수이면 구분하고, 그렇지 않으면 구분하지 않는 처리를 반복함으로써 읽기 쉽도록 분절된 텍스트를 출력합니다.
특징량으로 문자 N-그램(특정 문자가 연속해서 나타나는 묶음)만 사용하므로, 임의의 언어에 대해 모델을 학습하고 적용할 수 있습니다(Language Neutral). 또한 AdaBoost 알고리즘을 통해 읽기 쉬운 줄바꿈에 강하게 기여하는 N-그램부터 순서대로 가중치를 부여하고, 그 외 특징량은 무시할 수 있으므로 기계 학습 모델을 경량화할 수 있습니다(Small). BudouX에서는 JSON으로 직렬화된 기계 학습 모델, 즉 N-그램과 가중치 쌍을 디코드한 뒤, 등장한 N-그램에 대응하는 가중치 값을 더하기만 하면 예측값을 얻을 수 있습니다. 따라서 JSON 파서와 기본적인 처리 구문만 있으면 실행할 수 있어, 다양한 프로그래밍 언어와 플랫폼으로 쉽게 확장할 수 있습니다(Standalone). BudouX는 이처럼 Small, Standalone, Language Neutral의 세 가지를 기본 방침으로 개발되고 있습니다.
일본어 기본 분절 모델은 단어 단위가 아니라 문절 단위 분절을 제공합니다. 이는 문절 사이에서 줄바꿈하는 것이 일본어 가독성에 기여한다고 보기 때문입니다. 이 모델의 학습에는 주로 KNB 코퍼스(Kyoto-University and NTT Blog 코퍼스)의 문절 구분이 포함된 문장을 사용합니다. 모델 학습의 자세한 내용은 BudouX scripts README를 참고해 주세요.
현재 BudouX의 공식 저장소는 JavaScript, Python, Java를 지원합니다. 각각의 사용 방법을 간단히 소개합니다.
JavaScript
NPM을 사용하는 경우 BudouX의 JavaScript 모듈은 npm i budoux로 설치할 수 있습니다. 일본어 기본 분절기를 사용할 경우 아래와 같이 파서를 불러오고, 처리할 문자열을 parse 메서드에 전달합니다. 결과로는 분절된 문자열 배열이 반환됩니다.
import { loadDefaultJapaneseParser } from 'budoux' ;
const parser = loadDefaultJapaneseParser();
console.log(parser.parse('今日は天気です。')); // ['今日は', '天気です。']
NPM을 사용하지 않고, 웹브라우저에서 아래와 같이 ES Module로 직접 불러오는 것도 가능합니다. 여기서는 빌드된 모듈을 호스팅하는 사이트로 unpkg.com을 사용한 예를 보여줍니다.
<script type="module">import {loadDefaultJapaneseParser} from 'https://unpkg.com/budoux/module/index.js'; const parser = loadDefaultJapaneseParser(); console.log(parser.parse('今日は天気です。')); // ['今日は', '天気です。']</script>웹에서의 사용을 목적으로 한다면 Web Components 버전도 사용할 수 있습니다. 먼저 웹페이지 안에서 아래와 같이 BudouX 커스텀 요소를 불러옵니다. 여기서는 예시로 일본어 모델(budoux-ja)을 불러오고 있습니다.
그 후 BudouX로 줄바꿈 처리를 적용하려는 문자열을 budoux-ja 커스텀 요소에 전달하면, 텍스트 줄바꿈을 자동으로 정리하기 위한 마크업이 Shadow Root에 삽입됩니다.
<budoux-ja>今日は天気です。</budoux-ja>
<!-- Shadow Root --><span style="word-break: keep-all; overflow-wrap: anywhere;">今日は<wbr>天気です。</span>
Python
BudouX 모듈은 pip install budoux로 설치할 수 있습니다. 아래는 Python에서 일본어 모델을 불러와 분절을 수행하는 예입니다.
import budoux
parser=budoux.load_default_japanese_parser()
print(parser.parse('今日は天気です。'))# ['今日は', '天気です。']
Java
BudouX 모듈은 Maven Central Repository에서 com.google.budoux로 공개되어 있습니다. 설치 후에는 아래와 같이 일본어 모델을 사용할 수 있습니다.
import com.google.budoux.Parser;
public class App {
public static void main(String[]args ){
Parser parser=Parser.loadDefaultJapaneseParser();
System.out.println(parser.parse("今日は天気です。"));
// ["今日は", "天気です。"]
}
}
BudouX는 일반 텍스트뿐 아니라 HTML 코드에도 적용할 수 있습니다. 더 고급 사용법에 대한 자세한 내용은 BudouX 저장소의 README를 참고해 주세요.
이제부터는 BudouX를 활용하고 있는 Adobe의 Japan R＆D 소속 Software Development Engineer인 요시다 씨에게 활용 경위 등을 들어보았습니다.
어디에서 BudouX를 활용하고 있나요?
자사의 오운드 미디어인 adobe.com 일본어 사이트에서 BudouX를 활용하고 있습니다. 적절한 줄바꿈 처리를 통해 디바이스 크기에 관계없이 읽기 쉬운 일본어가 되도록 하고 있습니다.
BudouX를 활용하고 있는 페이지 예시
BudouX를 활용하게 되기까지의 경위
사실 BudouX를 채택하기 전부터 Adobe는 일본어 줄바꿈 처리에 힘을 쏟고 있었습니다. adobe.com은 자사 제품 CMS인 Adobe Experience Manager 위에 구축되어 있었는데, 페이지를 편집할 때 구분 문자를 수동으로 넣어 저자가 줄바꿈 지점을 설정할 수 있었습니다. 즉, 저희는 예전부터 일본어에서의 적절한 줄바꿈 처리에 관심을 가져왔던 것입니다.
이제 본론으로 들어가겠습니다. 현재 adobe.com은 Adobe Experience Manager로 구축된 기존 사이트에서, Adobe의 차세대 CMS 제품인 AEM Franklin을 기반으로 한 사이트로 이전하는 프로젝트를 진행하고 있습니다. AEM Franklin에서는 Google Docs와 Microsoft Word를 저작 도구로 활용할 수 있고, 또 Adobe Experience Manager의 과제였던 복잡한 시스템 구성이나 웹사이트 성능 등을 보다 쉽게 개선할 수 있는 새로운 개념의 제품입니다.
그러나 AEM Franklin 기반의 새로운 제품을 활용한 웹사이트로 이전하게 되면서, 기존에 존재하던 편집 시 일본어 줄바꿈 처리 기능이 사라지게 되었습니다. 이러한 상황에서 이 문제를 해결하기 위해 다양한 방법을 검토했고, 구현 비용과 운영 비용 등을 고려한 결과 서버 사이드에서 분절 등의 전처리를 하는 대신, 클라이언트 사이드에서만 경량으로 동작하는 BudouX가 최선이라는 결론에 이르러 채택하게 되었습니다.
그래도 도입 과정에는 세 가지 과제가 있었습니다. 첫 번째는 BudouX의 일본어 기본 모델이 Adobe의 콘텐츠를 학습하지 않았다는 점입니다. 특히 「お, ご」와 같은 경어 표현에 약하고, 「デジタルエクスペリエンスプラットフォーム」과 같은 긴 가타카나 복합 명사는 정확도 측면에서 다소 불안이 있었습니다. 그래서 새롭게 adobe.com의 데이터를 스크래핑해 학습시킴으로써, Adobe 사이트에 더 잘 맞는 모델을 개발할 수 있었습니다. 자세한 내용은 이 글에서 설명하고 있으니 관심 있는 분은 참고해 주세요.
두 번째는 금칙 처리 문제입니다. 금칙 처리란 행두나 행말에 특정 문자가 오지 않도록 문자 배열을 조정하는 처리를 말합니다. 예를 들어 마침표나 쉼표가 줄 첫머리에 오지 않도록 하는 것 등이 있습니다. BudouX는 다음 문자와의 사이를 구분해야 하는지 여부를 판단하는 이진 분류 문제를 다룹니다. 그 결과 매우 낮은 확률이긴 하지만, 주변 문자의 상황에 따라 구두점 앞에서 문자가 끊기는 사례가 조금 보였습니다. 평소 HTML로 문장을 작성할 때는 브라우저가 자동으로 일본어 금칙 처리를 해주기 때문에 문제가 없지만, BudouX는 줄바꿈 지점을
<wbr>로 제어하므로 예를 들어 아래 이미지처럼 줄 첫머리에 물음표(반각)가 오게 됩니다. 이 문제를 해결하기 위해 저희는 규칙 기반 금칙 처리를 BudouX에 추가해 금칙 처리를 구현했습니다. 이 문제는 현재 BudouX의 GitHub 이슈로 등록되어 있습니다.
세 번째는 웹사이트 콘텐츠가 저자의 기대대로 줄바꿈 처리되지 않을 경우 어떻게 할 것인가 하는 점이었습니다. BudouX는 높은 정확도로 읽기 쉬운 단위에서 줄바꿈을 처리해 줍니다. 하지만 경량성과 속도를 중시하기 때문에 때때로 저자가 의도한 동작과 다른 출력을 내는 경우가 있었습니다. 또한 아무리 정확도가 높은 모델을 채택하더라도 완전 자동으로는 100% 저자의 의도대로 결과를 내는 것이 불가능합니다. 콘텐츠를 운영하다 보면 이 부분만큼은 틀리지 않았으면 하는 상황이 반드시 존재합니다. 그래서 저희는 자동 + 수동 미세 조정을 가능하게 함으로써 이 문제를 해결했습니다.
다행히 AEM Franklin에는 저작 도구인 Google Docs와 Microsoft Word 파일에 대해 웹사이트의 페이지별, 또는 전체 페이지에 세밀한 메타데이터를 추가하는 기능이 있었습니다. 이 기능을 활용함으로써 저자가 기대하는 규칙과 설정을 세세하게 추가할 수 있게 되었습니다. 예를 들면 아래와 같은 것이 가능합니다.
"ご覧ください"라는 텍스트가 있을 때 "ご"와 "覧ください" 사이에서는 줄바꿈할 수 없게 하기
"カスタマージャーニーマップ"라는 텍스트가 있을 때 "カスタマー"와 "ジャーニーマップ" 사이에서는 줄바꿈할 수 있게 하기
페이지의 일부분에 BudouX를 적용하지 않도록 하기
BudouX에 전달하는 파라미터를 조정하기
그 결과 BudouX의 똑똑한 자동 줄바꿈 처리의 이점을 누리면서도, 저자가 세밀한 미세 조정을 할 수 있게 되어 이상적인 운영 체계를 구축하는 데 성공했습니다. 또한 현재는 이전 전의 Adobe Experience Manager에서 관리되는 페이지에서도 BudouX가 활용되고 있으며, 수동으로 수행하던 줄바꿈 처리는 자동화되었습니다.
BudouX는 경량성과 성능이 강점입니다. Lighthouse 점수에 대한 영향도 미미하며, adobe.com의 성능 지표를 충족하고 있습니다. 또한 최근에는 finetune이 가능해져 개별 사이트의 콘텐츠에 맞는 모델을 더 쉽게 개발할 수 있게 되었습니다. 앞으로도 BudouX의 발전을 기대하고 있습니다.
이전
이후
현재 BudouX는 ICU (International Components for Unicode)의 일부가 되어 웹에 국한되지 않고 다양한 플랫폼에서 활용되기 시작했습니다. Chrome 119 이후에는 lang 속성이 ja로 지정된 요소에 대해 CSS에서 word-break: auto-phrase로 지정된 부분이 BudouX에 의해 문절 단위로 줄바꿈됩니다. Android의 문절 구분 기능도 Android 14 이후에는 BudouX를 사용하게 되어 데이터 크기를 크게 줄일 수 있습니다. 다양한 장면에서 읽기 쉬운 일본어 경험을 제공하기 위해 BudouX는 앞으로도 계속 개선될 예정입니다.
한편 BudouX의 기계 학습 모델도 완벽하지는 않아 잘 처리하지 못하는 경우도 있습니다. 만약 원하는 결과를 얻지 못하는 사례가 있다면, 꼭 GitHub에서 Issue를 등록해 주세요. Pull Request도 언제나 환영합니다. 여러분의 피드백을 기다리고 있습니다.
Shuhei Iitsuka - Senior UX Engineer, Google Brand Studio APACTaketo Yoshida - Software Development Engineer, Adobe Japan R＆D
Follow @googledevjp
"제품에 관한 의견은 제품 포럼으로 부탁드립니다"
