1. 작업 설명하기
Claude는 해부학, 화학 다이어그램, 역사적 타임라인 등 자료와 직접 상호작용할 수 있는 인터랙티브 도구를 만들 수 있습니다. 프롬프트의 정밀도가 결과물의 정교함을 결정합니다.
원하는 경험을 설명하세요: 무엇을 배우고 있는지, 어떻게 상호작용하고 싶은지, 데이터는 어디서 오는지, 그리고 미적 기준은 무엇인지. 프롬프트를 디자인 브리프라고 생각하세요.
이렇게 구체적으로 시작할 필요는 없습니다. 원하는 경험부터 시작한 다음, 빌드 과정에서 문제가 발생하는 부분을 발견하면 SVG fill이나 UBERON 관련 메모 같은 기술적 제약 조건을 추가하세요.
npm의 @ebi-gene-expression-group/anatomogram을 사용하여 인터랙티브 해부학 탐색기를 만들어 주세요. homo_sapiens.male.svg와 homo_sapiens.brain.svg를 사용하세요. 직접 다이어그램을 생성하지 마세요—이 SVG들은 이미 UBERON 온톨로지 ID가 포함된 정확한 일러스트레이션을 담고 있습니다. SVG를 HTML에 직접 임베드하세요—fetch 요청은 필요하지 않습니다.
중요: 이 SVG들은 기본적으로 모든 요소를 fill:none;stroke:none으로 스타일링하여 보이지 않게 만듭니다. 로드 후, 다른 스타일링을 적용하기 전에 기본 fill과 stroke를 적용하세요. 또한 최적화 시 cleanupIds: false로 설정하고(UBERON ID가 요소를 타겟팅하는 방법입니다) JavaScript에서 visibility:hidden 속성을 제거하세요.
디자인 요구사항: 절제되고 세련되게. 글로우, 이모지, 네온 없이. 차가운 색보다 따뜻한 색. 제목은 세리프체, 본문은 산세리프체, 데이터는 모노스페이스체로. 일반적인 AI 결과물이 아닌 프리미엄 의료 참고서를 떠올리세요.
탭형 정보 패널, 물리적인 느낌의 사운드 피드백, 실제로 학습할 수 있을 만큼 풍부한 콘텐츠를 추가하세요. 처음부터 플래그십 품질로 구축하세요—이것이 탁월해질 때까지 반복할 것입니다.
2. Claude에게 맥락 제공하기
위 프롬프트는 자체적으로 맥락을 제공합니다: 데이터 소스(UBERON ID가 포함된 anatomogram 패키지), 상호작용 모델(호버, 클릭, 탭형 신체 시스템), 그리고 디자인 기준(프리미엄 의료 참고서, 따뜻한 색상, 세리프체 제목). Claude는 여러분이 명확히 지정한 내용을 바탕으로 구축하므로, 이러한 각 선택이 결과물에 반영됩니다.
필수 맥락
Artifacts는 Claude가 대화와 함께 별도의 창에서 만드는 독립적이고 인터랙티브한 결과물입니다. 이 해부학 탐색기와 같은 인터랙티브 도구를 요청하면, Claude는 일반적으로 이를 artifact로 자동 구축하여 렌더링하고 바로 사용할 수 있게 합니다.
선택적 맥락
복잡한 다중 구성 요소 앱의 경우, 확장 사고(새 탭에서 열림)를 켜서 Claude가 구축 전에 아키텍처를 계획할 수 있도록 하세요.
3. Claude가 만드는 것
Claude는 여러분이 지정한 시각적 디자인, 상호작용 패턴, 교육 콘텐츠를 갖춘 완전히 작동하는 React 애플리케이션을 구축하며, artifact 뷰어에서 즉시 사용할 준비가 됩니다.
완료했습니다! 의료 등급 SVG, 적절한 UBERON 타겟팅, 그리고 설명하신 절제된 디자인 시스템을 갖춘 해부학 탐색기를 만들었습니다.
포함된 내용:
1. 듀얼 뷰 탐색기
전신 뷰와 뇌 뷰를 전환할 수 있습니다. 전신 뷰는 적절한 해부학적 위치 지정과 함께 색상별로 시스템(골격, 근육, 신경, 순환, 호흡, 소화)을 구성합니다.
2. 인터랙티브 요소
구조물에 마우스를 올리면 이름, UBERON ID, 주요 기능을 볼 수 있습니다. 클릭하면 더 깊은 정보를 볼 수 있습니다: 임상적 관련성, 관련 구조물, 빠른 사실. 약 40개의 구조물에 학습 수준의 콘텐츠를 채웠습니다.
3. 시스템 필터
탭을 사용하여 개별 신체 시스템을 분리할 수 있습니다. "골격"을 선택하면 비골격 구조물은 희미해지고 관련 뼈는 강조되어 상호작용이 가능해집니다.
4. 사운드 디자인
호버와 선택 시 미묘한 오디오 피드백이 제공됩니다. 디지털이 아닌 물리적인 느낌의 부드러운 클릭과 톤입니다. 기본적으로 음소거되어 있으며, 모서리에서 전환할 수 있습니다.
5. 디자인 세부사항
따뜻한 베이지 배경, 테라코타와 슬레이트 악센트, 거친 색상 없음. 제목에는 Playfair Display, 본문 텍스트에는 Inter, 데이터에는 IBM Plex Mono를 사용했습니다. 넉넉한 여백, 시각적 혼란 없음.
4. 후속 프롬프트
Claude와의 대화를 계속하여 개선하거나, 확장하거나, 더 깊이 탐구해 보세요.
자가 테스트 추가하기
기억 유지를 강화하는 능동적 학습 모드와 같은 더 많은 기능을 추가하세요.
설명이나 기능이 표시되고 올바른 구조물을 식별해야 하는 퀴즈 모드를 추가해 주세요. 정확도를 추적하고 어려움을 겪는 시스템을 보여주세요.
고급 기능 추가하기
더 많은 세분화를 원하는 부분에서 해부학적 세부사항을 확장하도록 Claude에게 요청하세요.
다이어그램에 더 많은 신체 시스템을 추가해 주세요. 또한 뇌 뷰를 더 상세하게 만들어 주세요.
동일한 세션에서 보조 자료 생성하기
다른 매체를 통해 학습을 계속하세요. 앱과 학습 자료는 동일한 진실의 원천을 공유할 수 있습니다.
이 탐색기의 해부학적 데이터를 바탕으로, 동일한 구조물을 시스템별로 구성한 인쇄 가능한 PDF 학습 가이드와 가져올 수 있는 Anki 호환 플래시카드 세트를 생성해 주세요. 용어와 임상적 연관성은 앱에 있는 내용과 일치하도록 유지해 주세요.
5. 팁, 요령, 문제 해결
오류를 채팅에 직접 붙여넣기
구조물이 강조되지 않거나 시스템 탭이 필터링을 멈추는 등 문제가 발생하면, 오류 메시지를 붙여넣거나 보이는 현상을 설명하세요. Claude는 로직을 추적하여 문제를 식별할 수 있으므로 직접 코드를 디버깅할 필요가 없습니다.
긴 세션은 표류하지 않고 누적됩니다
Opus 4.5는 확장된 대화 전반에 걸쳐 디자인 결정과 기술적 맥락을 유지합니다. 열 번째 반복에서도 원래의 미적 요구사항, 기술적 제약 조건, 그리고 그 사이의 모든 개선 사항을 여전히 기억합니다. 모든 것을 미리 지정하려고 하기보다는 지속적인 구축 세션을 계획할 수 있습니다.
알려진 문제 해결 사항을 미리 포함하기
이전 Claude 세션이나 직접 디버깅을 통해 이전에 겪었던 특이한 문제가 있다면, 프롬프트에 언급하세요. 이 예시에서는 anatomogram SVG가 기본적으로 보이지 않게 렌더링되고 최적화 중에 UBERON ID가 제거된다는 점을 명시합니다. 이러한 메모가 없으면 Claude는 작동하는 코드를 작성하지만 빈 화면을 만들어내고, 이후 여러 번의 반복을 진단에 소비하게 됩니다.
학습하기 전에 패널을 먼저 확인하기
anatomogram 패키지는 정확한 일러스트레이션을 제공하지만, 정보 패널의 텍스트—각 구조물의 기능, 임상적 관련성, 빠른 사실—는 Claude가 작성합니다. 탐색기를 학습 도구로 신뢰하기 전에, 몇 가지 구조물을 클릭해 보고 패널의 내용을 교과서나 강의 노트와 비교해 보세요. 일치하지 않는 부분을 표시하고 Claude에게 수정을 요청하세요.
소스를 추가하여 나만의 것으로 만들기
Opus 4.5의 컨텍스트 윈도우는 상당한 양의 자료를 처리할 수 있습니다. 앱이 다루기를 원하는 교과서 챕터, 강의 노트, 또는 강의 계획서가 있다면, 요약하지 말고 전체를 붙여넣으세요. Claude는 요약된 버전보다 완전한 소스에서 구조를 더 효과적으로 추출하고 콘텐츠의 우선순위를 정합니다.
6. 직접 시도해 볼 준비가 되셨나요?
이해하고 싶었던 것을 하나 골라보세요. Claude가 도구를 만들고, 여러분은 학습을 합니다.