덩어리 로고 스팅

프롬프트 설정

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

16:9, 7초짜리 로고 스팅(영상 맨 앞·맨 끝에 붙이는 짧은 로고 등장)을 HTML 파일 하나로 만들어 줘. 위에서 묵직한 꿀 덩이 다섯 개가 떨어져 한 덩어리로 합쳐지고, 무게 있게 출렁이다 말랑한 덩어리 캐릭터 마크의 모양을 찾아가고, 표면을 한 바퀴 도는 물결이 지나간 자리에서 먹 테두리가 굳고, 눈이 뜨이고 한 번 깜빡인 뒤, 옆으로 비켜서며 이름이 나온다.

핵심 아이디어: 액체가 「모양을 찾아가는」 2초가 이 스팅의 볼거리다. 방울은 서로 닿으면 끈적하게 다리를 놓으며 합쳐지고(구슬이 겹치는 게 아니다), 방울의 넓이를 다 더하면 마지막 덩어리의 넓이가 된다 — 부푸는 풍선이 아니라 모인 액체다. 테두리는 따로 그려지는 선이 아니라, 표면을 도는 물결이 지나가며 굳힌 결과다.

쓰임: 유튜브·쇼츠·발표 영상의 앞뒤 로고. 소리는 따로 입힌다 — 소리 날 자리를 목록(CUES)으로 내놓는다.

[바꿀 곳]
- BRAND = "내 브랜드" · SUB = "데이터로 읽는 일상의 원리"
- BODY = #EFB63F(덩어리 색) · INK #141413(테두리·눈·글) · BG #F6F1E7(바탕) · GLOW_A #E9A23B(바탕의 은은한 앰버)
- EYES = "open"(눈 모양: "open" 동그란 눈 / "smile" 웃는 눈 ∧)
- 덩어리 모양 계수(아래 마크 모양 절)

[크기] 기준 화면 1920×1080, 30fps, DURATION = 7.0초(프레임 0~209).
- 바탕: BG 를 깔고, 그 위에 은은한 원 둘 — GLOW_A 반지름 900 중심 (430, 240) 최대 불투명도 0.10 · INK 반지름 760 중심 (1400, 800) 최대 불투명도 0.045. 둘 다 같은 색의 불투명도만 가운데 최댓값 → 반지름 끝 0 으로 줄어드는 방사형(다른 색끼리 섞는 그라디언트가 아니다). 움직이지 않는다.

마크 모양 — 크기 R = 220px(마크 가운데에서 테두리 바깥 가장자리까지 평균 거리), 화면 좌표(y 아래쪽)로:
- 윤곽 = 각도 θ(0~2π, 수학 좌표의 반시계 각) 에서 반지름 r(θ) = R·(1 + 0.053·cos(2θ − 0.912) + 0.024·cos(3θ + 1.389) + 0.031·cos(4θ + 1.835) + 0.013·cos(5θ + 0.321)). 점 = (cx + r·cosθ, cy − r·sinθ). 240점을 이은 닫힌 매끈한 경로(점 사이는 Catmull-Rom 을 베지어로 바꿔 곡선으로).
- 테두리: INK 띠 — 바깥 경계 = 윤곽 r(θ), 안쪽 경계 = r(θ) − 12px. 두 경로를 한 path 에 넣고 fill-rule evenodd 로 채운다(stroke 로 그리면 두께 절반이 윤곽 밖으로 나가 마크가 커진다).
- 눈(마크 가운데 기준, R 단위): 왼눈 (−0.516, +0.153) · 오른눈 (+0.530, −0.190) — 오른눈이 조금 위에 있다(마크가 살짝 고개를 기울인 모습이고, 이 기울기가 마크의 표정이다. 맞추지 않는다). 눈 = 반지름 0.135·R 의 INK 원. "smile" 이면 원 대신 같은 자리에 폭 0.24·R 높이 0.12·R 의 ∧ 선(두께 0.045·R, 끝 둥글게) — ∧ 선은 화면 기준 수평으로 그린다.
- 입: (+0.15, +0.27) 에 가로 반지름 0.065·R · 세로 0.095·R 의 타원 테두리(INK 두께 7px, 안은 BODY), 타원을 시계 방향 30° 돌린다.

[장면] (시각은 초, 모두 CONFIG.T 에)
- 0.00~0.15 바탕만(프레임 0 = 프레임 209 와 같은 화면).
- 꿀 덩이 다섯(지름 · 출발 x · 닿는 시각): 260 · 960 · 0.55 / 180 · 830 · 0.70 / 220 · 1100 · 0.82 / 136 · 900 · 0.95 / 160 · 1030 · 1.05. 넓이를 다 더하면 반지름 R 원의 넓이와 같다(√(260²+180²+220²+136²+160²)/2 ≈ 219.4). 화면 위 밖(중심 y −200)에서 떨어져 닿는 시각에 덩어리 가장자리에 닿는다(가운데 (960, 520) 쪽으로). 떨어지는 길 y = −200 + (닿는 y + 200)·s², s = (t − 출발)/(닿는 시각 − 출발), 떨어지는 시간 0.45초. 떨어지는 동안 세로 1.10배로 늘어나고, 닿는 순간 0.10초 동안 가로 1.12·세로 0.88 로 눌렸다 돌아온다. 닿을 때마다 pop.
- 합쳐짐(끈적한 액체): 덩이와 덩어리를 SVG 그룹 하나에 그리고 「끈적임 필터」를 건다 — feGaussianBlur stdDeviation 18 → feColorMatrix 로 알파만 «0 0 0 0 0 / 0 0 0 0 0 / 0 0 0 0 0 / 0 0 0 26 −11» 처럼 문턱을 세워 가장자리를 다시 날카롭게 → 원래 색을 그 모양 안에 채움(feComposite in). 가까운 원끼리 다리를 놓으며 이어진다. 색은 BODY 하나.
- 첫 덩이는 닿는 자리 (960, 520) 에 그대로 덩어리가 된다. 다음 덩이들은 닿은 뒤 0.18초에 걸쳐 중심으로 끌려 들어가며 그 원의 넓이가 줄고, 줄어든 넓이만큼 덩어리 넓이가 는다(넓이 합 오차 1% 이하 — 덩어리 반지름 = √(지금까지 들어온 넓이/π)). 1.23 에 덩어리 반지름 = R.
- 첫 덩이가 닿는 순간 작은 튐 방울 3개(지름 34·40·48, 시드 고정 각도 위쪽 반원 안)가 튀어 올라 포물선으로 떨어져 1.70 까지 덩어리 가장자리로 돌아와 합쳐진다.
- 출렁임 1.05~2.55: 덩어리는 원이 아니라 윤곽 경로로 그리되 r(θ) = R·(1 + w(t)·(0.6·cos(2θ) + 0.4·cos(3θ + 1.0))), w(t) = 0.14·e^(−(t − 1.05)/0.80)·cos(2π·1.7·(t − 1.05)). 이 경로도 끈적임 필터 안에 그린다.
- 마크가 됨 1.65~2.55: r(θ) = R·(1 + (1 − m)·(출렁임 항) + m·(마크 계수 항)), m = cubic-bezier(0.65, 0, 0.35, 1)(0 → 1). 2.55 에 정확히 마크 모양 절. thud 2.55.
- 2.55 에 끈적임 필터를 끈다 — 이때 남은 방울이 없다. 필터를 끄는 프레임에 가장자리가 튀지 않게 같은 경로를 필터 없이 그린다.
- 물결이 굳히는 테두리 2.55~3.10: 진행률 u = (t − 2.55)/0.55 (0 → 1). 표면에 볼록함 하나가 각도 120° 에서 시계 방향으로 한 바퀴 돈다 — 볼록함 중심 각도 φ = 120° − 360°·u, 윤곽 반지름에 22·sin²(π·u)·exp(−((θ − φ)/0.20)²) px 를 더한다(각도 차는 −π~π 로 감아서). 테두리 띠는 물결이 이미 지나간 각도(120° 에서 φ 까지 시계 방향)에서만 보인다 — 띠를 부채꼴 mask(중심 = 마크 가운데, 120° 에서 φ 까지, 끝을 8px 더 겹쳐)로 드러낸다. 3.10 에 볼록함 0, 테두리 100%, mask 를 걷어 완성 띠를 직접 그린다. whoosh(작게) 2.55.
- 눈 3.12·3.20(왼·오른): 크기 0.6 → 1 · 불투명도 0 → 1, 0.22초 ENTER(넘침 없음). pop 3.12. 입 3.38 에 같은 방식.
- 깜빡임 3.90~4.05: 두 눈이 세로로 1 → 0.1 → 1(가운데 기준). tick 3.95.
- 비켜서기 4.20~4.85: 마크 전체(덩어리·테두리·얼굴)가 cubic-bezier(0.76, 0, 0.24, 1) 로 크기 1 → 0.72, 왼쪽으로 옮겨 간다. BRAND 184px 굵기 700 자간 −0.035em INK · SUB 48px 굵기 500 INK 불투명도 0.72. 마크와 글 사이 64px, BRAND 글자 아래 경계와 SUB 글자 위 경계 사이 32px(보이는 글자 경계로 잰다). 마크·BRAND·SUB 를 합친 묶음의 실제 경계 상자 가운데가 (960, 520) 에 오도록 비켜설 자리를 계산한다(글 폭을 재서). BRAND 4.55 · SUB 4.75 에 마스크 리빌(0.32초, 이징 (0.22, 1, 0.36, 1)). thud 4.55.
- 5.10~6.40 완전 정지(숨쉬기·떠다님 없음).
- 닫힘 6.40~6.80: 묶음 전체(마크·BRAND·SUB)를 하나의 클립 마스크로 아래에서 위로 닫는다 — 클립 사각형의 아래 끝이 묶음 아래에서 위로 올라가며, 동시에 묶음이 y 0 → −18px(크기·불투명도는 그대로 1). 이징 EXIT. swish 6.40. 6.85~7.00 바탕만.

[구현]
- 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)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.

이 작품만의 구현:
- 모든 움직임은 시간 t(초)만으로 계산하는 함수 render(t) 가 정한다: 요소마다 transform·opacity·filter·textContent·속성을 t 로 계산해 직접 넣는다. CSS transition·animation·setTimeout·setInterval 로 움직이지 않는다(프레임마다 속도가 달라지고, 다시 재생할 때 어긋난다). 같은 t 는 언제나 같은 화면이다 — 프레임 사이에 쌓이는 상태를 두지 않는다(치고 있는 글자·물리·깜빡임 위상도 t 에서 바로 계산한다).
- 장면 밖의 층은 display:none 으로 뺀다. visibility:hidden 으로만 감추면 그 안 자식에 visibility:visible 을 넣는 순간 부모를 뚫고 보여, 다른 장면의 글이 엉뚱한 장면 위에 떠 있게 된다. render(t) 는 매번 모든 층의 보임 여부를 t 로 다시 정한다.
- 재생: requestAnimationFrame 의 타임스탬프로 t = (경과 초) mod DURATION. window.renderAt = t => render(t) 와 window.DURATION 을 열어 둔다(정지 화면·영상 굽기에 쓴다 — renderAt 이 한 번이라도 불리면 재생 루프를 멈춰 화면을 덮어쓰지 않는다).
- window.CUES = 소리 자리 목록 [{t: 초(소수 셋째 자리), kind: "key"|"click"|"whoosh"|"swish"|"pop"|"tick"|"paste"|"thud"}] 를 시각 순으로. 장면 절이 말한 자리 전부이고, 타자·숫자 세기처럼 반복되는 것은 실제로 글자가 바뀌는 시각마다 하나씩. 소리는 이 파일에서 내지 않는다.
- 화면 맞추기: 1920×1080 무대 div 를 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게 축소·확대한다(남는 곳은 그 시각의 바탕색). 스크롤이 생기지 않게. 창 크기를 읽었는데 0 이면 다음 프레임에 다시 맞춘다(미리보기 칸이 처음 한순간 0 을 줄 수 있다). 캔버스를 쓰면 내부 해상도는 1920×1080 고정, devicePixelRatio 는 선명도에만.
- 마스크 리빌 = 글 줄을 overflow:hidden 상자에 넣고 안의 글을 아래 1.1em 에서 0 으로 올린다(ENTER). 불투명도는 움직임 길이의 55% 안에 0 → 1. 닫을 때는 반대로 위로 −1.1em(EXIT). 페이드만으로 나타나는 글은 없다.
- 이징: CONFIG.EASE 에 ENTER = cubic-bezier(0.16, 1, 0.3, 1) · EXIT = (0.7, 0, 0.84, 0) · MOVE = (0.65, 0, 0.35, 1). 베지어는 x(s) = 입력을 뉴턴법 6회 + 실패 시 이분법 20회로 풀어 y 를 돌려준다. 입력 0·1 에서 정확히 0·1.
- 카메라(무대 전체 배율)는 1.00 으로 고정한다 — 움직이는 것은 물체다. 화면 전체가 천천히 다가오는 줌은 무게를 없애고, 장면이 바뀔 때 배율이 되돌아가며 정렬이 흔들린다. 장면 절이 「정지」라고 한 구간은 완전히 멈춘다(정확한 멈춤이 리듬을 만든다).
- 화면에서 읽혀야 하는 글은 어느 시각이든 화면 위 실제 크기가 28px 이상, 장면의 주 문장은 44px 이상. 선·테두리 2px 이상, 강조선 3px 이상.
- 세이프 영역: 글은 x 96~1824, y 54~1026 안.
- 한 자리에 두 장면의 글이 동시에 있지 않는다. 다음 장면의 글이 들어오기 0.1초 전에 앞 장면의 글은 다 닫혀 있다. 반투명으로 겹쳐 보이는 순간을 만들지 않는다.
- 브라우저 저장소(localStorage·sessionStorage·IndexedDB·쿠키)를 쓰지 않는다 — 미리보기 칸에서 막혀 오류가 난다.
- 화면 = 맨 아래 층 캔버스 하나(1920×1080, 바탕과 은은한 원 둘을 Canvas 2D 로 그린다) + 그 위 SVG 하나(1920×1080 viewBox — 덩어리·덩이·마크·얼굴) + 글은 DOM. 세 층을 같은 무대 div 에 겹쳐 함께 화면에 맞춘다. 덩어리·덩이·마크 경로는 render(t) 가 매 프레임 path 의 d · circle 의 cx·cy·r 을 t 로 계산해 넣는다. 덩이가 끌려 들어가는 동안의 반지름도 넓이 식으로 t 에서 바로 계산한다.
- 경로를 그리는 함수 하나 shapePath(cx, cy, R, rFn) 를 출렁임·마크·물결 단계가 같이 쓴다.
- 비켜선 뒤의 글자 크기 검사는 최종 배율을 반영해서 한다.
- 자기 대조(시작할 때 한 번, console.table · 어긋나면 console.warn, try/catch): renderAt(0) 과 renderAt(6.99) 가 같은 화면(바탕만) · renderAt(1.30) 의 덩어리 넓이 + 남은 덩이 넓이 = 다섯 덩이 넓이 합(오차 1% 이하) · renderAt(3.10) 의 경로 = 마크 모양 절 의 경로(점 240개 최대 차 < 0.5px) · 마크 오른눈이 왼눈보다 위 · renderAt(5.5) 에서 묶음 가운데 (960, 520) ±4px · CUES 개수와 첫·끝 시각 · BRAND·SUB 화면 크기 ≥ 28px.

[하지 말 것] — 이유와 함께
- 보라→파랑·청록 그라디언트, 남색 바탕, 네온 발광, 렌즈 플레어, 빛 번짐 — 가장 흔한 AI 영상의 기본값이다. 깊이는 원근·크기·초점으로만 낸다.
- 화면 가득 떠다니는 입자, 반짝이, 글리치·RGB 분리 — 채우기용 장식이고 글을 죽인다(장면이 정한 입자만 쓴다).
- 모든 요소가 같은 이징·같은 길이로 동시에 움직이기, 모든 등장이 페이드+20px 위로 — 생성물의 표지다. 위 시각표의 엇갈림·마스크 리빌을 지킨다.
- 튕기는 스프링을 여기저기 쓰기 · scale(0) 에서 시작 — 장난감처럼 보인다. 넘침은 장면 절이 허락한 한 곳뿐.
- 유리 효과(backdrop-filter)·큰 그림자·발광 테두리 — 값싼 장식이다. 그림자는 쓰지 않는다.
- 코너 브래킷·타임코드·「01/06」 번호·모노 라벨 HUD — 요즘 소개 영상의 상투다.
- 바꿀 곳과 장면 절에 없는 문구·숫자·브랜드 이름을 지어내지 않는다. 실제 회사·서비스의 이름이나 로고를 넣지 않는다.
- 장면 절이 정하지 않은 곳에서 1.5초 넘게 아무것도 안 움직이는 구간.