Claude Artifacts로 수업 자료 실시간 생성 | 학생에게 바로 공유 — 교사용 활용법
Claude 웹에서 '아티팩트'라는 기능 보셨나요? 코드, 문서, 시각자료가 오른쪽 패널에 바로 뜨는 거요. 이걸 수업 중에 실시간으로 쓸 수 있습니다.
수업 준비하다가 "이 개념을 그림으로 보여주면 좋겠는데..." 하는 순간 있잖아요. 그때 Claude한테 한 줄만 쓰면 인포그래픽이든, 인터랙티브 교구든, 요약 문서든 바로 만들어져서 화면에 뜹니다. 파일 저장할 필요도 없고, 브라우저 탭을 왔다 갔다 할 필요도 없어요.
오늘은 이 Artifacts 기능을 수업 현장에서 실시간으로 쓰는 구체적인 방법을 알려드리겠습니다.
📌 한눈에 보기
- 대상: Claude 웹(claude.ai)을 사용하는 교사
- 핵심 기능: Artifacts — 대화창 오른쪽에 코드/문서/시각자료가 실시간으로 생성되는 패널
- 활용 시나리오: 인포그래픽 / HTML 인터랙티브 교구 / 수업 문서
- 학생 공유: 공개 링크 1개로 바로 공유 가능
- 비용: Claude Free 플랜에서도 사용 가능 (횟수 제한 있음)
Artifacts가 뭔가요?
Claude 웹(claude.ai)에서 대화를 하다 보면, Claude가 코드나 문서를 만들 때 오른쪽에 별도 패널이 열리면서 결과물이 바로 표시되는 걸 본 적 있으실 겁니다. 이게 바로 Artifacts입니다.
보통 AI 채팅에서는 코드가 텍스트로만 나오잖아요. 그걸 복사해서 파일로 저장하고, 브라우저에서 열어봐야 결과를 확인할 수 있고요. Artifacts는 이 과정을 없앱니다. 만들어진 결과물이 바로 화면에 렌더링되니까요.
❌ 일반 AI 채팅
코드 생성 → 복사 → 파일 저장 → 브라우저에서 열기 → 확인
결과를 보려면 5단계
✅ Claude Artifacts
"이거 만들어줘" → 오른쪽 패널에 바로 표시!
요청하는 즉시 결과 확인
Artifacts가 지원하는 결과물 유형은 다양합니다.
- HTML/CSS/JavaScript: 인터랙티브 교구, 퀴즈, 타임라인, 다이어그램 등이 바로 실행됨
- SVG 그래픽: 인포그래픽, 개념도, 플로차트 등 시각자료
- React 컴포넌트: 더 복잡한 인터랙티브 앱 (차트, 시뮬레이션 등)
- 마크다운 문서: 수업 자료, 가이드, 정리 노트
- 코드: Python, JavaScript 등 코드 파일
교사 입장에서 중요한 건, 이 중에서 HTML과 SVG가 수업에 가장 유용하다는 겁니다. 브라우저에서 바로 돌아가는 교구나 시각자료를 대화 한 번으로 뚝딱 만들 수 있으니까요.
활용 시나리오 3가지
그래서 구체적으로 어떻게 쓰냐고요? 수업에서 가장 자주 쓰게 되는 3가지 시나리오를 보여드리겠습니다.
🎨 시나리오 1: 인포그래픽 — 개념 시각화
상황: 통합사회 수업에서 "인권의 발전 과정"을 시간 순서대로 보여주고 싶다.
기존 방식: 파워포인트에서 도형 하나하나 그리거나, 캔바에서 템플릿 찾아서 수정. 30분~1시간 소요.
Artifacts 방식: Claude에게 "인권 발전 과정 타임라인 인포그래픽 만들어줘"라고 요청. 30초 뒤 오른쪽 패널에 SVG 타임라인이 뜬다. 색상이나 내용 수정은 후속 대화로 즉시 반영.
결과물: 마그나카르타(1215) → 권리장전(1689) → 미국 독립선언(1776) → 프랑스 인권선언(1789) → 세계인권선언(1948) 순서의 시각적 타임라인
💻 시나리오 2: HTML 인터랙티브 교구
상황: 학생들이 직접 클릭하면서 풀 수 있는 OX퀴즈를 수업 도중에 급하게 만들어야 한다.
기존 방식: 구글 폼에서 문항 입력하고 설정 만지고... 시간이 없으면 그냥 구두로 출제.
Artifacts 방식: Claude에게 "통합사회 인권 단원 OX퀴즈 5문항 HTML로 만들어줘"라고 요청. Artifacts 패널에 바로 작동하는 퀴즈가 뜬다. 정답 체크, 점수 표시까지 다 된다.
결과물: 학생이 O/X 버튼을 클릭하면 즉시 정답 여부가 표시되고, 마지막에 총점이 나오는 인터랙티브 퀴즈
📄 시나리오 3: 수업 문서 — 요약/활동지
상황: 수업 마무리 때 오늘 배운 내용을 정리한 1페이지 요약지를 학생에게 바로 나눠주고 싶다.
기존 방식: 한글(hwp)이나 워드에서 문서 작성 후 인쇄. 수업 끝나기 전에 완성이 안 될 때가 많다.
Artifacts 방식: Claude에게 "오늘 수업 내용(인권의 의미, 천부인권 사상, 사회계약론) 1페이지 요약지 만들어줘"라고 요청. 깔끔하게 정리된 문서가 Artifacts에 뜬다. 인쇄용 스타일까지 포함시킬 수 있다.
결과물: 핵심 개념, 키워드 정리, 빈칸 채우기 문제가 포함된 A4 1매 분량의 요약지
실시간 수업에서 이렇게 씁니다
Artifacts의 진짜 힘은 "수업 중에 바로" 쓸 수 있다는 겁니다. 수업 전에 미리 만들어 놓는 것도 물론 좋지만, 수업 중에 학생 반응을 보고 즉석에서 자료를 만들 수 있다는 게 결정적인 차이입니다.
① 수업 전: 기본 자료 미리 생성
수업 시작 전에 Claude와 대화하면서 인포그래픽, 퀴즈 등 기본 자료를 만들어 둡니다. Artifacts 패널에 결과물이 쌓이니까, 수업 중에 탭만 전환하면서 보여줄 수 있습니다.
② 수업 중: 학생 질문에 즉석 대응
학생이 "선생님, 이게 무슨 뜻이에요?"라고 물으면, 그 자리에서 Claude에게 "이 개념을 비유로 설명하는 그림 만들어줘"라고 요청합니다. 10~20초 뒤에 시각자료가 뜨고, 그걸 빔프로젝터로 바로 보여줍니다.
이때 핵심은 같은 대화 안에서 후속 요청을 하는 겁니다. "방금 만든 그림에서 색상을 좀 더 밝게 해줘", "여기에 예시 하나 더 추가해줘" 같은 수정이 바로바로 됩니다.
③ 수업 마무리: 정리 자료 즉시 배포
수업이 끝나기 5분 전, "오늘 수업 내용 핵심만 정리한 요약 카드 만들어줘"라고 요청합니다. 완성된 Artifacts를 공개 링크로 공유하면, 학생들이 스마트폰으로 바로 열어볼 수 있습니다.
💡 실시간 활용의 핵심: 프로젝터 + 듀얼 화면
교실 빔프로젝터에 Claude 화면을 띄워 놓으면, 학생들이 AI가 자료를 만드는 과정을 실시간으로 봅니다. "선생님이 AI한테 이렇게 말하면 이런 게 나오는구나"를 자연스럽게 보여줄 수 있어서, AI 리터러시 교육 효과도 덤으로 얻습니다.
학생에게 공유하는 방법
만든 자료를 학생에게 보내는 방법은 크게 세 가지입니다.
방법 1: 공개 링크 공유 (가장 간편)
- Artifacts 패널 오른쪽 상단의 "Publish" 버튼을 클릭합니다.
- 공개 링크(URL)가 생성됩니다.
- 이 링크를 학급 단체 채팅방(카카오톡, 클래스팅 등)에 공유합니다.
- 학생이 링크를 클릭하면 브라우저에서 바로 열립니다. 로그인도 필요 없습니다.
💡 공개 링크 특징
Publish된 Artifacts는 Claude 계정이 없어도 누구나 볼 수 있습니다. HTML 교구라면 인터랙티브 기능(버튼 클릭, 퀴즈 풀기 등)도 그대로 작동합니다. 별도 앱 설치가 필요 없어서 학생 접근성이 매우 좋습니다.
방법 2: 코드 다운로드 후 배포
- Artifacts 패널에서 코드 보기 아이콘을 클릭합니다.
- HTML 소스 코드 전체를 복사합니다.
- 메모장에 붙여넣고
.html파일로 저장합니다. - 이 파일을 구글 드라이브, 학교 LMS, 또는 GitHub Pages에 업로드합니다.
파일로 저장하면 인터넷 없이도 사용할 수 있고, 학교 서버에 올려서 영구적으로 보관할 수도 있습니다.
방법 3: QR코드로 즉시 접속
- Publish로 공개 링크를 만듭니다.
- QR코드 생성 사이트(예: qr.io)에서 해당 URL로 QR코드를 만듭니다.
- QR코드를 빔프로젝터에 띄웁니다.
- 학생이 스마트폰 카메라로 스캔하면 바로 접속!
수업 중에 "자, 이 QR코드 찍어서 퀴즈 풀어보세요"라고 하면, 30초 안에 전원 접속 완료됩니다.
바로 쓸 수 있는 프롬프트 예시 3개
아래 프롬프트를 claude.ai에 그대로 붙여넣으면 Artifacts가 생성됩니다. 과목과 단원만 여러분 상황에 맞게 바꿔서 쓰세요.
📝 프롬프트 1: 개념 비교 인포그래픽
통합사회 수업 자료를 만들어줘.
주제: "자연법 사상 vs 사회계약론" 개념 비교 인포그래픽
[조건]
- SVG 또는 HTML로 만들어줘
- 왼쪽에 자연법 사상, 오른쪽에 사회계약론을 배치
- 각각의 핵심 개념, 대표 사상가, 주요 주장을 포함
- 두 사상의 공통점은 가운데 겹치는 영역에 표시
- 색상은 파랑 계열(자연법)과 초록 계열(사회계약론)로 구분
- 고등학생이 한눈에 이해할 수 있도록 간결하게
- 한국어로 작성📝 프롬프트 2: 인터랙티브 OX퀴즈 교구
HTML로 인터랙티브 OX퀴즈를 만들어줘.
[조건]
- 과목: 통합사회
- 단원: 인권 보장과 헌법
- 문항 수: 8문항
- 기능:
- O/X 버튼을 클릭하면 정답 여부가 즉시 표시
- 정답이면 초록색 배경 + "정답입니다!" 메시지
- 오답이면 빨간색 배경 + 정답과 해설 표시
- 모든 문항을 풀면 최종 점수와 등급(A/B/C) 표시
- 상단에 진행률 바(progress bar) 표시
- 디자인: 깔끔하고 모바일에서도 잘 보이는 반응형
- 하단에 "다시 풀기" 버튼 포함
- 한국어로 작성📝 프롬프트 3: 수업 요약 카드
오늘 수업 내용을 1페이지 요약 카드로 만들어줘.
[수업 내용]
- 과목: 통합사회
- 주제: 인권의 의미와 발전
- 다룬 내용:
1. 인권의 정의 (천부인권, 보편적 권리)
2. 인권 발전의 역사 (마그나카르타 → 권리장전 → 인권선언 → 세계인권선언)
3. 시민혁명과 인권의 관계
4. 현대 사회의 인권 과제 (사회적 소수자, 디지털 인권)
[형식]
- HTML로 만들되, A4 인쇄에 적합한 레이아웃
- 핵심 개념은 박스로 강조
- 하단에 "오늘의 핵심 질문" 2개 포함 (학생이 스스로 생각해볼 질문)
- 빈칸 채우기 3문항을 넣어서 학생이 직접 써볼 수 있게
- 깔끔하고 가독성 좋은 디자인
- 한국어로 작성💡 프롬프트 활용 팁
위 프롬프트에서 [조건] 부분의 과목명, 단원명, 문항 수만 바꾸면 어떤 과목이든 적용할 수 있습니다. 프롬프트 구조는 그대로 유지하세요. 조건을 항목별로 명확하게 나누는 게 결과물 품질을 높이는 핵심입니다.
Artifacts 200% 활용 팁
💡 팁 1: 후속 대화로 계속 다듬기
첫 번째 결과가 완벽하지 않아도 괜찮습니다. "글자 크기 좀 더 키워줘", "색상을 학교 로고 색(#2e86de)으로 바꿔줘", "문항 2개 더 추가해줘" 같은 후속 요청으로 계속 수정할 수 있습니다. Artifacts는 같은 패널에서 실시간으로 업데이트되니까, 수업 중에도 즉석 수정이 가능합니다.
💡 팁 2: "모바일 반응형으로"를 꼭 넣기
학생 대부분이 스마트폰으로 접속합니다. 프롬프트에 "모바일에서도 잘 보이는 반응형 디자인"이라고 한 줄만 추가하면, 스마트폰 화면에 맞게 자동으로 조정됩니다. 이 한 줄을 빼먹으면 PC 기준으로만 만들어져서 학생 폰에서 글씨가 너무 작거나 레이아웃이 깨질 수 있어요.
💡 팁 3: 이전 Artifacts를 참조해서 시리즈 만들기
같은 대화 안에서 "방금 만든 퀴즈와 같은 디자인으로, 다음 단원 퀴즈도 만들어줘"라고 하면, 일관된 디자인의 교구 시리즈를 만들 수 있습니다. 단원별로 통일된 양식을 유지하면 학생들이 사용법을 다시 배우지 않아도 되니까 편합니다.
💡 팁 4: Claude Pro 구독이면 더 강력
무료 플랜에서도 Artifacts를 쓸 수 있지만, 대화 횟수 제한이 금방 걸립니다. 수업 중에 실시간으로 자주 활용하실 거라면 Claude Pro 구독(월 $20)을 고려해 보세요. 사용량 제한이 훨씬 넉넉해서 수업 준비와 수업 중 활용을 모두 여유 있게 할 수 있습니다.
⚠️ 주의: AI가 만든 내용은 반드시 확인
Artifacts로 만든 자료도 AI가 생성한 것이므로, 사실관계 오류가 있을 수 있습니다. 특히 역사적 사실, 법률 조항, 과학적 수치 등은 교과서와 대조 확인 후 사용하세요. 퀴즈의 경우 정답이 틀리게 설정된 경우도 간혹 있으니, 문항별로 한번씩 검토하는 습관이 중요합니다.
이 글이 도움이 되셨다면 댓글로 알려주세요. Artifacts로 만든 교구 사례를 공유해 주시면 다른 선생님들에게도 큰 도움이 됩니다.
대화 참여하기