할로윈 봉제인형
털이 보송한 할로윈 봉제인형 여섯 중에 하나를 골라 데리고 노는 브라우저 장난감입니다. 톡 치면 그 아이가 저마다 다른 동작으로 답하고, 끌면 잡아 늘이거나 들어 올려 던질 수 있습니다. 몸통은 흔들리는 그림이 아니라 입자 642개로 된 연질 물리라서 눌리면 찌그러지고, 부피를 지키며 출렁이고, 놓으면 바느질된 모양으로 돌아옵니다. 등불 유령 글림, 호박 핌, 검은 고양이 숯, 박쥐 플릿, 미라 무무, 누더기 괴물 볼트 — 고른 인형은 다음에 와도 그대로 맞아 줍니다.
여기서 바로 해 보기
아래 버튼을 누르면 이 페이지 안에서 실행됩니다. 누르기 전에는 게임 데이터를 받지 않으므로, 소개만 읽고 가셔도 됩니다. 설치도 로그인도 없습니다.
누구에게 필요한가요
물리로 움직이는 3D 인형을 직접 만져 보고 싶은 사람, AI 코딩 도우미에게 한 번에 긴 요구를 줬을 때 어디까지 만들어 내는지 보고 싶은 사람, 할로윈 분위기의 작은 장난감을 잠깐 만지고 싶은 사람
주요 기능
- 인형을 톡 치면 동작 하나가 무작위로 나온다. 손 흔들기 · 깡총 · 빙글 · 왁! · 생각하기에 그 아이만의 대표 동작이 섞이고, 대표 동작이 조금 더 자주 나와서 성격이 드러난다
- 아무 데나 잡아 끌면 그 자리가 늘어나고, 놓으면 출렁이며 제 모양으로 돌아온다. 세게 던지면 날아가 떨어지고, 넘어지면 잠시 뒤 스스로 일어난다
- 동작은 정해진 애니메이션이 아니다. 목표와 충격만 정하고 나머지는 물리가 만들기 때문에 같은 동작도 설 자리와 기울기에 따라 조금씩 다르게 나온다
- 인형 여섯: 등불 유령 글림, 호박 핌, 검은 고양이 숯, 박쥐 플릿, 미라 무무, 누더기 괴물 볼트. 아래 띠에서 고르면 바로 바뀌고, 고른 아이는 이 브라우저에 남아 다음에 와도 그대로 맞아 준다
- 인형마다 끈에 매단 소품(등불 · 사탕 · 별 · 달 · 부적 · 전구)이 따로 물리로 흔들리고, 얼굴은 깜빡이며 상황에 따라 표정이 바뀐다
- 동작마다 그 아이 말투로 한마디가 뜬다. 빈 곳을 끌면 시점이 돌고, 휠이나 두 손가락으로 확대하고, 두 번 누르면 처음 자리로 돌아온다
- 머리말의 '조절판' 단추를 누르면 작업용 화면이 열린다. 손 · 손가락 · 빗 도구, 원단 세 가지, 솜 단단함 · 털 길이 · 밤바람 슬라이더, 동작마다 단추, 멈춤 · ¼ 속도 · 물리 격자 보기, 무게 · 부피 · 불빛 · 평온 계기판이 나오고, 다시 누르면 토이 화면으로 돌아온다. 연 상태는 이 브라우저에 기억한다
- 왼쪽 위에서 한국어와 영어 화면을 바꾼다. 아래 적용한 프롬프트 칸에 이 앱을 만든 요청 원문을 그대로 실었다
제품 방향
한 번에 긴 요구를 담은 할로윈 봉제인형 챌린지 프롬프트를 AI 코딩 도우미(Claude Opus 5.5)에게 그대로 주고 만든 결과물입니다. 프롬프트는 먼저 자신이 어떤 모델인지 밝히고 자신을 할로윈 캐릭터로 상상하게 한 뒤, 그 캐릭터를 진짜 봉제인형처럼 보이고 물리로 움직이는 3D 장난감으로 만들라고 요구합니다. 그래서 첫 인형은 겁주기보다 길을 비춰 주는 등불 유령 글림이 됐고, 배경은 호박밭 한가운데 책을 쌓아 둔 달밤의 독서 자리가 됐습니다.
몸통은 입자 642개로 된 닫힌 천 껍질입니다. 매 프레임 열 번씩 잘게 나눠 풀면서 변과 굽힘으로 천이 늘어나지 않게 잡고, 부피 제약 하나로 솜의 양을 지키고, 껍질 전체를 원래 모양에 맞추는 형상 맞춤으로 바느질된 모양을 기억합니다. 팔은 4 × 6 입자 천 두 장을 솔기 제약으로 몸통 삼각형에 꿰매 붙였고, 소품은 여섯 마디 끈 끝에 매달려 흔들립니다. 털은 몸 위에 껍질을 최대 24겹 쌓아 그립니다(정점마다 털 방향을 들고 있어, 작업용 화면에서는 빗으로 결을 바꿀 수 있습니다).
처음 만든 판은 가만히 둬도 인형이 혼자 돌아가고 미끄러졌습니다. 바람이 천 팔과 등불만 미는데 바로 서게 하는 힘은 기울기만 잡고 방향은 잡지 않았고, 바닥 마찰도 속도를 줄이기만 했기 때문입니다. 동작 단추를 누르면 인형이 몸집의 두 배 넘게 날아가기도 했는데, 팔을 목표 자세로 끄는 힘에 반작용이 없어 운동량이 새로 생긴 탓이었습니다. 방향을 지키는 힘, 위치 기반 정지 마찰, 팔에 준 운동량만큼 몸통을 되돌리는 처리를 넣어 지금은 가만히 두면 거의 움직이지 않습니다.
이어서 받은 요청으로 인형을 여섯으로 늘렸습니다. 같은 입자 격자와 구속을 그대로 쓰고, 인형마다 구 위의 점을 쉬는 모양으로 옮기는 함수 하나만 바꿉니다. 고양이와 박쥐의 귀, 호박의 골, 유령의 밑단, 괴물의 평평한 머리가 모두 그 함수에서 나옵니다.
처음 공개한 판은 조정 장치가 다 드러난 작업용 화면이었습니다. 도구 셋과 슬라이더, 원단, 동작 단추, 계기판이 오른쪽과 아래를 채우고 있었는데, 들어온 사람이 무엇부터 눌러야 할지 알기 어려웠습니다. 그래서 조정 장치를 걷어 내고 인형과 고르기 띠만 남긴 지금 모습으로 바꿨습니다. 설명이 필요 없는 두 가지, 톡 치기와 끌기만 남긴 셈입니다. 작업용 화면은 그대로 두고 공개본만 따로 굽습니다. 그 작업용 화면은 머리말의 '조절판' 단추로 언제든 다시 꺼낼 수 있게 했습니다.
걷어 내다가 뜻밖의 것 두 개가 걸렸습니다. 하나는 맞았는지 판정하는 함수가 빗나가도 빈 껍데기를 돌려줘서, 하늘을 쳐도 인형이 움직인 것입니다. 다른 하나는 카메라가 인형을 담을 자리를 조정 패널의 화면 좌표로 재고 있었던 것입니다. 패널을 지우니 그 좌표가 0 이 되어, 세로 화면에서는 위쪽 120픽셀 안에 인형을 욱여넣었습니다. 패널을 지우는 대신 보이지만 않게 하고 자리는 경계로 남겨 두어 고쳤습니다.
적용한 프롬프트
1. 할로윈 봉제인형 챌린지 (원문, 영어)
HALLOWEEN PLUSH CHALLENGE — one prompt, two steps
STEP 1 Who are you?
Before writing any code, tell me which AI model you are (name and version, as precisely as you know it).
Then imagine yourself as a Halloween character. This is entirely up to you: it can be a creature, a spirit, an object, a costume, anything. It just has to feel like *you*. Describe it in a short paragraph: what it looks like (shape, colours, face, any accessory), its personality, and how it behaves on Halloween night. Give it a name.
STEP 2 Build it as an interactive plush toy
Now build that character as a single self-contained HTML file: an interactive 3D plush toy you can play with in the browser.
Visual style
- It must look like a real stuffed plush toy: soft fabric, visible fur/pile (shell fur or similar), seams, felt or fleece parts, embroidered or glass-bead details. Not a hard plastic 3D model.
- Make it cute and appealing. Proportions, eyes, expression and colours are your call.
- Lighting and rendering should feel like a high-quality material study: soft shadows, contact shadow on the ground, nice tone mapping.
Physics & mechanics (required)
- The body is a real soft body (e.g. XPBD / position-based dynamics, shape matching + volume preservation), not a rigid mesh with a wobble shader. It should squash, stretch, jiggle and keep its volume.
- At least one sewn-on cloth part (arms, ears, cape, flaps…) simulated as particle cloth and attached to the body with seam constraints, so pulling it tugs the body.
- Interaction tools:
- Hand: grab any part and drag it. The toy deforms around your grip and reacts when released.
- Finger: poke it to push or topple it. Touching empty ground makes the character move toward that point.
- Comb: brush the fur. Fur direction changes where you stroke, with a visible velvet trail (darker against the grain), plus a "Smooth fur" reset.
- Camera: drag empty space to orbit, scroll/pinch to zoom, double-click to reset.
- Several character-specific action buttons that animate the toy through its physics (not canned keyframes on a rigid mesh), e.g. a signature move, a wave, a trick, a surprised reaction. Choose actions that fit your character.
- The face should be expressive: blinking, plus at least two expressions that change with what is happening.
- If your character has an accessory or prop, make it physically simulated too (e.g. hanging, swinging, grabbable).
- Controls panel: tool selector, 3 colour palettes, sliders for stuffing firmness and fur length (plus one slider of your choice), action buttons, Reset, Pause, ¼ speed, and a "Mesh" toggle that shows the simulation lattice.
- Live readouts: mass, current volume (% of rest), plus one or two stats that fit your character.
- Short lines of dialogue / status text that react to what the user does.
Background
- Invent a striking Halloween backdrop for your character. Setting, mood and props are your creative choice. It should be a real 3D scene (three.js is welcome) that you can orbit around, not a flat image.
- Make it atmospheric: lighting, depth, some ambient motion.
- The background must not cover or fight with the toy. The plush stays the hero.
UI
- A polished, cosy, beautiful interface that matches the Halloween mood: title/masthead, controls panel, readouts, a short "Inside the experiment" section explaining how it works.
- Must work on desktop and mobile.
Technical rules
- One HTML file. Libraries only from a CDN, no other external assets (generate textures procedurally).
- Should run smoothly (aim for 60 fps on a normal laptop) and show a friendly fallback if the required graphics API is unavailable.
At the end, briefly explain the main design choices for your character and your background.2. 위 챌린지를 한국어로 정리한 것
1단계. 나는 누구인가
· 코드를 쓰기 전에 어떤 AI 모델인지(이름과 버전)를 밝힌다.
· 자신을 할로윈 캐릭터로 상상해 생김새(모양 · 색 · 얼굴 · 소품), 성격, 할로윈 밤에 하는 일을 짧게 쓰고 이름을 붙인다.
2단계. 인터랙티브 3D 봉제인형으로 만들기 (HTML 파일 하나)
· 겉모습: 딱딱한 3D 모델이 아니라 진짜 봉제인형처럼. 털이 보이는 천, 솔기, 펠트나 플리스 조각, 자수나 유리구슬. 귀엽게. 부드러운 그림자, 바닥 접지 그림자, 톤 매핑.
· 물리: 흔들림 셰이더가 아닌 진짜 연질 몸통(XPBD 같은 위치 기반 물리, 형상 맞춤 + 부피 보존). 꿰매 단 천 부품을 하나 이상 입자 천으로 돌리고 솔기 제약으로 몸에 묶어, 당기면 몸이 따라오게.
· 도구 셋: 손(아무 데나 잡아 끌기, 놓으면 반응) · 손가락(찔러서 밀거나 넘어뜨리기, 빈 바닥을 누르면 그리로 이동) · 빗(털결이 바뀌고 결 반대는 짙은 벨벳 자국, '털 정리' 단추).
· 카메라: 빈 곳을 끌어 돌려 보기, 휠이나 두 손가락으로 확대, 두 번 눌러 처음으로.
· 캐릭터에 맞는 동작 단추 여러 개(대표 동작 · 인사 · 재주 · 놀람 등). 정해진 키프레임이 아니라 물리로 움직일 것.
· 표정: 깜빡임 + 상황에 따라 바뀌는 표정 두 가지 이상. 소품이 있으면 소품도 물리로(매달림 · 흔들림 · 잡기).
· 조절판: 도구 고르기, 색 세 가지, 솜 단단함과 털 길이 슬라이더(+ 마음대로 하나 더), 동작 단추, 처음으로 · 멈춤 · ¼ 속도 · 격자 보기.
· 실시간 수치: 무게, 지금 부피(처음 대비 %), 캐릭터에 맞는 수치 한두 개. 하는 일에 반응하는 짧은 대사.
· 배경: 직접 지어낸 할로윈 3D 장면(돌려 볼 수 있게). 조명 · 깊이 · 잔움직임으로 분위기를 내되 인형을 가리거나 다투지 않게.
· UI: 할로윈 분위기의 아늑한 화면. 제목, 조절판, 수치, 원리를 짧게 설명하는 '실험 속 들여다보기'. 데스크톱과 모바일 모두.
· 기술: 라이브러리는 CDN 에서만, 다른 외부 에셋 없이 텍스처는 코드로 생성. 보통 노트북에서 60fps 목표, 필요한 그래픽 API 가 없으면 친절한 대체 화면.
· 마지막에 캐릭터와 배경의 주요 설계 선택을 짧게 설명한다.3. 이어서 준 요청: 인형 여섯 (원문)
등불 유령 외에 다양한 형상 들을 만들어주고 선택해서 볼 수 있게 해줘
→ 반영한 것: 유령 글림 · 호박 핌 · 검은 고양이 숯 · 박쥐 플릿 · 미라 무무 · 누더기 괴물 볼트, 여섯 인형과 고르기 칸.
같은 물리 격자를 쓰고 인형마다 본(쉬는 모양) 함수 · 팔 · 얼굴 · 솔기 무늬 · 원단 세 가지 · 소품 · 대표 동작이 다르다.
현재 상태
프로토타입 공개
- 개발 시작2026년 10월
플레이 안내
- 성능은 개발용 컴퓨터(외장 GPU)의 화면 없는 크롬에서만 쟀습니다(1280x800 에서 초당 60프레임). 내장 그래픽만 있는 노트북, 사파리와 파이어폭스에서는 확인하지 못했습니다. 느리면 해상도와 털 겹 수를 저절로 줄입니다
- 휴대폰 화면 배치와 터치는 브라우저의 휴대폰 흉내 모드로만 시험했습니다. 실제 휴대폰에서 두 손가락 확대는 확인하지 못했습니다
- 처음 열 때 3D 라이브러리와 글꼴을 공개 CDN 에서 받습니다. 그림 파일은 하나도 없고, 장면과 원단 무늬, 얼굴 자수까지 모두 코드로 그립니다. 소리는 없습니다
- 아무것도 서버로 보내지 않습니다. 고른 인형과 화면 언어만 이 브라우저에 기억합니다
바로가기
써 보셨나요?
좋았던 점, 불편했던 점, 버그, 바라는 기능을 남겨 주세요. 읽어 본 뒤 공개하고, 고치는 데 씁니다.