Claude 인터랙티브 다이어그램으로 학습하는 방법을 공유드립니다

다음 주제에 대해 인터랙티브 HTML 학습 위젯을 만들어주세요: [주제]. 클릭 가능한 모든 요소가 개별적으로 AI에 탐색 질문을 전송하도록 구현하고, 다크 테마(#0a0a0a 배경)로 밀도 높은 구조화된 개요를 제공해주세요.

최근 Claude에서 인터랙티브 다이어그램 기능이 나왔는데, 이걸 활용하면 복잡한 주제도 체계적으로 학습할 수 있더라고요.

원리는 간단합니다. Claude에게 특정 주제에 대한 인터랙티브 HTML 위젯을 만들어달라고 요청하면, 클릭 가능한 구조화된 다이어그램을 생성해줍니다. 각 블록을 클릭하면 해당 세부 주제에 대한 질문이 자동으로 전송되어 심층 탐색이 가능합니다.

제가 사용하는 커스텀 인스트럭션의 핵심 포인트를 정리하면:

• 모든 클릭 가능 요소가 개별적으로 탐색 질문을 전송
• 배경색 #0a0a0a, 내부 요소 #000000, 텍스트는 #ffffff 이상 유지
• 레이아웃은 주제의 특성에 맞게 자동 결정 (타임라인, 그리드, 분기 등)
• 클릭 시 전송되는 질문이 핵심인데, 제네릭한 질문 대신 구체적인 맥락과 개방형 사고를 유도

코딩 개념 학습할 때 특히 유용했습니다. 한번 시도해보시면 좋을 것 같습니다.