클로드 아티팩트 + 리액트: 교사가 20분 만에 각도 수업용 미니 골프 게임을 만든 방법

한 선생님(u/cram213)이 Claude를 사용하여 각도를 가르치는 미니어처 골프 게임을 빠르게 제작했습니다. 학교 제한을 우회하기 위해 Artifacts에서 원시 HTML로 내보냈습니다. 음성으로 휴대폰에 프롬프트를 입력하여 게임을 출시하기까지 전체 작업 흐름은 약 20분이 걸렸습니다.

작업 흐름

• 초기 제작: Claude의 Artifact 기능과 React를 사용하여 선생님은 각도를 시각적으로 보여주는 플레이 가능한 미니 골프 게임을 만들었습니다. 학교에서는 Gemini를 사용하므로 게시된 Artifacts URL에 접근할 수 없었습니다.
• 내보내기 해결책: 선생님은 Claude에게 Artifact를 독립형 HTML 파일로 변환하도록 요청한 후, 개인 웹사이트(constraintlayer.ai/educational-engines/golf.html)에 호스팅했습니다.
• 반복 작업: 휴대폰으로 프롬프트를 말하고, Artifact 미리보기에서 게임을 테스트한 후 Claude에 피드백을 제공하는 과정을 반복했습니다.
• 학생 확장: 학생들이 게임을 플레이한 후, 종이에 자신만의 코스 디자인을 그렸습니다. 선생님은 각 그림을 Claude에 업로드했고, 약 1분 만에 학급이 맞춤 코스를 플레이할 수 있었습니다.

주요 기술적 요점

선생님은 시스템 엔지니어처럼 생각하는 것을 강조합니다: 문제를 설명하고, 예외 상황("학생들이 할 수 있는 어리석은 행동")을 계획하며, 배포 제약 조건에 맞는 올바른 출력 형식을 선택하는 것입니다. React를 사용한 Artifacts는 프로토타이핑에 좋지만, 외부 종속성이 없는 일반 HTML로 내보내면 학교 네트워크에서 항상 작동합니다. Gemini나 Claude Artifact URL이 필요 없습니다.