클로드버전 · Claude Code에서 시작해요

조명 두 색, 가운데 금속 물체, 마지막 영어 한 줄만 정하면 준비 끝! 아래 프롬프트의 대괄호를 채워 Claude Code에 보내고, 미리보기를 확인한 뒤 MP4로 받아요.

새까만 웅덩이에서 기름처럼 번들거리는 액체가 한순간 일어나 뾰족한 가시 왕관이 돼요. 가시 옆면마다 전기 파랑과 마젠타 조명이 칼날처럼 비치고, 박자가 떨어질 때마다 가시의 물결이 동심원으로 퍼져 나가요. 위에서 검은 강철 구가 내려오면 액체가 기둥처럼 솟아 구를 타고 올라가 온몸에 가시를 세우고, 꼭대기에서 꼬인 나선 탑을 쌓아 올려요. 마지막엔 모두 녹아내려 다시 거울 같은 웅덩이가 되고, ‘INVISIBLE FIELD’ 한 줄이 떠올라요. 9:16 세로 18.4초짜리 자성 유체(페로플루이드) 작품형 영상이에요.

이 글에서 새로 알게 되는 것: 자석 위 페로플루이드가 왜 육각형으로 줄 선 가시를 만드는지, 그리고 그 가시밭을 ‘격자 반복’과 ‘높이 함수’ 두 가지로 코드에 옮기는 방법.

가게 이름이나 광고 문구는 없어요. 실제 액체를 촬영하지 않았고, 액체·강철 구·조명 반사·심도를 모두 코드로 계산해 그렸어요.

어디에 틀면 좋을까

  • 음악 공연·디제이 무대의 세로 화면: 가시가 박자마다 솟고 퍼지는 장면이 많아 비트가 강한 음악과 잘 붙어요. 검정 바탕이라 어두운 무대에서 화면 테두리가 튀지 않아요.
  • 오디오·전자기기 매장의 세로 디스플레이 루프: ‘보이지 않는 힘’이라는 주제가 스피커·자석·전자 제품과 자연스럽게 이어져요. 제품명을 얹기보다 분위기 클립으로 쓰는 쪽을 권해요.
  • 전시·행사 대기 화면: 마지막 한 줄을 전시명으로 바꾸면 오프닝 타이틀이 돼요.
  • 모션 포트폴리오·릴스 감상 클립: 레이마칭(광선을 조금씩 전진시키며 표면을 찾는 그리기 방식), 반사, 피사계 심도를 한 편에 보여 줄 수 있어요.

바꿔서 내 것으로 만들 부분

  1. 조명 두 색: 지금은 왼쪽 전기 파랑, 오른쪽 마젠타예요. 주황+청록이면 영화 포스터 같은 대비가, 흰색 하나만 쓰면 제품 사진 같은 차분함이 나와요. 액체는 검정 그대로 두는 게 핵심이에요. 액체 색을 바꾸면 페로플루이드다움이 사라져요.
  2. 가시 크기와 간격: 간격을 좁히면 고운 벨벳 같은 표면, 넓히면 굵은 성게 같은 표면이 돼요.
  3. 가운데 물체: 강철 구 대신 원뿔이나 계단 모양 금속을 넣을 수도 있어요. 자성 유체는 자석에 붙은 쇠붙이의 모서리와 끝을 따라 몰려드니, 뾰족한 물체일수록 가시가 그 끝에 모여 더 극적으로 서요.
  4. 박자: 94BPM이라 한 마디가 약 2.55초예요. 더 빠른 곡에 맞추려면 장면 전환을 ‘마디’ 단위로 다시 맞춰 달라고 하세요.
  5. 끝 글귀: INVISIBLE FIELD 자리에 영어 대문자 15자 안팎을 넣으면 지금 폭에 맞아요.

가시밭을 그리는 법: 육각 격자 + 높이 함수

실제 현상부터 볼게요. 자성 유체는 아주 작은 자성 입자가 섞인 액체라, 아래에서 자기장이 세지면 표면이 자기장 방향으로 끌려 올라가요. 그런데 표면장력과 무게는 표면을 평평하게 되돌리려 하죠. 두 힘이 겨루다 일정 세기를 넘으면 표면이 한꺼번에 뾰족뾰족 일어서는데, 이걸 ‘로젠츠바이크 불안정성’이라고 불러요. 이때 가시들은 대개 서로 같은 거리만큼 떨어져 육각형 벌집 모양으로 자리를 잡아요. 그래서 이 영상도 가시를 무작위로 뿌리지 않고 벌집 격자 위에 세웠어요.

코드에서는 이렇게 나눴어요.

  • 격자 반복: 바닥을 0.14 간격의 육각 격자로 나누고, 화면의 한 점이 어느 칸에 속하는지 계산해 ‘그 칸의 가시 하나’만 그려요. 가시를 수천 개 따로 그리는 대신 한 개를 칸마다 되풀이하는 셈이라 가벼워요.
  • 가시 모양: 밑동 반지름 0.07에서 시작해 높이 y에서의 반지름을 0.07 × (1 − y/높이)^1.45로 줄였어요. 지수가 1보다 크면 옆면이 안쪽으로 오목해져서, 밑은 퍼지고 끝은 바늘처럼 날카로운 진짜 자성 유체 가시 모양이 돼요.
  • 높이 함수: 칸마다 가시 높이를 ‘자기장 세기’를 흉내 낸 함수로 정해요. 첫 장면의 왕관은 가운데에서 0.27, 바깥으로 갈수록 종 모양으로 낮아지는 값이에요. 2.55초부터는 한 박(0.638초)마다 고리 하나를 바깥으로 보내요. 고리의 반지름은 출발 뒤 지난 시간 dt에 대해 0.12 + 0.95 × dt, 폭은 0.11, 높이는 0.2에서 시작해 e^(−1.1 × dt)로 줄어들어요. 그래서 박자마다 가시의 물결이 퍼지며 사그라들어요. 5.1초부터는 여기에 세 갈래 나선 무늬를 더해 회전하는 팔을 만들었어요.
  • 밑동의 둥근 이음: 가시와 웅덩이를 그냥 합치면 꽂아 놓은 못처럼 보여요. 두 모양이 만나는 곳을 0.03만큼 부드럽게 녹여 붙이는 ‘부드러운 최솟값(smooth min)’을 써서, 액체가 가시 밑으로 살짝 끌려 올라간 듯한 곡면을 만들었어요. 기둥과 웅덩이는 0.14로 더 넓게 녹여 붙여 목이 잘록한 액체 다리처럼 보이게 했고요.

바꿔 볼 때 팁: 간격(0.14)과 밑동 반지름(0.07)의 비율을 그대로 둔 채 둘 다 줄이면 같은 모양의 가시가 더 촘촘해져요. 반지름만 키우면 가시끼리 밑동이 겹쳐 덩어리진 느낌이 나요. 오목함 지수를 1.0으로 낮추면 평범한 원뿔, 2.0으로 올리면 더 가늘고 위협적인 바늘이 돼요. 물결을 박자마다 대신 반 박마다 보내면 훨씬 빽빽하고 급한 리듬이 나와요.

시안에서 실제로 고친 것

MP4로 뽑기 전에 몇 초 간격으로 정지 화면을 찍어 훑어보는 점검을 일곱 차례 돌렸어요. 그 과정에서 바로잡은 큰 문제 세 가지예요.

1. 너무 어둡고, 가시가 솔잎 숲처럼 보였어요. 첫 시안은 화면 대부분이 검정에 가까웠고, 높고 가는 가시가 빽빽해서 액체보다는 침엽수 숲 같았어요. 조명 띠의 밝기를 두 배 넘게 올리고 아래쪽으로 넓혀 평평한 웅덩이도 색을 비추게 했고, 노출을 1.05에서 1.4로 올렸어요. 그래도 첫 렌더본의 평균 밝기가 13~29/255 정도로 휴대폰 화면에선 어두워서, 최종본은 1.85까지 올렸어요. 가시는 밑동을 0.062에서 0.07로 키우고 오목함을 1.7에서 1.45로, 가운데 높이를 0.34에서 0.27로 낮춰 액체다운 비율로 바꿨어요.

수정 전에는 화면이 거의 검고 가늘고 높은 가시가 솔잎처럼 빽빽하며, 수정 후에는 밑동이 넓은 가시에 파랑·마젠타 반사가 또렷하고 웅덩이에도 빛이 비치는 0.4초 장면 비교

2. 강철 구가 유리 공처럼 보였어요. 내려오는 구가 회색으로 뿌옇게 비치고 가장자리가 밝게 빛나서, 금속이 아니라 투명한 유리구슬이나 비눗방울처럼 읽혔어요. 같은 날 다른 편이 유리를 다루기도 해서 꼭 피해야 했죠. 원인은 두 가지였어요. 구 전체에 0.03의 회색 바탕광을 깔아 둔 탓에 속이 비치는 껍질처럼 보였고, 가장자리 반사(프레넬)가 너무 셌어요. 바탕광을 없애고, 반사율을 0.58에서 0.2인 검은 연마 강철로 낮추고, 가장자리 반사는 4분의 1로 줄이며 테두리를 어둡게 눌렀어요. 이제 검은 거울 공에 파랑·마젠타 조명이 비친 모습이 돼요.

수정 전에는 구가 회색으로 뿌옇게 비치는 유리구슬처럼 보이고, 수정 후에는 검은 강철 구에 파랑·마젠타 띠 조명만 선명하게 비치는 9.3초 장면 비교

3. 구의 가시 사이에 각진 금이 보였어요. 구 표면의 가시는 위도 줄마다 칸을 나눠 세웠는데, 처음엔 이웃 칸을 한쪽 방향으로만 살펴서 칸 경계마다 각진 금이 또렷했어요. 이웃을 위아래 2줄 × 좌우 2칸까지 살피고, 가시를 피막에 녹여 붙이는 정도를 0.02에서 0.032로 키워 금을 많이 누그러뜨렸어요. 다만 가까이 보면 육각형 결이 아직 남아 있는데, 액체가 조각처럼 각져 보이는 맛도 있어 이 정도에서 멈췄어요.

일곱 마디, 일곱 장면

음악은 94BPM B♭ 프리지안의 다크 일렉트로 글리치 곡이에요. 한 마디(2.55초)마다 장면이 하나씩 바뀌어요. 0초 왕관 솟음(첫 프레임에 큰 킥과 위로 끌려 오르는 ‘지잉’ 소리) → 2.55초 박마다 퍼지는 고리(금속성 핑) → 5.1초 나선 팔과 위에서 내려다보는 카메라 → 7.66초 강철 구 하강, 9.57초 액체가 뛰어오름(묵직한 킥) → 10.2초 구의 가시와 나선 탑(가장 꽉 찬 비트) → 12.77초 녹아내림(아래로 떨어지는 물방울 소리) → 15.3초 다시 잔잔한 웅덩이와 한 줄. 프리지안 음계의 반음 위 음(C♭)으로 미끄러지는 베이스가 조금 불길한 끌림을 줘요.

만들고 다듬기

아래 복사용 프롬프트에서 조명 두 색, 가운데 물체, 마지막 한 줄 칸을 채워 Claude Code에 건네면 시작돼요. 레이마칭은 컴퓨터에 따라 미리보기가 느릴 수 있으니, 몇 장면만 스냅샷으로 먼저 받아 밝기와 구의 질감을 확인한 뒤 전체 MP4를 만들면 시간이 덜 들어요. 도구 준비가 아직이라면 Claude Code 준비 안내를, 색과 글귀를 내 것으로 고치는 요령은 내 버전으로 바꾸기를 먼저 읽어 두세요.

다듬을 때는 장면 시각을 붙여 말하면 정확해요. “9.6초에 솟는 기둥을 더 굵게”, “11초의 나선 탑을 두 바퀴 더 꼬이게”, “마지막 웅덩이 장면에서 카메라를 조금 더 높여 왕관 전체가 보이게”처럼요.

#모션그래픽

COPY & MAKE IT YOURS

내 이름으로 만들 프롬프트

사진 없이 아래 프롬프트를 Claude Code에 보내 시작할 수 있어요. 대괄호 부분만 내 매장 정보로 바꾸면 돼요.

쓸 곳: [공연·디제이 무대 세로 화면 / 매장 세로 디스플레이 루프 / 전시·행사 대기 화면 / 모션 포트폴리오·릴스 감상 클립 중 하나]

HyperFrames 스킬을 사용해서 18초 안팎의 자성 유체(페로플루이드) 작품형 영상을 만들어 줘. 9:16 세로 1080×1920, 60fps. (쓸 곳이 인스타 피드면 1080×1350, 가로 TV·유튜브면 1920×1080으로 같은 연출을 잘라 쓰지 말고 다시 배치해 줘.)

가게 이름·광고 문구 없이 액체의 움직임·반사·카메라·소리만으로 끌고 가는 작품으로. 글자는 마지막 영어 한 줄만.
마지막 한 줄: [예: INVISIBLE FIELD]
조명 두 색: [예: 왼쪽 전기 파랑, 오른쪽 마젠타]
가운데 금속 물체: [예: 검은 연마 강철 구]
음악 템포: [예: 94BPM, 한 마디마다 장면 전환]

그리는 방식:
- WebGL 레이마칭으로 검고 거울처럼 번들거리는 액체 웅덩이를 그려 줘. 액체는 검정 유지, 색은 조명 반사로만.
- 가시는 육각 벌집 격자 위에 세우고, 밑은 넓고 끝은 날카롭게 옆면이 오목한 모양. 웅덩이와 만나는 밑동은 부드럽게 녹여 붙여 액체가 끌려 올라간 곡면처럼.
- 가시 높이는 ‘자기장 세기’ 함수로: 첫 장면은 가운데가 높은 왕관, 그다음 박자마다 고리가 바깥으로 퍼지는 물결, 이어서 회전하는 나선 팔.
- 금속 물체가 내려오면 액체가 기둥처럼 솟아 타고 올라가 표면에 가시를 세우고, 꼭대기에 꼬인 별 모양 나선 탑을 쌓은 뒤 다시 녹아내려 웅덩이로.
- 금속은 유리·크리스털처럼 보이지 않게 회색 바탕광 없이 어둡게, 가장자리 반사는 약하게.
- 매크로 접사 카메라, 얕은 심도(배경 조명은 크게 흐린 빛 번짐), 표면 반사에 다른 가시가 비치게, 떠다니는 작은 빛 입자, 필름 그레인.

음악: 새로 만든 다크 일렉트로 글리치, 왕관이 솟을 때 위로 끌려 오르는 소리, 고리마다 금속성 핑, 액체가 뛰어오를 때 묵직한 킥, 녹을 때 떨어지는 물방울 소리. 음량 -14 LUFS 안팎, 트루 피크 -1 dBTP 이하. 밝기가 갑자기 번쩍이지 않게.

먼저 장면 스냅샷으로 너무 어둡지 않은지, 금속이 유리처럼 보이지 않는지 확인한 뒤, 끝까지 재생되는 MP4로 만들어 줘.

이 예제의 실제 제작 지시문 보기

위쪽은 이 편에 적용된 사용자 지시 기록, 메인 작업 세션이 전달한 작품 지시 원문(콘셉트 변경 지시 포함), 함께 적용한 운영 기준, 코드 제작에 실제로 적용한 구체화 브리프와 제작 중 수정이에요. 별도 AI 동영상·이미지 생성 모델에 보낸 입력은 아니에요. 복사용 프롬프트는 독자가 조명 색과 금속 물체, 마지막 한 줄을 바꿔 넣기 쉽게 다시 쓴 버전이에요.

[사용자 지시 — Claude 제작 기준서(CLAUDE_TYPO_DAILY.md) 기록]
2026-10-13: “광고용, 홍보용으로만 만들지 말고, 대회 출시하듯이 작품성이 있는 것들도 만들어.”
2026-10-23: “한국인들도 광고형만 보여줄 게 아니라 예술적인 것도 보여줘야 될 거 같아.” → 하루 1편 체제에서 광고형과 작품형을 번갈아 만든다.
2026-10-29: AdSense 1차 승인 거절 뒤 “앞으로 가치 있게 잘 써야 돼.” → 클로드버전 신규 글은 실제 제작 기록·수정 전후 이미지·기법 해설 1가지를 담고, 고정 소제목을 쓰지 않는다.

[메인 작업 세션이 전달한 이 작품의 지시 원문]
중요 변경: Codex가 11/1에 「silk-horizon-artwork」(실크 지형·빛·작품형)를 게시했다. 11/3 「실크 천의 파도」는 소재가 겹치므로 콘셉트를 바꿔라. 새 콘셉트: 2026-11-03 09:30 작품형 — 자성 유체(페로플루이드)의 가시. 검고 광택 나는 액체가 보이지 않는 자기장에 반응해 뾰족한 가시 왕관으로 솟았다 가라앉고, 가시가 박자에 맞춰 파도처럼 번지며, 액체가 금속 구를 타고 올라가 나선 탑을 이룬 뒤 다시 웅덩이로 녹아내린다. 검정 거울 광택 + 가장자리 색조명(전기 파랑·마젠타 중 두 가지 정도), 매크로 접사·얕은 심도, 표면 반사. 9:16 1080×1920. 문구는 영어 한 줄 이하. 같은 날 Codex 「glass-choir-artwork」(유리 기둥·빛)와도 겹치지 않게 유리·크리스털 질감은 피하라.

[함께 적용한 운영 기준 요약 — AGENTS.md·POST_WRITING_GUIDE.md·CLAUDE_TYPO_DAILY.md·메인 작업 세션 제작 기준]
클로드버전 작품형. HyperFrames 0.8.149, composition 1개, 결정적 시드, 단일 GSAP 타임라인, WebGL 자체 3D 허용. 15~20초·60fps, 첫 1~2초에 가장 강한 장면, 3D 카메라·입자·빛·깊이감·박자 맞춘 전환 5~6회 이상, 기승전결. 상호·판매 문구·CTA 없음. 렌더 전 스냅샷 장면 시트 검토. 실존 작품·브랜드 모사 금지. 새 음악(Python/NumPy 합성 + FFmpeg 마스터링), 약 -14 LUFS·트루 피크 -1 dBTP 이하. 25MiB 미만(필요 시 2-pass, 원본 보존), 인접 프레임 평균 밝기 변화 25/255 이하. 기존 액체 크롬·리본 팝·종이 파도·물감 충돌 편과 겹치지 않게.

[적용 브리프 — Claude가 구체화해 코드 제작에 적용한 내용]
- 비율·길이: 9:16 1080×1920, 60fps, 18.4초(1104프레임). 94BPM, 한 마디 2.553초, 일곱 마디 = 일곱 장면.
- 그리기: WebGL2 전체 화면 레이마칭(최대 230걸음, 가시 높이대에서는 걸음을 0.03 이하로 제한) + 반사 1회 추가 추적(90걸음) + 40탭 피사계 심도(최대 20px, 배경은 항상 최대 흐림).
- 웅덩이와 가시: 육각 격자 간격 0.14, 가시 밑동 0.07, 반지름 = 0.07×(1−y/높이)^1.45, 웅덩이와 smooth min 0.03. 높이 함수 = 왕관(0.27·e^(−r²/0.07) + 0.06·e^(−r²/0.45), 첫 마디 박마다 16% 맥동) + 고리 8개(2.55초부터 박마다 출발, 반지름 0.12+0.95·dt, 폭 0.11, 높이 0.2·e^(−1.1·dt)) + 세 갈래 나선 팔(5.1초부터). 기둥이 서면 가운데 가시가 기둥으로 빨려 들어감.
- 강철 구와 액체: 반지름 0.30의 구가 8.3~9.4초에 내려와 높이 0.8에 멈춤, 9.57초 액체 기둥이 튀어 오름(오버슈트), 구 표면에 0.034 두께로 액체가 덮이고 위도 줄 격자 가시(이웃 2줄×2칸 확인)가 세 갈래 나선 띠를 따라 길어짐, 10.2~12.3초 꼭대기에 별 모양 6갈래 단면이 높이에 따라 꼬이는 나선 탑(높이 0.78)이 자라남. 12.6초부터 탑·가시·피막·기둥이 녹아 사라지고 구는 위로 빠져나감.
- 재질과 빛: 액체 반사율 0.05(검정 거울), 강철 반사율 0.2의 검은 연마 강철(가장자리 반사 ×0.25, 테두리 어둡게, 회색 바탕광 없음, 좁은 원뿔 평균으로 살짝 무딘 반사). 환경광 = 왼쪽 전기 파랑 띠(8.5), 오른쪽 마젠타 띠(7.5), 왼쪽 뒤 가는 파랑 띠, 위 흰 띠, 수평선 근처 색 번짐. 직접 보이는 조명은 3%만. ACES 톤 매핑, 노출 1.85.
- 카메라: 0초 웅덩이 높이 0.34의 접사(가운데 왕관), 박 고리를 따라 낮게 옆으로, 나선 팔을 위에서, 구 하강과 기둥을 옆에서, 구 둘레를 돌며 탑을 올려다봄, 녹는 기둥을 따라 내려옴, 마지막 웅덩이 접사. 미세한 손떨림.
- 글자: 15.67초부터 INVISIBLE FIELD(Noto Sans KR 500, 자간 0.55em)가 한 글자씩 내려앉음.
- 음악: 94BPM B♭ 프리지안 다크 일렉트로 글리치/IDM. 첫 프레임 큰 킥 + 위로 끌려 오르는 톱니파 ‘지잉’, 첫 마디 박마다 금속 FM 핑, 1~4마디 킥·베이스(C♭→B♭ 미끄러짐), 2마디부터 FM 스네어, 자기 잡음 같은 크래클, 구 하강의 내려가는 스윕, 9.57초 큰 킥과 물방울 ‘꿀렁’, 4마디 FM 스탭 화음·16분 틱, 5마디 떨어지는 물방울과 역방향 바람, 6마디 핑 세 번, 웅웅거리는 자기 험 드론, 2.4초 잔향, 시드 20261104.

[제작 중 수정 — 스냅샷 검토(7회)에서 실제로 발견해 고친 것]
1. 1차: 화면 대부분이 검정에 가깝고 가시가 솔잎 숲처럼 가늘고 높음, 왼쪽 위 파란 빛이 막대처럼 보임, 녹는 구간 14초대가 거의 빈 화면 → 조명 띠 밝기 2배 이상·아래로 확장, 노출 1.05→1.4, 가시 밑동 0.062→0.07·오목함 1.7→1.45·왕관 높이 0.34→0.27, 직접 보이는 조명 0.16→0.07·배경 최대 흐림(이 파란 빛은 앞쪽 흐린 액체 표면의 반사로 확인돼 완성본에도 흐린 빛 번짐으로 남음), 마지막 왕관을 더 일찍·더 크게, 녹는 구간 카메라를 아래로.
2. 2차: 구 표면 가시에 각진 이음매 → 이웃 칸 2×2 확인, 녹여 붙임 0.02→0.032(완화, 가까이 보면 육각 결은 남음). 강철 구가 유리 공처럼 보임 → 무딘 반사 시도(3차).
3. 3~6차: 여전히 뿌연 유리구슬처럼 보임. 원인은 강철에만 깔린 회색 바탕광 0.03과 강한 가장자리 반사 → 반사율 0.58→0.33→0.2, 가장자리 반사 ×0.25와 테두리 어둡게, 회색 바탕광 제거(7차에서 검은 강철로 확인), 구 하강 시작을 늦추고 카메라 초점을 구 높이로.
4. 첫 렌더(r1) 검사: 평균 밝기 13~29/255로 어두움 → 노출 1.4→1.85, 직접 조명 0.07→0.03 후 다시 렌더(r2).

클로드버전이 처음이라면? Claude Code와 HyperFrames 설치부터 알아보기 →