Claude

12단계 · Artifacts로 인터랙티브 수업 도구 만들기

그래프, 도형, 퀴즈처럼 바로 실행되는 결과물을 요청하는 법입니다.

1. Artifacts란 무엇인가

Artifacts는 클로드가 대화 답변과 별도로, 바로 실행해볼 수 있는 결과물을 옆 화면에 띄워주는 기능입니다. 코드를 몰라도 "이런 걸 만들어줘"라고 설명만 하면, 클로드가 스스로 코드를 짜서 눈으로 보고 조작할 수 있는 화면을 만들어줍니다. 지금 보고 있는 이 "수수의 수학" 사이트의 여러 도구도 이런 방식으로 만들어졌습니다.

2. 수학 수업에서 만들 수 있는 것

  • 그래프·함수 시각화 — "일차함수의 기울기를 슬라이더로 바꿔보는 그래프를 만들어줘"
  • 도형 실험 도구 — "삼각형 세 변의 길이를 입력하면 넓이를 계산해서 그려주는 도구"
  • 간단한 형성평가 퀴즈 — "이차방정식 개념 확인 퀴즈 5문항, 정답 확인 버튼 포함"
  • 반복 계산 워크시트 — 같은 유형의 계산을 여러 번 연습할 수 있는 도구

3. 요청하는 법

3단계에서 배운 대로 맥락과 형식을 구체적으로 담아 요청하세요.

프롬프트 예시

"일차함수 y=ax+b에서 a와 b를 슬라이더로 조절하면 그래프가 바로 바뀌는 웹페이지를 만들어줘. 학생들이 기울기와 절편의 의미를 직관적으로 이해할 수 있도록 안내 문구도 넣어줘."

실습 · 실제 Artifact 예시

일차함수 y = ax + b 그래프

위 프롬프트를 클로드에게 그대로 주면 이런 결과물을 받게 됩니다. 슬라이더를 움직여 기울기(a)와 절편(b)이 그래프를 어떻게 바꾸는지 직접 확인해보세요.

1.0
0.0

y = 1.0x + 0.0

4. 수정하고 발전시키기

처음 만든 결과물이 마음에 들지 않아도 괜찮습니다. 같은 대화에서 이어서 다듬으면 됩니다.

  • "슬라이더 색깔을 더 선명하게 해줘"
  • "문제를 5개 더 추가해줘"
  • "모바일 화면에서도 잘 보이게 크기를 조정해줘"

5. 수업에 쓰기 전 확인할 것

학생에게 보여주기 전 직접 써보세요

4단계에서 배운 검증 습관과 마찬가지로, 계산 결과나 그래프가 정확한지 직접 조작해보고 확인한 뒤 수업에 쓰세요. 특히 복잡한 수식이 들어간 도구는 몇 가지 값을 넣어 손으로 계산한 값과 비교해보세요.

이전 단계 · Projects로 자료·지침 정리하기 다음 단계 · 코드 사용법