WildTrail: 초보자로서 AI가 가짜 지도를 만들게 했습니다. Touch Grass를 위해 출시한 내용입니다
요약
본 글은 'Touch Grass' 챌린지 참여작인 WildTrail을 소개합니다. 이 앱은 사용자가 카메라로 실제 자연물을 비추면, 브라우저 내에서 실행되는 오픈 웨이트 CLIP 모델이 실시간으로 종을 추측하여 알려줍니다. 발견물은 3D 스탬프로 수집하고, 산책로는 지도에 기록하며 오프라인에서도 작동합니다.
핵심 포인트
- 오픈 웨이트 CLIP 모델을 브라우저(WebGPU/WebAssembly)에서 구동하는 실시간 AI 분류 구현.
- 사용자 데이터는 서버를 거치지 않고 로컬(IndexedDB)에서 처리되어 개인 정보 보호에 강점.
- 산책로 기록 및 지도 기능은 GPX 파일 내보내기, 오프라인 지원을 제공하여 활용도가 높음.
이것은 Hacktoberfest Open-Source AI Challenge, Week 1: Touch Grass에 제출하는 저의 작품입니다.
저는 Bengaluru 출신의 Arnav이며 코딩을 처음 시작했습니다. 'Touch Grass' 프롬프트(핵심으로 오픈 소스 AI를 활용하여 사람들이 화면에서 벗어나게 만드는 무언가를 구축하라)가 도착했을 때, 저는 사람들의 시선을 휴대폰에서 들어 올리게 만드는 단 하나의 것에 대해 계속 생각했습니다. 바로 현실 세계에서 무언가를 수집하는 것입니다.
그래서 WildTrail을 만들었습니다: 카메라를 실제 새, 식물, 곤충 또는 동물에 비추면, 휴대폰에서 로컬로 실행되는 AI 모델이 그것이 무엇인지 추측하고, 사용자는 이를 디지털 필드 저널의 3D 스탬프로 수집하게 됩니다. 밖에 걸어 다니면서 RPG 스타일의 안개 지도가 주변을 밝혀 나갑니다.
- 실시간 앱: https://wildtrail-chi.vercel.app
- 코드 (MIT): https://github.com/XiaoArnav/wildtrail

작동 방식
• AI. 오픈 웨이트(open-weight) CLIP 모델(clip-vit-base-patch32)이 Transformers.js를 통해 브라우저 내에서 실행됩니다. 이 라이브러리는 버전 3.8.1에 고정되어 있습니다. 이 AI는 제로샷 이미지 분류(zero-shot image classification)를 수행합니다. 저는 야생 동물 종의 선별된 사전(dictionary)을 제공하고, 앱은 WebGPU 또는 WebAssembly를 통해 사용자의 실시간 사진이 각 종과 얼마나 일치하는지 점수를 매깁니다. 서버가 사용자의 사진을 보는 일은 절대 없습니다.
• 수집품. 확인된 발견물은 브라우저의 IndexedDB에 저장되며, 자이로스코프 기울기 물리(gyroscope tilt physics)를 적용한 상호작용적인 기울임 3D 스탬프로 렌더링됩니다. 또한 빈티지 식물학 엽서 이미지로 내보낼 수 있습니다. 계정이나 유료 결제 장벽은 없습니다.
• 지도. 사용자의 산책로는 20m 간격의 사각형으로 나뉘며, 이동할 때마다 불이 들어와 영역을 드러내고 총 거리를 추적합니다. 또한 산책로를 GPX 파일로 내보낼 수도 있습니다.
• 오프라인. 첫 로드 이후에는 앱 셸(app shell), 공급업체 라이브러리, AI 모델 가중치(~90 MB)가 Service Worker와 Cache Storage에 캐시됩니다. 오프라인 지도 타일을 위해 사용자가 직접 .pmtiles 지도 패키지를 가져올 수 있습니다.

밖에 나가게 만드는 방법
저는 스크린이 산책의 가장 짧은 부분이 되기를 바랐습니다. 이 앱은 몇 초만 요구합니다. 사진을 찍고, 탭하고, 휴대폰을 다시 주머니에 넣기만 하면 됩니다. 실내에 있을 때는 아무 일도 일어나지 않습니다. 왜냐하면 보상은 사용자가 실제로 걸으면서 안개 속 지도가 밝혀지는 것과, 새로운 종을 발견하려면 실제 생물을 찾아야 하기 때문입니다. 피드(feed)도, 알림도, 연속 기록(streak)도 없습니다. 스캔하는 순간은 몇 초밖에 걸리지 않아야 합니다.
여기서 오픈 소스가 중요했던 이유
저는 이념 때문에 오픈 소스를 선택한 것이 아닙니다. 그 아이디어가 그렇지 않으면 작동하지 않습니다:
- 트레일에서 신호가 끊길 때. 클라우드 비전 API는 공원이나 계곡에서 셀룰러 바(cell bars)가 떨어지는 순간 작동을 멈춥니다. 한 번 기기 저장소에 다운로드된 오픈 웨이트 모델은 어디서든 계속 실행됩니다. 폐쇄형 클라우드 API가 빠른 연결에서는 더 나은 정확도를 제공했을지 모르지만, 가장 필요할 때, 신호가 없는 공원에서 실패했을 것입니다.
- 위치는 개인적입니다. AI 추론(inference), 사진, 발견물, 그리고 GPS 트랙이 기기에 머무릅니다. 이 앱에는 백엔드가 필요하지 않기 때문에 백엔드 자체가 없습니다.
- 사용량에 따른 비용 없음. 측정 가능한 API 키, 토큰 수수료 또는 사진당 청구액이 없으므로, 앱의 어떤 것도 사용 횟수에 따라 돈이 들지 않습니다.
- 내가 교체할 수 있습니다. 모델과 종 분류학(species taxonomy)은 일반 코드입니다. 누구나 풀 리퀘스트(pull request)를 통해 야생 동물 목록을 확장하거나 전문 조류 모델로 교체할 수 있습니다.
유일하게 정직한 예외는 기본 지도(basemap)가 OpenFreeMap에서 타일을 로드한다는 점이며, 이는 사용자의 IP 주소와 보는 지도의 영역을 확인할 수 있다는 것입니다. 오프라인 PMTiles 팩을 가져오거나 다운로드하면 이를 피할 수 있습니다.
무엇이 잘못되었는지 (제가 읽고 싶은 부분)
저는 AI 코딩 어시스턴트(대부분의 코드에는 Antigravity, 검토자 및 멘토로는 Claude, 그리고 두 가지 이슈에는 GitHub Copilot)를 사용하여 이것을 만들었습니다. 제가 초보자이기 때문에 그 어떤 것도 무조건 신뢰할 수 없었으므로, 저는 하나의 규칙을 세웠습니다: 모든 것을 읽고 주장을 검증하라. 이 규칙이 실제 문제를 발견하게 했습니다:
-
가짜 다운로드. 초기 '오프라인 지도 다운로드(Download offline map)' 버튼은 120ms 타이머를 이용해 진행률 표시줄을 업데이트하고 2KB 크기의 빈 플레이스홀더만 저장하는 루프를 돌렸습니다. 완료된 것처럼 보였지만 실제로는 아무 기능도 하지 않았습니다. 저는 이 기능을 완전히 제거하고 실제 PMTiles 임포트 및 헤더 검증 파이프라인으로 교체했습니다.
-
오류가 있는 지도 로더. 최초의 실제 오프라인 로더는
pmtiles.BlobSource를 호출했는데, 이는 PMTiles v3에는 존재하지 않는 API입니다 (실제 클래스는FileSource입니다). 또한 일반 공급업체 스크립트를 마치 ES 모듈인 것처럼 불러왔습니다. 지도는 조용히 나타나지 않았습니다. 이를 수정하려면 라이브러리의 실제 내보내기(exports)를 열어 문서를 읽어야 했습니다. -
존재하지 않는 광고된 종. 초기 데모 스크린샷에는 호랑이, 펭귄, 그리고 라조빌이 표시되었지만, 이들 중 어느 것도 AI가 실제로 분류할 수 있는 사전(dictionary)에 포함되어 있지 않았습니다. 저는 모든 광고된 동물이 실제로 식별될 수 있도록 종 배열(species array)을 감사해야 했습니다.
-
코드보다 앞선 개인정보 보호 주장. README에는
-
Antigravity — 빌드 및 디버깅 — 앱 구축, 문제점 디버깅, 수정 사항 구현.
-
Claude — 멘토 및 코드 검토자 — AI가 생성한 코드를 검토하고 기술적 주장을 확인.
Copilot이 수행한 작업
저는 두 개의 GitHub 이슈를 열고 GitHub Copilot에게 할당했습니다:
- GPX 트레일 내보내기 (PR #7): 사용자의 산책 경로를 Strava나 Garmin 같은 앱에서 사용할 수 있는 표준 GPX 1.1 파일로 내보냅니다.
- 고대비 모드 (PR #6): 한낮의 직사광선 아래에서도 지도와 나침반 원이 읽기 쉬운 토글 기능입니다.
저는 이 두 개의 풀 리퀘스트를 병합하기 전에 검토했습니다.
외부 환경에서의 사용
솔직히 말하자면, 저는 아직 WildTrail을 길게 야외 산책에 사용해 보지 못했습니다. 책상에서 구축하고 테스트했기 때문에, 실제 휴대폰에서의 카메라, GPS 및 비행기 모드 동작은 제가 아직 테스트하지 못한 부분입니다. 제가 확인한 것은 코드와 라이브 사이트였습니다. 모든 변경 사항을 코드를 기반으로 검토했고 위의 문제점들을 수정했습니다. 야외에서 사용해 보시고 어떤 부분이 작동하지 않는지 알려주시면 감사하겠습니다. 관련 이슈는 레포지토리(repo)에 열려 있습니다.
아직 할 수 없는 것들
- 내장된 분류학 목록에서만 종을 식별할 수 있으며, CLIP이 때때로 잘못 추측하므로 결과는 확정적인 식물학적 증거라기보다는 제안으로 간주해야 합니다.
- 오프라인 지도를 사용하려면
.pmtiles아카이브를 가져오거나 다운로드해야 합니다. 번들된 데모 팩은 타이베이의 아주 작은 영역(~300m)을 다룹니다. - 최초 로딩 시에는 라이브러리를 가져오고 ~90MB 크기의 비전 모델 가중치를 브라우저 캐시에 다운로드하기 위해 인터넷 연결이 필요합니다.
사용해 보세요
휴대폰에서 https://wildtrail-chi.vercel.app을 열고, 홈 화면에 추가한 뒤 밖에 나가보세요. 풀 리퀘스트(Pull requests)와 피드백은 환영합니다. 분류 사전(classification dictionary)에 새로운 지역 종(regional species)을 추가하는 것이 훌륭한 첫 기여가 될 것입니다!
Hacktoberfest 팀에게 신속하게 도움을 준 것에 감사드립니다. 🌱
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기