한 붓 선 로고

프롬프트 설정

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

한 붓으로 그리는 브랜드 로고 리빌 영상을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 끊기지 않는 선 하나가 화면 아래 밖에서 곧게 솟아올라 마크 모서리에서 꺾이고, 펜을 떼지 않고 아치 모양 마크를 그린 뒤 기준선을 따라 이어 가며 브랜드 이름의 대문자를 직선과 호로만 한 줄에 써 낸다. 다 쓰고 나면 글자 사이를 잇던 기준선 토막들이 오른쪽 끝부터 「톡 톡」 끊기며 글자 속으로 빨려 들어가고 글자가 하나씩 튀어 오르며, 끊김이 마크에 닿는 순간 아치 안이 강조색으로 차오른다. 선의 머리는 앞이 가늘고 빠르며, 꺾이는 곳에서 멈칫한다. 모든 획은 아래 표의 좌표로 정해져 있다 — 글꼴로 쓰는 글자는 슬로건뿐이다.

[바꿀 곳]
- 브랜드 이름: ODAMU (라틴 대문자 A–Z 와 공백. 소문자는 대문자로 바꾸고, 표에 없는 문자는 빼고 그린다)
- 슬로건: 처음부터 끝까지, 한 줄로 짓습니다
- 색: 바탕 #F1EEE7 · 선 #1A1A1E · 차오르는 면 #E8472B
- 길이: 9초 (끝나면 처음으로 이어서 반복)
- 화면비: 16:9 (캔버스 1920×1080)

[크기] — 화면 높이 H, 폭 W. 글자 단위 C = 대문자 높이(아래 글자표의 1)
- 선 굵기 SW = 0.10C. 선 끝과 이음은 전부 둥글게(lineCap·lineJoin 'round').
- 글자 상자 배치: 첫 글자 상자 왼쪽 = 이름 시작. 다음 글자 상자 왼쪽 = 앞 상자 왼쪽 + 앞 글자 폭 w + 0.28C. 공백은 그 자리 간격에 0.40C 를 더한다(공백 자체는 그리지 않는다).
  이름 폭 N_w(C 단위) = 첫 상자 왼쪽 ~ 마지막 상자 왼쪽 + 그 글자 w.
- 묶음 폭 U(C 단위) = 1.20(마크) + 0.55(마크–이름 간격) + N_w + 0.10(양 끝 선 굵기).
- C = min(0.22H, 0.84W ÷ U). 기본 이름 ODAMU 면 N_w = 5.54, U = 7.39, C ≈ 218.2px(0.2021H), 묶음 폭 ≈ 0.84W.
- 가로: 묶음 바깥 왼쪽 = (W − U·C)/2. 마크 왼쪽 기둥의 중심선 X0 = 그 값 + SW/2(기본 이름이면 약 164.5px). 이름 시작 = X0 + 1.75C.
- 세로: 기준선 y_b = H/2 + (1.85C − 0.42C − h_s)/2. h_s = 슬로건 잉크 높이(슬로건 문자열 measureText 의 actualBoundingBoxAscent + actualBoundingBoxDescent).
  기본값이면 y_b ≈ 0.613H(글꼴에 따라 ±4px), 마크 위끝 ≈ 0.239H, 슬로건 아래끝 ≈ 0.76H — 묶음이 화면 높이의 절반을 차지한다.
- 마크: 폭 1.2C, 높이 1.8C. 아래 1.2C 는 곧은 기둥 둘과 바닥, 위는 반지름 0.6C 반원(아치 문 모양). 왼쪽 아래 모서리가 (X0, y_b).
- 슬로건: 한글 글꼴 굵기 700, 글자 크기 0.30C, 색 = 선 색. 잉크 윗선 = y_b + 0.42C. 왼쪽 끝 = 이름 시작 − SW/2.
  글자마다 measureText 폭에 0.02em 을 더해 누적해 놓는다. 슬로건 폭이 이름 잉크 폭(N_w·C + SW)을 넘으면 넘지 않게 글자 크기를 줄인다.

[글자표] — 이름의 모든 획은 이 표로만 그린다
표기:
- 좌표는 C 단위. 글자 상자 왼쪽 아래(기준선 위)가 (0,0)이고 y 는 위로 커진다(1 = 대문자 높이).
  화면 좌표 = (상자 왼쪽 + x·C, y_b − y·C). 캔버스는 y 가 아래로 커지므로 y 만 뒤집는다.
- 한 줄 = 글자 · 폭 w | 시작점 · 조각들(순서대로 잇는다).
- `Lx,y` = 지금 점에서 (x,y)까지 직선.
- `Acx,cy,r,a0>a1` = 중심 (cx,cy), 반지름 r 인 원 위를 각도 a0 에서 a1 까지(도). 점 = (cx + r·cos a, cy + r·sin a), a 는 a0 → a1 로 고르게 바뀐다.
  0° = 오른쪽, 90° = 위(표 좌표 기준). a1 > a0 이면 반시계, a1 < a0 이면 시계 방향. 630 처럼 360 을 넘는 값도 그대로 쓴다(O 는 한 바퀴). 호의 시작점은 언제나 지금 점과 같게 맞춰 두었다.
- `~` 가 붙은 조각 = 되짚기. 펜을 떼지 않으려고 이미 그린 획 위를 되돌아가는 길이다. 새 잉크는 없고 속도만 다르다([속도]).
- 모든 글자는 기준선 위 점에서 시작해 기준선 위 점에서 끝난다.

MARK 1.20 | 0,0 L1.2,0 L1.2,1.2 A0.6,1.2,0.6,0>180 L0,0 ~L1.2,0
A 0.90 | 0,0 L0.45,1 L0.7425,0.35 L0.1575,0.35 ~L0.7425,0.35 L0.9,0
B 0.68 | 0,0 L0,1 L0.42,1 A0.42,0.76,0.24,90>-90 L0,0.52 ~L0.42,0.52 A0.42,0.26,0.26,90>-90 L0,0
C 0.86 | 0.5,0 A0.5,0.5,0.5,270>315 ~A0.5,0.5,0.5,315>270 A0.5,0.5,0.5,270>45 ~A0.5,0.5,0.5,45>270
D 0.78 | 0,0 L0,1 L0.28,1 A0.28,0.5,0.5,90>-90 L0,0
E 0.62 | 0,0 L0,1 L0.62,1 ~L0,1 ~L0,0.5 L0.54,0.5 ~L0,0.5 ~L0,0 L0.62,0
F 0.60 | 0,0 L0,1 L0.6,1 ~L0,1 ~L0,0.5 L0.52,0.5 ~L0,0.5 ~L0,0
G 1.00 | 0.5,0 A0.5,0.5,0.5,270>45 ~A0.5,0.5,0.5,45>270 A0.5,0.5,0.5,270>360 L0.56,0.5 ~L1,0.5 ~A0.5,0.5,0.5,360>270
H 0.80 | 0,0 L0,1 ~L0,0.5 L0.8,0.5 L0.8,1 ~L0.8,0.5 L0.8,0
I 0.00 | 0,0 L0,1 ~L0,0
J 0.56 | 0.28,0 A0.28,0.28,0.28,270>180 ~A0.28,0.28,0.28,180>270 A0.28,0.28,0.28,270>360 L0.56,1 ~L0.56,0.28 ~A0.28,0.28,0.28,360>270
K 0.72 | 0,0 L0,1 ~L0,0.42 L0.7,1 ~L0,0.42 L0.72,0
L 0.56 | 0,0 L0,1 ~L0,0 L0.56,0
M 0.96 | 0,0 L0,1 L0.48,0.22 L0.96,1 L0.96,0
N 0.80 | 0,0 L0,1 L0.8,0 L0.8,1 ~L0.8,0
O 1.00 | 0.5,0 A0.5,0.5,0.5,270>630
P 0.66 | 0,0 L0,1 L0.4,1 A0.4,0.74,0.26,90>-90 L0,0.48 ~L0,0
Q 1.00 | 0.5,0 A0.5,0.5,0.5,270>630 ~A0.5,0.5,0.5,270>315 L0.7071,0.2929 ~L0.8536,0.1464 L1,0
R 0.70 | 0,0 L0,1 L0.4,1 A0.4,0.74,0.26,90>-90 L0,0.48 L0.7,0
S 0.52 | 0.26,0 A0.26,0.26,0.26,270>200 ~A0.26,0.26,0.26,200>270 A0.26,0.26,0.26,270>450 A0.26,0.76,0.24,270>20 ~A0.26,0.76,0.24,20>270 ~A0.26,0.26,0.26,450>270
T 0.72 | 0.36,0 L0.36,1 L0,1 ~L0.36,1 L0.72,1 ~L0.36,1 ~L0.36,0
U 0.78 | 0.39,0 A0.39,0.39,0.39,270>180 L0,1 ~L0,0.39 ~A0.39,0.39,0.39,180>270 A0.39,0.39,0.39,270>360 L0.78,1 ~L0.78,0.39 ~A0.39,0.39,0.39,360>270
V 0.84 | 0.42,0 L0,1 ~L0.42,0 L0.84,1 ~L0.42,0
W 1.20 | 0.3,0 L0,1 ~L0.3,0 L0.6,0.78 L0.9,0 L1.2,1 ~L0.9,0
X 0.80 | 0,0 L0.8,1 ~L0.4,0.5 L0,1 ~L0.4,0.5 L0.8,0
Y 0.80 | 0.4,0 L0.4,0.5 L0,1 ~L0.4,0.5 L0.8,1 ~L0.4,0.5 ~L0.4,0
Z 0.70 | 0,0 L0.7,1 L0,1 ~L0.7,1 ~L0,0 L0.7,0

[한 줄 경로] — 끊기지 않는 점 열 하나
호 길이 s 로 매개화한다. s = 0 은 마크 왼쪽 아래 모서리 (X0, y_b).
1. 들어오기(s < 0): 마크 왼쪽 기둥 중심선의 아래 연장선을 따라 위로 올라오는 수직 직선, 점 = (X0, y_b − s). 시작 s = −LEAD, LEAD = (H − y_b) + 0.04H(화면 아래 밖 0.04H 에서 출발).
   기본 이름이면 LEAD ≈ 458px, 화면 안에서 보이는 길이 ≈ 0.38H. s = 0 에서 90° 꺾여 마크 바닥을 오른쪽으로 달린다 — 이 꺾임도 모퉁이다.
2. 마크: MARK 줄, 상자 왼쪽 = X0. 바닥을 오른쪽으로 달려 오른쪽 기둥을 오르고, 반원을 반시계로 넘어 왼쪽 기둥을 내려와 닫힌 아치가 된 뒤, 바닥을 되짚어 오른쪽 아래 모서리로 간다.
3. 연결선 0: 마크 끝 (X0 + 1.2C, y_b) → 첫 글자 시작점.
4. 글자 i(1부터 n까지): 그 글자 줄. 그다음 연결선 i: 이 글자 끝점 → 다음 글자 시작점. 마지막 글자 뒤 연결선 n: 끝점 → 꼬리 끝 E = (마지막 상자 왼쪽 + w + 0.45C, y_b), 단 x 는 0.97W 를 넘지 않는다.
5. 연결선은 전부 기준선 위 수평 직선이다. 글자 밑을 지나가도 된다 — 끝에서 전부 사라진다.
6. 초기화 때 경로 전체를 1px 간격 점 열로 만든다(호는 각도를 잘게 나눠 점을 찍는다). 점마다 s, 주인(들어오기 / 마크 / 글자 i / 연결선 k), 되짚기 여부를 적는다.
   기본 이름이면 s 는 약 −458px 에서 E 의 약 6487px(29.7C)까지, 모퉁이는 E 를 빼고 21개(들어오기 꺾임 포함).

[속도] — 일정한 박자, 꺾이는 곳에서 감속, 앞은 가늘게
- 모퉁이: 조각이 바뀌는 곳마다 앞 조각의 끝 진행 방향과 다음 조각의 시작 진행 방향 사이 각 θ(0~180°)를 잰다(점 열의 마지막 두 점과 처음 두 점으로).
  θ ≤ 1° 는 무시한다(접하며 이어지는 곳 — 연결선에서 O 로 들어가는 곳, 기둥에서 반원으로 넘어가는 곳). 끝 E 에도 θ = 180° 모퉁이를 하나 둔다(서며 멈춘다).
- 속도 배율 g(s) = 1 − 0.7·max_모퉁이[ (θ/180)·exp(−((s − s_c)/(0.35C))²) ]. 90° 모퉁이 한가운데 0.65, 되돌아가는 곳(180°) 0.30.
  감속 창 0.35C 는 곧은 곳에서 머리가 2~3프레임에 지나가는 거리다 — 이보다 좁으면 한 프레임 안에 지나쳐 멈칫이 화면에 안 남는다(90° 에서 약 0.03초, 180° 에서 약 0.10초 더 머문다).
- 시간 비용 c(s) = m(s) / g(s). m = 되짚기 0.35, 나머지 1.
- τ(s) = −LEAD 부터 c 를 1px 마다 누적한 표. RATE = τ(E) / (t_end − t_in). 머리 위치 s_head(t) = τ⁻¹(RATE·(t − t_in)) — 표에서 이분 탐색하고 선형 보간한다.
  이렇게 하면 새 잉크는 같은 빠르기로 쌓이고, 꺾임에서만 멈칫하고, 되짚기는 휙 지나간다.
- 머리 속도 v = RATE / c(s_head) (px/초). 기본 이름이면 곧은 곳 약 2113px/초(1.96H/초), 90° 모퉁이 약 1373, 되돌아가는 곳 약 634, 되짚는 곧은 곳 약 6036.
- 머리 가늘어짐(칠해진 뒤 지난 시간으로 정한다): 점 s 가 칠해진 시각 t_s = t_in + τ(s)/RATE. 지금 시각 t 에서 그 점의 나이 a = t − t_s.
  굵기 = SW·(0.25 + 0.75·smoothstep(a / 0.09)), smoothstep(x) = x²(3 − 2x)(x 는 0~1 로 자른다). 나이 0.09초가 넘은 점은 SW 굵기, 머리 끝(나이 0)은 SW 의 25%.
  곧은 곳에서는 머리 뒤 약 0.87C(0.09초 × 2113px/초)가 가늘어지는 구간이고, 모퉁이에서는 저절로 짧아진다. 한 점의 굵기는 시간이 갈수록 굵어지기만 한다 —
  머리 속도가 바뀌어도 이미 칠한 잉크가 부풀거나 다시 가늘어지지 않는다. 되짚기 구간은 아래에 이미 SW 굵기 잉크가 있어 따로 보이지 않는다.
  t_end 뒤에는 머리가 멈춘 채 나이만 늘어, 0.09초 뒤 끝이 온전한 둥근 끝이 된다.
- 꼬리: s_tail = min(0, s_head − 0.30W). 들어오는 선은 화면 아래 끝에서부터 이어진 채 솟아오르고, 머리가 마크를 그리는 동안 꼬리가 아래에서 따라 올라와 마크 모서리(s = 0)에 닿으면 거기 붙는다(기본 이름이면 약 1.60초).

[장면] (t_in = 1.05, t_end = 5.05. n = 이름 글자 수)
1. 0.00–0.10 완성 로고 정지. 9.00초 화면과 같다.
2. 0.10–0.30 비우기. 아치 안 면의 수면이 꽉 참 → 0 으로 내려간다(수면 높이 = 1.8C·(1 − easeInCubic)). 0.30초에 면이 다 빠진다 — 감기가 마크 오른쪽 기둥에 닿는 약 0.34초보다 먼저여야 면이 선 밖에 남지 않는다.
   0.10–0.35 슬로건 전체가 h_s(잉크 높이 전부) 아래로 가라앉아 슬로건 상자 밑으로 완전히 빠진다(easeInCubic). 덜 내리면 0.35초에 글자 윗부분이 남았다가 한 프레임에 꺼진다.
3. 0.30–1.20 감기. 지난 바퀴의 선이 그려진 순서대로 지워진다. 꼬리의 τ = τ(0) + (τ(E) − τ(0))·u, u = (t − 0.30)/0.90 — 이징 없이 고른 빠르기로.
   꼬리보다 s 가 작은 획은 사라진다. 연결선은 이미 없으니 마크와 글자 획만 지워진다.
   기본 이름이면 다 지워지는 시각이 마크 0.46 · O 0.57 · D 0.69 · A 0.84 · M 1.00 · U 1.16 — 글자가 0.12~0.16초 간격으로 하나씩 사라지고, 1.0초에도 U 가 남아 있다. 1.20초에 지난 선은 하나도 남지 않는다.
4. 1.05–5.05 그리기. 머리가 화면 아래 밖에서 출발해(화면 아래 끝을 약 1.07초에 지난다) [속도]대로 달린다. 그린 범위 = [s_tail, s_head].
   기본 이름이면 마크 1.28–1.96 · O 2.07–2.39 · D 2.49–2.90 · A 3.07–3.55 · M 3.59–4.19 · U 4.32–4.87 · E 도착 5.05 — 이 시각에서 ±0.02초 안이면 맞게 만든 것이다.
   5.05초 화면 = 마크·연결선·이름이 기준선으로 하나로 이어진 한 줄.
5. 5.05–5.15 숨. 선이 다 그려진 채 멈추고, 끝이 둥글게 굵어진다.
6. 5.15–5.66 톡(시그니처). 연결선이 오른쪽 끝부터 끊긴다. 연결선 k(k = n, n−1, …, 0)는 5.15 + (n − k)·(0.35/n) 초에 끊기기 시작해 0.16초 동안 easeInCubic 으로 줄어든다.
   - 꼬리 연결선(k = n): 왼쪽 끝을 고정하고 E 쪽 끝이 마지막 글자 끝점으로 빨려 들어간다(길이 → 0).
   - 나머지 연결선: 가운데에서 끊기고, 두 반쪽이 각자 자기 쪽 끝점으로 줄어든다(왼쪽 반 → 앞 주인의 끝점, 오른쪽 반 → 다음 글자의 시작점).
   - 줄어드는 반쪽은 둥근 끝을 단 SW 굵기 선분이다. 길이가 0 이 되면 그리지 않는다.
   - 줄어드는 반쪽의 고정된 끝(글자 쪽 끝)은 그 주인의 튐 변환을 함께 받는다 — 안 그러면 글자가 튈 때 반쪽 끝이 글자에서 떨어져 보인다(기준선 가운데에서 0.4C 떨어진 끝점이면 최대 6px).
   - 반쪽이 끝점에 닿는 순간(시작 + 0.16초) 그 끝점의 주인(글자나 마크)이 「톡」 튄다. τ = 닿은 뒤 지난 초, 배율 = 1 + 0.12·e^(−10τ)·sin(24τ), 중심 = 그 주인 상자의 기준선 가운데.
     τ = 0 에서 정확히 1 이고, 최대 +6.8%(τ ≈ 0.049초 — 기본 이름이면 글자 위끝이 약 15px 튀어 오른다), 되튐 −1.8%(τ ≈ 0.18초), 0.25초 뒤로는 ±0.5% 안. 한 글자에 양쪽 반쪽이 닿으면 두 튐을 더한다.
     닿은 뒤 0.6초가 지나면 그 튐은 정확히 0 으로 둔다 — 지수 꼬리가 남으면 머묾 동안 가장자리 화소가 깜빡인다(끊는 순간의 크기는 0.12·e^(−6) ≈ 0.0003, 1px 미만. 마지막 닿음 5.66 + 0.6 = 6.26초라 머묾 전에 끝난다).
   - 기본 이름(n = 5)이면 간격 0.07초 — 5.15 · 5.22 · 5.29 · 5.36 · 5.43 · 5.50 초에 끊기고, 마크에는 5.66초에 닿는다.
7. 5.66–6.21 차오름. 마크에 닿는 순간 아치 안이 차오르는 면 색으로 아래에서 위로 찬다. 수면 높이(기준선에서) = 1.8C·easeOutCubic((t − 5.66)/0.55), 수면은 수평 직선.
   면 = 아치 중심선 안쪽(바닥 = 기준선, 양옆 = 기둥 중심선, 위 = 반원)을 수면 아래만 칠한 것. 면을 먼저 칠하고 그 위에 선을 그려 선이 면 가장자리를 덮게 한다. 마크가 튀면 면도 같은 배율.
8. 5.90–6.50 슬로건. 글자 i(0부터, 공백 포함 전체 N 자)는 5.90 + 0.30·i/(N − 1) 초에 출발해 0.30초 동안 easeOutQuart 로 아래에서 올라온다. 출발 위치는 h_s 아래 — 상자 밖에서 출발해야 글자 조각이 갑자기 나타나지 않는다. 슬로건 상자(잉크 위끝~아래끝) 밖은 잘린다.
9. 6.50–9.00 머묾. 아무것도 움직이지 않는다. 9.00초 = 0.00초.
이징: easeInCubic(u) = u³, easeOutCubic(u) = 1 − (1 − u)³, easeOutQuart(u) = 1 − (1 − u)⁴, u 는 0~1 로 자른다.

[구현]
- 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 이다. 난수는 쓰지 않는다.
- 글자표와 MARK 줄은 위 표기 그대로 CONFIG 안 여러 줄 문자열로 넣고, 작은 파서로 읽는다(손으로 옮겨 적다 좌표가 틀리지 않게). 호의 시작점이 지금 점과 1e-3C 넘게 어긋나면 콘솔에 그 글자를 경고한다.
- CONFIG 묶음: size{capMaxH 0.22, fitW 0.84, sw 0.10, markW 1.2, markH 1.8, markGap 0.55, letterGap 0.28, spaceGap 0.40, tailX 0.45, sloganSize 0.30, sloganTop 0.42} ·
  speed{cornerK 0.7, cornerW 0.35, retraceCost 0.35, taperAge 0.09, tip 0.25, run 0.30, leadOut 0.04} ·
  timing{hold[0,0.10], drain[0.10,0.30], sloganOut[0.10,0.35], unwind[0.30,1.20], tIn 1.05, tEnd 5.05, snap 5.15, snapSpread 0.35, snapDur 0.16, fillDur 0.55, sloganIn[5.90,6.50], sloganDur 0.30, sloganDrop 1.0} ·
  bump{amp 0.12, decay 10, freq 24}.
- 점 열·τ 표·모퉁이 목록·글자 상자는 시작할 때(그리고 이름·크기가 바뀔 때) 한 번만 만든다. 매 프레임에는 이분 탐색만 한다. 모든 값은 t 만의 함수이고 프레임 사이에 아무것도 누적하지 않는다.
- render(t) 의 상태: 지난 바퀴 선(t < 1.20, 장면 1·3) · 이번 바퀴 선(t ≥ 1.05, 장면 4~9) · 면 · 슬로건. 6.50초 뒤와 0.10초 앞의 화면은 같은 완성 로고다.
- 그리는 순서: 바탕 → 아치 면 → 마크·글자 획(주인마다 튐 변환을 걸고, 나이 0.09초 미만 구간은 빼고 SW 굵기 한 경로로) → 들어오는 선·연결선(나이 0.09초 미만 구간은 빼고, 줄어드는 반쪽의 글자 쪽 끝은 그 주인의 튐 변환으로) →
  머리 가늘어짐 구간(s_head(t − 0.09) ~ s_head(t) 를 24토막으로 나눠 토막마다 가운데 점의 나이로 굵기를 정하고, 둥근 끝) → 슬로건.
- 되짚기 구간도 점 열 그대로 그린다(이미 있는 획 위라 새로 보이는 것은 없다).
- 시작할 때 자체 대조표를 console.table 로 한 번 찍는다. 열 = 항목 · 기대 · 실제 · 판정(PASS/FAIL/SKIP). 「실제」는 반드시 코드가 만든 자료(점 열·τ 표·시간표 함수·튐 함수)에서 계산한 값이다 — 기대값을 그대로 옮겨 적지 않는다.
  「기본 이름」 행은 이름이 ODAMU 가 아니면 SKIP.
  1. 글자표 호 시작점 어긋남 개수 = 0.
  2. 묶음 폭 U·C / W = 0.840 ± 0.003 (C 가 0.22H 상한에 걸리면 C/H = 0.220 ± 0.001).
  3. 기본 이름: C/H = 0.2021 ± 0.001 · 모퉁이 수(E 제외) = 21 · E 의 s = 6487px ± 1% · RATE = 2113px/초 ± 2%.
  4. 기본 이름: 마크·글자마다 처음·끝 점이 칠해지는 시각이 [장면] 4 의 표와 ± 0.02초. E 도착 = 5.05 ± 0.005초.
  5. 감기: 1.00초에 남은 주인(마크·글자) 수 ≥ 1, 1.20초에 0. 면이 다 빠지는 시각(0.30) < 감기가 마크 오른쪽 기둥 아래(s = 1.2C)에 닿는 시각.
  6. 튐: 배율 − 1 이 τ = 0 에서 0, 최댓값 0.068 ± 0.002 (τ = 0.049 ± 0.003), 0.38초 뒤 |값| < 0.002(τ ≈ 0.311초의 둘째 되튐 0.0049 가 지나간 뒤라 경계에 붙지 않는다 — 그 뒤 최대 0.0013).
  7. 굵기 단조: 아무 점 200개를 골라 t 를 0.005초씩 늘려 가며 굵기를 재면 줄어드는 경우 0번.
  8. 끊김 시각: 연결선 k 가 끊기기 시작하는 시각 표 = 5.15 + (n − k)·0.35/n, 마크 닿음 = 5.66 ± 0.001초.
  9. 이음매: render 의 상태 값(면 수면 높이·슬로건 오프셋·보이는 연결선 수·보이는 획의 s 범위)이 t = 0 과 t = 9 − 1/600 에서 같다.
  10. 머묾: t = 6.50 과 8.99 에서 모든 주인(마크·글자)의 튐 배율이 정확히 1.

[하지 말 것]
- 이름을 fillText·strokeText 나 글꼴 윤곽으로 그리지 않는다 — 글꼴에는 획 순서가 없어서 선이 그 위를 달릴 수 없고, 기기마다 대체 글꼴이 달라 한 줄이 끊긴다. 이름은 글자표의 직선·호로만 그린다.
- 글자표의 각도를 ctx.arc 에 그대로 넣지 않는다 — 표는 y 가 위로 커지는 좌표라서, y 가 아래로 커지는 캔버스에 넣으면 호가 반대쪽으로 돌아 C·S·G·J 가 거울상이 된다. 점을 직접 계산해 y 만 뒤집는다.
- setLineDash·lineDashOffset 으로 그려 나가기를 흉내 내지 않는다 — 대시는 머리의 가늘어짐과 모퉁이 감속을 못 내고, 되짚는 구간에서 대시 길이가 틀어져 이미 그린 획이 지워진다.
- 들어오는 선을 화면 왼쪽에서 수평으로 들이지 않는다 — 묶음이 화면 폭의 0.84 를 차지해 마크 왼쪽에 남는 화면이 0.086W 뿐이라, 달려오는 것이 화면에 남지 않는다. 마크 왼쪽 기둥의 연장선으로 아래에서 솟아오른다.
- 머리 가늘어짐을 「머리에서의 거리」나 지금 머리 속도로 정하지 않는다 — 머리가 모퉁이에서 느려지면 이미 칠한 잉크가 병목처럼 부풀고, 되짚기에서 빨라지면 방금 칠한 끝이 다시 바늘처럼 가늘어진다. 굵기는 그 점이 칠해진 뒤 지난 시간으로만 정한다.
- 되짚기 구간을 건너뛰지(순간이동) 않는다 — 그건 펜을 떼는 것이라 「한 붓」이 거짓이 된다. 빠르게 지나갈 뿐 경로를 그대로 따라간다.
- 그리기 전체를 하나의 이징(easeInOut 등)으로 감싸지 않는다 — 처음과 끝 글자만 느려지고 가운데 글자가 휙 지나가 박자가 무너진다. 박자는 τ 를 일정하게 늘리는 것으로만 낸다.
- 감기(지우기)에 이징을 걸지 않는다 — easeIn 은 이름의 70% 를 마지막 0.2초에 몰아 지워 깨진 글자가 한 프레임씩 번쩍이고, easeInOut 은 1.0초 전에 이름을 다 지워 새 선이 솟기 전 화면이 완전히 빈다. 고른 빠르기여야 글자가 하나씩 사라지며 새 선과 이어진다.
- 모퉁이 감속을 빼거나 감속 창을 0.35C 보다 좁히지 않는다 — 꺾임에서도 속도가 같거나 창이 한 프레임 이동보다 좁으면 기계 플로터처럼 보이고, 손으로 그은 한 붓의 멈칫이 사라진다.
- 연결선을 끝까지 남기지 않는다 — 기준선이 글자 밑에 남으면 F 가 E 로, T 가 I 로, I 가 L 로 읽힌다. 연결선은 「톡」 끊겨 전부 글자 속으로 사라진다.
- 글자를 연결선 없이 하나씩 따로 그리지 않는다 — 그러면 한 붓이 아니고, 끝의 「톡」으로 끊길 것도 없다.
- 튐을 줄이지 않는다(배율 진폭 0.12 미만) — 0.05초 동안의 3% 는 화면에서 7px 이라 폰에서 보이지 않고, 「톡」이 사건이 되지 못한다.
- 면을 투명도로 나타나게 하거나 수면을 물결치게 하지 않는다 — 끊김이 마크에 닿아 면이 차오른다는 인과는 수평 수면이 올라가는 것으로만 읽힌다. 페이드는 장면 전환처럼, 물결은 로딩 아이콘처럼 보인다.
- 선 머리에 펜촉·연필·손 그림이나 빛나는 점을 붙이지 않는다 — 속도는 머리의 가늘어짐이 맡는다. 도구 그림이 붙으면 설명 영상이 되고 브랜드 인트로가 아니게 된다.
- 끊길 때 불꽃·파티클·번쩍임·화면 흔들림을 넣지 않는다 — 「톡」은 연결선이 빨려 들어가는 속도와 글자의 7% 튐이 맡는다. 효과가 끼면 흔한 템플릿 인트로가 된다.
- 선 굵기를 나이 말고 다른 것(무작위 떨림·필압 흉내)으로 바꾸지 않는다 — 직선과 호로 된 기하 로고라 떨림은 손맛이 아니라 결함으로 보인다.
- 그림자·그라디언트·글로우·3D 회전을 쓰지 않는다 — 평평한 세 색이어야 선과 면이 한 장의 마크로 읽힌다.
- 잔상·모션 블러를 넣지 않는다 — 되짚는 구간에서 선이 두 겹으로 번져 보이고, 속도감은 이미 머리의 가늘어짐이 낸다.
- 마크를 다른 모양으로 바꾸거나 장식(별·잎·리본·테두리 상자)을 더하지 않는다 — 마크는 MARK 줄의 아치 하나이고, 그 닫힌 모양이 있어야 면이 「차오를」 그릇이 된다.
- 슬로건을 선으로 쓰거나 슬로건에 강조색을 쓰지 않는다 — 한글은 글자표가 없고, 강조색은 차오르는 면 하나에만 써야 끝의 차오름이 눈에 들어온다.
- 슬로건을 잘림 띠(슬로건 상자)의 높이보다 짧게 움직이지 않는다 — 잘림 띠보다 짧게 움직이면 글자 일부가 상자 안에 남았다가, 움직임이 끝나는 프레임에 한 번에 사라지거나(나갈 때) 조각으로 갑자기 나타난다(들어올 때). 이동 거리는 h_s 전부다.
- 머묾 동안 숨쉬기·반짝임 같은 움직임을 넣지 않는다 — 브랜드 인트로의 쓸모는 이름이 읽히는 정지다. 작은 움직임은 사건이 되지 못한 채 산만함만 더한다.
- 이름과 마크를 화면 가운데에 작게 두지 않는다 — 묶음 폭 0.84W(짧은 이름은 대문자 높이 0.22H)를 지켜야 한 줄이 화면을 가로지르는 것으로 보인다.
- 자체 대조표의 「실제」 칸을 기대값으로 채우지 않는다 — 그러면 표가 늘 PASS 라 숫자가 틀려도 아무도 모른다. 코드가 쓰는 바로 그 자료에서 다시 계산한다.