로켓 엔진을 반으로 잘라 보는 3D 교재, 지시문 한 장으로
한국어 지시문 1개 + 저희가 돌려 본 결과 화면. 공장 자동화 창업자 콘스탄틴 사이풀린이 클로드로 만든, 브라우저에서 뜯어 보는 로켓 엔진(랩터 3) 3D 교재
2026년 10월 23일 올림 · 10월 22일 확인
대화창에 이것만 붙여 보세요
원본 지시문은 비공개라, 원글이 보여 준 네 가지(반으로 자르기 · 산소·메탄 흐름 · 출력 올리면 충격파 무늬 · 부품 설명)를 저희가 한국어로 적은 지시문이에요. 저희가 실제로 넣어 본 그 글 그대로예요.
HTML 파일 하나로, 브라우저에서 뜯어 보는 로켓 엔진 3D 교재를 만들어 줘. three.js만 쓰고(CDN 한 줄), 내려받은 3D 모델·그림 파일 없이 전부 코드로. 엔진은 액체산소와 메탄을 쓰는 로켓 엔진 하나. 위에서 아래로 배관 → 터보펌프 2개(산소 쪽, 메탄 쪽) → 연소실 → 노즐 순서가 한눈에 보이게. 할 수 있는 것 네 가지: 1. '반으로 자르기' 버튼을 누르면 엔진이 세로로 잘려 속이 보이게. 2. 산소는 파란 빛 줄, 메탄은 주황 빛 줄로 배관을 따라 흘러서 펌프를 지나 연소실로 들어가게. 3. 화면 아래 출력 막대를 올리면 흐름이 빨라지고, 노즐 뒤 불꽃이 길어지면서 충격파 무늬(쇼크 다이아몬드)가 생기게. 4. 부품을 누르면 이름과 하는 일을 한국어 한 줄로 보여 줘. 처음 열면 아무것도 안 눌러도 30초 동안 저절로 보여 주게: 엔진 한 바퀴 돌기 → 반으로 잘리기 → 산소·메탄 흐름 켜기 → 출력 올려 불꽃 커지기. 글꼴은 고딕 계열(sans-serif)만, 숫자는 교재용 어림값이라고 화면 구석에 작게 적어 줘.
claude.ai 에 들어가 로그인 → 왼쪽 위 '새 채팅' → 위 칸을 통째로 붙여 넣고 Enter. 답에 HTML 코드가 나오면 성공이에요. 대화창에서는 코드가 오른쪽 미리보기 창(아티팩트)이나 코드 칸으로 와요. 미리보기 창에서 바로 돌아가는지 먼저 보고, 빈 화면이거나 안 되면 바로 코드 칸 오른쪽 위 복사 단추로 복사해 저장해요(대화창 화면은 저희가 확인 못 했어요, 저희는 클로드 코드가 파일로 바로 저장). 코드가 </html> 로 끝나야 다 받은 거예요. 저장: 윈도우는 시작 단추 → '메모장' → 붙여 넣기 → '파일 → 다른 이름으로 저장' → '파일 형식: 모든 파일', '인코딩: UTF-8' → 바탕화면, 이름 rocket.html → 저장 / 맥은 Finder → 응용 프로그램 → 텍스트 편집기 → 파일 고르는 창이 먼저 뜨면 '새로운 문서' → '포맷 → 일반 텍스트로 만들기' → 붙여 넣기 → '파일 → 저장' → 바탕화면, 이름 rocket.html → '.html 사용'. 열기: rocket.html 오른쪽 클릭 → '연결 프로그램'(맥은 '다음으로 열기') → Google Chrome. 인터넷이 켜져 있어야 해요(three.js를 인터넷에서 불러와요). 어두운 화면 가운데 엔진이 한 바퀴 돌기 시작하면 성공이에요. 모델: 원본은 클로드 오퍼스 5.5, 저희 실험은 클로드 소네트 5.5였어요. 대화창에서 모델 고르는 메뉴는 저희가 화면으로 확인하지 못해서 이름을 적지 않았어요.
이렇게 나와요
위 칸 그대로에 저장 안내 한 줄('index.html 한 파일로 이 폴더에 저장해 줘')만 덧붙여 클로드 코드(claude -p, 클로드 소네트 5.5)에 넣었어요. 파일 읽기·쓰기·고치기만 허용하고 웹 검색과 터미널은 막았어요(대화창처럼 AI가 직접 실행해 보지 못하는 조건). 무료 대화창에는 직접 넣어 보지 못했어요.
2026-10-22 19:44(한국 시각)에 넣었고 8분 18초 뒤 HTML 한 파일(약 3만 5백 자, 그림 파일 없이 코드만)이 나왔어요. 클로드는 끝에 "브라우저에서 한 번도 열어 보지 못했습니다"라고 먼저 밝혔어요.
저희가 직접 확인한 것: 창 없는 크롬으로 열어 34초 녹화 — 콘솔 오류 0건. 엔진(배관 → 터보펌프 2개 → 연소실 → 노즐)이 한 바퀴 돌고, 반으로 잘려 속이 보이고, 파란·주황 흐름이 켜진 뒤, 출력이 올라가며 노즐 뒤 불꽃과 마름모꼴 충격파 무늬가 커졌어요(사진 왼쪽은 시간표 9초, 자르기가 막 시작된 순간(저희 녹화로는 12초), 오른쪽은 속이 드러난 구리색 연소실·노즐과 노즐 뒤 불꽃). 왼쪽 위에 단계 설명, 오른쪽 위에 추력·압력 숫자, 오른쪽 아래에 '교재용 어림값' 문구가 떴어요.
클로드가 보고한 것(저희가 하나하나 눌러 보진 않았어요): 부품 8가지(산소 배관·메탄 배관·산소 펌프·메탄 펌프·터빈·분사기·연소실·노즐)를 누르면 한 줄 설명, 화면을 끌거나 버튼을 누르면 시연이 멈추고 직접 조작, '30초 시연 다시 보기' 버튼.
저희 결과는 원본(랩터 3 교재)보다 훨씬 단순해요. 원본은 본인이 깃허브에 공개한 대로 여러 파일로 나눈 큰 프로젝트이고, 저희 것은 지시문 한 번에 나온 파일 하나예요. 숫자(추력·압력)는 클로드가 넣은 교재용 어림값이에요.
- 이런 분께
- 로켓 엔진 원리를 눈으로 보고 싶은 사람, 궁금한 기계를 3D로 뜯어 보는 교재를 클로드로 만들어 보고 싶은 사람
- 끝나면 손에 남는 것
- 한국어 지시문 1개 + 저희가 돌려 본 결과 화면
- 걸리는 시간
- 저희 실험 기준(클로드 코드로 대화창 조건 흉내) 8분 18초
Claude · 읽는 데 8분어떻게 했는지, 짧게
콘스탄틴 사이풀린(X @konstantinsaifo)은 소개에 'Founder of @AirsupHQ, Building autonomous factories in the US'라고 쓴 사람이에요. 2026-09-27(한국 시각 오후) '클로드 오퍼스 5.5에게 로켓 엔진이 어떻게 도는지 설명해 달라고, 브라우저에서 뜯어 볼 수 있는 랩터 3를 만들게 했다'며 35초 영상과 체험 주소를 올렸어요. 잘라 열고, 산소와 메탄이 터보펌프 두 개를 지나는 길을 따라가고, 출력을 올리면 충격파 무늬가 움직인대요. 다음 날엔 핵융합로·사이버트럭·전투기 엔진 등 기계 열한 대를 깃허브에 코드째 공개했어요(MIT 라이선스).
원글 원문(요청 문장): "I asked Claude Opus 5.5 to explain how a rocket engine works by building an interactive Raptor 3 you can take apart in your browser." — 로켓 엔진이 어떻게 도는지, 브라우저에서 뜯어 볼 수 있는 랩터 3를 만들어서 설명해 달라고 했다는 뜻이에요. 이 문장이 지시문 전체인지는 본인이 밝히지 않았어요.
1한국어 지시문 1개 + 저희가 돌려 본 결과 화면
맨 위 칸의 지시문과 결과예요. 원본 영상에서 본 네 가지 동작을 그대로 적고, 처음 열면 30초 동안 저절로 보여 주게 했어요. 글꼴은 고딕만 쓰게 적었어요(화면 글자가 명조로 뜨는 걸 피하려고).
- 저희 결과(클로드 소네트 5.5, 2026-10-22 19:44~19:52): 클로드가 적은 자동 시연 시간표 — 0~8초 한 바퀴, 9초 절단, 14초 흐름 켜기, 19~27초 출력 40%에서 100%로, 30초 끝. 저희 녹화에선 창 없는 크롬이라 조금 느려 32초쯤에 출력 65%였어요.
- 이 지시문의 힘은 '로켓 엔진 설명해 줘'가 아니라 '할 수 있는 것 네 가지'를 버튼과 화면 변화로 적은 데 있어요. 그래서 설명 글 대신 직접 누르고 보는 교재가 나와요.
나머지는 회원만 볼 수 있어요
무료 가입하면 이 가이드 끝까지, 프롬프트 복사, 파일 받기까지 다 돼요.
10초면 끝나요.
