개발자가 클로드와 오후 반나절 만에 만든 화면 속 물레방아, 트위터(X) 글 조회 54만
클로드 채팅창에 부탁 글 하나 넣어 만든, 화면 속에서 돌아가는 시골 물레방앗간(물레방아 원리 3D)
2026년 10월 28일 올림 · 10월 27일 확인
1단계: 클로드 채팅창에 이 부탁 글(지시문) 붙여 넣기
맨 끝 [ ] 안이 보여 줄 기계예요. '물레방아로 맷돌을 돌려 밀을 가는 모습'처럼 물의 힘으로 움직이는 다른 기계로 바꿀 수 있어요. 그때 가운데 '1 물 → 2 바퀴 …' 단계 이름과 '방아가 1분에 몇 번 찧는지'도 그 기계에 맞게 바꿔야 해요. 자전거·시계처럼 물과 상관없는 기계는 본문의 '물 양' 막대 문장까지 고쳐야 하는데, 저희는 해 보지 않았어요. [ ] 괄호와 마지막 문장('답에는 HTML 코드 전체를…')은 꼭 남기세요. 저희는 물레방앗간으로만 해 봤어요. 유료라면 입력 칸 아래 모델 이름을 눌러 'Opus 5.5'를 고르고(메뉴 위치는 저희가 직접 확인 못 했어요), 무료라면 기본값 그대로 두면 돼요.
너는 3D 과학 교재를 만드는 사람이야. 아래 [ ] 안 기계가 실제로 어떻게 움직이는지, 물이 들어오는 데서부터 마지막 결과까지 한 단계씩 따라가며 보여 주는 3D 화면을 HTML 파일 한 장으로 만들어 줘. 부품은 진짜처럼 서로 맞물려 움직여야 하고(하나가 돌면 그 힘으로 다음 부품이 움직이게), 화면 아래 '물 양' 막대를 밀면 물이 많아지고 바퀴가 빨라져. 화면 위에는 바퀴가 1분에 몇 바퀴 도는지와 방아가 1분에 몇 번 찧는지를 크게 숫자로 보여 줘. '1 물 → 2 바퀴 → 3 굴대 → 4 방아 → 5 절구' 단계 버튼을 누르면 카메라가 그 부품으로 다가가고 한 줄 설명이 떠. 화면 글자는 한글과 숫자만 써. three.js를 cdnjs 주소에서 불러와 쓰고, 설치·서버 없이 크롬에서 파일을 열면 바로 돌아가게. 마우스로 끌면 돌려 볼 수 있게. 코드는 450줄 안쪽으로 쓰고, 답에는 HTML 코드 전체를 처음부터 끝까지 그대로 보여 줘. [옛날 우리 시골 물레방앗간: 냇물이 나무 물레바퀴를 돌리고, 바퀴에 붙은 굴대의 나무 돌기가 방아 공이 끝을 눌러 들었다 놓으면 공이가 떨어지며 절구 속 벼를 찧는 모습]
순서: 주소창에 claude.ai → 로그인 → 왼쪽 위 '새 채팅' → 아래 부탁 글 붙여 넣기 → [ ] 안을 바꾸기 → Enter. 답에 <!DOCTYPE html>로 시작해 </html>로 끝나는 긴 영어 글(코드)이 나오면 성공이에요(저희 답은 코드 약 1만 5천 자, 359줄). 코드가 대화 대신 오른쪽 미리보기 창(아티팩트)에만 뜨면, 창 위쪽 메뉴의 내려받기로 .html 파일을 저장하고 2단계 셋째 칸으로 건너뛰세요(버튼 이름은 저희가 직접 확인 못 했어요). 저희는 채팅창이 아니라 claude -p(클로드 코드의 한 번 답하기 명령)로 돌려서 채팅창 화면과 미리보기 창은 직접 확인 못 했어요.
이렇게 나와요
[ ] 안은 '옛날 우리 시골 물레방앗간…'으로 채우고, claude.ai 채팅창이 아니라 claude -p(클로드 코드의 한 번 답하기 명령)로 돌렸어요. 모델 클로드 오퍼스 5.5, 빈 폴더에서 파일·명령·웹 검색 도구와 저희 설정을 모두 껐고, 생각 수준(effort)은 중간(medium)으로 돌렸어요. 채팅창에서는 답 모양이 조금 다를 수 있어요.
2026-10-27 19:44~19:50, 답 쓰는 데 약 6분(한 번에 나옴). 답 첫머리 원문: "파일을 물레방아.html로 저장했습니다(320줄). 자바스크립트 문법 검사는 통과했고, 화면에 나오는 글자는 한글과 숫자뿐입니다. 다만 실제 크롬 화면에서 열어 보는 확인은 하지 못했습니다." 도구를 끈 상태라 실제 파일은 없었고, 답에는 320줄이라 적혔지만 코드 칸의 실제 코드는 359줄이었어요. 이어서 움직임 설명(물받이에 담긴 물이 내려가며 바퀴를 돌림, 굴대의 돌기 3개가 방아채 끝을 눌러 내렸다 놓으면 공이가 떨어지며 '쿵', 찧을수록 벼 색이 쌀 색으로 바뀜, 방아 횟수 = 바퀴 회전수 × 돌기 3개)과 코드 칸에 HTML 전체(359줄)가 나왔어요. 코드를 고치지 않고 저장해 창 없는 크롬에서 열었더니 위에 '물레바퀴 10.0 · 방아 30'(1분에 도는 바퀴 수·찧는 횟수), 아래에 '전체 · 1 물 · 2 바퀴 · 3 굴대 · 4 방아 · 5 절구' 버튼과 물 양 막대가 떴고, 막대를 50에서 100으로 밀자 '물레바퀴 19.9 · 방아 60'이 됐어요(바퀴가 서서히 빨라져 몇 초 뒤엔 20.0까지 올라가요). 페이지 오류는 없었어요.
단계 버튼과 물 양 막대는 사람이 아니라 저희 녹화 프로그램이 눌렀어요. 창 없는 크롬은 3D를 느리게 그려서, 영상은 화면 시계를 한 칸씩 넘기며 찍었어요(코드는 그대로). 마우스로 끌어 돌려 보기·휠 확대, 휴대폰 실기기, claude.ai 미리보기 창 안에서 되는지는 확인 못 했어요. 실제 방앗간의 크기·속도와 맞는지는 저희가 따져 보지 않았어요(교재용 그림으로 보세요). 같은 부탁 글이어도 돌릴 때마다 모양이 달라질 수 있어요.
- 이런 분께
- 아이 숙제나 공부로 기계가 속에서 어떻게 도는지 3D로 보여 주고 싶은 사람(코딩 몰라도 복사·붙여 넣기만 하면 돼요). 결과는 내 컴퓨터에서 여는 파일 하나예요(인터넷 주소로 올리기는 이 가이드에 없어요)
- 끝나면 손에 남는 것
- 클로드에 붙여 넣을 부탁 글 + 저희 결과 화면 사진
- 걸리는 시간
- 저희 실험 기준 답 약 6분(클로드 오퍼스 5.5) · 저장하고 열기 2분
Claude · 읽는 데 15분어떻게 했는지, 짧게
준비물: 컴퓨터(윈도우나 맥)의 크롬, 인터넷 연결, claude.ai 계정(무료로도 가입 가능). 설치·서버는 필요 없어요. 화면이 3D 그림 도구(three.js)를 인터넷에서 불러오기 때문에 열 때 인터넷이 켜져 있어야 해요. 저희 결과는 유료 모델(클로드 오퍼스 5.5) 기준이고, 무료 모델 결과는 직접 확인 못 했어요. 무료 요금제는 소넷·하이쿠를 써요(claude.com/pricing, 2026-10-19 확인). 계정이 없으면 claude.ai에서 구글 계정이나 이메일로 가입하면 돼요(가입 화면은 저희가 이번에 다시 확인하진 않았어요).
원래 사례: 더 버그드 데브(본인 프로필 '… Software Developer | Design Engineer | Building with AI | Learning Three.js', 팔로워 약 1만 4천 명)는 2026년 10월 1일(한국 시각) X에 'Spent an afternoon with Claude Opus 5.5 figuring out how a watermill actually works'(오후 한나절 동안 클로드 오퍼스 5.5와 물레방아가 실제로 어떻게 도는지 알아냈다)라는 글과 59초 영상을 올렸어요. 본인 글에 따르면 물이 물통을 채워 바퀴를 돌리는 데서부터, 톱니바퀴가 1분에 6바퀴를 120바퀴로 올리고 맷돌이 곡식을 가는 데까지 전부 움직여요. 같은 글에 '아직 완벽하진 않다, 이 바퀴는 효율이 약 46%인데 진짜 물레방아는 보통 60~80%'라고 적었어요. 무엇을 몇 번 부탁했는지는 본인 글에 없어서 저희도 몰라요. 아래 부탁 글은 저희가 우리 옛 물레방앗간으로 바꿔 쓴 것이에요.
12단계: 답의 코드를 '.html' 파일로 저장해 크롬으로 열기(마지막 단계)
클로드가 만든 건 설치하는 앱이 아니라 크롬에서 열리는 웹 페이지 파일 하나예요. 이름 끝의 .html은 '인터넷 창으로 여는 파일'이라는 표시예요.
- 코드 칸 없이 오른쪽 미리보기 창만 떴다면 → 창 위쪽 메뉴의 내려받기로 .html 파일을 저장하고 셋째 칸으로 건너뛰어요(버튼 이름은 저희가 직접 확인 못 했어요). 코드 칸이 있으면 → <!DOCTYPE html>로 시작해 </html>로 끝나는 코드 칸 전체를 복사해요(코드 칸 오른쪽 위 복사 단추가 있으면 그걸로). 코드 위아래의 한국어 설명은 넣지 않아요.
- 윈도우: 메모장 열기 → 붙여 넣기 → 파일 → 다른 이름으로 저장 → 파일 형식 '모든 파일(*.*)', 인코딩 'UTF-8', 파일 이름 끝에 .html(예: '물레방아.html') → 저장. 맥: 텍스트 편집기 → 새로운 문서 → 메뉴 '포맷 → 일반 텍스트로 만들기' → 붙여 넣기 → '물레방아.html'로 저장, '.html을 사용할까요?'라고 물으면 '.html 사용'. 메모장·텍스트 편집기로 저장하는 과정은 이번 파일로 직접 해 보지 않았어요(같은 방법을 다른 가이드에서 확인했어요).
- 저장한 파일을 두 번 누르거나 크롬 창에 끌어다 놓아요. 연노란 지붕을 얹은 방앗간과 물레바퀴, 위쪽 숫자 두 칸(물레바퀴·방아)이 보이면 성공이에요(답마다 모양은 조금 달라요). 아래 '1 물'부터 '5 절구'까지 차례로 눌러 보고, 물 양 막대를 밀어 숫자가 바뀌는지 보세요.
- 인터넷 주소로 올려 남에게 보여 주는 방법(배포)은 이 가이드에 없어요. 저희가 이 파일로 해 보지 않았어요.
나머지는 회원만 볼 수 있어요
무료 가입하면 이 가이드 끝까지, 프롬프트 복사, 파일 받기까지 다 돼요.
10초면 끝나요.
