AI로 반응속도 테스트 만들기

준비물

• 컴퓨터
• Claude 무료 계정 (claude.ai), 또는 ChatGPT 무료 계정
• 프로그램 설치는 필요 없습니다

이런 결과가 나옵니다

화면이 초록색으로 바뀌는 순간 누르는 반응속도 테스트. 5번 측정해 평균과 최고 기록, 등급을 알려주고, 결과를 친구에게 보내는 버튼이 있습니다.

따라 하기

1. 1

   claude.ai에 들어가 로그인하기

   인터넷 창에서 claude.ai 를 열고 로그인합니다. 가입은 무료입니다. ChatGPT는 chatgpt.com 입니다.

   이렇게 되면 성공아래쪽에 글을 쓰는 대화창이 보이면 됩니다.

2. 2

   프롬프트 붙여넣고 보내기

   아래 프롬프트를 복사해 대화창에 붙여넣고 보냅니다. 등급 이름을 정해 두었다면 그 줄을 고치고 보냅니다.

   붙여넣을 프롬프트프롬프트 복사

   반응속도 테스트를 만들어줘. 인터넷 창에서 바로 할 수 있게 파일 하나로 만들어줘.
   
   - 화면에 큰 영역이 있어. "눌러서 시작"을 누르면 빨간 화면에 "기다리세요"가 떠
   - 1.5초에서 4초 사이 아무 때나 화면이 초록색으로 바뀌고 "지금!"이 떠. 그때 누르면 걸린 시간이 밀리초(ms)로 나와
   - 초록색이 되기 전에 누르면 "너무 빨랐어요"라고 알려주고 그 라운드를 다시 해
   - 총 5라운드를 하고, 끝나면 평균 기록, 최고 기록, 등급을 한 줄로 보여줘
   - 등급은 재미있는 이름으로 네가 정해줘 (예: 번개, 고양이, 거북이)
   - 결과 화면에 "결과 보내기" 버튼. 누르면 휴대폰에서는 공유 창이 뜨고, 컴퓨터에서는 결과 글이 복사돼
   - 컴퓨터에서는 스페이스바를 눌러도 화면을 누른 것과 같게 해줘
   - 휴대폰 화면에서 먼저 보기 좋게. 설명 글은 한국어

   내 것으로 바꿀 곳

   • 등급 이름을 직접 정하면 더 재미있습니다. 예: "반사신경 괴물", "졸린 판다".
   • 라운드 수(5번)를 3번이나 10번으로 바꿀 수 있습니다.
   • "동물 소리가 나게" 같은 요소는 나중에 말로 추가합니다.

   더 자세히 지시하고 싶다면 (조금 기술적인 버전)

   이 버전 복사

   반응속도 테스트를 HTML 파일 하나로 만들어줘.
   - 큰 버튼 영역: "탭해서 시작" → 빨간 배경 "기다리세요" (1.5~4초 랜덤) → 초록 "지금!" → 탭하면 ms 표시
   - 너무 빨리 누르면 "너무 빨랐어요" 하고 그 라운드 다시
   - 5라운드 후 결과: 평균, 최고, 등급 한 줄
   - "결과 복사" 버튼: navigator.share 되면 그걸로, 아니면 클립보드. 문구 끝에 페이지 주소
   - 스페이스바도 탭으로 인식
   - 모바일 우선

   이렇게 되면 성공Claude는 화면 오른쪽 결과물 창에 "눌러서 시작" 화면이 나타납니다.

   팁ChatGPT에서 코드만 길게 나오면 "바로 해볼 수 있게 Canvas로 보여줘"라고 말해보세요.

3. 3

   한 번 끝까지 해보기

   화면을 클릭해 시작합니다. 빨간 화면에서 기다렸다가, 초록색이 되는 순간 클릭하세요. 5번 하면 결과가 나옵니다. 일부러 일찍 눌러 "너무 빨랐어요"가 뜨는지도 봅니다.

   이렇게 되면 성공밀리초 기록이 나오고, 5번 뒤에 평균과 등급이 표시되면 성공입니다.

   팁클릭이 안 먹으면 게임 화면을 먼저 한 번 눌러 보세요. 스페이스바를 쓰는 경우에도 같습니다.

4. 4

   말로 고치기

   재미 요소와 문구를 말로 바꿉니다.

   팁이렇게 말하면 됩니다. "등급 이름을 동물로 바꿔줘", "라운드를 3번으로 줄여줘", "기록이 200ms 아래면 번개 등급", "결과 보내기 글에 평균 기록을 먼저 보여줘"

5. 5

   결과 보내기 버튼 확인하기

   컴퓨터에서 "결과 보내기" 버튼을 누르고 메모장에 붙여넣어 봅니다. 글이 복사되어 있어야 합니다.

   이렇게 되면 성공붙여넣은 글에 평균 기록과 등급이 들어 있으면 성공입니다.

   팁링크를 만든 뒤 "보내기 글 끝에 이 주소를 넣어줘"라고 하면 친구가 바로 도전할 수 있습니다.

6. 6

   링크로 만들어 단체방에 올리기

   결과물 창 오른쪽 위 Publish(게시) 버튼으로 링크를 만들어 카톡에 붙여넣습니다. 자세한 순서는 아래 "링크로 공유하기"를 보세요.

   이렇게 되면 성공휴대폰에서 링크를 열어 화면을 손가락으로 눌러 측정이 되면 완성입니다.

막히면

다음에 해볼 것

• 같은 구조로 타자 속도 테스트, 색깔 구분 테스트도 쉽게 만듭니다.
• 친구들 점수를 한곳에 모으려면 별도 저장소가 필요해 단계가 올라갑니다. 먼저 혼자 하는 버전으로 충분히 돌려보세요.

여기 쓰인 기능

다른 레시피