«MAY I?»가 MAYAi로 바뀌는 20초 파티클 영상, 요청 한 번으로 만들기

이 글을 세 줄로

• «MAY I?» 뒤의 낱말이 우리 서비스 6개를 차례로 소개하다가, 마지막에 MAY I가 MAYAi로 바뀌는 20초 영상을 요청 한 번으로 만들었습니다.
• 화면과 소리가 박 시각표 하나를 같이 보도록 짰기 때문에, 심장 박동 소리와 알갱이 움직임이 따로 놀지 않습니다.
• 요청부터 첫 미리보기까지 17분이 걸렸고, 고칠 점 두 가지를 반영한 완성본(2560×1440, 60프레임)까지는 1시간이 채 걸리지 않았습니다.

이 글에 나오는 말

• 파티클(알갱이): 작은 점 수천 개를 모아 글자나 모양을 만드는 연출입니다. 점마다 따로 움직이기 때문에 흩어졌다 모이는 장면을 만들 수 있습니다.
• 미리보기 / 완성본: 미리보기는 작은 화면(960×540)으로 빨리 뽑아 보는 판이고, 완성본은 유튜브에 올릴 큰 화면(2560×1440)입니다. 미리보기를 보고 통과하면 완성본을 만듭니다.
• 박 시각표(beats.json): «몇 초에 심장이 뛰는지, 몇 초에 낱말이 바뀌는지»를 적어 둔 표입니다. 화면을 그리는 코드와 소리를 만드는 코드가 이 표 하나를 같이 읽습니다.
• 헤드리스 크롬: 창을 띄우지 않고 돌아가는 크롬 브라우저입니다. 웹 페이지로 그린 장면을 한 장씩 찍어 영상으로 묶을 때 씁니다.

처음 요청

이번 실험은 아래 요청 하나로 시작했습니다.

MAY I가 MAYAi로 바뀌는 파티클 영상을 만들고 싶어. 다만 단순하게 그냥 글자가 바뀌는 것이 아니라.. MAY I? 라고 하고 뒤 글자는 우리 서비스를 대표하는 것들을 소개차원에서 글씨를 만들어주고.. 마지막에 MAY I가 MAYAi로 바뀌게 해줘. MAYAi 에서 MAY와 Ai의 색깔은 다르게 해서 구분이 되게 해 줘. 음악은 박진감 넘치게 비트음으로 해줘. 심장이 뛰는 듯한 박진감으로. 파티클의 무빙은 인공지능을 형상화하도록 해줘. mayai.kr 홈페이지의 header에 있는 것처럼.. 뭔가 신호가 전달되는 느낌을 줘. 시간은 20초정도로 해줘.

Claude Code는 바로 만들기 전에 두 가지를 되물었습니다. 하나는 뒤 낱말을 서비스 이름(MAY I Talpix?)으로 할지 동사(MAY I talk?)로 할지였고, 다른 하나는 화면 방향이었습니다. 동사 문장과 가로 16:9를 골랐고, 리뉴얼을 앞둔 SWAVIVA는 빼고 서비스 6개만 넣기로 했습니다.

완성된 영상

어떻게 만들었나

1. 홈페이지 머리 화면의 효과를 그대로 본떴습니다

mayai.kr 첫 화면에는 글자 알갱이를 가까운 것끼리 선으로 잇고, 그 위로 빛나는 신호가 점에서 점으로 몇 칸씩 건너뛰는 효과가 이미 있습니다. 요청에 «header에 있는 것처럼»이라는 말이 있었기 때문에 Claude Code는 먼저 그 코드(hero-fx.js)를 읽고 바탕색 · 선 색 · 신호 머리 모양(후광 + 흰 심지)을 그대로 가져왔습니다. 로고의 Ai 그러데이션(보라 → 분홍 → 주황)도 홈페이지 머리말에서 색 값을 읽어 왔고, 서비스 한 줄 소개도 홈페이지 문구를 그대로 썼습니다. 즉, 영상 안의 색과 글은 모두 이미 공개된 홈페이지와 같습니다.

다만 홈페이지 효과는 마우스와 시간에 따라 매번 다르게 움직이는데, 영상은 몇 번을 다시 찍어도 같은 화면이 나와야 합니다. 그래서 «t초의 화면»을 시간 t만으로 계산하도록 바꿨습니다. 예를 들어 신호가 지나갈 길은 정해진 씨앗 값으로 미리 뽑아 두고, 각 알갱이는 «출발 자리 → 도착 자리»를 알갱이마다 조금씩 다른 지연을 두고 움직이게 했습니다.

2. 화면과 소리가 같은 박 시각표를 봅니다

이 영상의 중심은 «심장이 뛰는 듯한 박진감»이었습니다. 처음 4초는 느린 심장(80BPM)으로 시작하고, 서비스 소개가 시작되는 4.3초부터는 128BPM으로 빨라지며, 낱말은 4박마다 바뀝니다. 이 시각들을 beats.py가 계산해 beats.json에 적어 두면 화면(index.html)과 소리(sound.py)가 같은 표를 읽습니다.

lub = [round(.4 + i * .75, 4) for i in range(6)]            # 처음 느린 심장 «쿵»
B = 60 / 128                                                 # 빨라진 뒤 한 박 길이
lub += [round(4.3 + i * B, 4) for i in range(24)]            # 4.3초부터 128BPM
changes = [round(4.3 + k * 4 * B, 4) for k in range(7)]      # 4박마다 낱말 바뀜

그래서 소리에서 «쿵» 하는 순간에 화면의 알갱이도 같이 부풀고, 낱말이 바뀌는 순간에 신호음과 알갱이 흩어짐이 같이 일어납니다.

3. 장면 순서

4. 소리는 모두 코드로 합성했습니다

심장 «쿵-쿵»은 아래로 꺼지는 낮은 소리 두 번(크게 한 번, 작게 한 번)으로 만들었고, 빨라지는 구간에는 하이햇과 베이스를 얹었습니다. 베이스 음은 낱말이 바뀔 때마다 한 칸씩 올라가서 긴장이 쌓이게 했고, MAYAi가 터지는 16.3초에는 저음 «쾅»과 밝은 화음을 넣었습니다. 효과음은 상업 이용이 허락된 무료 효과음 모음(Sonniss GDC 2026)에서 골랐습니다.

고쳐 간 과정

만들면서 스스로 고친 것

첫 미리보기를 보내기 전에 Claude Code가 화면을 낱장으로 찍어 보면서 세 군데를 고쳤습니다.

미리보기를 보고 받은 지적 두 가지

첫 미리보기를 본 뒤 받은 말은 이것이었습니다.

서비스가 변할 때 채찍 소리를 다른 효과음으로 바꿔줘. 심장박동 음이 날 때 파티클 변동이 더 컸으면 좋겠어. 그렇게 해서 완성본으로 바꿔보자

바뀐 신호음은 이렇게 만들었습니다. 0.26초 동안 주파수를 700Hz에서 약 2,240Hz까지 올리면서 소리를 잘게 끊어, 데이터가 전송되는 느낌을 냈습니다.

n = int(.26 * SR); u = np.linspace(0, 1, n); f = 700 * 3.2 ** u          # 위로 오르는 음
chirp = tone(f, n) * (.6 + .4 * np.sign(np.sin(2 * np.pi * 38 * u * .26)))  # 잘게 끊기
put(lp(chirp, 5000) * np.minimum(1, u * 8) * (1 - u) ** .5 * .09, c - .26)  # 도착 0.26초 전부터
put(sfx('pop/interface_pop_high_short.wav', -13), c)                       # 도착 «톡»

이 두 가지를 고친 뒤에는 미리보기를 다시 거치지 않고 바로 완성본을 만들었습니다(요청에 «완성본으로 바꿔보자»가 있었기 때문입니다).

숫자로 자세히 보기

따라 해 보기

Claude Code에게 아래처럼 요청하면 비슷한 영상을 만들 수 있습니다. «참고할 화면»에 자기 홈페이지나 좋아하는 효과가 있는 페이지 주소를 넣으면 색과 움직임을 거기에 맞춥니다.

«MAY I?» 로 시작해서 뒤 낱말이 [서비스 소개 낱말 목록]으로 4박마다 바뀌고,
마지막에 [로고 글자]로 바뀌는 20초 파티클 영상을 만들어 줘.
- 알갱이는 [참고할 화면]처럼 점끼리 선으로 잇고, 신호가 점에서 점으로 건너가게
- 음악은 심장이 뛰는 듯한 비트(처음 느리게 → 빨라짐 → 멈춤 → 터짐)
- 화면과 소리가 같은 박 시각표를 쓰게 하고, 작은 미리보기를 먼저 보여 줘

미리보기를 받으면 «무엇이 마음에 안 드는지»를 소리와 움직임으로 나눠서 말하는 것이 좋습니다. 이번에도 «채찍 소리»와 «박동 때 움직임» 두 가지만 짚었더니 한 번에 완성본까지 갈 수 있었습니다.