한글이 조립되는 문장

프롬프트 설정

Claude 가 읽는 제작 지시문입니다. 직접 읽지 않아도 됩니다.

한글 키네틱 타이포 영상을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 글자를 이루는 진짜 부품(초성·중성·종성)이 굵기와 크기가 제각각인 채로 날아와, 맞물리는 순간 한 글자가 되어 「또잉」 튕기며 커진다. 조각은 완성 글자에서 잘라 낸 것이라, 다 모이면 완성 글자와 픽셀까지 똑같다.

[바꿀 곳]
- 큰 문장(두 줄): 1줄 「오늘도」 / 2줄 「한 걸음씩」
- 작은 문장: 작게 시작해도 괜찮아요
- 색: 배경 #0E0E10 · 글자 #F4F1EA · 강조 #FF5A36 · 안내선 #F4F1EA
- 길이: 9초 (끝나면 처음으로 이어서 반복)
- 화면비: 9:16 (캔버스 1080×1920)
- 글꼴: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif
- 한글 네모틀 안내선: 끔 (켜면 조립하는 동안 음절마다 네모틀과 십자선이 보인다)

[크기]
줄마다 따로 폭을 맞춘다: 각 줄의 폭이 화면 폭의 90% 가 되게 그 줄의 글자 크기를 정한다(짧은 줄일수록 글자가 커진다 — 「오늘도」가 「한 걸음씩」보다 크게). 두 줄 중심 사이 거리 = (윗줄 글자 크기 + 아랫줄 글자 크기) ÷ 2 × 1.12. 두 줄 덩어리의 중심 y = 0.46H. 작은 문장은 아랫줄 아래 0.05H.
작은 문장 글자 높이 0.03H.

[안내선 — 한글 네모틀]
CONFIG.guide.show 가 true 일 때만 그린다. 기본값은 [바꿀 곳]의 「끔」을 따라 false.
네모틀: 한 변 = 그 줄의 글자 크기(em) × 1.0, 중심 = 그 음절의 잉크 중심(안착한 글자가 상자 안에 들어와야 한다). 선 3px, 안내선 색 22%. 음절 첫 조각이 출발할 때 둘레를 0.25초에 걸쳐 그려 나가고(선 대시 진행), 십자선은 그다음 0.15초. 합체 후 0.3초에 걸쳐 사라진다.

[굵기 표현 — 시스템 글꼴로도 연속 조절]
굵기 w 는 −0.8 ~ +1.0. 글꼴 굵기 400 으로 fillText 한 뒤, w>0 이면 같은 색 strokeText 로 팽창, w<0 이면 globalCompositeOperation='destination-out' 으로 strokeText 해 침식(작업 캔버스 안에서만). lineWidth = |w| × 0.05 × 글자 크기, lineJoin round. w=−0.8 헤어라인, 0 레귤러, 0.64 최종, 1.0 블랙.
조각 비행 굵기: 시드 난수로 {−0.8, 0, +1.0} 중 하나(이웃 조각과 겹치지 않게). 비행 마지막 40%(u 0.6→1.0) 동안 easeInOutCubic 으로 0.45 에 수렴한다.
조각 비행 크기: 시드 난수로 {0.6, 1.0, 1.5}배에서 출발해 위치와 같은 easeOutCubic 으로 1.0 에 도착.

[조각 — 완성 글자에서 잘라 낸다. 호환 자모 글자(ㄱ, ㅓ 등)로 조각을 그리는 것은 금지]
음절마다 시작할 때 한 번, 오프스크린 캔버스(한 변 = 글자 크기 × 1.4, 글꼴 크기 = 화면 글자 크기 × 1.25)에 완성 음절을 굵기 400으로 fillText 하고 알파 ≥ 128 을 잉크로 본다.
1) 잉크를 8-이웃 연결 성분으로 나눈다. 전체 잉크의 0.4% 미만인 성분은 버린다. 좌표는 음절 잉크 상자 기준 0~1 로 정규화한다.
2) 모음 분류: 세로(ㅏㅐㅑㅒㅓㅔㅕㅖㅣ) / 가로(ㅗㅛㅜㅠㅡ) / 겹(ㅘㅙㅚㅝㅞㅟㅢ).
3) 모음 성분: 세로 = 무게중심 x>0.5 인 성분 중 가장 키 큰 것(기둥) + 무게중심 y 가 기둥의 위 끝과 아래 끝 사이에 있고 키가 기둥의 60% 이상인 오른쪽 성분(ㅐ·ㅔ 의 둘째 기둥). 받침(ㄹ·ㄱ 등)은 기둥보다 아래에 있으므로 짝이 아니다 · 가로 = 가장 넓은 성분 · 겹 = 가장 넓은 성분 + x>0.6 에서 가장 키 큰 성분.
4) 종성 = 무게중심 y 가 모음 성분들의 바닥보다 아래인 성분(받침 있을 때만). 초성 = 나머지 전부(ㅎ 꼭지·ㅊ 꼭지·ㄲ ㅆ 의 두 짝도 한 역할로 묶음).
5) 붙은 성분 자르기: 성분이 1개뿐인 음절도 여기서 시작한다 — 고딕체의 「오」「도」처럼 ㅗ 꼭지가 초성에 닿으면 음절 전체가 한 성분으로 나오고, 이 자르기는 바로 그 경우를 위한 것이다. 성분 수가 적다는 이유만으로 6)의 통째 처리로 건너뛰지 않는다. 초성이 비었거나, 가로 모음 묶음 높이 > 0.6(ㅜ·ㅠ 는 0.75) 또는 세로 모음 묶음 폭 > 0.5 이면, 모음 성분에서 '기둥 따라가기'로 한 번 자른다 — 가로 모음은 가장 아래의 가로획(줄 잉크 폭 ≥ 성분 폭의 80%) 바로 위 줄의 잉크 열 집합을 기준으로 위로 한 줄씩 올라가다가 잉크가 그 열(±2px) 밖으로 나가는 첫 줄에서 가르고 그 위를 초성으로 한다. 세로 모음은 기둥(열 잉크 높이 ≥ 70%) 바로 왼쪽 열에서 같은 방식으로 왼쪽으로. 가장 좁은 줄에서 자르는 방식은 쓰지 말 것(ㄷ 을 가른다).
6) 5)까지 해 본 뒤에도 역할이 비거나 모음이 과대하면, 또는 겹모음에 받침이 있으면: 그 음절은 조각 1개(음절 통째)로 처리한다. 이것은 마지막 수단이다. 호환 자모로 대체하지 않는다. 콘솔에 음절별 [성분 수, 역할별 개수, 자르기 여부, FALLBACK] 표를 출력한다.
   합격 기준: 이 기본 문장(오늘도 / 한 걸음씩)은 7음절 모두 FALLBACK 0 이 정상이다(오·도 는 5)의 자르기 1회로 둘이 된다). 시작할 때 이 표를 스스로 대조해, 겹모음+받침이 아닌 음절에 FALLBACK 이 나오면 그 음절과 이유를 console.warn 으로 알린다. 그런 경고가 나오면 4)·5)를 다시 본다.
7) 영역: 칸의 모든 픽셀을 가장 가까운 잉크 성분의 역할로 칠한다(다중 출발 BFS). 역할마다 마스크 캔버스 1장.
8) 조각 그리기(매 프레임): 작업 캔버스에 완성 음절을 현재 굵기로 그린 뒤 globalCompositeOperation='destination-in' 으로 그 역할의 마스크를 덮고, 결과를 조각 변환(위치·크기·회전·늘어남)으로 화면에 그린다. 조각의 크기·회전 중심 = 그 역할 잉크의 무게중심.
9) D 키: 디버그 — 초성 주황 / 중성 하늘 / 종성 연두로 역할을 칠해 보여 준다.

[합체와 또잉]
조각들의 쉬는 자리 = 완성 음절을 0.80배로 그렸을 때의 자리(모든 조각이 같은 음절 변환을 공유). 마지막 조각이 도착하는 바로 그 프레임에 조각을 지우고 완성 음절(굵기 0.45, 0.80배)로 바꿔 끼운다 — 겹침 프레임 없음. 조각이 진짜 글자에서 잘렸으므로 교체는 보이지 않아야 한다.
도착 프레임에 '인쇄 어긋남' 1회: 강조색(#FF5A36) 사본을 오른쪽 아래로 6px 어긋나게 35% 불투명도로 도착 후 0.025초 동안만(60fps 에서 2프레임) 깐다.
또잉: scale(τ) = 1 − 0.20·e^(−3.2τ)·cos(19τ) (τ = 도착 후 초). 시작 0.80, 첫 정점 τ≈0.157초에 1.12, 첫 저점 τ≈0.32초에 0.93, 0.86초 뒤 ±1% 안에 든다. 동시에 굵기 0.45 → 0.64 를 0.25초 동안 easeOutCubic.

[조각 비행 경로]
화면 밖(가장자리에서 0.15H 바깥)의 서로 다른 방향에서 출발, 진행 방향으로 속도에 비례해 최대 1.35배 늘어났다가 도착하며 원래 모양으로. 회전은 출발 ±35° → 0°.

[장면]
0~2.3초 조립 — 합체(도착) 시각: 오 0.55 · 늘 0.80 · 도 1.05 · 한 1.55 · 걸 1.80 · 음 2.05 · 씩 2.30 (0.25초 간격, 줄 사이 0.5초). 조각 비행 0.50초(easeOutCubic), 한 음절 안 조각 간격 0.05초, 마지막 조각이 정확히 합체 시각에 도착하도록 출발 시각을 거꾸로 계산한다. t=0 에는 모든 조각이 화면 밖이다.
2.8초 — 「걸음씩」 강조: 왼쪽부터 음절당 0.08초 간격으로 강조색 + 강조 또잉. 밑줄은 「걸음씩」 아래에만, 0.35초 easeOutExpo.
3.3초 — 작은 문장이 마스크 선을 뚫고 올라온다(0.45초 easeOutExpo).
3.8~4.9초 — 굵기 물결 ①: 음절 i 마다 0.07·i 초 늦게, 0.7초 동안 w = 0.64 + 0.36·sin(2π·x) (x = 0→1). 무거워졌다가 가벼워졌다가 돌아온다. 왼쪽 위에서 오른쪽 아래로 흐른다.
5.6~6.7초 — 굵기 물결 ②: 반대 방향(오른쪽 아래부터), w = 0.64 − 1.2·sin(π·x) (헤어라인 −0.56 까지 갔다가 복귀), 0.07·i 초 간격, 0.7초.
3.3~7.2초 — 카메라 밀기: 전체 1.00 → 1.06배 easeInOutSine.
7.2~7.4초 — 예비 동작: 모든 음절이 0.15초 동안 0.96배로 움츠린다(easeOutCubic).
7.4~8.7초 — 해체: 오른쪽 아래 음절부터, 음절 간격 0.12초. 갈라지는 순간 0.12초에 걸쳐 굵기가 시드 값({−0.8, 0, +1.0})으로 흩어지고, 들어온 경로를 거꾸로 0.50초 easeInCubic 으로 나간다. 밑줄은 오른쪽에서 왼쪽으로 줄고, 작은 문장은 가라앉는다. 마지막 조각은 8.7초까지 화면 밖.
8.7~9.0초 — 빈 화면(0.3초). 마지막 프레임 = 첫 프레임.

[구현]
- 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)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.
- 이 작품의 기준 크기는 1080×1920 이다.
- CONFIG 에는 시간표·또잉 스프링·굵기 숫자를 빠짐없이 넣고, 안내선 켜기는 CONFIG.guide.show 로 둔다.
- 이 작품은 상태가 쌓이지 않는다. 모든 값은 t 만의 순수 함수다. 조각 분할(성분·역할·마스크)은 시작할 때 음절마다 한 번만 계산해 캐시한다.

[하지 말 것]
- 호환 자모 글자(ㄱ, ㅓ 등)로 조각을 그리지 않는다 — 음절 안의 자모는 칸의 절반만 쓰면서도 획 굵기가 글자 전체와 같아서, 따로 그린 자모와는 모양·굵기·폭이 다르다. 합체하는 순간 글자가 갑자기 굵어지고 넓어지며 튄다.
- 분할이 실패해도 호환 자모로 대체하지 않는다 — 대체하는 순간 위의 튐이 그 음절에서 되살아난다. 통째 1조각은 5)의 자르기까지 해 본 뒤에만, console.warn 경고와 함께 쓰는 마지막 수단이다.
- 성분 수만 보고 음절을 바로 통째로 보내지 않는다 — 고딕체에서 「오」「도」는 늘 한 성분으로 나온다. 바로 통째로 보내면 이 문장에서 가장 큰 두 글자가 부품 없이 글자째 날아와, 첫 1초의 조립이 사라진다.
- 붙은 성분을 가장 좁은 줄에서 자르지 않는다 — ㄷ 의 세로획처럼 초성 안에 있는 좁은 곳을 반으로 가르고, 짧은 ㅗ 꼭지는 놓친다.
- 조각과 완성 글자를 한 프레임이라도 겹쳐 그리지 않는다(크로스페이드 포함) — 두 장이 겹치면 잉크가 두 배가 되고 조각 모서리가 글자 밖으로 삐져나온 덧그림이 보인다. 도착 프레임에 한 번에 바꿔 끼운다.
- 조각을 날리는 동안 렌즈 플레어·네온 글로우·발광을 쓰지 않는다 — 합체의 충격은 0.025초짜리 강조색 인쇄 어긋남 하나가 맡는다. 빛 효과가 그것을 덮고, 흔한 모션 템플릿처럼 보인다.
- 그림자를 쓰지 않는다 — 이 작품의 볼거리는 평평한 글자의 굵기 변화(헤어라인에서 블랙까지)다. 그림자는 획 가장자리를 흐려 굵기 차이를 묻고, 조각이 겹칠 때 얼룩을 남긴다.
- 파티클 폭발·장식 입자를 쓰지 않는다 — 화면에서 움직이는 것은 글자 부품뿐이어야 「진짜 글자가 조립된다」가 읽힌다. 장식 입자는 조각과 섞여 구분이 안 된다.
- 타자기 효과(글자가 한 번에 한 자씩 나타남)를 쓰지 않는다 — 자모가 맞물려 글자가 되는 이 작품의 핵심 순간이 사라진다.
- 무지개색이나 여러 강조색을 쓰지 않는다 — 강조색은 #FF5A36 하나여야 「걸음씩」 강조와 인쇄 어긋남이 눈에 들어온다.
- 밑줄을 「한 걸음씩」 전체에 긋지 않는다 — 색은 「걸음씩」에만 바뀌므로 밑줄이 더 길면 두 강조가 서로 어긋난다.
- 머무는 동안 1.025배 같은 작은 숨쉬기 확대를 넣지 않는다 — 너무 작아 움직임으로 읽히지 않는다. 머무는 동안의 움직임은 카메라 밀기와 굵기 물결 두 번이 맡는다.
- 시간표에 없는 정지나 빈 화면을 넣지 않는다 — 빈 화면은 끝의 0.3초뿐이다. 세로 영상은 멈춘 화면에서 넘겨진다.
- 글자 덩어리를 화면 가운데 작게 두지 않는다 — 세로 화면의 위아래가 비면 슬라이드처럼 보인다. 줄마다 폭 90% 를 지킨다.
- 잔상·모션 블러를 넣지 않는다 — 속도감은 진행 방향 늘어남(최대 1.35배)이 맡는다. 시스템 글꼴 2D 에서는 효과에 비해 무겁고 프레임이 떨어진다.
- 프레임 사이에 값을 누적하지 않는다 — 합체 교체는 정확히 도착 프레임에 일어나야 하고, 반복할 때 마지막 프레임이 첫 프레임과 같아야 한다. 누적하면 둘 다 어긋난다.