쇳가루와 자석

프롬프트

Claude 가 읽는 제작 지시문입니다. 맨 위 [바꿀 곳]의 값을 바꿔 붙여 넣어도 됩니다.

브라우저에서 바로 도는 미니게임 「쇳가루와 자석」을 HTML 파일 하나로 만들어 줘.

핵심 아이디어: 한지 한 장 위에 쇳가루 3000개가 흩어져 있고, 종이 아래에는 막대자석이 있다. 자석을 끌면 둘레의 쇳가루가 교과서 그림처럼 자기력선을 따라 돌아눕고, 극 가까이에서는 고슴도치처럼 일어서며 극으로 모여든다. 자석에 붙은 쇳가루 덩이를 끌고 가 빛나는 목표 칸에 일정 수 이상 모으면 그 칸에 무늬가 찍힌 채로 굳고 점수가 된다. 시간이 다 되기 전에 칸을 최대한 많이 채운다.

[바꿀 곳]
- filingCount: 3000 (쇳가루 수)
- gridN: 5 (종이를 5×5 칸으로 나눈다)
- fillCount: 170 (목표 칸 안에 이만큼 모이면 채워짐, 첫 칸 기준)
- fillCountStep: 10 (칸을 하나 채울 때마다 늘어남, 최대 260)
- roundTime: 40 (판 시작 시간, 초)
- fillBonusTime: 7 (칸 하나 채우면 더해지는 시간, 초, 남은 시간은 40초를 넘지 않음)
- magnetSpeed: 0.45 (키보드 이동 속도, S/초)
- 색: 바깥 책상 #8C8478, 한지 #EEE8DA, 한지 섬유 #D9D0BD, 쇳가루 #2B2B2E, 굳은 쇳가루 #6B5424, N극 #B23A2E, S극 #4E5F6E, 목표 강조 #C8962E, 글자 #3A3631

[크기]
화면 짧은 변을 S 라 한다. 판은 1:1.
- 종이: 한 변 P = 0.94·S, 화면 가운데. 종이 바깥 남는 곳은 모두 책상색 #8C8478 로 채우고 아주 옅은 나뭇결 줄(같은 색에서 밝기 ±4%)을 긋는다.
- 칸: 한 변 C = P/5 = 0.188·S. 칸 경계는 #D9D0BD 0.5 픽셀 점선, 아주 옅게.
- 막대자석: 길이 0.19·S, 너비 0.055·S. 두 극은 자석 가운데에서 축 방향으로 ±a, a = 0.075·S (두 극 사이 0.15·S 는 칸 한 변 0.188·S 안에 들어간다).
- 쇳가루 한 알: 누운 길이 0.011·S, 선 두께 max(1, 0.0018·S) 픽셀.
- 끌어당김 반경 R = 0.24·S (가까운 극에서 잰 거리), 정렬 반경 A = 0.45·S, 붙음 반경 0.03·S.
- 위쪽 표시(점수·남은 시간) 글자 크기 0.034·S, 시간 막대는 종이 위 가장자리 안쪽 두께 0.008·S.
- 소리 끄기 단추: 화면 오른쪽 아래 구석, 지름 0.07·S.
- 쇳가루 밀도 = 3000 / P² ≈ 3400개/S², 칸 하나 평균 120개.

[장면]
- 종이는 한지: 바탕 #EEE8DA 에 길이 0.02~0.08·S 의 가는 섬유 곡선 400개를 #D9D0BD 로 옅게(투명도 0.35) 깐다. 처음 한 번 바깥 캔버스에 그려 두고 매 프레임 그대로 찍는다.
- 자석은 종이 아래에 있으므로 종이 너머로 비쳐 보이게만 그린다: N 반쪽 #B23A2E, S 반쪽 #4E5F6E, 투명도 0.28, 가장자리 흐림 0.012·S. 쇳가루보다 먼저(아래에) 그린다. 극 끝에 작은 글자 N·S(0.03·S, 투명도 0.4).
- 자기장 방향: 두 극을 점전하로 본다. 위치 r 에서 B = (r−N)/(|r−N|²+ε²)^1.5 − (r−S)/(|r−S|²+ε²)^1.5, ε = 0.01·S. 쇳가루는 방향만 쓴다(부호 없는 선분).
- 쇳가루 한 알은 위치, 각도 θ, 일어섬 s(0~1), 자기 쌓임 반경(0.005~0.04·S 사이 난수)을 가진다. 형식 배열(Float32Array)로 둔다.
- 정렬: 가까운 극까지 거리 d 가 A 보다 작으면 θ 를 장 방향 쪽으로 시간상수 0.06초로 돌린다(선분이므로 π 를 법으로 가까운 쪽으로 돈다). A 밖의 쇳가루는 마지막 각도를 그대로 둔다 — 그래서 자석이 지나간 자리에 옛 무늬가 남는다.
- 일어섬: d < 0.05·S 이면 목표 s = 1, d > 0.12·S 이면 0, 사이는 직선. s 는 시간상수 0.1초로 따라간다. 누운 알(s=0)은 θ 방향 길이 0.011·S 선분, 투명도 0.75. 선 알(s→1)은 길이가 0.004·S 까지 줄며 극을 향한 방사 방향으로 서고, 끝에 지름 0.003·S 진한 머리점, 그리고 오른쪽 아래로 (0.002·S, 0.002·S) 비킨 그림자 선(투명도 0.25)을 그린다. 극 둘레가 바늘이 선 고슴도치처럼 보여야 한다.
- 그리기 비용: 쇳가루는 누운 묶음·선 묶음·그림자 묶음 세 개의 path 로 모아 한 번씩 stroke 한다. 알마다 stroke 하지 않는다.
- 목표 칸: #C8962E 2 픽셀 테두리, 0.9초 주기로 투명도 0.5~1 숨쉬기. 칸 안 쇳가루 수 / fillCount 비율만큼 칸 바닥에서 위로 #C8962E 투명도 0.12 로 차오른다. 칸 위쪽 안에 「132 / 170」 같은 숫자를 작게.
- 채워진 칸: 그 안의 쇳가루는 그 자리·그 각도로 굳어 #6B5424 로 바뀌고, 칸 바탕에 #C8962E 투명도 0.08 씻김. 자기력선 무늬가 도장처럼 남는다.
- 시그니처 순간: 열리고 0~0.8초에 자석이 종이 왼쪽 바깥(종이 왼끝 −0.1·S)에서 가운데로 easeOutCubic 으로 미끄러져 들어온다. 0.8~1.4초 사이, 화면 가운데 지름 0.8·S 원 안의 쇳가루 약 1700개(0.503·S² × 3400)가 0.3초 안에 두 극을 잇는 호와 극 둘레 방사선 무늬로 돌아서고, 극 둘레 0.05·S 안에서는 일어선다. 첫 화면부터 종이 전체에 쇳가루 3000개가 아무렇게나 깔려 있어 빈 화면인 순간은 없다.
- 채움 연출: 0.5초 동안 칸 테두리가 1.5배 두께로 한 번 번쩍이고, 굳는 알들이 바깥에서 안쪽으로 차례로 색이 바뀐다. 칸 위로 「+173」이 0.8초 동안 0.05·S 떠오르며 사라진다.

[조작]
- 키보드: 화살표 또는 WASD 로 자석 이동(magnetSpeed, 대각선은 정규화). Q·E 로 자석을 초당 180° 돌린다. Space 는 극 뒤집기 — 자석을 0.25초 동안 180° 돌린다(돌아가는 동안 무늬가 소용돌이치며 다시 잡히는 것이 보인다). M 소리 끄기.
- 터치·마우스(pointer 이벤트): 한 손가락 끌기 = 자석을 손가락 이동량만큼(픽셀 1:1) 옮긴다. 자석이 손가락 밑으로 순간이동하지 않는다 — 손가락이 자석을 가리지 않게. 두 손가락 돌리기 = 두 손가락을 잇는 선의 각도 변화만큼 자석을 돌린다(180° 돌리면 극이 뒤집힌다). 두 번 짧게 탭(0.3초 안, 0.05·S 안) = Space 와 같은 극 뒤집기.
- 폰 세로 화면에서 엄지 하나로 끌기만으로도 끝까지 할 수 있다. 자석은 종이 밖으로 나가지 않게 가운데를 종이 안으로 묶는다.
- 'demo'·'over' 에서 받은 첫 키나 탭은 새 판을 여는 데만 쓰고 자석을 움직이지 않는다. 그 손가락은 뗄 때까지 무시한다.

[규칙]
- 판이 시작되면 쇳가루 3000개를 그 판의 시드로 새로 뿌리고 자석은 종이 가운데 칸(2,2)에 가로로 놓인다. 남은 시간 40초.
- 쇳가루의 움직임(고정 간격마다): 가까운 극까지 거리 d < R 이고 d 가 자기 쌓임 반경보다 크면, 그 극 쪽으로 속도 v = 0.6·S·(1 − d/R)² /초 로 다가간다. d 가 붙음 반경 0.03·S 이하인 알은 극에 붙어 그 극이 움직인 만큼 같이 움직인다 — 이것이 덩이를 끌고 가는 손맛이다. 굳은 알은 움직이지 않는다.
- 목표 칸: 첫 목표는 늘 칸 (4,2) — 가운데에서 오른쪽으로 두 칸(0.376·S). 다음 목표부터는 시드 난수로, 채워지지 않았고 자석이 있는 칸에서 체비쇼프 거리 2 이상인 칸 중 하나. 그런 칸이 없으면 거리 1 이상.
- 목표 칸 안 움직이는 쇳가루가 fillCount 이상인 상태가 0.4초 이어지면 칸이 채워진다: 그 안의 알들이 굳고, 점수 += 굳은 알 수, 남은 시간 += 7초(최대 40), fillCount += 10(최대 260), 새 목표.
- 움직이는 쇳가루가 900개 아래로 줄면 0.6초 동안 종이 위에 400개를 새로 뿌린다(위에서 떨어지듯 0.15초 길이가 줄며 내려앉음, 채워진 칸 안에는 뿌리지 않음).
- 남은 시간이 0이 되면 판이 끝난다. 끝 연출 없이 그 프레임에 바로 'over'. 아무 입력이 없으면 자석이 가운데에 머물러 목표를 채우지 못하므로 40초에 끝난다.
- 난이도 곡선: 처음 20초는 시간이 넉넉해 지지 않는다(첫 칸은 2초 안팎 거리). 뒤로 갈수록 fillCount 가 10씩 늘고 주변 쇳가루가 굳어 줄어들어, 먼 곳의 덩이를 끌어와야 한다. 남은 시간 5초부터 시간 막대가 #B23A2E 로 바뀌고 초마다 똑딱 소리.
- 'over' 화면: 종이 위에 반투명 #EEE8DA(0.75) 판, 가운데에 점수(0.09·S)·채운 칸 수·최고 점수(메모리), 「눌러서 다시」. 뜨자마자 키·탭을 받는다.
- 점수 표시: 종이 왼쪽 위 안쪽에 「쇳가루 512」, 오른쪽 위 안쪽에 남은 초.

[구경 모드]
- 열리자마자 'demo'. 위의 시그니처 순간(자석이 미끄러져 들어와 무늬가 서는 장면)으로 시작한다.
- 컴퓨터 자석: 목표 칸 가운데로 초당 0.35·S, 가속·감속을 부드럽게(목표 0.1·S 앞부터 감속) 간다. 가는 길에 덩이를 모으려고 목표와 자석 사이 쇳가루가 가장 많은 칸을 한 번 거쳐 간다. 도착하면 채워질 때까지 머문다. 세 번째 목표마다 가는 도중 극 뒤집기를 한 번 한다. 6초 안에 못 채우면 다음 목표로.
- 구경 모드는 시간이 줄지 않는다. 칸 4개를 채우거나 45초가 지나면 쇳가루를 새로 뿌리고 시그니처 장면부터 다시.
- 종이 위쪽 가운데에 제목 「쇳가루와 자석」(0.06·S, #3A3631), 아래쪽 가운데에 「눌러서 시작」(0.04·S, 1.2초 주기로 투명도 0.45~1).

[소리]
- WebAudio 합성음만, 첫 입력 뒤에 AudioContext 를 만든다.
- 끌림 소리: 띠 통과 필터(1800Hz, Q 1.2)를 건 잡음을 계속 틀어 두고, 이번 프레임에 움직인 쇳가루 수에 비례해 음량 0~0.08 로 부드럽게(0.05초) 바꾼다. 사각사각 쓸리는 소리.
- 칸 채움: 쇠붙이 종소리 — 사인 880Hz + 2310Hz(비조화 배음) 감쇠 0.6초, 음량 0.15.
- 극 뒤집기: 140Hz→70Hz 사인 0.12초 툭.
- 남은 5초 똑딱: 1200Hz 사각파 0.02초, 음량 0.05.
- 판 끝: 440→220Hz 삼각파 0.5초.
- 화면 오른쪽 아래 소리 끄기 단추(스피커 모양을 선으로), M 키도 같은 일.

[구현]
- HTML 파일 하나로 만든다. 바깥 파일·글꼴·라이브러리·네트워크 요청을 쓰지 않는다(미리보기 칸에서 막힌다).
- 첫 <script> 맨 앞에 CONFIG 객체를 두고 [바꿀 곳]의 값과 이 글에 나온 숫자(속도·크기·색·시간)를 이름 붙여 모은다.
- 게임 진행은 requestAnimationFrame 의 타임스탬프로 고정 시간 간격(1/120초) 갱신을 돌린다. 한 프레임에 밀린 시간은 0.1초까지만 따라잡는다. setTimeout·setInterval·CSS 애니메이션으로 움직이지 않는다.
- 난수는 시드 고정 난수(mulberry32 등)만 쓰고, 판마다 시드를 하나씩 늘린다. Math.random 은 쓰지 않는다.
- 캔버스는 늘 창 전체 크기다. 창 크기가 바뀌면 다시 맞추고, 게임판 비율이 정해진 게임은 판을 가운데 두되 남는 곳에도 배경을 그린다(빈 띠를 두지 않는다). 스크롤이 생기지 않게 한다. devicePixelRatio 는 2 까지만 선명도에 반영한다.
- 키보드와 터치를 둘 다 받는다. 키 입력은 window 의 keydown·keyup 으로 받아, 화면을 먼저 누르지 않아도 첫 키가 먹게 한다. 짧게 눌렀다 뗀 키도 놓치지 않게 keydown 때 처리하거나 기록해 둔다. 터치는 페이지 스크롤·확대가 일어나지 않게 막는다(touch-action: none).
- 점수·상태를 window.__game = { state, score } 에 두고 매 프레임 갱신한다. state 는 'demo'(구경 모드)·'play'·'over' 셋 중 하나, score 는 숫자다.
- 열리자마자 'demo' — 컴퓨터가 스스로 플레이하는 구경 모드와 「눌러서 시작」 안내. 첫 키 입력이나 탭이면 새 판 'play'. 판이 끝나면 'over' 화면, 거기서 키 입력이나 탭이면 새 판. 'over' 화면은 뜨자마자 키 입력·탭을 받는다(입력을 막는 대기 시간을 두지 않는다). 끝나는 연출이 있으면 그동안은 state 를 'play' 로 두고, 연출이 끝나 입력을 받을 수 있게 된 때 'over' 로 바꾼다.
- 플레이 중 아무 입력이 없으면 늦어도 40초 안에 판이 끝난다.
- 브라우저 저장소(localStorage·sessionStorage·IndexedDB·쿠키)를 쓰지 않는다 — 미리보기 칸에서 막혀 오류가 난다. 최고 점수는 메모리에만 둔다.
- 소리는 WebAudio 로 합성한 소리만, 첫 입력 뒤에만 낸다. 화면 구석에 소리 끄기 단추(M 키도)를 둔다.
- 탭이 숨으면 멈추고 돌아오면 이어서 한다.
- 글자는 시스템 글꼴만 쓴다: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif.
- 모든 함수·상수를 먼저 정의하고, 시작(초기화와 첫 requestAnimationFrame)은 스크립트 맨 끝에서 한 번만 부른다.
- 콘솔에 오류가 나지 않게 한다. 스스로 대조하는 표는 console.table, 어긋남은 console.warn 으로만 낸다.

이 작품만의 구현:
- 길이는 모두 S 에 대한 비율로 CONFIG 에 두고, 크기가 바뀔 때 픽셀로 다시 계산한다. 쇳가루 위치는 종이 기준 0~1 좌표로 저장해 창 크기가 바뀌어도 무늬가 그대로 남게 한다.
- 장 계산은 쇳가루마다 두 극에 대한 식 하나뿐이다(3000 × 120회/초). 격자 장·자기력선 추적·입자 사이 충돌 계산을 하지 않는다. 각도·일어섬 갱신은 프레임마다 한 번(dt 반영)으로 충분하고, 위치 이동은 고정 간격마다 한다.
- 칸 안 개수 세기는 고정 간격마다 쇳가루를 한 번 훑어 칸 번호별로 센다.
- 판 시작 자석 위치는 칸 (2,2) 가운데, 첫 목표는 칸 (4,2): 키보드로 오른쪽 화살표를 약 0.83초 누르면(0.45·S × 0.83 ≈ 0.374·S) 목표 가운데에 닿는다. 폰 세로 화면에서는 가로로 화면 폭 40% 끌면 닿는다.
- 시작할 때 스스로 대조: 시드 1로 뿌린 쇳가루 복사본에서 자석을 칸 (4,2) 가운데에 놓고 6초를 고정 간격으로 돌려(그리지 않고) 칸이 채워지는 데 걸린 시간을 잰다. 합격 기준을 console.table 로 낸다: 칸 평균 쇳가루 수 기대 120(±20), 첫 칸 채움 시간 기대 1.5~5초, 붙음 반경 안 덩이 수(자석을 가운데에 2초 둔 뒤) 기대 60~250, 무입력 판 길이 기대 40초. 채움 시간이 5초를 넘으면 console.warn 을 내고, 최후의 조치로 fillCount 를 그 모의 실험 4초 시점 칸 안 개수의 90% 로 낮춘다. 1.5초보다 빠르면 console.warn 만 낸다.
- 두 손가락 처리: pointerId 별로 위치를 기록하고, 두 개가 눌려 있으면 끌기를 멈추고 각도 차만 쓴다. 한 손가락이 떨어지면 남은 손가락의 이동부터 다시 끌기로 잇는다(튀지 않게).
- 'over' 에서 받은 입력으로 새 판을 열 때 판 상태(쇳가루·칸·시간·점수·fillCount)를 모두 처음 값으로 되돌린다.

[하지 말 것]
- 반짝이 입자·빛 번짐·렌즈 플레어·발광(shadowBlur) 넣지 않는다 — 쇳가루 3000개 자체가 볼거리이고, 발광은 그리기를 수십 배 느리게 한다.
- 자기력선을 따로 선으로 그리지 않는다 — 무늬는 오직 쇳가루 각도로만 드러나야 교과서 실험 그대로다.
- 쇳가루를 알마다 stroke·arc 로 따로 그리지 않는다 — 3000번 호출은 폰에서 끊긴다.
- 바탕을 남청색·고채도 색으로 칠하지 않는다 — 한지와 책상의 낮은 채도가 쇳가루 검정을 살린다. 강조색은 N극 빨강과 목표 황토 둘뿐.
- 화면 모서리에 장식 글자·버전 표시·조작 설명 상자를 두지 않는다 — 종이를 가린다. 조작 안내는 구경 모드 「눌러서 시작」 한 줄이면 된다.
- 자석을 위에서 본 금속 덩어리로 진하게 그리지 않는다 — 종이 아래에 있으니 비쳐 보이기만 해야 한다.
- 바깥 글꼴·이미지·라이브러리를 불러오지 않는다 — 미리보기 칸에서 막힌다.
- 끝날 때 긴 연출로 입력을 막지 않는다 — 시간이 다 되면 바로 다시 할 수 있어야 한다.

사용 방법

필요한 것: claude.ai 계정 — 무료 계정에서도 Claude Opus 5.5 를 고를 수 있습니다

1. claude.ai 에서 새 대화를 엽니다.
2. 모델 메뉴에서 Claude Opus 5.5 를 고르고, 같은 메뉴의 Effort(답변 깊이)를 High 로 둡니다.
3. 복사한 프롬프트를 붙여 넣고 전송합니다. 결과로 나온 HTML 파일을 브라우저로 열면 바로 해 볼 수 있습니다.

추가 요청 예시

결과가 나온 뒤 같은 대화에서 이어서 요청하면 해당 부분만 수정됩니다.

• 자석을 하나 더 놓을 수 있게 해 줘
• 판마다 목표 칸이 늘어나는 단계를 만들어 줘
• 쇳가루 색을 구리빛으로 바꿔 줘