1. 작업 설명하기
여러분이 사는 지역의 야생 식물에 대한 위치 인식 가이드를 만들어 보세요. 인터랙티브 지도에서 주를 선택하고, 카테고리별로 식물을 탐색하고, 지금 철인 식물을 확인하고, 인쇄 가능한 현장 참고 자료를 내보낼 수 있습니다.
Claude에게 도구의 목적, 상호작용 흐름, 디자인 방향을 알려주세요. 구체적인 기능 요구사항과 미적 단서를 제공하면 더 완성도 높은 결과를 얻을 수 있습니다.
야생 식용 식물을 처음 접하고 어디서부터 시작해야 할지 모르는 사람을 위한 채집 가이드를 만들고 싶습니다.
해야 할 일:
- 사용자가 인터랙티브 미국 지도에서 자신의 주를 클릭하면 해당 지역의 채집 데이터를 볼 수 있게 합니다(지도 데이터는 us-atlas TopoJSON CDN인 https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json(새 탭에서 열림) 에서 가져오고 D3의 geoAlbersUsa 프로젝션으로 렌더링합니다)
- 카테고리별로 식용 식물을 탐색할 수 있게 하고, 각 종마다 12개월 계절 바를 표시해 사용자가 수확 시기를 한눈에 볼 수 있게 합니다
- 사용자가 식물을 탭하면 세부 정보가 펼쳐지게 하고, 사용자가 개인 채집 목록에 식물을 추가한 뒤 선택한 종과 안전 주의사항이 포함된 인쇄 가능한 현장 가이드를 내보낼 수 있게 합니다
디자인: 조용하고 자연스러운 느낌. 따뜻한 크림색, 차분한 세이지, 부드러운 올리브색. 필드 저널과 에디토리얼 매거진이 만난 느낌—세련되면서도 친근하게. 부드러운 전환, 둥근 모서리, 좋은 타이포그래피 계층 구조.
2. Claude에게 맥락 제공하기
Claude는 대화 안에서 바로 작동하는 아티팩트를 만듭니다. 설정에서 아티팩트를 활성화하면 Claude가 즉시 사용할 수 있는 인터랙티브 애플리케이션을 만들 수 있습니다.
설정에서 아티팩트를 켜세요. 이렇게 하면 Claude가 지도, 상태 관리, 데이터 시각화 등 완전한 상호작용이 가능한 앱을 생성하며, 이는 채팅 안에서 바로 렌더링됩니다. 별도의 설정이나 배포가 필요하지 않습니다.
필수 맥락
업로드할 것이 없습니다.
3. Claude가 만드는 것
Claude는 완전하게 작동하는 채집 가이드를 만들며, 주를 클릭하면 해당 지역의 식물 데이터가 나타나는 인터랙티브 미국 지도로 시작합니다.
야생 식용 식물 현장 가이드를 만들었습니다. 할 수 있는 일은 다음과 같습니다:
지역별로 탐색하기 — 지도에서 강조 표시된 주를 클릭하세요. 현재 가이드에는 태평양 북서부(워싱턴, 오레곤, 아이다호)와 북동부(메인부터 메릴랜드까지) 지역의 데이터가 포함되어 있습니다. 다른 지역은 "곧 제공"으로 표시됩니다.
카테고리별로 탐색하기 — 주를 선택한 후, 탭을 사용해 해당 지역에서 구할 수 있는 야생 채소, 베리류, 버섯, 뿌리채소, 견과류를 탐색하세요.
계절 확인하기 — 각 식물 카드에는 수확 시기를 나타내는 12개월 바가 표시됩니다. 현재 달이 강조 표시되어 지금 철인 식물을 바로 확인할 수 있습니다.
더 깊이 알아보기 — 카드를 탭하면 세부 정보가 펼쳐집니다: 어디서 찾을 수 있는지, 어떻게 준비하는지, 주의해야 할 유사종은 무엇인지. 위험한 유사종이 있는 식물에는 경고 패널이 표시됩니다.
목록 만들기 — + 버튼을 클릭해 채집 목록에 식물을 추가하세요. 선택한 항목은 개수를 추적하는 플로팅 패널에 표시됩니다.
현장 가이드 내보내기 — 준비가 되면, 내보내기를 통해 선택한 종, 준비 방법 노트, 안전 주의사항이 포함된 인쇄 가능한 참고 자료를 생성합니다.
현장 가이드 보기
4. 후속 프롬프트
Claude와의 대화를 이어가며 다듬고, 확장하고, 더 깊이 탐색해 보세요.
검증된 정보로 교체하기
이 가이드는 작동 방식을 보여주기 위해 샘플 데이터를 사용합니다. 보기와 느낌이 마음에 들면, Claude에게 여러분 지역의 실제 종을 조사해 달라고 요청하세요—실제 수확 시기, 검증된 식별 정보, 최신 안전 경고 등을 말이죠.
아티팩트의 예시를 제 지역에 맞는 최신 채집 데이터로 교체해 주세요. 검증된 수확 시기, 정확한 식별 팁, 문서화된 유사종을 조사해 주세요. 실제 현장에서 사용하고 싶습니다.
현장에서 발견한 것 식별하기
사진을 업로드하고 눈앞에 있는 것에서부터 거꾸로 추론해 보세요.
트레일에서 발견한 것의 사진을 첨부했습니다. 이 이미지와 제 지역을 바탕으로 이것이 무엇일 수 있을까요? 확인을 위해 직접 무엇을 확인해야 할까요—아가미 구조, 포자 무늬, 냄새 등. 사진만으로 알 수 있는 것과 알 수 없는 것을 알려주세요.
5. 팁과 문제 해결
Claude가 만든 것에서 배우거나, 그대로 재사용하기
Claude에게 로직을 설명해 달라고 요청해서 결과물뿐 아니라 패턴까지 이해해 보세요. 또는 설명을 건너뛰고 새로운 것을 만들기 위한 시작점으로 코드를 요청할 수도 있습니다. 이 패턴을 재사용해 만든 인터랙티브 정원 가이드(새 탭에서 열림) 예시를 확인해 보세요.
같은 대화에서 계속 다듬기
Claude는 여러 차례의 대화에서 맥락을 유지하므로, 처음부터 다시 시작하지 않고도 폭넓게 반복 작업을 할 수 있습니다. 기능을 추가하고, 테스트하고, 이상한 점을 발견하고, 문제를 설명하고, 수정을 받으세요. 이런 주고받기—때로는 수십 차례에 이르는—가 복잡한 도구가 완성되는 과정입니다. 변경을 요청한다고 해서 Claude를 귀찮게 하는 것이 아닙니다. 그것이 바로 이 과정이 작동하는 방식입니다.
인터랙티브 지도는 데이터 소스가 있을 때 가장 잘 작동합니다
Claude는 주 경계선, 해안선, 카운티 경계 같은 정확한 지리적 경계를 외우고 있지 않습니다. 실제 지도 데이터를 가리키는 포인터가 없으면, 정확한 지도 대신 플레이스홀더 형태로 근사치를 만들기도 합니다. 이 프롬프트는 TopoJSON 소스(지도 데이터를 위한 표준 형식)를 지정함으로써 이 문제를 해결합니다. Claude는 실제 경계 데이터를 가져와 올바르게 렌더링합니다. 지도가 이상해 보인다면, 실제 지리 데이터를 가리키고 있는지 확인해 보세요.
6. 직접 시도해 볼 준비가 되셨나요?
여러분이 탐색하고 배우는 방식에 맞춘 커스텀 인터페이스로 인터랙티브 도구를 만들어 보세요. Claude와 함께 아이디어를 설명하고 다듬어 여러분에게 유용한 도구를 만들어 보세요.