받침이 넘어간다
받침이 「툭」 떨어져 데굴 구르고, 다음 글자의 빈 ㅇ 자리로 뛰어올라 끼어든다.
설정값 미리보기
바꾼 문구·색으로 다시 재생합니다
프롬프트 설정
Claude 가 읽는 제작 지시문입니다. 직접 읽지 않아도 됩니다.
한글 연음을 보여 주는 키네틱 타이포 영상을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.
핵심 아이디어: 적힌 글자의 받침이 진짜 물건처럼 「툭」 떨어져 바닥에서 데굴 반 바퀴 구른다. 그사이 다음 글자의 빈 첫소리 ㅇ 은 「뽁」 하고 먼저 비켜 주고, 받침은 몸을 바로 세우며 그 빈자리로 뛰어올라, 공중에서 한 번 뒤집히며 첫소리 모양이 되어 「딸깍」 끼워진다. 위 줄은 적힌 대로(「꽃이 웃어요」), 아래 줄은 소리 나는 대로(「[꼬치 우서요]」)가 남는다. 움직이는 조각은 전부 완성 글자를 그린 픽셀에서 오려 낸 것이라, 다 끼워지면 완성 글자와 픽셀까지 같다.
[바꿀 곳]
- 예문 세 쌍(적힌 대로 → 소리 나는 대로, 차례로 보여 준다):
① 「옷이 예뻐요」 → 「오시 예뻐요」
② 「손이 작아요」 → 「소니 자가요」
③ 「꽃이 웃어요」 → 「꼬치 우서요」
(두 줄은 음절 수와 띄어쓰기 자리가 같아야 한다. 받침 하나가 바로 뒤 ㅇ 자리로 넘어가는 예문만 쓴다. 뒤 음절(ㅇ 으로 시작하는 음절)은 세로 모음(이·아·어·에)인 것만 쓴다 — 「을·은」처럼 ㅇ 아래에 ㅡ·받침이 있으면, 뛰어오르는 받침이 그 획 위를 0.2초 동안 가로질러 덮는다. 「낮에 → 나제」처럼 ㅐ·ㅔ 가 붙는 예문도 된다. ㅎ 받침·겹받침·「굳이→구지」 같은 구개음화·한 음절이 받침을 받으면서 동시에 넘기는 예문(「웃음이」)은 이 그림과 소리 규칙이 달라 틀린 발음을 가르치게 된다. 뒤 음절이 「오·요」면 ㅗ·ㅛ 꼭지가 ㅇ 에 붙어 FALLBACK 으로 처리된다.)
- 색: 배경 #111214 · 글자 #F2EEE6 · 강조 #FFC23D
- 길이: 예문 하나 5초 × 3 = 15초 (끝나면 처음으로 이어서 반복)
- 화면비: 16:9 (캔버스 1920×1080)
- 글자 굵기: 700
[크기]
모든 길이는 화면 높이 H·폭 W 기준이다.
- 글자 크기 em = min(0.88W ÷ (음절 수 × 0.96 + 띄어쓰기 수 × 0.40 + 0.60), 0.27H). 가장 긴 예문으로 한 번 정하고 세 예문 모두 같은 em 을 쓴다. 기본 예문이면 em ≈ 291px(0.27H).
- 음절 칸: 폭 0.96em, 띄어쓰기 0.40em. 줄은 화면 가로 가운데. 음절은 칸 가운데에 textAlign 'center'·textBaseline 'middle' 로 그린다.
- 세로 위치는 잉크로 맞춘다: 시작할 때 모든 예문의 두 줄 음절을 오프스크린에 그려 잉크 위끝·아래끝의 합집합(잉크 띠, 기본 약 0.24~0.255H)을 재고, 띠 가운데가 윗줄은 0.27H, 아랫줄은 0.60H 에 오게 그리는 y 를 보정한다. 아랫줄 잉크 아래끝은 약 0.72~0.73H 다.
- 바닥선: 화면 0.95H 고정(아랫줄 잉크 아래끝보다 약 0.22H 아래). 받침이 글자에서 확실히 떨어져 「한 글자에서 빠져나왔다」로 읽히고, 구르다 세로로 서도(받침 폭 0.7~0.8em ≈ 0.21H) 글자를 덮지 않는 간격이다. 아랫줄 왼쪽 끝 −0.30em 부터 오른쪽 끝 +0.30em 까지, 두께 3px, 글자색 22%. 예문이 바뀌어도 늘 같은 자리에 있다. 카메라 1.04배일 때도 약 0.97H 로 화면 안이다.
- 발음 괄호: 아랫줄 잉크 왼쪽 끝 −0.22em 에 「[」, 오른쪽 끝 +0.22em 에 「]」. 글꼴이 아니라 선으로 그린다: 세로 막대 높이 = 잉크 띠 × 1.12, 두께 0.075em, 위·아래 가로 날개 길이 0.17em(안쪽으로), 글자색 60%.
- 화면에서 쓰는 띠 = 윗줄 위끝 약 0.15H ~ 바닥선 0.95H. 가운데 작은 글자로 두지 않는다.
[조각 — 완성 글자에서 오려 낸다. 호환 자모 글자(ㅅ, ㅇ 등)로 그리는 것은 금지]
음절마다 시작할 때 한 번, 오프스크린 캔버스(한 변 = em × 1.6, 글꼴 크기 = em, 굵기 700, 가운데 정렬)에 완성 음절을 흰색으로 fillText 하고 알파 ≥ 128 을 잉크로 본다. 화면 배율(devicePixelRatio 반영 배율)이 1 보다 크면 오프스크린도 그 배율로 키워 만들고 그릴 때 줄인다. 아래 「±0.007em」은 그 배율의 픽셀로 환산한다.
1) 잉크를 8-이웃 연결 성분으로 나눈다. 전체 잉크의 0.4% 미만인 성분은 버린다.
2) 중성 번호 = ((코드 − 0xAC00) % 588) ÷ 28 의 몫. 세로 모음(ㅏㅐㅑㅒㅓㅔㅕㅖㅣ) / 가로 모음(ㅗㅛㅜㅠㅡ) / 겹모음(그 밖 — 이 작품에서는 FALLBACK).
3) 모음 성분: 세로 모음 = 잉크 상자 오른쪽 절반의 열 가운데 세로로 끊기지 않고 가장 길게 이어진 잉크(길이 L)를 가진 열의 그 잉크가 속한 성분. 기둥이 둘인 모음(ㅐㅒㅔㅖ)은 왼쪽 기둥도 넣는다 — 나머지 성분 중 세로로 끊기지 않은 잉크가 L 의 70% 이상인 성분을 모음 쪽으로 묶는다(안 묶으면 「에」의 ㅔ 왼쪽 반이 ㅇ 과 함께 첫소리로 오려진다). 가로 모음 = 가로로 끊기지 않고 가장 길게 이어진 잉크(길이 L)를 가진 줄의 그 잉크가 속한 성분. 그 줄과, 위아래로 이어지며 그 성분 안의 가장 긴 가로 잉크가 L 의 90% 이상인 줄들을 한 묶음(= 가로 획)으로 기억한다.
4) 받침(오려 낼 아래쪽) = 모음 성분이 아닌 성분 중 무게중심 y 가 모음 성분들의 아래끝보다 아래인 것 전부(ㅊ 꼭지처럼 둘로 떨어진 받침도 함께 묶는다).
4′) 붙은 받침 자르기 — 받침이 있는데(종성 번호 > 0) 4) 가 비면 모음 성분 안에서 자른다. 일부 글꼴(예: Pretendard 「꽃」)은 ㅊ 꼭지가 ㅗ 가로 획 아래에 붙어 한 덩어리다. ㅗ·ㅛ·ㅡ 면 가로 획 묶음 아래끝 바로 다음 줄부터 아래의 성분 픽셀이 받침이다. ㅜ·ㅠ 면 기둥이 가로 획 아래로 내려오므로, 가로 획 바로 아래 줄에서 잉크가 있는 열들을 기억하고 한 줄씩 내려가다가 잉크가 그 열들(±0.007em) 밖으로 처음 나오는 줄(또는 잉크가 끊기는 줄)을 찾아, 그 줄부터 아래를 받침으로 한다. 세로 모음에 붙은 받침은 자르지 않고 FALLBACK.
5) 첫소리(오려 낼 왼쪽·위쪽) = 가로 모음이면 모음·받침이 아닌 성분 중 무게중심 y 가 가로 획 위끝보다 위인 것. 세로 모음이면 모음·받침이 아닌 성분 중 무게중심 x 가 가장 왼쪽 기둥 열(모음 성분들에서 L 의 70% 이상 이어진 열 중 가장 왼쪽)보다 왼쪽이고 무게중심 y 가 모음 성분 아래끝보다 위인 것.
6) 붙은 첫소리 자르기(「어」·「에」는 거의 모든 고딕에서 ㅇ 이 곁줄기에 붙어 한 덩어리다): 세로 모음인데 5) 가 비면 '곁줄기 따라가기'로 자른다 — 시작 열 = 가장 왼쪽 기둥 열에서 왼쪽으로 가며 모음 성분의 세로 잉크 길이가 L 의 50% 아래로 처음 떨어지는 열(기둥 가장자리의 반쯤 칠해진 열을 건너뛴다 — 그 열에서 시작하면 줄 범위가 글자 높이 전체가 되어 따라가기가 멈추지 않는다). 그 열에서 모음 성분 잉크가 있는 줄들을 기억하고, 왼쪽으로 한 열씩 가다가 잉크가 그 줄들(±0.007em) 밖으로 처음 나오는 열(또는 잉크가 끊기는 열)에서 멈춘다. 그 열과 그 왼쪽의 모음 성분 픽셀이 첫소리다. 가장 좁은 열에서 자르지 않는다.
7) 영역: 칸의 모든 픽셀을 가장 가까운 잉크 픽셀의 역할(오려 낼 쪽 / 나머지)로 칠한다(다중 출발 BFS). 역할마다 마스크 1장. 조각 = 완성 음절을 그린 캔버스에 globalCompositeOperation='destination-in' 으로 그 마스크를 덮은 것. 흰색으로 한 번 구워 두고, 그릴 때 작업 캔버스에서 'source-in' 으로 그 순간의 색을 입힌다.
8) 조각마다 무게중심(잉크 평균 위치)과 잉크 표본점(가로·세로 3px 간격의 잉크 픽셀, 무게중심 기준 좌표)을 저장한다. 구르기에 쓴다.
9) 실패(필요한 역할이 비었거나 겹모음, 세로 모음에 붙은 받침)면 그 연음 한 쌍은 FALLBACK — 조각 없이 도착 시각에 두 음절을 아래 「딸깍」 찌그러짐과 함께 소리 나는 대로 음절로 바꾼다. 호환 자모로 대체하지 않는다.
10) 자체 대조(시작할 때 한 번): 연음마다 콘솔 표 한 줄 = [적힌 두 음절, 소리 두 음절, 받침 성분 수, 받침 자르기 여부, 첫소리 자르기 여부, 오린 두 장을 합친 잉크와 완성 음절 잉크의 알파 차 > 16 인 픽셀 수, 구르는 동안 받침 최고점 − 아랫줄 잉크 아래끝(H 단위), FALLBACK]. 콘솔은 지금 쓰인 글꼴 하나를 대조한다. 기본 예문 다섯 연음이 FALLBACK 0 이고 구르는 받침이 아랫줄을 덮지 않으면 합격이다(다른 글꼴 — Pretendard·Apple SD Gothic Neo·맑은 고딕·Noto Sans KR — 은 검토 때 따로 돌린다). 표 끝에 FALLBACK 수를 적고, 0 이 아니거나 최고점이 아랫줄 잉크 아래끝보다 위로 0.01H 넘게 올라가면 console.warn 으로 무엇이 어긋났는지 한 줄씩 남긴다.
11) D 키: 디버그 — 오려 낼 쪽을 주황, 나머지를 하늘색으로 칠해 보여 준다.
[연음 찾기]
두 줄을 음절 단위로 맞대고, 적힌 음절 i 에 받침이 있고(종성 번호 = (코드 − 0xAC00) % 28 > 0) 소리 음절 i 에는 없으며, 적힌 음절 i+1 의 첫소리가 ㅇ(초성 번호 = (코드 − 0xAC00) ÷ 588 의 몫 = 11)이고 소리 음절 i+1 의 첫소리는 ㅇ 이 아니면 그 자리가 연음이다. 이때 S = 적힌 음절 i, T = 적힌 음절 i+1, S′ = 소리 음절 i, T′ = 소리 음절 i+1. 필요한 조각은 네 장: S 의 받침 / S 의 나머지 / T 의 첫소리 ㅇ / T′ 의 첫소리. T 의 나머지는 「T 완성 음절에서 ㅇ 조각을 뺀 쪽」 마스크로 그린다. 연음이 아닌 음절은 두 줄이 같으면 통째로 그린다.
[물리 — 연음 한 번(시각은 그 S 의 복사본이 아랫줄에 닿은 순간 기준)]
- 중력 g = 5.0H/초². 받침 조각의 기준점 = 그 조각의 무게중심.
- ① 떨어짐 「툭」(+0.04 ~ +0.34초): 착지 충격에 받침이 떨어져 나간다. 0.30초 동안 easeInQuad 로 바닥선까지 떨어진다(약 0.22H — √(2×0.223/5) = 0.299초와 같다). 떨어지기 시작하는 0.10초 동안 색이 글자색 → 강조색.
- ② 튀어 오름(+0.34 ~ +0.52초): 바닥에 닿는 속도 1.5H/초, 반발 계수 0.30 → 0.45H/초로 튀어 0.02H(약 22px) 올랐다 내려온다. 0.18초, 높이 = 0.02H × 4s(1−s).
- ③ 구름(+0.52 ~ +1.02초): 0.50초 동안 오른쪽으로 시계 방향 반 바퀴(0 → π) 구른다. 굴러가는 거리(약 0.6em)는 받침 둘레(약 2.5em)의 4분의 1쯤이라, 한 바퀴를 돌리면 제자리에서 버둥대는 것처럼 보이고 반 바퀴면 덜컹이며 넘어가는 정도가 된다. x 는 받침 무게중심에서 「T′ 첫소리 자리의 무게중심 x − 0.25em」까지 easeInOutSine, 회전각 θ 도 같은 곡선. 바닥에 늘 닿아 있게: 무게중심 y = 바닥선 − max(표본점 x·sinθ + y·cosθ). 모서리를 넘을 때 저절로 덜컹인다. 반 바퀴 끝에 받침은 거꾸로 누워 있다.
- ㅇ 비키기 「뽁」(+0.92 ~ +1.06초): 받침이 바닥을 떠나기 0.10초 전부터 0.06초 동안 T 의 ㅇ 조각이 자기 무게중심을 축으로 1.00 → 1.15배(easeOutCubic), 이어서 0.08초 동안 1.15 → 0배(easeInCubic). 뛰어오름이 시작되고 0.04초 뒤에는 완전히 사라져 있어서, 받침은 이미 비어 있는 자리로 뛰어든다(그때 받침 윗끝은 아직 ㅇ 자리 아래끝보다 0.1H 넘게 아래다).
- ④ 뛰어오름과 끼워짐(+1.02 ~ +1.55초, 0.53초): 정점 = T′ 첫소리 자리 무게중심보다 0.05H 위. 처음 0.39초는 easeOutQuad 로 정점까지 오르고(약 0.38H — g = 5.0 이면 √(2×0.376/5) = 0.388초), 나머지 0.14초는 easeInQuad 로 자리까지 내려앉는다(√(2×0.05/5) = 0.141초). x 는 0.53초 동안 직선으로 자리 x 까지. 처음 0.30초 동안 θ 가 π → 2π(easeInOutCubic)로 돌아 받침이 몸을 바로 세운다.
- 뒤집기 「휙」(정점 ±0.06초 = +1.35 ~ +1.47초): 가로 배율 = |cos(π·s)| (s = 0→1). s = 0.5(정점, 폭 0)인 프레임에 받침 조각을 T′ 첫소리 조각으로 바꾼다. 다른 것은 이때 바꾸지 않는다.
- 끼워짐 「딸깍」(+1.55초): 도착 프레임에 움직이는 조각과 T 의 나머지를 함께 지우고 T′ 완성 음절(강조색)로 한 번에 바꿔 끼운다 — 겹치는 프레임 없음. ㅓ 곁줄기처럼 첫소리에 따라 높이·길이가 0.02~0.05em 다른 부분은 이 프레임의 찌그러짐과 흰색→강조색 전환에 묻힌다. 그 순간부터 세로 배율 sy(τ) = 1 − 0.16·e^(−8τ)·sin(28τ), 가로 배율 sx = 1 + 0.5·(1 − sy), 기준 = T′ 잉크 아래끝 가운데. τ = 0 에서 1.00 으로 이어지고, τ≈0.046초에 0.894 로 가장 납작, τ≈0.158초에 1.043, 0.31초 뒤 ±1% 안.
- S 의 기지개(+0.14 ~ +0.30초): 0.16초 동안 S 의 나머지가 자기 칸 가운데 세로축을 축으로 같은 방식(|cos(π·s)|)으로 뒤집히고, 폭 0 인 프레임에 S′ 완성 음절(강조색)로 바뀐다. 받침이 빠진 자리를 아래로 채운 모양이 된다.
[장면]
예문 하나의 시간표다(τ = 그 예문 시작 후 초). 예문 ①②③ 은 시간표 시계 0·5·10초에 시작한다.
- 반복의 시작점: 화면 시계 t = 0 은 예문 ① 의 τ 0.75(윗줄이 다 떠오른 직후)다. render(t) 는 시간표 시계 = (t + 0.75) mod 15.0 으로 읽는다. 그래서 첫 프레임에 「옷이 예뻐요」가 이미 떠 있고, 첫 1초 안에 복사본이 떨어져 찌그러지고(t 0.10~0.46) 첫 받침이 바닥에 「툭」 닿는다(t 0.80). 아래의 τ 는 모두 시간표 시계 기준이다.
- τ 0.10 ~ 0.66: 윗줄(적힌 대로)이 나타난다. 음절 k(띄어쓰기 제외 순번)는 0.10 + 0.04k 초에 아래 0.06H 에서 0.40초 easeOutCubic 으로 올라오며 투명 → 불투명.
- τ 0.85 ~ : 윗줄 음절마다 같은 모양의 복사본이 떨어진다. 복사본 k 는 0.85 + 0.09k 초에 윗줄 자리에서 출발해 y = 윗줄 + ½·g·τ² 로 아랫줄까지 0.33H 를 떨어진다(약 0.363초 — 복사본 0 은 τ 1.213 에 닿는다). 닿는 순간 세로 배율 1 − 0.14·e^(−9τ)·sin(26τ)(τ≈0.048초에 0.914, 0.22초 뒤 ±1%), 가로 배율 1 + 0.5·(1 − 세로 배율), 기준 = 잉크 아래끝 가운데. 같은 동안(τ 0.85 ~ 1.35) 윗줄은 불투명도 100% → 55%.
- 연음이 있는 S 의 복사본이 닿으면 위 [물리]가 그 시각부터 돈다. 기본 예문에서: 첫 「툭」 τ 1.553, 연음 도착 ① τ 2.763 / ②③ τ 2.763 와 2.943(두 번째 받침은 0.18초 늦게 떨어져, 「툭… 툭」 두 박이 겹치지 않는다).
- 마지막 도착 L 후: L+0.15 초부터 0.30초 동안 괄호 「[」「]」가 세로 가운데에서 위아래로 자라 나온다(easeOutCubic). L+0.70 초에 바뀐 음절들(S′·T′, 강조색)이 왼쪽부터 0.07초 간격으로 배율 1 + 0.12·e^(−6τ)·sin(20τ) — τ≈0.064초에 1.078, 0.41초 뒤 ±1%, 기준 = 잉크 가운데.
- 카메라: L 부터 퇴장 시작 E 까지 전체(바닥선 포함) 1.00 → 1.04배 easeInOutSine(화면 가운데 기준), E 부터 퇴장 끝까지 1.04 → 1.00.
- 퇴장 E = max(4.30, L + 1.35): 음절마다 0.03k 초 늦게(아랫줄은 +0.05초) 0.35초 easeInCubic 으로 0.08H 올라가며 사라진다. 바닥선은 남는다. 기본 예문은 세 예문 모두 E = 4.30.
- 예문 길이 = E + 0.03 × (음절 수 − 1) + 0.05 + 0.35 + 0.18 = 기본 5.00초. 바닥선만 있는 빈 화면은 예문 사이마다 약 0.28초(퇴장 끝 0.18초 + 다음 예문 윗줄이 나타나기 전 0.10초)뿐이다. 화면 시계로는 4.07~4.35 · 9.07~9.35 · 14.07~14.35초. 화면 시계 15.0초 = 0초(이음매 없음).
- 시그니처(화면 시계): 예문 ③ 의 첫 연음 — 10.503초 받침 ㅊ 이 떨어져 10.803초 바닥에 「툭」, 10.983 ~ 11.483초 반 바퀴 구르고, 11.383 ~ 11.523초 「이」의 ㅇ 이 부풀었다 사라지고, 11.483초 뛰어올라 몸을 세우며 11.873초 정점에서 뒤집혀 ㅊ 첫소리가 되고, 12.013초 「치」로 끼워진다. 받침 조각 높이 약 0.11H, 굴러가는 거리 약 0.6em, 뛰어오르는 높이 약 0.38H.
[구현]
- HTML 파일 하나로 만든다. 외부 파일·글꼴·라이브러리·네트워크 요청을 쓰지 않는다(미리보기에서 막히거나 느려진다).
- 첫 <script> 맨 앞에 CONFIG 객체를 두고 [바꿀 곳]의 값과 이 글에 나온 숫자(시간표·크기·색·세기)를 이름 붙여 모은다. 나중에 숫자만 바꿔 다듬을 수 있게.
- 그림은 시간 t(초)만으로 계산하는 함수 render(t) 로 그린다. requestAnimationFrame 의 타임스탬프나 performance.now() 로 t 를 구한다. setTimeout·setInterval·CSS 애니메이션·transition 으로 움직이지 않는다(프레임마다 속도가 달라지고, 다시 재생할 때 어긋난다). 시뮬레이션처럼 상태가 쌓이는 작품은 고정 시간 간격으로 상태를 진행하되 그 진행도 타임스탬프로만 정한다.
- 난수는 시드 고정 난수(mulberry32 등)만 쓴다. Math.random 은 쓰지 않는다(매번 다른 화면이 나온다).
- 캔버스 내부 해상도는 화면비에 맞춘 기준 크기로 고정하고, 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게 보이게 한다(남는 곳은 배경색). 스크롤이 생기지 않게 한다. devicePixelRatio 는 그리는 선명도에만 반영한다.
- 글자는 시스템 글꼴만 쓴다: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif. 붓글씨·손글씨 느낌은 글꼴이 아니라 획을 그려서 낸다.
- 길이가 정해진 작품은 끝나면 처음과 같은 화면으로 돌아가 이음매 없이 반복한다.
- 모든 함수·상수·셰이더 문자열을 먼저 정의하고, 시작(초기화와 첫 requestAnimationFrame)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.
- 이 작품의 기준 크기는 1920×1080 이다.
- 이 작품은 상태가 쌓이지 않는다. 위치·회전·배율은 전부 t 만의 순수 함수다(떨어짐·튐·구름·뛰어오름도 공식으로 계산하고, 프레임마다 속도를 더하지 않는다). 조각 분할·마스크·표본점·연음 목록·잉크 띠·자체 대조는 시작할 때 한 번만 계산해 캐시한다. 글꼴이 늦게 로드될 수 있으니 document.fonts.ready 뒤에 계산한다.
- 그리는 순서: 윗줄 → 바닥선 → 괄호 → 아랫줄의 멈춘 음절·조각 → 사라지는 ㅇ → 움직이는 받침(맨 앞).
- CONFIG 에는 예문 배열, 색, em 계산 계수, 줄 위치(0.27H·0.60H), 바닥선 0.95H, g, 반복 시작점 0.75, 단계별 시간(0.04·0.30·0.18·0.50·0.53·0.39, 뽁 0.06·0.08, 뒤집기 0.12), 정점 높이 0.05H, 반발 0.30, 구름 회전량 π, 퇴장 여유 1.35, 스프링 세 개의 계수를 빠짐없이 넣는다.
[하지 말 것]
- 호환 자모 글자(ㅅ, ㅇ, ㅊ)로 조각을 그리지 않는다 — 음절 안의 자모는 칸의 일부만 쓰면서도 획 굵기가 글자 전체와 같아서, 따로 그린 자모와는 굵기·폭·모양이 다르다. 받침이 끼워지는 프레임에 글자가 갑자기 굵어지며 튄다.
- 받침 모양을 첫소리 모양으로 늘이거나 교차 페이드로 바꾸지 않는다 — 늘이면 사선 획이 두꺼워지고, 페이드하면 두 모양이 겹친 유령이 보인다. 모양은 폭이 0 인 뒤집기 프레임에서만 바꾼다(S 의 기지개도 같다).
- T 의 나머지를 도착 전에 T′ 의 나머지로 바꾸지 않는다 — ㅓ 곁줄기는 첫소리에 따라 위아래로 0.04~0.05em 비켜 앉아, 정점에서 바꾸면 곁줄기가 한 프레임 만에 튄다. 바꾸는 것은 「딸깍」 프레임 한 번뿐이다.
- 조각과 완성 글자를 한 프레임이라도 겹쳐 그리지 않는다 — 잉크가 두 배가 되고 오린 경계가 덧그림으로 보인다. 도착 프레임에 한 번에 바꿔 끼운다.
- ㅇ 이 아직 있는 칸으로 받침을 들여보내지 않는다 — 받침이 ㅇ 위에 겹쳐 얹히면 「자리를 비켜 준다」가 아니라 「덮어쓴다」로 읽힌다. ㅇ 은 받침이 바닥을 떠나기 전에 사라진다.
- 바닥선을 글자 바로 밑에 붙이지 않는다 — 떨어진 받침이 글자 밑에 붙어 있으면 여전히 「옷」 한 글자로 읽히고, 구르다 세로로 선 받침이 아랫줄 글자 아래쪽을 덮는다. 0.95H 를 지킨다.
- 붙은 성분을 가장 좁은 줄이나 열에서 자르지 않는다 — ㅁ·ㄷ 같은 자음 속을 가르고, 짧은 곁줄기는 놓친다.
- 받침을 곡선 궤적으로 날려 보내거나 회전을 사인으로 흔들지 않는다 — 바닥에 닿아 무게중심이 오르내리며 구르는 모습이어야 「물건처럼 떨어진 받침」으로 읽힌다. 날아가면 그냥 날아다니는 글자 효과가 된다.
- 두 연음을 같은 시각에 일으키지 않는다 — 0.18초 어긋남이 없으면 어느 받침이 어느 ㅇ 으로 갔는지 눈이 따라가지 못한다.
- 꼬리·잔상·모션 블러·장식 입자·먼지를 넣지 않는다 — 움직이는 것이 받침 하나뿐이어야 시선이 그 조각을 따라간다. 입자는 조각과 섞여 구분이 안 된다.
- 렌즈 플레어·글로우·그림자를 쓰지 않는다 — 평면 글자 위의 빛과 번짐은 획 가장자리를 흐려, 오려 낸 조각이 완성 글자와 같은 굵기라는 이 작품의 정밀함을 묻는다.
- 「연음 법칙」 같은 설명 자막·모서리 라벨·화살표를 넣지 않는다 — 소리 나는 대로는 대괄호 하나로 충분하고, 글자가 늘면 화면을 채운 두 줄의 위계가 무너진다.
- 강조색을 하나보다 많이 쓰지 않는다 — #FFC23D 하나가 「넘어간 소리」를 뜻해야 아랫줄에서 바뀐 음절이 한눈에 짚인다.
- 타자기 효과(한 자씩 나타남)를 쓰지 않는다 — 윗줄은 한 덩어리로 떠올라야 아래로 떨어지는 복사본과 박자가 맞는다.
- 반복을 빈 화면에서 시작하지 않는다 — 첫 프레임은 썸네일이자 첫인상이라 문장이 떠 있어야 하고, 첫 1초 안에 무언가 떨어져야 한다. 화면 시계 0 = 시간표 0.75 를 지킨다.
- 시간표에 없는 정지나 빈 화면을 넣지 않는다 — 빈 화면은 예문 사이의 약 0.28초뿐이다. 머무는 동안의 움직임은 괄호·또잉·카메라 밀기가 맡는다.
- 글자를 화면 가운데 작게 두지 않는다 — 16:9 의 위아래가 비면 슬라이드처럼 보인다. em 공식과 줄 위치(0.27H·0.60H)를 지킨다.
- 프레임 사이에 값을 누적하지 않는다 — 반복할 때 마지막 프레임이 첫 프레임과 같아야 하고, 뒤집기·끼워짐 교체는 정확히 정해진 프레임에 일어나야 한다. 누적하면 둘 다 어긋난다.
사용 방법
필요한 것: claude.ai 계정 — 무료 계정에서도 Claude Opus 5.5 를 고를 수 있습니다
- claude.ai 에서 새 대화를 엽니다.
- 모델 메뉴에서 Claude Opus 5.5 를 고르고, 같은 메뉴의 Effort(답변 깊이)를 High 로 둡니다.
- 복사한 프롬프트를 붙여 넣고 전송합니다. 결과로 나온 HTML 파일을 브라우저로 열면 재생됩니다.
- 권장 모델
- Claude Opus 5.5 · Effort High
- 화면비
- 16:9 (가로)
- 재생 길이
- 15초
- 결과물
- HTML 파일 하나 · 따로 설치할 것 없음
- 영상 파일
- 위 「MP4 저장 기능 포함」을 켜면 결과 화면에 녹화 단추가 생깁니다 1080 기준 · 12 Mbps · 브라우저에 따라 MP4 또는 WebM
추가 요청 예시
결과가 나온 뒤 같은 대화에서 이어서 요청하면 해당 부분만 수정됩니다.
- 예문 ①을 「낮에 놀아요 → 나제 노라요」로 바꾸고, 예문 사이를 1초씩 더 쉬어 가게 해 줘.
- 배경을 따뜻한 크림색, 글자를 진한 먹색으로 바꾸고 넘어가는 받침과 바뀐 음절의 강조색은 짙은 청록으로 해 줘.
- 받침이 반 바퀴를 0.8초에 걸쳐 더 느긋하게 구르게 해서, 장난스럽고 여유 있는 분위기로 만들어 줘.
한글