Claude Code와 음성 받아쓰기만으로 제작한 시네마틱 고대 DNA 이주 지도

원문 발행 2026. 06. 16. 22:50원문 언어 영어AI 한국어 번역r/ClaudeAI 원문 보기

요약

Claude Code와 음성 받아쓰기를 활용하여 고대 DNA 이주 경로를 시각화하는 웹 서비스를 제작한 사례를 소개합니다. HTML 와이어프레임 생성부터 배포까지 Claude Code의 강력한 개발 보조 능력을 강조합니다.

핵심 포인트

Claude Code를 활용한 신속한 HTML 와이어프레임 및 기술적 접근 논의
Cloudflare Pages와 Workers를 이용한 효율적인 프로토타이핑 및 배포
Minimax M2.7을 활용한 비용 효율적인 AI 추론 기능 구현
dev-browser를 통한 Claude Code의 시각적 작업물 검증 프로세스

자신의 조상 중 서로 다른 혈통을 추적하고, 그들이 언제 무엇을 경험했는지에 대한 아이디어를 얻고 싶었던 적이 있나요? 저는 그랬습니다!

DNA 테스트를 받은 후, 저(그리고 우리 각자)가 존재하기 위해 일어났던 서사적인 인류의 여정에 엄청난 흥미를 느끼게 되었습니다. 하지만 제가 시각적으로 탐구하고 싶었던 갈증을 진정으로 해소해 줄 앱은 없었습니다.

그래서 https://tidesoftime.app 을 만들었습니다.
빛나는 모든 점은 실제 고대 인류가 유골이 발굴된 장소와 날짜에 표시된 것입니다. Y-DNA (부계) 또는 mtDNA (모계) 하플로그룹 (haplogroup)을 선택하고, 타임라인을 훑어보며, 그것을 보유한 모든 고대 개인이 역사를 가로질러 하나씩 나타나는 것을 지켜보세요.

유용한 팁

기능을 본격적으로 파고들기 전에 Claude Code를 사용하여 HTML 와이어프레임 (wireframes)을 만들게 하세요. 요즘 성능이 믿을 수 없을 정도로 좋아졌으며 시간을 크게 절약해 줍니다. 이는 아이디어나 기술적 접근 방식을 논의할 때도(특히 피곤할 때) 매우 유용했습니다.
Cloudflare를 사용하면 웹사이트를 게시하는 것(Cloudflare Pages)과 필요한 백엔드(Cloudflare Workers)를 구축하는 것이 매우 쉽습니다. 이제 프로토타이핑 (prototyping)을 위한 저의 기본 선택지가 되었습니다. npx wrangler login을 사용하면 Claude Code가 설정의 많은 부분을 스스로 수행할 수도 있습니다 (주의하세요).
현재 "더 자세히 알려줘"라는 AI 기능을 위해 Minimax M2.7을 사용하고 있습니다. 제품으로서의 관심을 검증하는 중이며, 비용 효율적인 추론 AI (reasoning AI)로서 훌륭한 옵션입니다. (저는 일회용 API 키를 생성하고 5달러를 충전했습니다).
역사적 사건에 대해 정말 깊이 있는 AI 탐색을 가능하게 하고 싶었습니다. 하지만 이는 비용이 매우 많이 들며, 대부분의 사람들은 기존의 AI 구독 서비스를 이용합니다. 그래서 저는 사람들이 자신이 선택한 Claude나 다른 AI에 프롬프트를 복사하여 관심 있는 시간과 장소로부터 이벤트 팩 (event packs)을 생성할 수 있는 이벤트 팩 개념을 선택했습니다. 이를 통해 기존의 Claude 구독을 활용할 수 있도록 했습니다.
다음 단계로 넘어가기 전에 Claude Code가 자신의 작업물을 시각적으로 확인하게 하는 것이 매우 중요합니다. 저는 dev-browser를 사용하여 이를 수행했으며, Claude Code에게 복잡한 모든 것을 시각적으로 검증하라고 지시했습니다.

기대치에 부합하는 원샷 (one-shot) 능력에 큰 차이를 만듭니다.

기술 스택 (Tech stack)

TypeScript
MapLibre
Zustand
Vite
deck.gl
Cloudflare Pages + Functions.

질문이 있으시면 기꺼이 답변해 드리겠습니다.
/u/anirishafrican 에 의해 제출됨
[link] [comments]

AI 자동 생성 콘텐츠

원문 바로가기

Claude Code와 음성 받아쓰기만으로 제작한 시네마틱 고대 DNA 이주 지도

요약

핵심 포인트

댓글