놀이터

놀이터 — DOM·평문·모델을 한 화면에서 같이 본다

선언형 마크업 대신 window.FontKku.render(), renderText(), createTextModel()을 직접 제어하면서 DOM 그리기, 2줄 평문 출력, 구조 요약, TextModel JSON을 나란히 확인한다.

render(): DOM 미리보기 renderText(): 2줄 평문 createTextModel(): 구조 요약 터미널 명령: bin/font-kku-text.js

터미널 명령

같은 평문 모드 규칙을 브라우저 밖에서도 바로 쓸 수 있게 bin/font-kku-text.js를 제공한다.

node ./bin/font-kku-text.js "안녕하세요 반갑습니다"
printf "안녕하세요 반갑습니다\n" | node ./bin/font-kku-text.js

인사 문장, 복합모음/겹받침, 개행 포함 문장을 버튼 하나로 불러와 비교한다.

글 입력은 모든 출력에 반영되고, 글꼴·크기·줄바꿈·움직임 조작은 DOM 미리보기에만 적용된다. 값을 바꾸면 즉시 다시 그리며, 오른쪽 평문 출력은 오직 입력 문자열과 한글 분해 규칙만 사용한다.

브라우저 쪽 실제 그리기 결과다. 글꼴 CSS와 런타임 CSS가 모두 적용된다.

같은 입력, 2줄 평문 출력

renderText() 결과. 입력 한 줄당 위/아래 2줄이 생성되며, 글꼴과 크기는 무시되고 구조만 출력된다.

right:none, bottom:single, split-right:single 같은 조합 비율을 빠르게 확인한다.

세로모음

강처럼 초성과 중성이 좌우로 붙고 종성은 아래줄로 내려간다.

ㄱㅏ
　ㅇ

가로모음

요는 종성이 없으므로 초/중이 위아래로 나뉜다.

ㅇ
ㅛ

섞임모음

봔은 초성+앞 모음 합자와 뒤 모음으로 윗줄을 구성한다.

보ㅏ
　ㄴ

공유 분절 트리