0개
받은 글꼴 파일
이 페이지는 폰꾸 글꼴 16종을 쓰지만 글꼴 파일(woff·ttf)은 받지 않습니다. 글꼴마다 받는 것은 자모 배치를 담은 CSS 한 장이고, 그 글꼴이 화면에 처음 나올 때 받습니다. 글자 모양은 기기 글꼴이나 작은 SVG 자소판에서 옵니다.
계기판에서 실측값 보기자음 19모음 21한글 11,172자
글꼴 파일 없이, 한 줄로 꾸미는 한글
폰꾸는 한글을 초성·중성·종성으로 나눠 다시 조립해 그립니다. 기기에 있는 한글 글꼴이 재료라 내려받을 글꼴 파일이 없고, 네온·스티커·색동처럼 글꼴로는 어려운 제목도 스크립트 한 줄로 씁니다.
글꼴 파일로는 안 되던 일
글꼴 파일은 글자 11,172자의 그림을 담습니다. 폰꾸는 그림 대신 한글을 자모로 나눠 다시 그리는 규칙을 보냅니다. 그래서 글꼴 파일이 갈 수 없는 곳에서도 그려지고, 규칙에 주사위를 섞어 매번 다른 글꼴도 됩니다. 내 상황을 골라 아래에서 직접 확인해 보세요.
같은 글자도 매번 다르게
글꼴 파일은 같은 글자를 늘 같은 그림으로 그립니다. 폰꾸는 글자를 그리는 규칙이라 주사위를 섞을 수 있습니다. 위의 '하' 다섯 개는 이 페이지가 한 번 받은 스크립트와 CSS 안에서 글꼴·꾸밈·변주·움직임을 저마다 새로 고른 것이고, 자모마다 씨앗값으로 기울기·자리·굵기·너비·색까지 달라집니다. 같은 씨앗이면 언제나 똑같습니다.
내 상황
"손글씨 느낌인데 '하하하하'가 도장 찍은 듯 똑같아요"
글꼴 파일은 같은 글자를 늘 같은 그림으로 그립니다. 한글은 11,172자마다 변형을 따로 담을 수도 없습니다.
자모마다 씨앗값이 달라 같은 글자를 되풀이해도 획마다 기울기가 다릅니다. 받을 파일은 늘지 않습니다.
직접 해 보기"들어올 때마다 새 표정의 제목을 보여 주고 싶어요"
정해진 글꼴로는 매번 다른 모양을 낼 수 없어 이미지 여러 장을 번갈아 쓰게 됩니다.
seed="auto"면 그릴 때마다 자모가 새로 흔들립니다. 글꼴과 색의 범위 안에서만 흔들려 분위기는 그대로입니다.
"사람마다 다르지만, 다시 열어도 같은 모양이었으면"
이름표·프로필·응원 카드·각인 미리보기마다 글꼴을 따로 만들 수는 없습니다.
씨앗에 닉네임이나 주문번호를 넣으면 사람마다 다른 모양이 나오고, 언제 다시 그려도 똑같습니다.
이름으로 해 보기"무작위로 뽑다가 마음에 드는 모양을 고정하고 싶어요"
인쇄물·공유 링크·스크린샷은 화면에서 본 그 모양이어야 합니다.
마음에 든 변주의 씨앗값을 코드에 적으면 그 모양으로 고정됩니다.
뽑고 고정해 보기"간판 글자가 살아 있는 것처럼 계속 표정을 바꿨으면"
글꼴 파일의 글자는 움직여도 모양 자체는 바뀌지 않습니다.
씨앗을 시간에 따라 바꾸면 자모가 계속 새 표정을 짓습니다.
씨앗 섞기 보기"웹폰트를 막는 곳에서 제목이 무너져요"
iOS 잠금 모드는 웹 글꼴을 표시하지 않을 수 있고, 폐쇄망·망분리 사내 시스템이나 외부 글꼴 주소를 막는 보안 정책에서는 글꼴 파일을 받지 못합니다.
기기에 이미 있는 한글 글꼴을 재료로 조립하므로 받아야 할 글꼴 파일이 없습니다.
막아 보기"한글 글꼴이 없는 기기라 □□□로 나와요"
해외 PC, 키오스크, 사이니지, 최소 설치 리눅스처럼 한글 글꼴이 없으면 브라우저는 한글을 그리지 못합니다.
그림 자소 글꼴은 SVG 자소판 그림으로 그려 기기 글꼴이 필요 없습니다. 입력기 모듈로 한글 쓰기까지 됩니다.
글꼴 없는 기기 흉내"닉네임의 '뷁', 이름의 '믜'만 글꼴이 달라져요"
용량을 줄이려고 완성형 2,350자만 담은 서브셋 웹폰트를 쓰면 그 밖의 글자는 다른 글꼴로 대신 그려집니다.
조합해서 그리므로 11,172자가 모두 같은 모양입니다.
빈 글자 검사"글꼴과 효과를 여럿 섞고 싶은데 웹폰트 수십 개는 무거워요"
한글 웹폰트는 굵기 하나만 해도 보통 수백 KB에서 수 MB입니다.
글꼴마다 받는 것은 자모 배치를 담은 CSS 한 장이고, 글자 모양은 기기 글꼴이나 작은 SVG 자소판에서 옵니다. 꾸밈·움직임은 글꼴과 따로 고르는 축이라 고딕에 네온 꾸밈, 붓 글꼴에 금박 꾸밈처럼 섞어도 확장 CSS 한 장이 더해질 뿐입니다.
실측 계기판"예쁜 제목은 결국 이미지로 잘라 붙여요"
상세페이지·배너·카드뉴스의 이미지 글자는 검색·번역·화면 읽기가 안 되고, 문구 하나 고치려면 다시 그려야 합니다.
꾸민 제목도 텍스트라 문구를 바로 고치고, 화면 읽기와 검색에는 원문이 그대로 남습니다.
고쳐 보기"글꼴로는 이런 표현이 안 돼요"
글꼴은 글자 단위로만 칠하고 움직입니다.
초성·중성·받침을 따로 칠하고 움직입니다 — 받침만 떨어지거나, 네온관 하나만 깜빡입니다.
움직임·상호작용 보기"AI가 만든 문서의 한글이 밋밋하고 매번 달라요"
실행할 때마다 고르는 글꼴과 색이 바뀌고, 웹폰트 주소를 매번 알려 주기도 번거롭습니다.
설명서 링크 하나와 글꼴 이름만 주면 됩니다. 같은 이름과 씨앗은 언제나 같은 모양이라 다시 만들어도 통일됩니다.
세 번 만들어 보기"우리 팀만의 글꼴도 AI에게 맡기고 싶어요"
한글 글꼴을 새로 만드는 일은 보통 몇 달이 걸립니다.
AI가 꾸밈 CSS를 쓰거나 SVG로 자모를 그려 새 글꼴을 만듭니다.
AI 프롬프트"터미널·CI 로그·봇 알림에서 한글을 크게 보이고 싶어요"
평문에는 글자 크기가 없습니다.
한글을 2줄 평문으로 크게 풀어 씁니다. 전각 칸이라 고정폭에서 줄이 맞고, CLI·Node·Python·Go·Rust·Ruby가 같은 결과를 냅니다.
봇·터미널"마크다운·AI 응답을 순수 텍스트로 내면 제목이 묻혀요"
텍스트 메일, 메신저 공지, README.txt, CLI 출력에서는 #과 **가 기호로만 남습니다.
제목과 강조만 2줄 큰 글자로 바꾼 순수 텍스트를 만듭니다.
변환해 보기"내 손글씨·브랜드 한글 글꼴은 11,172자라 엄두가 안 나요"
완성형 글꼴은 글자마다 따로 그려야 합니다.
자음 19·모음 21칸만 그리면 11,172자가 되고, TTF로 내보내 보통 글꼴처럼 씁니다.
자소판 그리기"한글 짜임을 아이와 외국인에게 보여 주고 싶어요"
완성된 글자에서는 초성·중성·받침이 나뉘어 보이지 않습니다.
자모마다 색을 칠하고, 나누고, 조립되는 모습을 보여 줍니다.
한글 학습지"한글 입력기가 없는 기기에서 한글을 써야 해요"
빌린 컴퓨터나 키오스크에는 한글 입력기가 없기도 합니다.
영문 자판으로 두벌식·세벌식 한글을 조합해 씁니다.
메모장직접 확인하기
가을 음악회
웹폰트를 받았을 때의 모습
기기 한글 글꼴을 재료로 조립해 그립니다
이 데모는 웹폰트 파일을 받지 않습니다. 왼쪽 '받았을 때'는 기기 글꼴의 굵은체로 흉내 낸 모습이고, '막혔을 때'는 받지 못한 @font-face가 실제로 기본 글꼴로 떨어진 모습입니다.
'한글 글꼴 없음'의 빈 네모는 한글을 그릴 글꼴이 없는 기기의 모습을 흉내 낸 것이고, 오른쪽은 실제로 그림 자소 글꼴(crayon, SVG 자소판)로 바꿔 그립니다.
이 기기에는 한글 글꼴이 있습니다. 글꼴 없는 기기에서는 전광판·메모장이 저절로 그림 자소 글꼴로 바꿔 그립니다.
하하하하 깔깔깔깔
지금 씨앗값
—
이름을 씨앗으로 — 사람마다 다르고, 다시 그려도 같게
씨앗에 반응하는 글꼴은 말랑·크레용·스티커·글리치·분필·자수입니다. 바탕 요소에 seed와 jamo-seeds만 붙이면 됩니다. 씨앗이 없으면 늘 같은 기본 모양입니다.
2,350자 집합은 이 브라우저가 KS X 1001 완성형 한글(EUC-KR 0xB0A1–0xC8FE)을 직접 풀어 만듭니다. 왼쪽은 그 밖의 글자만 다른 글꼴(명조)로 바꿔 서브셋 웹폰트의 대체 글꼴을 흉내 냅니다.
받은 글꼴 파일 (woff·ttf·otf)0
이 페이지가 쓰는 폰꾸 글꼴—종
런타임
font-kku.js—기본 CSS
font-kku.css—글꼴 CSS 0장—
SVG 자소판 0장—
확장 0개 (꾸밈·움직임·상호작용)—
폰꾸가 받은 합계—
gzip으로 보냈다면—이 브라우저가 같은 파일을 직접 압축해 잰 크기
브라우저의 Resource Timing으로 이 페이지가 실제로 받은 바이트(전송 크기)를 잽니다. 서버가 압축하지 않고 보내면 크게 잡히므로, 같은 파일을 브라우저가 gzip으로 직접 압축해 본 크기도 함께 적습니다(jsDelivr 같은 CDN은 압축해 보냅니다). 캐시에서 읽은 파일은 0바이트로 잡혀 '캐시됨'으로 적고, 크기를 알려 주지 않는 환경(파일로 연 페이지 등)에서는 '잴 수 없음'으로 적습니다. 비교하자면 한글 웹폰트는 굵기 하나만 해도 보통 수백 KB에서 수 MB입니다.
제목과 강조만 FontKku.renderText로 2줄 평문으로 바꾸고 나머지 줄은 그대로 둡니다. 같은 변환은 Node·Python·Go·Rust·Ruby의 renderText/render_text로 서버나 CLI에서도 됩니다.
보통 — 실행할 때마다 고르는 글꼴과 색이 바뀝니다 (흉내)
1번째 실행
가을 신메뉴
2번째 실행
가을 신메뉴
3번째 실행
가을 신메뉴
폰꾸 — 설명서 + 글꼴 이름 + 씨앗
1번째 실행가을 신메뉴
2번째 실행가을 신메뉴
3번째 실행가을 신메뉴
왼쪽 줄은 AI가 실행마다 다른 글꼴과 색을 고르는 상황을 기기 글꼴로 흉내 낸 것입니다. 폰꾸는 설명서가 글꼴 이름과 씨앗을 정해 주므로 몇 번을 다시 만들어도 같은 모양이고, 일부러 다르게 하고 싶을 때만 auto를 씁니다. AI 프롬프트 가져가기
이미지 속 글자는 고치려면 다시 그려야 합니다. 화면 읽기에는 대체 문구만 전해집니다.
화면 읽기·검색이 보는 글: 가을 신메뉴 출시
문구를 고치면 오른쪽은 바로 바뀌고, 꾸민 모양 아래에 원문이 텍스트로 남아 화면 읽기와 검색이 그 글을 씁니다.
스크립트 한 줄이면 됩니다
data-fonts에 쓸 글꼴을 적으면 런타임이 기본 CSS와 글꼴 CSS를 함께 불러옵니다.
기존 제목 태그에는 꾸밈 클래스를, 장식 문구에는 전용 태그를 씁니다.
<script src="https://font.tty.link/lib/font-kku.js"
data-fonts="sebul neon"></script>
<h1 class="font-kku" data-font="sebul" data-size="48">오늘의 기록</h1>
<font-kku font="neon" size="48">을지로 네온</font-kku>오늘의 기록
스크립트를 넣을 수 있는 블로그 스킨·테마, React·Vue 같은 프레임워크에서도 같은 태그를 씁니다.
설치·속성·꾸미기는 문서에 있습니다. npm 공개 전에는 저장소의
font-kku.js·font-kku.css·profiles/를 같은 폴더 구조로 복사해 씁니다.
설명서를 주고 폰꾸로 꾸며 줘
ChatGPT·Claude 같은 AI 대화창에 사용 설명서(SKILL.md) 링크와 함께 부탁하면,
AI가 만드는 HTML의 제목과 강조 문구를 폰꾸로 꾸미거나 브랜드에 맞는 나만의 꾸밈 글꼴을 만들어 줍니다.
- 복사해서 붙여 넣기아래 문장을 ChatGPT·Claude 대화창에 붙여 넣고 만들 내용만 바꿉니다.
- 미리보기로 확인Claude 아티팩트·ChatGPT 캔버스로 보거나
.html파일로 저장해 브라우저로 엽니다. - 말로 고치기"제목은 네온 말고 분필로, 바탕은 칠판색으로"처럼 이어서 부탁합니다.
AI가 링크를 열지 못하면(웹 검색이 꺼져 있거나 npm 공개 전)
로 내용을 통째로 붙여 넣으세요.
Claude Code는 skills/font-kku-use 폴더를 ~/.claude/skills/에 넣어 두면 링크 없이 씁니다.
밤 라떼, 고구마 크림 브륄레, 단호박 수프를 새로 선보입니다.
기반 딸기 공방
나만의 글꼴 딸기 공방
sebul
kku-berry
.kku-berry { --fy-weight: 800; }
.kku-berry :is([part~="choseong"], [part~="head"]) { color: #c2185b; }
.kku-berry [part~="jungseong"] { color: #7b1fa2; }
.kku-berry [part~="jongseong"] { color: #f06292; }
.kku-berry [part~="jamo"] { text-shadow: 0.04em 0.04em 0 #ffd1e3; }
자소판 한글 도장
자소판 한글 도장
pixel.svg
dojang.svg
<!-- 칸 100×100, 음절 안 제자리에 획을 그린다 --> <g id="r0-ㄱ" transform="translate(0 0)"> <path d="M5 12 H45 V28 Q45 54 11 65"/> </g> <g id="r1-ㅏ" transform="translate(0 100)"> <path d="M67 2 V86"/><path d="M67 39 H85"/> </g>
한글을 두 줄로 크게
같은 분해 엔진이 브라우저 없이 한글을 2줄 평문으로 풀어 씁니다. 배포 알림, 봇 메시지, 터미널 배너에서 강조하세요. 슬랙·디스코드는 코드 블록으로 감싸면 줄이 맞습니다.
npx font-kku-text "배포 완료"const { renderText } = require("font-kku");
const big = renderText("배포 완료").join("\n");
await say("```\n" + big + "\n```");from font_kku import render_text
big = "\n".join(render_text("배포 완료"))Go·Rust·Ruby 구현도 같은 결과를 냅니다(문서 · 평문 모드와 봇).
고르고 섞는 얼굴
글꼴 파일 하나를 고르는 대신 축을 고릅니다. 글꼴(자모 짜임과 획) · 꾸밈(색·외곽선·그림자) · 변주(씨앗) · 움직임 · 상호작용 · 바탕. 고딕에 네온 꾸밈, 붓 글꼴에 금박 꾸밈처럼 축끼리 섞이고, 이름을 붙여 둔 조합이 테마입니다.
글꼴
꾸밈
움직임
자모가 움직이는 제목
글자가 아니라 초성·중성·받침이 따로 움직입니다. 자모를 하나씩 치고, 날아와 맞물리고, 받침만 떨어지고, 네온관 하나만 깜빡입니다. 움직임은 animate="assemble" 한 단어, 입력에 반응하는 상호작용은 data-kku-fx="magnet" 한 단어로 붙습니다.
자소로 조립하니까
위의 일이 되는 까닭은 하나입니다. 완성된 글자 그림을 보내지 않고, 자모를 놓는 규칙을 보냅니다.
그림 대신 놓는 자리
글꼴 CSS에는 자모를 어디에 얼마나 크게 놓을지만 들어 있습니다. 글자 모양은 기기에 있는 한글 글꼴이나 SVG 자소판에서 가져옵니다.
40칸이 11,172자로
자음 19·모음 21칸만 그리면 모든 음절이 조립됩니다. 자소판 그리기에서 그리거나, SVG로 직접 — AI 에이전트에게 맡겨도 — 그립니다.
자모가 각자 노드
초성·중성·받침이 저마다 따로 그려져 색·기울기·움직임을 따로 받고, 씨앗값을 섞으면 자모마다 표정이 달라집니다. 글꼴마다 꾸미기로 나만의 글꼴도 만듭니다.
같은 규칙, 어디서나
JavaScript와 Python·Go·Rust·Ruby 구현이 한글 11,172자에서 같은 분해 결과를 냅니다.