낙관 도장 리빌

프롬프트 설정

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

낙관 도장이 한지에 찍히는 이름 리빌 영상을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 카메라는 책상 위 한지를 바로 위에서 내려다본다. 두께 있는 돌 도장이 카메라 쪽에서 종이로 내려와(가까울수록 크고, 그림자가 먼저 종이에 깔린다) 「쾅」 찍히는 순간 화면 전체가 짧게 흔들리고, 도장이 들리면 붉은 인주 자국으로 이름이 새겨진 낙관이 화면의 60% 크기로 드러난다. 볼거리는 진짜 낙관의 재료감이다 — 종이 요철을 따라 자잘하게 부서진 덜 묻은 자리, 짧게 끊긴 돌 흠, 떨어져 나간 모서리, 인주 아래로 비치는 한지 섬유, 그리고 낙관 둘레로 기름이 배어 나가 종이가 섬유 결대로 살짝 어두워지는 자국. 머문 뒤 종이가 한 장 넘어가며 빈 한지로 처음과 이어진다.

[바꿀 곳]
- 이름: 온새미로 (1~4자. 5자 이상이면 앞 4자만 쓰고 콘솔에 경고)
- 인장 방식: 백문 (백문 = 바탕이 붉고 글자가 희다. 글자를 파낸 음각 도장 / 주문 = 글자가 붉다. 글자를 돋운 양각 도장)
- 글자 읽는 순서: 가로 (가로 = 왼쪽 위부터 오른쪽으로 / 세로 = 전통 방식, 오른쪽 열 위→아래 다음 왼쪽 열)
- 색: 인주 #C42B1E(주홍 #D2361F ~ 진홍 #A8141E 사이에서 고른다) · 한지 #EEE6D3 · 한지 뒷면 #E5DAC3 · 기름 자국 #B8A888 · 돌 윗면 #5E4D43 · 돌 옆면 #3A2E27(아래쪽 끝 #2F2520)
- 길이: 6초 (끝나면 처음으로 이어서 반복)
- 화면비: 1:1 (캔버스 1080×1080)

[크기] — 화면 한 변 W(= H) 기준
- 낙관(인주가 찍힌 정사각형) 한 변 S = 0.60W = 648px. 중심 = 화면 가운데. 낙관 전체를 −1.5° 기울여 찍는다(사람 손으로 찍은 자연스러운 어긋남).
- 낙관 모서리는 반지름 0.015S 로 아주 살짝 둥글다(닳은 돌).
- 백문: 낙관 정사각형 전체가 인주, 글자 자리만 비어 종이가 보인다. 글자 영역 안쪽 여백 I = 0.085S.
- 주문: 테두리 두께 0.05S 의 인주 사각 틀 + 인주 글자. 글자 영역 안쪽 여백 I = 0.09S(틀 안쪽과 글자 사이 0.04S).
- 글자 영역 한 변 A = S − 2I(백문 537.8px). 칸 사이 틈 G = 0.035S. 기본 칸 한 변 c = (A − G)/2(백문 257.6px ≈ 0.24W).
- 도장 돌의 인면(종이에 닿는 아랫면): 찍힌 순간 한 변 1.06S(낙관보다 사방 0.03S 크다 — 찍힌 동안 인주 자국을 다 덮는다).

[글자 배치 — 인장 칸에 꽉 차게, 획 굵기는 고르게]
칸 자리(글자 영역 왼쪽 위가 원점, 단위 px, [x, y, 폭, 높이]):
- 4자 가로: 1=[0,0,c,c] 2=[c+G,0,c,c] 3=[0,c+G,c,c] 4=[c+G,c+G,c,c]
- 4자 세로: 1=[c+G,0,c,c] 2=[c+G,c+G,c,c] 3=[0,0,c,c] 4=[0,c+G,c,c]
- 3자 가로: 1=[0,0,c,A](왼쪽 키 큰 칸) 2=[c+G,0,c,c] 3=[c+G,c+G,c,c]
- 3자 세로: 1=[c+G,0,c,A](오른쪽 키 큰 칸 — 성씨 자리) 2=[0,0,c,c] 3=[0,c+G,c,c]
- 2자 가로: 1=[0,0,c,A] 2=[c+G,0,c,A] · 2자 세로: 1=[c+G,0,c,A] 2=[0,0,c,A]
- 1자: 1=[0,0,A,A]
글자 하나 넣는 법:
1. 작업 캔버스(한 변 = 칸 긴 변 × 1.6)에 글꼴 크기 fs = 칸 긴 변, 굵기 800, 가운데 정렬·textBaseline 'middle' 로 fillText 하고, 알파 ≥ 128 픽셀을 훑어 실제 잉크 상자를 구한다.
2. 기둥 굵기 w0 = 작업 캔버스의 행마다 가로로 이어진 잉크 구간 길이 중 0.25·fs 이하인 것들의 중앙값(그런 구간이 없으면 0.12·fs).
3. 배율 sx = 칸 폭 / 잉크 상자 폭, sy = 칸 높이 / 잉크 상자 높이. 잉크 상자만 칸에 drawImage 로 붙인다(가로·세로 배율 따로).
   키 큰 칸에서는 글꼴 크기가 칸 긴 변이라 글자가 가로로 약 0.55~0.6배 눌린다. 그대로 두면 세로획이 가로획의 절반 굵기가 된다.
4. 굵기 맞춤: 작은 배율 쪽 축으로 반지름 r = |sy − sx| × w0 / 2(인주 캔버스 픽셀) 만큼 팽창시킨다 — 그 축 방향으로 −r … +r 을 1px 간격으로 밀면서 같은 잉크 상자를 겹쳐 붙인다(백문은 destination-out, 주문은 채우기).
   검산(2자 키 큰 칸, sx 0.55 · sy 1.10, w0 = 0.12·fs, fs = 537.8): r = 17.7px, 세로획 35.5 → 71.0px = 가로획 71.0px. 정사각 칸에서도 같은 규칙(예: sx 1.36 · sy 1.06 이면 세로로 r = 9.7px).
   목표: 한 글자 안의 가로획·세로획 굵기 비 ≤ 1.2.

[인주 자국 만들기 — 시작할 때 한 번만, 결과는 캔버스로 캐시]
인주 캔버스 한 변 P = 1.10S(낙관 사방 0.05S 여백은 번짐 자리), 픽셀 해상도 = P × min(devicePixelRatio, 2). 아래 길이는 전부 S 기준이라 해상도와 상관없이 같은 모양이 된다.
노이즈: 시드 고정 값 노이즈(격자점 값 = 시드 해시 0~1, smoothstep 보간 쌍선형). fbm(L) = 격자 간격 L, L/2, L/4 세 옥타브를 진폭 1, 0.5, 0.25 로 더해 1.75 로 나눈 값(0~1). vn(L) = 격자 간격 L 의 한 옥타브 값 노이즈.
속도 규칙: 픽셀마다 계산하는 노이즈는 가장자리 fbm(0.010S) 과 고운 반점 vn(0.004S) 둘뿐이다. 빈틈(0.08S·0.02S)·농도(0.15S) 노이즈는 4픽셀 간격 격자에서만 계산하고 쌍선형 보간으로 채운다. 모양이 0 인 픽셀(낙관 바깥·백문 글자 속)은 노이즈를 계산하지 않는다. 흐림은 누적합 상자 흐림(반지름과 상관없이 픽셀당 같은 시간)으로 한다.
1. 모양 M0: 백문 = 둥근 정사각형을 채우고 글자를 빼고, 주문 = 사각 틀(evenodd) + 글자를 채운다.
   모서리 결손 2곳: 낙관 모서리 넷 중 시드로 고른 둘에, 모서리 꼭짓점을 중심으로 반지름 0.02~0.04S 의 울퉁불퉁한 원(꼭짓점 24개, 반지름 ±20% 시드 흔들림)을 destination-out 으로 깎는다. 돌 모서리가 떨어져 나간 자리다.
   알파를 0~1 Float32 배열로 읽는다.
2. 가장자리 거칠게: M0 를 반지름 0.006S 상자 흐림(가로 한 번, 세로 한 번)한 Mb 에 대해
   모양 = smoothstep(0.40, 0.60, Mb + 0.45·(fbm(0.010S) − 0.5)). 돌 테두리·결손·획 가장자리가 ±1.5px 안팎으로 울퉁불퉁해진다.
3. 누르는 힘: u, v = 낙관 안 좌표 0~1(왼쪽 위 0). 힘 p = 1 − 0.5·smoothstep(0.35, 1.0, (u + v)/2) — 왼쪽 위는 꽉, 오른쪽 아래 모서리는 절반 힘.
4. 덜 묻은 자리: v_c = 0.6·fbm(0.08S) + 0.4·fbm(0.02S) − 0.22·(1 − p), v_c′ = v_c + 0.06·(vn(0.004S) − 0.5).
   모양 > 0.5 인 픽셀의 v_c′ 를 4픽셀마다 하나씩 모아 정렬해 8번째 백분위 q 를 구한다. 빈틈 = 1 − smoothstep(q − 0.05, q + 0.01, v_c′).
   결과: 덜 묻은 자리는 하얗게 뚫리지 않고, 가장자리가 자잘한 반점으로 부서지며 안에 옅은 인주(15%)가 남는다. 힘이 약한 오른쪽 아래에 몰린다.
5. 인주 농도: d = 0.80 + 0.20·clamp((fbm(0.15S) − 0.3)/0.4, 0, 1). 잉크 알파 a = 모양·(1 − 0.85·빈틈)·d.
6. 돌 흠: 인주 캔버스에 짧은 흠 5개. 각 흠은 길이 0.03~0.10S 의 2차 베지어 곡선, 굵기 0.002~0.004S, 방향 18° ± 15°(돌 면의 흠은 한 방향으로 나란하다), 시작점은 잉크(a > 0.5) 위.
   곡선을 1px 간격으로 따라가며 그 자리의 fbm(0.01S) > 0.45 인 구간만 destination-out(불투명도 70%)으로 지운다 — 한 흠이 2~4토막으로 끊긴다.
7. 붉은 번짐(아주 조금 — 기름 인주의 안료는 거의 번지지 않는다): a 를 반지름 0.004S 로 상자 흐림 1번한 Bn.
   섬유 마스크 F = 한지 섬유 목록을 인주 캔버스 좌표로 옮겨(낙관 −1.5° 회전의 역변환) 원래 굵기의 1.4배로 다시 그린 알파.
   붉은 번짐 판 = 인주색, 알파 (0.16 + 0.55·F)·Bn·(1 − a). 가장자리에서 섬유를 타고 2~3px 만 붉게 스민다. 찍힌 순간부터 그대로다.
8. 기름 자국(낙관 둘레로 배어 나가며 자란다) — 인주 캔버스의 절반 해상도로 만든다:
   Bw = a 를 반지름 0.030S 로 상자 흐림 2번 한 판. 기름 알파 O = 0.18·smoothstep(0.02, 0.30, Bw)·(0.55 + 0.45·F)·(1 − a).
   O 를 Bw 값으로 다섯 띠로 나눠 다섯 장의 캔버스(색 = 기름 자국 색)에 담는다: 띠1 Bw > 0.30 · 띠2 0.16~0.30 · 띠3 0.08~0.16 · 띠4 0.04~0.08 · 띠5 0.02~0.04.
   검산(곧은 가장자리 단면): 띠 경계가 가장자리 밖 8.8 · 17.0 · 23.5 · 28.2 · 31.5px(0.049S) 에 온다. 한지 위 최대 어두워짐 R 5.0% · G 6.1% · B 8.4%(살짝 누레진다).
   (1 − a) 를 곱하는 이유: 인주 위에 기름·번짐이 다시 겹쳐 곱해지면 가장자리가 검붉게 탄다.
9. 최종 인주 판 = 인주색 + 알파 a(흠 반영). 붉은 번짐 판·기름 띠 다섯 장·인주 판을 캔버스로 캐시한다.

[한지 — 시작할 때 한 번만]
- 한지 캔버스 한 변 1.10W(흔들림·넘김 때 가장자리가 드러나지 않게 사방 0.05W 여유). 바탕 = 한지색.
- 얼룩: 64×64 칸 시드 값 노이즈를 늘려 그려 밝기 ±4%.
- 짧은 섬유 1,100개: 2차 베지어, 길이 0.015~0.07W, 굵기 0.5~1.4px, 방향 완전 무작위, 60% 는 밝은 #F8F3E8, 40% 는 어두운 #D8CBB0, 불투명도 18~45%.
- 긴 닥 섬유 60개: 길이 0.10~0.25W, 굵기 0.6~1.0px, 밝은 색, 불투명도 25%, 완만하게 휜다.
- 껍질 티 120개: 지름 1~2.5px 점, #B9A98A, 불투명도 30%.
- 섬유 목록(점 좌표·굵기)은 배열로 남겨 번짐 마스크에 다시 쓴다.

[인주를 종이에 얹는 법]
전부 globalCompositeOperation = 'multiply' 로 한지 위에 그린다. 순서: 기름 띠 다섯 장(절반 해상도 캔버스를 늘려 그림) → 붉은 번짐 → 인주.
한지 #EEE6D3 에 인주 #C42B1E 가 알파 1로 곱해지면 #B72719(183, 39, 25)가 되고, 인주 아래로 한지 섬유와 얼룩이 비친다.
기름 띠 k(1~5)의 globalAlpha = clamp(5·g − (k − 1), 0, 1), g = 아래 시간표의 기름 진행. 안쪽 띠부터 차례로 차올라 자국의 앞선이 바깥으로 밀려 나간다. 붉은 번짐과 인주는 찍힌 순간부터 알파 1.

[도장 돌 — 두께 있는 돌을 위에서 본다]
- 높이 h(0 = 종이에 닿음, 1 = 카메라 쪽 화면 밖). 돌은 면 두 개로 본다: 인면(높이 h)과 윗면(높이 h + 0.22).
  높이 z 인 면의 중심 = (0.5W, 0.5H − 1.12H·z²), 한 변 = 1.06S·(1 + 0.6z)·꾹, 회전 = 시간표의 각(두 면 같음). 모서리 반지름 = 한 변 × 0.045.
- 그리는 순서: ① 인면 사각형의 네 꼭짓점과 윗면 사각형의 대응 꼭짓점을 이은 옆면 사각형 넷을 옆면색으로 채운다. 아래쪽 옆면만 위(윗면 쪽) #3A2E27 → 아래(인면 쪽) #2F2520 선형 그라디언트.
  ② 윗면: 윗면색 한 장으로 채우고(안쪽에 다른 색 사각형을 들이지 않는다), 돌 결(96×96 시드 값 노이즈를 늘려 'soft-light' 18%, 시작할 때 한 번 만든 캔버스)을 얹고,
  위쪽·왼쪽 가장자리에 1.5px rgba(255,255,255,0.12), 아래쪽·오른쪽 가장자리에 1.5px rgba(0,0,0,0.25).
  ③ 방향 표시 홈: 윗면 위쪽 변 가운데에 변과 맞닿은 반원 홈(반지름 = 윗면 한 변 × 0.035, 색 #3B2F29). 찍는 사람이 위아래를 가리는 표시다.
- 윗면이 더 크고 위로 치우쳐 있어 옆면 넷 중 아래쪽 하나만 띠로 보인다. 이 띠가 돌의 두께다.
  검산: h = 0 에서 띠 폭 13px, h = 0.30(겨눔)에서 173px, h = 0.42 에서 237px. h = 0.30 에서 인면 위끝 26px(0.024H). h = 1 에서 인면 아래끝 −120px — 돌 전체가 화면 밖.
- 그림자(종이 위에 깔린다 — 돌보다 먼저 그린다): 중심 = 낙관 중심 + 길이 (0.006 + 0.09h)H 의 오른쪽 아래 60° 방향 벡터(cos60°, sin60°), 크기 = 1.06S·(1 + 0.2h), 같은 회전, 색 #2A1E16, 전체 알파 α = 0.42·(1 − h)^1.5 (꾹 구간에서는 아래 식), 흐림 폭 b = (0.008 + 0.06h)H.
  흐림은 겹친 사각형으로 낸다: k = 0..7 의 둥근 사각형 8장을 한 변 + 2·b·(k/7 − 0.5) 크기로, 각각 알파 α/8 로 그린다(가장자리가 폭 b 에 걸쳐 고르게 옅어진다). ctx.filter·shadowBlur 는 쓰지 않는다.
  검산: h = 1 이면 α = 0(처음·끝 프레임에 그림자 없음), h = 0.3 이면 α = 0.246, 닿으면 0.42.

[장면] (6초 반복. 세계 = 한지 + 인주 + 그림자 + 돌. 카메라 = 세계 전체에 거는 이동·회전·확대)
1. 0.00–0.20 빈 한지. 돌은 h = 1(화면 밖), 그림자 없음.
2. 0.20–0.80 다가옴: h 1 → 0.30(easeOutCubic). 회전 −7° → −1.5°(같은 이징). 그림자가 돌보다 먼저 종이에 짙어지고, 내려올수록 두께 띠가 얇아진다.
3. 0.80–1.00 예비 동작: h 0.30 → 0.42(easeInOutSine). 살짝 들어 올려 힘을 모은다.
4. 1.00–1.12 내리찍기: h 0.42 → 0(easeInCubic). 두께 띠가 237px → 13px 로 0.12초 만에 줄어든다.
5. 1.12 쾅(시그니처): 인주 판이 이 프레임부터 돌 밑에 있다. τ = t − 1.12 일 때 카메라 흔들림
   dy = 0.016H·e^(−10τ)·sin(2π·8·τ) · dx = 0.45·0.016H·e^(−10τ)·sin(1.3·2π·8·τ) · 회전 = 0.4°·e^(−10τ)·sin(0.7·2π·8·τ).
   τ = 0 에서 전부 정확히 0(sin 꼴). 세로 최대 12.9px(0.0119H, τ ≈ 0.027초), 다음 반대쪽 6.9px(τ ≈ 0.090초), 가로 최대 6.2px, 회전 최대 0.27°. τ = 0.354초 뒤 진폭이 0.5px 아래로 들어간다. 흔들림 중심 = 화면 가운데.
6. 1.12–1.50 꾹: 꾹 = 1 − 0.03·sin(π·(t − 1.12)/0.38). 돌이 3% 작아졌다 돌아오고(인면 사방 10px — 위에서 보면 더 깊이 눌린 것), 같은 구간에 그림자 알파 = 0.42 + 0.08·sin(π·(t − 1.12)/0.38)(최대 0.50).
7. 1.50–2.00 들기: h 0 → 1(easeInCubic). 처음엔 떨어질 듯 말 듯 붙어 있다가(1.60초 h = 0.008) 1.75초(h = 0.125)부터 빠르게 올라가며 낙관이 드러난다. 회전은 −1.5° 그대로.
8. 1.80–3.40 기름 진행 g = easeInOutSine((t − 1.80)/1.60). 1.80초 전에는 g = 0 이다 — 돌 밑에서 자라 버리면 아무도 못 본다.
   2.00초 g = 0.04, 2.60초 0.50, 3.00초 0.85. 돌이 비킨 뒤 낙관 둘레의 종이가 섬유 결대로 안쪽부터 살짝 어두워지며 바깥으로 31px 까지 번져 나간다.
9. 2.00–4.50 머묾: 카메라 확대 1.00 → 1.04(easeInOutSine, 화면 가운데 기준). 기름 자국 말고 다른 움직임은 없다.
10. 4.50–5.50 종이 넘김(아래 [종이 넘김]). 넘어가는 앞장 = 2~9 의 세계 그대로(확대 1.04 유지), 드러나는 새 장 = 확대 1.00·흔들림 0 의 빈 한지(= 0.00초 프레임).
11. 5.50–6.00 빈 한지. 6.00초 프레임 = 0.00초 프레임.

[종이 넘김 — 평면 접기]
- 접는 선: 점 (f, 0.5H) 를 지나고 세로에서 12° 기운 직선(위쪽 끝이 오른쪽으로 — 오른쪽 아래 모서리부터 들린다). 선 방향 단위벡터 u = (sin12°, −cos12°), 오른쪽 법선 n = (cos12°, sin12°), 부호 거리 s(p) = (p − (f, 0.5H))·n.
- f = 1.116W → −0.116W(easeInOutCubic, 4.50–5.50). 이 값이면 시작에는 화면 네 모서리가 전부 s < 0(접힌 부분 없음), 끝에는 전부 s > 0(앞장이 통째로 넘어가 화면 밖).
- 그리는 순서:
  ① 새 장(빈 한지)을 화면 전체에 그린다.
  ② s > 0 쪽, 접는 선에서 0.06W 까지: 넘어가는 장이 새 장에 드리운 그늘. 선에 수직인 선형 그라디언트 rgba(60,45,30,0.16) → 0.
  ③ s < 0 쪽으로 클립하고 앞장(세계 렌더를 그린 화면 밖 캔버스)을 그린다.
  ④ 같은 클립 안에서 접는 선에 대한 반사 변환을 건다: translate(f, 0.5H) → transform(−cos24°, −sin24°, −sin24°, cos24°, 0, 0) = (−0.9135, −0.4067, −0.4067, 0.9135, 0, 0) → translate(−f, −0.5H).
     이 변환 안에서 화면 사각형 [0, W]×[0, H] 를 한지 뒷면 색으로 채우고, 그 위에 앞장 캔버스를 globalAlpha 0.18 로 그대로 얹는다(종이 뒤로 비친 섬유와 인주 — 반사 변환 덕분에 저절로 좌우가 뒤집힌다).
     이어서 같은 변환 안에서 접는 선부터 뒷면 안쪽 0.035W 까지 흰색 22% → 0 그라디언트(접힌 곳의 둥근 빛), 앞장 사각형 둘레에 1px rgba(110,90,60,0.25) 선.
- 접힌 덮개는 언제나 접는 선 왼쪽(s < 0)에만 있다. 오른쪽 아래 모서리가 들려 왼쪽 위로 넘어가는 모양이 된다.

[구현]
- 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. 레터박스 바깥 배경은 #1A1714.
- 시작 순서(첫 화면이 곧바로 떠야 한다): ① 한지를 만들고 0초 프레임(빈 한지)을 바로 화면 캔버스에 그린다. ② requestAnimationFrame 을 두 번 거친 뒤(첫 콜백은 화면에 그림이 나가기 직전에 돌기 때문에, 거기서 무거운 일을 하면 빈 한지가 안 보인다) 돌 결과 인주 판들을 만든다. ③ 다 만든 다음 프레임의 타임스탬프를 t = 0 으로 삼아 재생한다. 기다리는 동안 보이는 빈 한지가 0초·6초 프레임과 같아서 멈춘 티가 나지 않는다.
- 상태가 쌓이지 않는다. 모든 움직임은 t 만의 순수 함수다. 한지·인주 판·기름 띠·돌 결은 시작할 때 한 번만 만들어 캐시한다.
- 세계는 매 프레임 화면 밖 캔버스(앞장)에 그린다: 카메라 변환(화면 가운데 기준 이동 dx, dy · 회전 · 확대) 안에서 한지 → 기름 띠·붉은 번짐·인주(multiply, 낙관 중심·−1.5° 회전) → 그림자 → 돌. 넘김 구간이 아니면 그 캔버스를 그대로 화면에 낸다.
- CONFIG.timing 에 시각을 전부 이름 붙여 모은다:
  blank[0,0.20] · enter[0.20,0.80] · anticip[0.80,1.00] · slam[1.00,1.12] · impact 1.12 · press[1.12,1.50] · lift[1.50,2.00] · oil[1.80,3.40] · hold[2.00,4.50] · turn[4.50,5.50] · rest[5.50,6.00].
- CONFIG 에 흔들림(진폭 0.016H · 감쇠 10 · 8Hz), 꾹 0.03, 돌 두께 0.22, 빈틈 백분위 8·남는 인주 0.15, 흠 5개, 모서리 결손 2곳, 기름(흐림 0.030S · 세기 0.18 · 띠 경계 0.30/0.16/0.08/0.04/0.02), 붉은 번짐 0.16·0.55, 섬유 개수, 그림자 식의 숫자를 넣는다.
- 낙관 모양을 보는 키: B 를 누르면 인주 방식(백문/주문)이, V 를 누르면 읽는 순서(가로/세로)가 바뀌고 인주 판을 다시 만든다.

[하지 말 것]
- 인주를 source-over 로 덮어 칠하지 않는다 — 종이 결이 사라져 붉은 스티커를 붙인 것처럼 보인다. multiply 로 얹어야 인주 아래로 섬유가 비친다.
- 낙관을 균일한 빨강 단색·완벽한 직선 사각형으로 그리지 않는다 — 컴퓨터로 만든 도장 아이콘처럼 보인다. 재료감은 가장자리 울퉁불퉁함·모서리 결손·덜 묻은 반점·흠·농도 차가 함께 낸다.
- 덜 묻은 자리를 하얗게 뚫린 매끈한 덩어리나 무작위 동그라미 점으로 만들지 않는다 — 앞의 것은 칠이 벗겨진 간판(그런지 필터), 뒤의 것은 땡땡이 무늬로 읽힌다. 진짜 덜 묻은 인주는 종이 요철을 따라 자잘하게 부서지고 옅은 분홍이 남는다.
- 흠을 길고 매끈한 곡선으로 긋지 않는다 — 굵기가 고르고 끝이 둥근 흰 선은 디지털 브러시 자국으로 보인다. 돌 면의 상처는 짧게 끊긴 토막과 떨어져 나간 모서리로 찍힌다.
- 붉은색을 넓게 번지게 하지 않는다 — 기름으로 갠 인주는 안료가 거의 번지지 않고, 넓게 퍼진 붉은 테두리는 물 스탬프 잉크나 네온 글로우처럼 보인다. 넓게 퍼지는 것은 종이를 살짝 어둡게 하는 기름 자국이다.
- 기름 자국을 한 장의 투명도로 페이드인하지 않는다 — 제자리에서 진해지기만 하면 「배어 나간다」가 아니라 「켜진다」로 읽힌다. 다섯 띠를 안쪽부터 차례로 채워 앞선이 바깥으로 움직여야 한다.
- 노이즈·섬유·흠을 매 프레임 다시 만들지 않는다 — 결이 프레임마다 끓어서 종이와 인주가 지글거린다. 시작할 때 한 번 만든 캔버스를 쓴다.
- 인주 자국을 페이드인으로 나타내지 않는다 — 자국은 닿는 순간 돌 밑에서 한 번에 생기고, 돌이 들리며 드러나야 「찍었다」로 읽힌다.
- 낮은 주파수 노이즈를 픽셀마다 계산하거나 인주 판을 다 만들 때까지 첫 화면을 비워 두지 않는다 — 고해상도 폰에서는 몇 초 동안 검은 화면만 보여 대부분 그 사이에 넘겨 버린다.
- 돌을 면 하나(납작한 사각형)로 그리거나 윗면 안에 다른 색 사각형을 들이지 않는다 — 두께 없는 판은 카드·코스터가 붙는 것처럼 보여 「쾅」의 무게가 사라지고, 안쪽 사각형은 쟁반 테두리로 읽힌다.
- 방향 표시 홈을 윗면 가운데 떨어진 둥근 구멍으로 그리지 않는다 — 꼬리표의 거는 구멍처럼 읽힌다. 위쪽 변에 맞닿은 반원 홈이어야 한다.
- 흔들림을 cos 꼴로 쓰거나 무작위 떨림으로 만들지 않는다 — cos 꼴은 τ=0 에서 화면이 한 프레임에 튀고, 무작위 떨림은 반복할 때마다 달라지며 감쇠가 보이지 않는다.
- 흔들림을 돌에만 주지 않는다 — 돌만 떨면 도장이 미끄러진 것으로 보인다. 충격은 책상 전체(카메라)가 받는다. 한지 캔버스는 사방 0.05W 여유가 있어 가장자리가 드러나지 않는다.
- 충격파 고리·먼지·파티클·빛 번쩍임·「쾅」 글자를 넣지 않는다 — 충격은 흔들림과 갑자기 멈춘 돌이 맡는다. 장식 효과가 붙으면 게임 타격 이펙트처럼 보이고 재료의 차분함이 깨진다.
- 글자 칸 맞춤에 measureText 상자나 em 상자를 쓰지 않는다 — 한글 글꼴은 em 상자 위아래 여백이 글꼴마다 달라 칸이 비거나 넘친다. 그린 픽셀의 잉크 상자를 칸에 늘려 붙인다.
- 늘려 붙인 글자의 굵기를 그대로 두지 않는다 — 한 축만 눌린 고딕은 세로획과 가로획 굵기가 두 배까지 달라져 「글꼴을 잡아 늘린 것」으로 읽힌다. 인장 글씨의 첫째 표지는 고른 획 굵기다.
- 붓글씨·전서체 흉내를 글꼴 찾기로 내려 하지 않는다 — 외부 글꼴은 미리보기에서 막힌다. 인장다움은 꽉 찬 칸·고른 획·거친 가장자리가 낸다.
- 낙관을 화면 가운데 작게 두지 않는다 — 한 변 0.60W 를 지킨다. 작으면 인주 결과 기름 자국이 보이지 않아 이 작품의 볼거리가 사라진다.
- 태극·단청 문양·매화 가지·전통 무늬 테두리 같은 장식을 넣지 않는다 — 한국적인 느낌은 한지 섬유와 인주의 재료감이 낸다. 상투적인 문양은 그것을 기념품 포장지로 만든다.
- 도장 돌에 글자·문양·조각(동물 손잡이 등)을 그리지 않는다 — 위에서 본 돌은 면·두께 띠·홈 하나면 충분하고, 그려 넣은 무늬는 1초 남짓한 등장 동안 시선을 인주 자국에서 빼앗는다.
- 종이 넘김을 크로스페이드·옆으로 밀기·3D 곡면 말기로 바꾸지 않는다 — 페이드는 장면 전환으로 읽히고, 밀기는 종이가 아니라 슬라이드처럼 보이며, 곡면 말기는 원리 없이 짐작하면 찢어진 듯 깨진다. 반사 변환 하나로 접는 평면 넘김이어야 한다.
- 돌과 그림자 외의 그림자(낙관 그림자·글자 그림자)와 그라디언트 배경을 넣지 않는다 — 인주는 종이에 스며든 것이라 그림자가 생기면 종이 위에 뜬 스티커가 된다.