초성 퀴즈

프롬프트 설정

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

정사각형 초성 퀴즈 영상을 HTML 파일 하나로 만들어 줘. 열면 바로 돌아가게 하고, 아래 숫자는 고치지 말고 그대로 써 줘.

핵심 아이디어: 퀴즈 쇼 녹화장. 잿빛이 도는 가라앉은 자두빛 무대 벽 앞에 화면을 꽉 채운 큰 게임판 칸 네 개가 서 있고, 칸마다 초성만 떠 있다(ㅎ ㅂ ㄹ ㄱ). 벽 뒤로 보랏빛 조명 웅덩이가 천천히 흐르고, 좌우 여백에는 퀴즈판 전구가 세로로 열두 개씩 박혀 있다. 카운트다운 링이 돌며 3·2·1 이 지나는 동안 틱마다 전구에 아래에서 위로 불빛 물결이 한 번 지나간다. 0 이 되는 순간 무대 전체가 정답에 반응한다 — 전구 스물네 개가 아래부터 위로 순식간에 켜지고, 칸마다 아래에서 노란 물이 차오르듯 모음과 받침이 채워져 정답(해바라기)이 되는 동안, 칸 뒤의 벽 전체도 같은 물결선으로 아래에서 위로 따뜻한 갈색빛으로 한 단계 밝아진다. 초성은 완성 글자를 그린 픽셀에서 초성 자리만 오려 낸 것이라, 정답이 차오르는 동안 초성은 한 픽셀도 움직이지 않고 굵기도 그대로다. 문제 세 개를 이어서 돌고, 영상의 첫 프레임부터 초성 네 칸이 화면을 꽉 채운 채 카운트다운이 시작된다.

[바꿀 곳]
- 문제(한글 음절만, 띄어쓰기 없이)와 힌트: 1) 해바라기 · 꽃 / 2) 김치찌개 · 음식 / 3) 숨바꼭질 · 놀이
- 카운트다운: 3초
- 색: 벽 #39203D · 빛 웅덩이 #543652 · 물든 벽 #6D3F2F · 물든 벽 띠 #A06347 · 칸 #1F0623 · 정답 칸 #3B2208 · 초성 #FFF1DC · 채움 #FFC53D · 수면 띠 #FFE9A8 · 링 바탕 #1F0623 · 전구 꺼짐 #64305A · 전구 켜짐 #FFD36B
- 채도: 화면의 넓은 면(벽·빛 웅덩이·물든 벽·칸·정답 칸)은 OKLCH 채도 0.08 이하의 가라앉은 색으로 둔다(지금 값 0.061 · 0.061 · 0.070 · 0.065 · 0.054). 강한 채도는 노란 채움·켜진 전구·가는 물든 벽 띠처럼 화면의 15% 가 안 되는 강조에만 쓴다. 정답의 순간에 벽은 소리치지 않고 한 단계 밝고 따뜻해진다(명도 약 0.29 → 0.42). 빛은 전구와 노랑이 맡는다. 색을 바꿀 때도 이 두 가지는 지킨다.
- 글자 대비: 초성 대 칸 17:1, 머리 띠 글자(채움 색 「Q1」, 초성 색 80% 힌트) 대 벽·물든 벽 최소 5.5:1. 색을 바꿀 때도 글자 대비는 4.5:1 아래로 내리지 않는다.
- 길이: 문제 하나 = 카운트다운 + 3.0초 = 6초, 세 문제 18초 (끝나면 처음으로 이어서 반복 — 0초와 18초는 같은 꽉 찬 초성 화면)
- 화면비: 1:1 (캔버스 1080×1080)

[크기] (W·H = 캔버스 폭·높이 1080. 「칸」 = 한 칸의 한 변 길이)
- 칸 배치: 문제의 음절 수 n 이 2 이하면 1줄, 3 이상이면 2줄. 열 수 = ceil(n ÷ 줄 수). 윗줄부터 채우고 덜 찬 아랫줄은 가운데 정렬(n=4 → 2×2, n=3 → 위 2칸·아래 1칸).
- 칸 = min((0.81W − (열−1)·0.03W) ÷ 열, (0.81H − (줄−1)·0.03W) ÷ 줄). 칸 사이 간격 0.03W. 2×2 면 칸 = 421px(0.39H), 격자 전체 875px 정사각.
- 격자 묶음은 가로 가운데, 세로 중심 y = 0.555H. 2×2 면 격자 위끝 0.15H, 아래끝 0.96H — 격자가 가로·세로 각각 화면 한 변의 81% 를 차지한다(면적으로는 칸 바탕이 약 61%, 나머지 약 39% 가 벽이다).
- 칸 바탕: 칸 크기의 둥근 사각형(모서리 반지름 0.06·칸), 칸 색.
- 글자 크기 F = 0.80·칸 ÷ (100px 로 잰 「한」의 잉크 높이 ÷ 100). 잉크 높이 = measureText 의 actualBoundingBoxAscent + actualBoundingBoxDescent. 한 문제 안 모든 음절이 같은 F 를 쓴다(2×2 면 F ≈ 370px, 글자 잉크가 칸 높이의 약 80%).
- 글자 자리: 가로 = 칸 중심(textAlign center), 세로 = 기준선 y = 칸 중심 y + (F 로 잰 「한」의 ascent − descent) ÷ 2. 모든 음절이 같은 기준선 규칙을 써서 받침이 있는 글자와 없는 글자가 같은 틀에 놓인다.
- 글자 굵기: 글꼴 굵기 400 으로 fillText 한 뒤 같은 색 strokeText 를 한 번 더(lineWidth 0.03·F, lineJoin round) 그어 조금 굵게 보이게 한다. 아래 [초성 오려 내기]의 분석은 덧칠 없이 굵기 400 그대로 한다.
- 머리 띠: 중심 y = 0.075H. 왼쪽 끝 = 격자 왼쪽 끝. 「Q1」(채움 색, 굵기 700, 글꼴 크기 0.066H) 다음 0.025W 띄어 「힌트 · 꽃」(초성 색 80% 불투명, 굵기 400, 글꼴 크기 0.042H).
- 카운트다운 링: 중심 = (격자 오른쪽 끝 − 0.042H, 0.075H), 반지름 0.042H, 선 두께 0.009H. 링 바탕 색으로 원 전체를 긋고, 그 위에 남은 시간 호(초성 색, 둥근 끝). 숫자는 링 중심, 굵기 700, 글꼴 크기 0.052H.
- 전구: 좌우 여백에 세로 두 줄. 중심 x = 0.047W 와 0.953W, 줄마다 12개, 아래부터 번호 m = 0…11, 중심 y = 0.94H − m·(0.76H ÷ 11)(맨 위 0.18H). 반지름 0.012W(13px). 격자 왼쪽 끝 0.095W 와 전구 바깥 끝 0.059W 사이가 0.036W 비어 칸과 닿지 않는다.

[초성 오려 내기 — 반드시 완성 글자에서 잘라 낸다. 호환 자모 글자(ㅎ, ㄹ 등)로 초성을 그리는 것은 금지]
음절마다 한 번 계산해 캐시한다(언제 하는지는 아래 구현 절). 분석 1)~6)은 K 와 관계없이 1배 분석 캔버스 = 칸 크기(2×2 면 421px) 정사각에서 한다 — K 배로 하면 음절 하나에 dpr 2 에서 40~120ms, 느린 폰에서 0.5초까지 걸린다. 글자는 [크기]의 규칙대로 이 캔버스 안에 화면과 같은 상대 위치로 그린다. 1)~6)의 픽셀 길이는 1배 분석 캔버스 픽셀이다. 7)의 조각만 K 배(K = min(devicePixelRatio, 2)) 캔버스에 그린다.
0) 음절 분해: c = 글자 코드 − 0xAC00, 중성 번호 j = floor((c % 588) ÷ 28), 종성 번호 k = c % 28(0 이면 받침 없음). 중성 갈래: 세로 V = {0~7, 20}(ㅏㅐㅑㅒㅓㅔㅕㅖㅣ) · 가로 H = {8, 12, 13, 17, 18}(ㅗㅛㅜㅠㅡ) · 겹 C = 나머지. 겹기둥 DBL = {1, 3, 5, 7}(ㅐㅒㅔㅖ). 위로 솟는 모음 UP = {8~12}, 아래로 내리는 모음 DOWN = {13~19}.
1) 굵기 400, 덧칠 없이 흰색으로 fillText 하고 알파 ≥ 128 을 잉크로 본다. 잉크를 8-이웃 연결 성분으로 나누고(Int32Array 스택), 전체 잉크의 0.4% 미만 성분은 버린다. 남은 잉크 전체의 상자로 좌표를 0~1 로 정규화해 성분마다 무게중심 (u, v), 상자 u0·u1·v0·v1, 폭 w = u1−u0, 높이 h = v1−v0 를 잰다.
2) 모음 몸통 M 고르기: V 면 u > 0.5 인 성분 중 h 가 가장 큰 것. H 면 w 가 가장 큰 성분. C 면 u < 0.8 인 성분 중 w 가 가장 큰 것. 단 H·C 에서 받침이 있으면 v > 0.76 인 성분(받침 자리)은 후보에서 뺀다.
3) 붙은 초성 떼어 내기 — 「기둥 따라가기」(허용 오차 = 2px):
   - V 의 떼기 대상 성분 T 와 기준 기둥: 성분의 열마다 잉크 개수를 세어, 최댓값의 85% 이상인 열이 이어진 묶음을 「기둥」이라 한다. DBL 이 아니면 T = M, 기준 기둥 = M 의 가장 오른쪽 묶음. DBL 이면: M 의 묶음이 2개 이상(두 기둥이 한 성분으로 이어진 글꼴)이면 T = M, 기준 기둥 = 오른쪽에서 두 번째 묶음. M 의 묶음이 하나뿐이면(두 기둥이 따로 떨어진 경우 — 대부분 글꼴이 이렇다) T = 왼쪽 기둥 성분 = M 이 아닌 성분 중 h ≥ 0.85·M.h 이고 u > 0.45 인 것 가운데 u 가 가장 큰 것(ㅏ·ㅑ·ㅓ·ㅕ 쪽 덩어리), 기준 기둥 = T 의 가장 오른쪽 묶음. 그런 성분이 없으면 T = M. 붙은 초성은 오른쪽 기둥이 아니라 왼쪽 기둥에 붙기 때문이다 — 오른쪽 기둥 M 만 따라가면 떼기가 시작도 되지 않고, 초성과 왼쪽 기둥이 붙은 덩어리가 4)에서 통째로 모음이 된다. 그러면 「게·계·케」(Pretendard·Noto)는 초성이 0 개라 FALLBACK 으로 떨어져 ㄱ 의 오른쪽 위가 세로로 잘리고, 「께·뻬·혜」는 FALLBACK 도 없이 ㄲ 의 둘째 ㄱ·ㅃ 의 둘째 ㅂ·ㅎ 전체가 모음 쪽으로 가서 문제 화면에서 사라졌다가 정답 때 노랗게 차오른다.
   - V 따라가기: 기준 기둥 왼쪽 끝 바로 왼쪽 열의 T 잉크 줄 집합을 기준으로 삼아 그 열부터 한 열씩 왼쪽으로 간다. 열에 T 잉크가 하나도 없으면 멈춘다(떼지 않음). 잉크 줄이 기준 ±오차 밖으로 처음 나가는 열 xc 에서 멈춘다. 떼는 조각 = xc 열에서 기준 줄 밖에 있는 T 픽셀을 씨앗으로, x ≤ xc 인 T 픽셀 가운데 씨앗과 8-이웃으로 이어진 덩어리만. 씨앗과 이어지지 않은 픽셀은 x ≤ xc 라도 T 에 둔다 — 「xc 와 그 왼쪽의 픽셀 전부」를 떼면 세로 칼질이 되어, 멈춘 열보다 왼쪽까지 나온 모음 획(ㅕ·ㅖ 의 아래 짧은 가로획 끝)이 초성 색 네모로 잘려 남는다(겨·켜·계, 잉크의 1.1~1.7% 라 8)의 부스러기 기준 1% 에도 걸리지 않는다).
   - H·C 의 가로획 윗변 선 e(x): 윗변을 줄 하나로 보지 않고 열마다 잰다(ㅘ·ㅙ·ㅟ 의 가로획은 대개 몇 px 기울어 있어서, 줄 하나로 보면 화·왜 의 동그라미 아래가 모음으로 가고 귀 에 부스러기 선이 남는다). M 의 줄마다 M 잉크 개수를 세어 가장 많은 줄을 ymax 라 한다. (x, ymax) 가 M 잉크인 열마다, ymax 에서 위로 그 열의 M 잉크가 끊기지 않고 이어지는 맨 윗줄을 top(x) 로 잰다. top(x) 의 중앙값보다 0.05·(잉크 상자 높이 px) 넘게 위에 있는 열(붙은 초성 다리나 ㅗ 꼭지)은 빼고, 남은 열로 최소제곱 직선 e(x) = a + b·x 를 맞춘다.
   - H·C 이고 DOWN: y < e(x) − 1 인 M 픽셀 가운데, 위에서 이상치로 뺀 열(위로 솟은 열 = 붙은 초성 다리)의 픽셀에서 출발해 8-이웃으로 이어지는 덩어리만 새 조각으로 뗀다(ㄱ 의 가로 머리처럼 솟은 열 밖으로 뻗은 부분도 이어져 있으면 함께 떨어진다). 솟은 열과 이어지지 않은 픽셀(가로획 끝이 살짝 들려 직선보다 위로 나온 부분)은 가로획이므로 M 에 둔다 — 이것까지 떼면 「귀」의 가로획 끝과 다리 옆에 초성 색 부스러기가 남는다. 떼는 범위를 솟은 열 안으로만 자르지는 않는다(ㄱ 머리가 모음에 남는다).
   - H·C 이고 UP: 기준 줄 y0 = floor(min(e(맞춘 열의 왼쪽 끝 x), e(오른쪽 끝 x))) − 1(윗변 선의 가장 높은 점 바로 위 — 여기에는 꼭지만 지난다). y0 의 M 잉크 열 집합을 기준으로 그 줄부터 한 줄씩 위로 간다. 줄이 비면 멈춘다(떼지 않음). 잉크 열이 기준 ±오차 밖으로 처음 나가는 줄에서 멈추고, 그 줄과 그 위의 M 픽셀을 새 조각으로 뗀다.
   - 뗀 조각의 정규화 높이가 0.04 미만이면 떼기를 취소하고 원래 성분에 되돌린다(가로획 윗변 부스러기일 뿐이다).
4) 역할 나누기: 모음 성분 = M + (V 이고 DBL 이면 h ≥ 0.85·M.h 이고 u > 0.45 인 다른 성분) + (C 면 M 이 아닌 성분 중 u > 0.6 이고 h 가 가장 큰 것 = 오른쪽 세로획). 모음 바닥 vb = H 면 M 의 v1, 아니면 모음 성분들의 v1 중 최댓값. 3)에서 뗀 조각은 「초성」이고, 떼기 대상 성분(T 또는 M)의 남은 픽셀과 나머지 모음 성분은 「나머지」. 그 밖의 성분은 받침이 있고 v > vb − 0.02 이면 「나머지」(받침), 아니면 「초성」.
5) 초성 성분이 하나도 없으면 FALLBACK: 잉크 픽셀을 자리로 나눈다 — V 는 u < 0.4, H 는 v < 0.35, C 는 u < 0.6 이면서 v < 0.35 인 잉크가 초성, 나머지 잉크는 「나머지」. 이것은 최후의 처리이고, 쓰일 때마다 8)의 표에 FAIL 로 드러나야 한다.
6) 영역 칠하기: 분석 캔버스의 모든 픽셀을 가장 가까운 잉크 픽셀의 역할로 칠한다(잉크 픽셀 전부를 출발점으로 한 다중 출발 BFS, 8-이웃, Int32Array 큐). 결과로 초성 마스크와 나머지 마스크 캔버스를 한 장씩 만든다(1배, 알파 0 또는 255). 두 장은 서로 정확히 보완한다.
7) 조각 만들기(K 배 캔버스): 두 마스크를 K 배로 키운다(imageSmoothingEnabled = false — 보간하면 경계 픽셀이 두 조각에 반씩 나뉘어 합칠 때 옅은 금이 생긴다). 초성 조각 = 덧칠 포함 글자를 K 배로, 초성 색으로 그린 뒤 globalCompositeOperation = 'destination-in' 으로 키운 초성 마스크를 덮은 캔버스. 나머지 조각 = 같은 글자를 채움 색으로 그린 뒤 키운 나머지 마스크를 덮은 캔버스. 나머지 조각의 잉크 위끝 rT 와 아래끝 rB(K 배 캔버스 y)를 저장한다.
8) 자기 점검: 음절마다 다음 셋을 잰다.
   - 「맞닿음 길이」 = 1배 분석에서 초성 잉크 픽셀 중 바로 아래 픽셀이 나머지 잉크인 것이 가로로 이어진 가장 긴 길이와, 바로 오른쪽 픽셀이 나머지 잉크인 것이 세로로 이어진 가장 긴 길이 중 큰 값을 1배 글자 크기 F 로 나눈 값. 제대로 떼면 맞닿는 곳은 획 하나의 끝(이음 줄기·다리 끝)뿐이라 0.11 아래로 나온다(맑은 고딕·Noto Sans KR·Pretendard 로 잰 정상 음절 최댓값 0.10). 초성이 모음 획을 따라 길게 얹히거나(부스러기 선, 0.34~0.48) 동그라미가 가로로 잘리면(0.15~0.32) 대개 0.15 를 넘는다.
   - 「최소 성분 비율」 = 1배 분석의 초성 잉크를 8-이웃 성분으로 나눴을 때 가장 작은 성분의 픽셀 수 ÷ 그 음절 전체 잉크 픽셀 수(맞닿음 길이로는 안 잡히는 짧은 부스러기를 잡는다 — 정상 초성 성분은 가장 작은 것도 약 12%, ㄲ 한쪽·ㅎ 꼭지 쪽 포함, 부스러기는 0.01~0.09%).
   - 「왼쪽 기둥 비율」(V 이고 DBL 이며 3)에서 왼쪽 기둥 성분을 T 로 골랐을 때만, 아니면 「–」) = T 의 잉크 중 「나머지」로 간 픽셀 수 ÷ M 의 잉크 픽셀 수. 왼쪽 기둥은 기둥 하나와 짧은 가로획뿐이라 정상이면 1.34 아래다(세 글꼴 × ㅐㅒㅔㅖ 86음절 실측 최댓값). 초성이 왼쪽 기둥에 붙은 채 모음으로 남으면 1.43~2.51 이 된다 — 맞닿음 길이 0, 최소 성분 15~30% 라 앞의 두 자로는 PASS 로 숨는 실패다.
   판정: FALLBACK 이거나, 맞닿음 길이 > 0.13 이거나, 최소 성분 비율 < 1% 이거나, 왼쪽 기둥 비율 > 1.40 이면 FAIL, 아니면 PASS. 콘솔에 음절별 [문제, 글자, 중성 갈래, 떼기 여부, FALLBACK 여부, 맞닿음 길이(소수 셋째 자리), 최소 성분 비율(%), 왼쪽 기둥 비율(소수 둘째 자리), PASS/FAIL] 표를 출력하고, 맨 끝 줄에 「FAIL n개 (기대 0)」를 찍는다. 기본 세 문제는 FALLBACK 0 · FAIL 0 이 정상이고, ㅏ~ㅣ 세로 모음 음절(초성 19 × 중성 9) 어느 것을 넣어도 FAIL 0 이 정상이다. 표는 세 문제의 분석이 모두 끝난 뒤 한 번만 찍힌다 — 셋째 문제는 둘째 문제의 머묾 구간에서 분석하므로 영상 시작 뒤 t ≈ 10.3~10.9초다(열자마자 콘솔을 보면 아직 표가 없다). D 키를 누르면 디버그: 모든 칸에서 초성을 #FF7A45, 나머지를 #5BC0FF 로 처음부터 다 보여 주고, FAIL 음절의 칸 바탕은 #5A1E1E 로 칠한다(다시 누르면 끈다).

[차오름 — 시그니처 순간]
- 칸마다 합성용 캔버스(칸 크기 × K)를 하나씩 만들어 두고, 매 프레임 비워서 다시 쓴다(프레임마다 새로 만들면 메모리 할당이 쌓여 끊긴다): ① 비우기 ② 나머지 조각 중 수면 아래 부분 ③ 초성 조각(언제나 그대로 같은 자리). 다 합친 그 캔버스 한 장을 칸 변환(크기·위치·불투명도)으로 화면에 그린다. 두 조각을 화면에 따로따로 변환해 그리지 않는다.
- 진행 f = easeInOutSine(τ ÷ 0.50), τ = 그 칸의 차오름 시작 뒤 초(0~0.50).
- 수면 높이(K 배 캔버스 y, 아래가 +): L = yS + (yE − yS)·f, yS = rB + A + 2K, yE = rT − A − B − 2K. 시작할 때 수면은 나머지 조각 아래에 숨어 있고, 끝나면 띠까지 위로 빠져나간다.
- 수면 곡선: y(x) = L + A·sin(2π·(x ÷ λ − 1.6·t)), A = 0.025·칸·K(2×2 면 약 10.5px·K), λ = 0.20·칸·K(2×2 면 약 84px·K — 획 폭 약 35px 인 세로 기둥 하나에 둥근 마루나 골이 걸려 막대 끝이 아니라 물 표면으로 읽힌다), t = 전체 시각(초). 물결은 sin 하나뿐이다.
- ② 그리는 법: 나머지 조각을 임시 캔버스(칸마다 하나 만들어 두고 재사용)에 그리고, 수면 곡선 아래 영역 다각형(x 를 6K px 간격으로 찍는다)으로 'destination-in'. 이어서 'source-atop' 으로 수면 띠(수면 곡선에서 아래로 두께 B = 0.03·칸·K, 2×2 면 약 12.6px·K)를 수면 띠 색으로 칠한다. f = 1 이 되면 나머지 조각을 통째로 그린다(띠 없음).
- 다 찬 순간(τ = 0.50)부터 칸 튕김: s(τ') = 1 + 0.10·e^(−6τ')·sin(17τ') (τ' = 다 찬 뒤 초). τ' = 0 에서 정확히 1 이라 튀는 프레임이 없고, 첫 정점 τ' ≈ 0.072초에 1.061, 첫 저점 τ' ≈ 0.257초에 0.980, 0.49초 뒤 ±0.5% 안에 든다. 칸 바탕과 글자가 칸 중심 기준으로 함께 커진다. 같은 순간부터 칸 바탕색이 칸 색 → 정답 칸 색으로 0.25초 동안 선형으로 바뀐다.

[무대 — 벽·빛 웅덩이·전구·물든 벽] (r = 문제 안의 상대 시각, 아래 [장면] 참조. 모두 t 만의 함수)
- 그리는 순서(매 프레임): ① 벽 색으로 화면 전체 fillRect ② 빛 웅덩이 ③ 물든 벽(있을 때) ④ 전구 ⑤ 칸 ⑥ 머리 띠·링. 빛 웅덩이는 물든 벽보다 먼저 그린다 — 물든 벽 위에 보랏빛 웅덩이를 얹으면 갈색 벽이 진홍 쪽으로 밀린다(실측 색상각 36 → 19~24). 벽·빛·전구는 언제나 칸 뒤에 있고 칸과 글자 위에는 아무것도 덮지 않는다.
- 빛 웅덩이: 시작할 때 256×256 오프스크린 캔버스에 원형 그라디언트를 한 번 그려 둔다(중심 빛 웅덩이 색 불투명 0.60 → 반지름 60% 에서 0.22 → 가장자리 0). 매 프레임 이 한 장을 화면에 1.5W 정사각으로 늘려 drawImage 한다. 중심 = (0.5W + 0.06W·sin(2π·t ÷ 전체 길이), 0.45H) — 18초에 한 번 좌우로 천천히 흐르고, 0초와 18초에 같은 자리다. 부드러운 그라디언트라 늘려 그려도 티가 나지 않는다.
- 물든 벽: 물결선 y(x) = Y + 0.012H·sin(2π·(x ÷ 0.35W − 0.8·t)) 아래를 물든 벽 색으로 채운 다각형(x 를 0.02W 간격으로 찍는다). 이어서 물결선에서 아래로 0.008H 두께의 띠를 물든 벽 띠 색으로 칠한다(칸 안 수면 띠와 같은 문법). 높이 Y: d = b·(n−1) + 0.50(그 문제의 마지막 칸이 다 찰 때까지의 길이, n = 4 면 0.80초)으로 두고, r < 3.60 이면 그리지 않는다 · r 3.60 ~ 3.60 + d 에 Y = 1.03H − 1.06H·easeInOutSine((r − 3.60) ÷ d) · 그 뒤 5.50 까지 Y = −0.03H(화면 전체가 물듦) · r 5.50~6.00 에 Y = −0.03H + 1.06H·easeInCubic((r − 5.50) ÷ 0.50)(아래로 빠짐). 그래서 다음 문제는 다시 자두빛 벽에서 시작한다. 칸 밖의 벽(화면의 약 39%)이 칸 안 노란 물과 같은 0.8초 동안 아래에서 위로 바뀐다 — 이것이 화면 전체로 커진 정답의 순간이다.
- 전구 밝기 g(0~1): 색 = 전구 꺼짐 색과 켜짐 색 사이 선형. g ≥ 0.2 이면 먼저 후광(시작할 때 64×64 캔버스에 한 번 그린 원형 그라디언트: 중심 켜짐 색 불투명 0.55 → 가장자리 0)을 지름 0.07W 로 globalAlpha = g 로 drawImage 하고, 그 위에 전구 원을 그린다.
  - 카운트다운 물결(r < 5.50 동안): 틱 순간 rk = 0.60, 1.60, 2.60(카운트다운 숫자가 바뀌는 순간)마다 x = r − rk − 0.035·m 으로 두고, 0 ≤ x < 0.25 이면 p = 1 − x ÷ 0.25, 아니면 p = 0. 물결 밝기 = 0.15 + 0.85·(세 틱의 p 중 최댓값). 물결이 아래 전구에서 맨 위까지 0.385초에 올라가고, 각 전구는 0.25초 동안 꺼져 간다. 틱 사이에는 0.15 로 어둡게 쉰다.
  - 점등(r ≥ 3.60): 전구 m 은 3.60 + 0.02·m 에 켜지기 시작해 0.06초 동안 0.15 → 1(선형). 0.28초 뒤 스물네 개가 모두 켜지고 5.50 까지 그대로 켜져 있다.
  - g = 물결 밝기와 점등 밝기 중 큰 값. 퇴장 r 5.50~5.85 에는 g = 1 − 0.85·((r − 5.50) ÷ 0.35)로 0.15 까지 내려가고, 5.85 뒤 0.15.
  - 첫 문제에서 t = 0 은 첫 틱 순간이라 0초 화면부터 맨 아래 전구가 켜져 있고, 첫 1초 안에 불빛 물결이 한 번 올라간다.
- 한 프레임에 그리는 것의 전부: 벽 fillRect 1 · 빛 웅덩이 drawImage 1 · 물든 벽 다각형 2(있을 때) · 전구 후광 drawImage 최대 24 · 전구 원 24 · 칸 합성 캔버스 n 장 · 머리 띠·링. 그라디언트 객체를 매 프레임 새로 만들지 않고, shadowBlur·filter 를 쓰지 않는다.

[장면] (문제 하나 = 상대 시각 0~6.0초. q = 문제 번호 0, 1, 2. n = 그 문제의 음절 수, i = 읽는 순서 0, 1, …)
- 시각 잇기: 전체 시각 t(0~18초)와 상대 시각 r 의 관계는 u = (t + 0.60) mod 18, q = floor(u ÷ 6), r = u − 6q 다. 즉 t = 0 은 첫 문제의 r = 0.60 — 머리 띠와 초성 네 칸이 이미 다 내려앉아 화면이 꽉 찬 순간이고, 바로 그 프레임에 카운트다운이 시작된다. 첫 문제의 등장(r 0~0.60)은 마지막 바퀴의 끝 t 17.40~18.00 에 나온다. 그래서 18.0초 화면 = 0초 화면(초성이 꽉 찬 화면)이고, 어느 프레임에도 빈 화면이 없다.
- r 0.00~0.35 머리 등장: 「Q1」과 힌트가 위로 0.03H 떨어진 자리에서 제자리로 내려오며 불투명도 0→1(easeOutCubic). 링(가득 찬 호)과 숫자 「3」(카운트다운 값)이 같은 시간에 0.6→1배.
- r 칸 등장: 칸 i 는 0.05 + a·i 초에 시작(a = min(0.07, 0.28 ÷ (n−1))), 0.30초 동안 1.18 → 1.00배(easeOutCubic), 불투명도는 처음 0.12초 동안 0→1. 칸 바탕과 초성이 함께 찍히듯 내려앉는다. n = 4 면 0.56 에 모두 선다.
- r 0.60~3.60 카운트다운: 남은 시간 호 = 12시 방향에서 시계 방향으로, 길이 비율 = 1 − (r − 0.60) ÷ 카운트다운(3.0). 끝이 계속 거꾸로 돌며 줄어든다. 숫자는 카운트다운 값에서 1초마다 하나씩 준다 — 3초면 r 0.60 에 3(이미 떠 있던 3 이 다시 튕긴다), 1.60 에 2, 2.60 에 1. 이 세 순간마다 ① 숫자가 1.35 → 1.00배(0.25초, easeOutCubic) ② 모든 칸의 초성이 칸 중심 기준 s = 1 + 0.04·sin(π·τ ÷ 0.22) (τ = 0 → 0.22초)로 한 번 콩 뛴다 ③ 전구에 아래에서 위로 불빛 물결이 지나간다. 첫 문제에서는 이것이 t = 0·1·2초다 — 첫 1초 안에 링이 돌고 숫자·초성·전구가 이미 움직인다.
- r 3.60 = 0 (첫 문제 t = 3.00): 숫자 「0」이 채움 색으로 같은 튕김(1.35 → 1.00배, 0.25초). 링 바탕이 채움 색으로 바뀌어 이 문제가 퇴장할 때까지 유지된다. 같은 순간 차오름·전구 점등·벽 물듦이 함께 시작된다.
- r 3.60~ 차오름: 칸 i 는 3.60 + b·i 초에 시작(b = min(0.10, 0.60 ÷ (n−1))), 0.50초 동안 차오른다. n = 4 면 r 3.60·3.70·3.80·3.90 에 시작해 4.40 에 네 칸이 모두 차고, 벽도 같은 4.40 에 위끝까지 물든다(첫 문제 t 3.00~3.80).
- r ~5.50 정답 머묾: 튕김이 가라앉으면 그대로 멈춰 읽게 한다. 전구는 켜진 채, 벽은 물든 채 가만히 있다(움직이는 것은 아주 느린 빛 웅덩이뿐).
- r 5.50~6.00 퇴장: 칸 i 는 5.50 + c·i 초에 시작(c = min(0.05, 0.15 ÷ (n−1))), 0.35초 동안 아래로 0.05H 내려가며(easeInCubic) 불투명도 1→0. n = 4 면 마지막 칸이 6.00 에 사라진다. 머리 띠와 링도 5.50~5.85 동안 위로 0.03H 빠지며 1→0. 같은 구간에 물든 벽이 아래로 빠지고 전구가 어두워진다. 같은 6.00 에 다음 문제의 r 0 이 시작되어 칸이 바로 내려앉기 시작한다(칸 없이 무대만 보이는 것은 다음 칸이 찍히기 전 0.05초뿐).
- 첫 문제의 전체 시각: 0 카운트다운 시작 · 3.00 = 0 · 3.80 다 참 · 4.90 퇴장 · 5.40 둘째 문제 등장 · 6.00 둘째 문제 카운트다운 · 9.00 둘째 문제 0 · 15.00 셋째 문제 0 · 17.40 첫 문제 등장 · 18.00 = 0초.
- 카운트다운 길이를 바꾸면 r 0.60 이후의 시각은 모두 (카운트다운 − 3)초만큼 밀리고(틱 순간·0·점등·물듦·머묾·퇴장 모두), 틱 순간은 카운트다운 숫자가 바뀌는 매 초가 된다. 문제 하나 = 카운트다운 + 3.0초, 전체 = 3 × 그 값, 시각 잇기의 18 도 그 전체 길이로 바뀐다(0.60 은 그대로).
- 문제마다 음절 수가 다르면 그 문제의 칸 배치와 F 를 따로 계산한다.

[구현]
- 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×1080 이다. 화면 캔버스의 실제 픽셀 = 1080·K(K = min(devicePixelRatio, 2)), 그릴 때는 ctx.setTransform(K, 0, 0, K, 0, 0) 아래에서 1080 좌표로 그린다. 조각·합성 캔버스는 K 배 픽셀로 만들고, 분석 캔버스만 1배다. 페이지 바탕색(캔버스 밖)은 벽 색.
- 화면 캔버스의 imageSmoothingQuality 는 설정하지 않는다(브라우저 기본값 그대로). 합성 캔버스는 화면에 거의 1:1 로 놓여 고품질 보간으로 얻는 화질이 없고, 매 프레임 바뀌는 K 배 캔버스 네 장을 'high' 로 그리면 dpr 2 에서 영상 전체가 초당 60프레임에서 30프레임으로 떨어진다(실측 — 그 한 줄만 지우면 60프레임으로 돌아온다).
- 프레임 비용 상한: dpr 2 에서 rAF 콜백 타임스탬프의 이웃 간격 중앙값 ≤ 18ms(60Hz 화면에서 초당 60프레임, 120Hz 화면이면 8ms 안팎). 재는 법: 영상 t 0.5~2.5초 동안 rAF 콜백이 받은 타임스탬프를 모아 이웃끼리의 간격 중앙값을 구한다. render 앞뒤의 performance.now() 차이로는 재지 않는다 — 캔버스는 그리기 명령을 쌓아 두고 바로 돌아와 실제로 프레임이 반으로 떨어진 때에도 0.3ms 처럼 찍힌다. t ≥ 2.5 가 된 첫 프레임에 콘솔에 「프레임 간격 중앙값 ○○ms (기대 ≤ 18)」 한 줄을 찍고, 20ms 를 넘으면 console.warn 으로 의심 목록(imageSmoothingQuality 설정 · 매 프레임 새 캔버스 · 매 프레임 그라디언트 생성 · shadowBlur·filter)을 함께 찍는다.
- 바탕 채도 확인: 시작할 때 CONFIG 의 벽·빛 웅덩이·물든 벽·칸·정답 칸 색을 sRGB → OKLab → OKLCH 로 바꿔 채도 C 를 재고, 콘솔에 「바탕 채도 벽 0.061 · 빛 웅덩이 0.061 · 물든 벽 0.070 · 칸 0.065 · 정답 칸 0.054 (기대 ≤ 0.08)」처럼 한 줄을 찍는다. 하나라도 0.08 을 넘으면 그 색 이름과 값을 console.warn 으로 찍는다(색을 바꾼 사람이 넓은 면에 강한 색을 넣었을 때 바로 알게).
- 시작 순서: document.fonts.ready 뒤 ① 빛 웅덩이·후광 스프라이트를 한 번 그리고, 첫 문제의 음절(2×2 면 넷)을 첫 requestAnimationFrame 전에 한 번에 분석해 조각을 만든다(1배라 dpr 2 에서 0.1초 안팎, 느린 폰에서 0.5초 안팎 — 그동안은 벽 색뿐이고 영상 밖이다). ② 첫 rAF 콜백은 0초 화면(render(0))만 그린다. ③ 그다음 rAF 콜백의 타임스탬프를 t = 0 으로 잡고 영상을 시작한다. 첫 rAF 의 타임스탬프를 바로 0 으로 쓰지 않는 까닭: 긴 분석 직후의 첫 타임스탬프는 분석 전에 찍힌 낡은 값이라, 그걸 0 으로 잡으면 둘째 프레임이 분석 시간만큼(0.1~0.5초) 건너뛴다. 이렇게 하면 첫 rAF 부터 0초 화면(초성 네 칸이 꽉 찬 화면)이고, 영상 안(t ≥ 0)에 빈 프레임도 준비 프레임도 없다.
- 뒤 문제 분석은 「정답 머묾」 구간에서만 한다: 둘째 문제의 음절은 첫 문제의 r 4.90~5.50(마지막 칸 튕김이 ±0.5% 안으로 가라앉아 화면이 거의 멈춘 때 — 전구도 벽도 가만히 있다)에, 셋째 문제의 음절은 둘째 문제의 같은 구간에, render 직후 한 프레임에 한 음절씩 분석해 캐시한다(카운트다운 길이를 바꾸면 이 구간도 함께 밀린다). 멈춘 화면에서는 한 프레임이 늦어도 보이지 않는다. 카운트다운·차오름·등장·퇴장 중에는 분석하지 않는다 — 한 음절 분석은 한 프레임 예산(16.7ms)보다 길어서, 그 프레임이 통째로 끊긴다. 이 구간에 다 못 끝냈으면 다음 문제의 r 0 프레임에서 마저 한다. 한 번 만든 조각은 다음 바퀴에도 그대로 쓴다.
- 이 작품은 상태가 쌓이지 않는다. 화면의 모든 값은 t 만의 순수 함수이고, 매 프레임 합성 캔버스는 캐시한 조각과 t 로만 다시 채운다.
- CONFIG 에는 words(글자·힌트 배열) · countdown · colors · layout(0.81, 0.03, 0.555, 0.06, 0.80, 0.03 등) · timing(시간표의 모든 시각과 길이) · fill(0.50, A 0.025, λ 0.20, 물결 속도 1.6, 띠 0.03) · pop(0.10, 6, 17) · tick(0.04, 0.22) · stage(빛 웅덩이 0.60·0.22·1.5W·0.06W·0.45H, 물든 벽 물결 0.012H·0.35W·0.8·띠 0.008H, 전구 0.047W·12개·0.18H~0.94H·반지름 0.012W·후광 0.07W, 물결 0.035·0.25, 점등 0.02·0.06, 쉼 밝기 0.15) · split(0.004, 0.85, 0.05, 0.76, 0.04, 허용 오차 2, 맞닿음 기준 0.13, 부스러기 1%, 왼쪽 기둥 비율 1.40, DBL 짝 0.85·0.45) · analysis(분석 구간 r 4.90~5.50) · frameBudget(중앙값 기대 18ms, 경고 20ms, 측정 t 0.5~2.5) · chroma(넓은 면 상한 0.08) 를 빠짐없이 넣는다.

[하지 말 것]
- 초성을 호환 자모 글자(ㅎ, ㄹ, ㄲ 등)로 따로 그리지 않는다 — 음절 안의 초성은 칸의 일부만 쓰면서 획 굵기는 글자 전체와 같고, 자리도 모음에 맞춰 바뀐다. 따로 그린 자모는 모양·굵기·자리가 달라서, 정답이 차오르는 순간 초성이 갑자기 굵어지고 옮겨 가며 튄다.
- 분석을 기다리는 동안 초성을 글꼴(호환 자모)로 임시로 그려 두지 않는다 — 임시 글자는 오려 낸 조각과 픽셀이 다를 수밖에 없어, 조각으로 넘어가는 순간 튄다. 기다림은 첫 문제만 1배로 한 번에 분석하는 것으로 줄인다.
- 0초 전의 준비 과정(빈 칸, 칸이 하나씩 차는 화면)을 rAF 프레임으로 보여 주지 않는다 — 녹화와 점검은 첫 rAF 를 영상의 첫 프레임으로 센다. 준비 프레임이 영상 앞에 붙으면 첫 화면이 반쯤 빈 칸이 되고, 18초 끝 화면과 첫 화면이 달라 반복 이음매가 깨진다.
- 뒤 문제 분석을 영상이 시작되자마자 몰아서 하거나 움직이는 구간에 끼워 넣지 않는다 — 한 음절 분석이 한 프레임보다 길어, 릴스에서 가장 중요한 첫 1초가 끊긴다. 분석은 정답이 멈춰 있는 구간에서만 한다.
- 분석을 K 배(devicePixelRatio) 해상도로 하지 않는다 — 시간이 4배로 늘어 느린 폰에서 시작이 1초 넘게 늦고 멈춘 구간 안에 다 끝나지 않는다. 역할 경계는 대개 획 사이 빈자리에 놓여 1배로 충분하다.
- 화면 캔버스에 imageSmoothingQuality = 'high'(또는 'medium')를 넣지 않는다 — 합성 캔버스는 거의 1:1 로 놓여 화질 이득이 없고, 매 프레임 바뀌는 큰 캔버스를 고품질 보간하면 프레임이 절반이 된다. 프레임 비용은 render 앞뒤 시간이 아니라 rAF 타임스탬프 간격으로 잰다.
- 벽·빛·전구 후광을 매 프레임 createRadialGradient·createLinearGradient 로 새로 만들거나 shadowBlur·filter(blur) 로 내지 않는다 — 흐림과 큰 그라디언트를 매 프레임 계산하면 dpr 2 에서 프레임이 떨어진다. 빛은 시작할 때 한 번 그린 스프라이트를 drawImage 로 놓는다.
- DBL(ㅐㅒㅔㅖ)에서 오른쪽 기둥 M 만 따라가 떼기를 끝내지 않는다 — 초성은 왼쪽 기둥에 붙어 있어, 그 덩어리가 통째로 모음이 되면 게·계·케는 FALLBACK 으로 ㄱ 이 세로로 잘리고, 께·뻬·혜는 표에 PASS 로 찍힌 채 초성 일부가 정답 때 노랗게 차오른다.
- V 떼기에서 멈춘 열과 그 왼쪽을 세로로 통째 자르지 않는다 — 멈춘 열보다 왼쪽까지 나온 모음 획 끝(ㅕ·ㅖ 의 아래 가로획)이 초성 색 네모로 남는다. 씨앗과 이어진 덩어리만 뗀다.
- 가로획 윗변을 「폭이 최댓값의 몇 % 이상인 줄」 하나로 정하지 않는다 — 기울어진 가로획에서는 윗변이 여러 줄에 걸쳐, 동그라미 아랫부분이 모음으로 가거나 가로획 윗부분이 초성에 부스러기로 붙는다. 열마다 재서 직선으로 맞춘다.
- 분석이 실패해도 호환 자모로 대체하지 않는다 — 대체하는 순간 위의 튐이 그 음절에서 되살아난다. 실패한 음절은 5)의 자리 나누기로 처리하고 표에 FAIL 로 남긴다.
- 정답 공개 때 완성 글자를 새로 그려 덮거나 크로스페이드하지 않는다 — 초성은 처음부터 끝까지 같은 조각 그대로여야 하고, 겹쳐 그리면 잉크가 두 겹이 되어 경계가 굵어진다.
- 초성 조각과 나머지 조각을 화면에 따로따로 변환해 그리지 않는다 — 크기를 바꿀 때 두 조각의 경계 픽셀이 따로 보간되어 머리카락 같은 틈이 보인다. 합성 캔버스 한 장으로 그린다.
- 붙은 성분을 「가장 좁은 줄」에서 자르지 않는다 — ㄷ 의 세로획처럼 초성 안에 있는 좁은 곳을 반으로 가르고, 짧은 ㅗ 꼭지는 놓친다.
- 굵기 700 같은 굵은 글꼴로 분석하지 않는다 — 획이 굵어지면 초성과 모음이 더 자주 붙어 떼기가 틀린다. 굵게 보이는 것은 덧칠(strokeText)이 맡는다.
- 정답 글자를 처음부터 희미하게 깔아 두거나 빈칸에 물음표·밑줄을 넣지 않는다 — 초성 옆의 빈자리 자체가 문제다. 무언가를 깔면 퀴즈가 풀려 버린다.
- 물방울·거품·튀는 입자·물보라를 넣지 않는다 — 차오름은 수면 하나로 읽혀야 한다. 입자는 칸 밖으로 시선을 끌고 글자 모양을 가린다.
- 수면에 sin 을 여러 겹 더하거나 각도에 따라 흔들지 않는다 — 수면이 끓는 것처럼 보이고, 가는 획 안에서는 곡선이 부서져 얼룩이 된다. 물든 벽의 물결선도 sin 하나다.
- 칸·글자·링에 발광·그림자·네온을 쓰지 않는다 — 빛은 벽(빛 웅덩이·물든 벽)과 전구에만 있다. 칸 위에 빛을 얹으면 초성과 채움의 색 차이가 흐려진다.
- 벽에 빛 웅덩이 말고 다른 그라디언트·결·무늬·조명 줄기(스포트라이트 원뿔·레이저)를 더하지 않는다 — 무대는 벽 하나·빛 웅덩이 하나·전구 두 줄로 충분하고, 더하면 칸 사이로 보이는 벽이 시끄러워져 초성보다 먼저 보인다.
- 전구를 칸 둘레·격자 사이·머리 띠 위에 두거나 개수를 늘리지 않는다 — 좌우 여백 두 줄(24개)만. 칸 둘레의 전구는 테두리처럼 읽혀 초성보다 틀이 먼저 보인다.
- 전구를 늘 깜빡이게(무작위 점멸·상시 추격) 하지 않는다 — 전구가 움직이는 때는 틱 순간의 물결, 0 의 점등, 퇴장 때 어두워짐 셋뿐이다. 상시 점멸은 초성에서 시선을 빼앗고, 정답 머묾 구간에서 분석으로 한 프레임이 늦을 때 끊김이 보인다.
- 벽·빛 웅덩이·물든 벽·칸에 채도 높은 색(OKLCH 채도 0.08 초과 — 진한 보라·벽돌빨강·주홍 등)을 쓰지 않는다 — 화면의 40% 가까이를 덮는 면이 강하게 물들면 화면 전체가 시뻘겋거나 시퍼렇게 보여 눈이 피곤하고, 노란 채움과 전구가 강조로 서지 못한다. 강한 색은 화면 15% 이하의 강조에만.
- 물든 벽을 칸·글자 위에 덮거나 화면 전체를 한 번에 번쩍이게 하지 않는다 — 벽은 칸 뒤에서 아래에서 위로, 칸 안의 노란 물과 같은 0.8초 동안 물든다. 번쩍임은 눈을 아프게 하고 「차오른다」는 문법을 깬다.
- 색종이·폭죽·체크 표시·「정답!」 같은 문구를 덧붙이지 않는다 — 정답의 순간은 노란 채움, 칸 튕김, 칸 색 바뀜, 전구 점등, 벽 물듦이 맡는다. 더하면 흔한 템플릿처럼 산만해진다.
- 칸에 테두리선·격자선·모서리 장식을 넣지 않는다 — 칸은 바탕색 하나로 충분하고, 선이 생기면 초성보다 틀이 먼저 보인다.
- 글자 칸을 화면 가운데 작게 모으지 않는다 — 정사각 피드에서 여백이 크면 작은 슬라이드처럼 보인다. 격자는 가로·세로 각각 화면 한 변의 81% 를 지킨다.
- 0초 화면을 빈 무대나 등장 중인 화면으로 두지 않는다 — 릴스는 첫 1초에 넘겨진다. 0초는 초성 네 칸과 머리 띠가 다 선 꽉 찬 화면이고, 그 프레임에 카운트다운이 시작된다. 시간표에 없는 정지나 빈 화면도 넣지 않는다(칸 없는 무대는 문제 사이 0.05초뿐, 기다리는 3초도 링 회전·매초 콩 뛰기·전구 물결로 늘 움직인다).
- 소리를 넣지 않는다 — 미리보기에서 자동 재생이 막히고, 이 작품은 무음 영상으로 쓰인다.
- 프레임 사이에 값을 누적하지 않는다 — 차오름·튕김·카운트다운·전구·물든 벽은 정해진 시각에 정확히 일어나야 하고, 18초 끝 화면이 0초 화면(초성이 꽉 찬 화면)과 같아야 한다.