로드 중

채팅 중 설명 뒤에 숨은 메커니즘 시각화하기

Claude는 문제를 이야기하는 동안 인라인으로 인터랙티브 시각 자료를 만듭니다 — 질문하는 구체적인 내용에 맞춰 조정되며, 직접 조작할 수 있는 컨트롤과 더 깊이 파고들 수 있는 버튼이 포함됩니다. 텍스트로는 보여줄 수 없는 움직이는 부분이 있는 개념에 유용합니다.

15분교육Claude
로드 중

1. 작업 설명하기

Claude는 답변의 일부로 시각 자료 — 다이어그램, 차트, 인터랙티브한 무언가 — 를 만들 수 있으며, 이는 질문한 내용에 맞춰 만들어지고 주변 설명에 엮여 들어갑니다. 여러분은 요소를 드래그하고, 아직 명확하지 않은 부분을 클릭하면, Claude가 그에 응답하여 다음 것을 만듭니다. 시각 자료가 도움이 될 때 자동으로 트리거되며, 직접 요청할 수도 있습니다. 전체 아티팩트 대신, 다이어그램은 텍스트가 있었을 자리에 스트리밍되어 나타나고, 대화는 계속됩니다.

여기서 한 학생은 행성이 태양 근처에서 빨라진다는 것은 알지만 그 이유는 모릅니다. Claude는 학생이 직접 실행해볼 수 있는 애니메이션 트레이드오프를 만들고, 아직 불명확한 부분을 더 깊이 파고들 수 있는 버튼을 제공합니다.

저는 궤도 역학을 배우고 있는데, 행성이 태양에 가까울 때 빨라지고 멀 때 느려진다는 것은 이해합니다. 하지만 그런 트레이드오프가 왜 존재하는지는 이해가 안 됩니다. 왜 그냥 계속 빠르게 갈 수는 없는 걸까요? 잘 만들어진 인터랙티브하고 동적인 시각화로 이해를 도와주세요.

2. Claude에게 맥락 제공하기

파일이 필요하지 않습니다 — 프롬프트 자체로 충분합니다. 이미 알고 있는 것을 말하면 Claude가 어디서부터 시작하지 않아야 할지 알 수 있고, 이해가 안 되는 부분을 명시하면 무엇을 중심으로 만들어야 할지 알 수 있습니다.

필요한 맥락

업로드할 것이 없습니다.

3. Claude가 만드는 것

Claude는 하나의 슬라이더에 연결된 동일한 메커니즘의 세 가지 연동된 뷰를 만듭니다 — 트레이드오프가 세 가지 모두에서 동시에 작동합니다. 슬라이더는 변수를 여러분에게 넘겨줍니다. 슬라이더를 드래그하면 "왜 그냥 계속 빠르게 갈 수 없는지"에 대한 답이 스스로 드러납니다: 에너지 바가 총량을 고정하므로, 속도와 거리가 서로 맞바꿔집니다.

Claude의 응답에 포함된 인터랙티브 궤도 시각화: 원일점과 근일점에서 동일한 면적의 섹터를 보여주는 타원 궤도, 케플러 제2법칙 설명, 중력장과 에너지 예산 패널, 궤도 이심률 슬라이더, 그리고 각운동량, 탈출 속도, 궤도 변경을 위한 버튼들

4. 후속 프롬프트

Claude와의 대화를 계속하여 다듬거나, 확장하거나, 더 깊이 탐구해보세요.

시각 자료의 버튼을 클릭해 더 깊이 들어가기

시각 자료 하단의 버튼들은 후속 프롬프트를 전송합니다 — 하나를 클릭하면 그 좁혀진 질문을 중심으로 만들어진 두 번째 시각 자료가 아래에 스트리밍됩니다. 첫 번째 것은 그대로 남아 있으며, 둘 사이를 스크롤하며 볼 수 있습니다.

궤도에서의 각운동량 보존을 설명해주세요 — 왜 행성은 같은 시간에 같은 면적을 휩쓸고 지나가나요?

한 가지를 바꿔서 다시 그려달라고 Claude에게 요청하기

변경할 내용을 말하면 Claude가 다시 그립니다 — 동일한 세 패널, 다른 입력값으로, 무엇이 유지되고 무엇이 바뀌는지 볼 수 있습니다.

이 동일한 속도-거리 트레이드오프가 이심률이 매우 큰 궤도를 가진 혜성에도 적용될까요? 그 궤도로 동일한 시각 자료를 다시 만들어서 무엇이 바뀌는지 보여주세요.

설명 자료를 퀴즈로 바꿔달라고 Claude에게 요청하기

Claude는 동일한 세 패널을 사용해 퀴즈를 만듭니다 — 궤도의 여러 지점에서 무슨 일이 일어나는지 물어보고, 여러분이 답하면, 무엇을 맞췄는지 알려줍니다.

이 애니메이션이 보여주는 내용으로 저에게 퀴즈를 내주세요. 궤도의 여러 지점에서 무슨 일이 일어나는지 물어보고, 제가 트레이드오프를 제대로 이해했는지 알려주세요.

5. 요령, 팁, 문제 해결

프롬프트를 어떻게 표현하는지가 결과를 좌우합니다

"인터랙티브", "조정할 수 있게", "직접 가지고 놀 수 있는 것" 같은 단어는 Claude를 슬라이더와 컨트롤 쪽으로 유도합니다. 더 평범한 설명은 정적인 이미지를 얻는 경향이 있습니다. 위의 프롬프트는 "인터랙티브하고 동적인 시각화"라는 표현을 사용했는데, 이 표현이 바로 직접 실행해볼 수 있는 메커니즘을 얻게 해주는 것입니다. 결과물이 답답하게 느껴진다면, Claude에게 서식을 정리해달라고 요청하면 보통 다음 턴에서 해결됩니다.

이미 이해하고 있는 것을 Claude에게 알려주기

이미 이해하고 있는 것을 언급하면 Claude가 무엇을 건너뛸지 알 수 있습니다 — 그러면 시각 자료의 더 많은 부분이 불명확한 부분에 집중됩니다. 한 줄이면 충분합니다: 위의 학생은 행성이 빨라진다는 것은 이미 알고 있고, 원하는 것은 왜 그런지이며, 바로 그 부분이 애니메이션으로 만들어집니다.

시각 자료로 다음에 할 일

시각 자료 위에 마우스를 올리면 옵션이 나타납니다. 이미지로 복사하면 개념 옆에 있는 노트에 바로 넣을 수 있습니다. 아티팩트로 저장하면 나중에 슬라이더를 다시 열어볼 경우를 위해 인터랙티브 버전을 유지할 수 있습니다. 또는 Claude에게 이해된 내용을 정리해달라고 요청하면, 노트에 편집해 넣을 수 있는 단락을 받을 수 있습니다.

6. 직접 시도해볼 준비가 되셨나요?

이해가 안 되는 개념에 직접 시도해보세요 — 어디서 막혔는지 말하고 Claude가 볼 수 있는 무언가를 만들게 해보세요. Claude가 그린 것 위에 마우스를 올리면 옵션이 나타납니다: 노트용으로 이미지를 복사하거나, 대화가 끝난 후에도 보관할 가치가 있다면 아티팩트로 저장하세요.