This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

제가 만든 것 (What I Built)

대부분의 현대 앱들은 사용자의 화면 시간을 더 많이 원합니다. FieldQuest는 그 반대를 합니다. 이 앱은 사용자에게 휴대폰을 주머니에 넣고, 밖에 나가서 주변 살아있는 세계에 주의를 기울일 이유를 제공합니다.

FieldQuest는 빅토리아 시대 식물학에서 영감을 받은, 화면 사용 최소화(screen-down) 방식의 오프라인 우선 Progressive Web App (PWA)이며, 하이브리드 오픈 가중치 AI(Ollama + Podman)와 9단계 멀티 클라우드 폴백 매트릭스(Google Gemini + Groq LPU)로 구동됩니다.

화면에서 사람들을 빼내 자연으로 이끄는 방법 (How It Gets People Off Screens and Into Nature)

화면 사용 최소화 모드 (Screen-Down Mode): 퀘스트를 통해 관찰 지침(예: “북향 줄기에서 서로 다른 나무껍질 질감 두 가지 찾기”)을 받으면, 배터리 보존과 도파민 중독성 스크롤링(doomscrolling)으로 인한 걸음을 방지하기 위해 화면이 어두워집니다.
감각적 및 생태학적 관찰 (Sensory & Ecological Observations): 과제들은 주의 회복 이론(Attention Restoration Theory, ART), 형태학적 생물 지표(Morphological bioindicators) (공기질 측정기로서의 이끼류), 그리고 음향 캐노피 층화(acoustic canopy stratification) (원거리 바람 소리로부터 전경 나뭇잎 분리)에 기반을 두고 있습니다.
빅토리아 필드 스튜디오 (The Victorian Field Studio): 탐험가들은 현장 발견물을 기록하고, 하드웨어 가속 루페 2.8×와 아카이벌 1200×1580 PNG/PDF 인쇄 엔진을 사용하여 19세기 자연사 보고서(naturalist folio) 석판화로 변환합니다.
계정 없음 및 진정한 개인 정보 보호 (Zero Accounts & True Privacy): 로그인 필요 없음, 분석 기능 없음, 클라우드 추적기 없음. 모든 현장 관찰과 사진은 사용자의 기기에 IndexedDB에 안전하게 남아 있습니다.

데모 (Demo)

🌐 실시간 웹 앱: https://fieldquest.netlify.app
💻 로컬 에어갭 스택: Podman 또는 Docker를 사용하여 http://localhost:5173에서 클론하여 실행합니다.

시각적 워크스루 (Visual Walkthrough)

<table width="100%"><tbody"><tr"><td width="50%"><strong angle 영웅 및 정신(Hero & Ethos)</strong><br><br><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Farnab825%2FFieldQuest%2Fmain%2Fapps%2Fweb%2Fpublic%2Fscreenshot%2F1.png" alt="Hero & Ethos" width="800" height="842"><br><em angle 스크린을 내려보는 철학 및 클라우드 추적 없음(Screen-down philosophy & zero cloud tracking).</em></td><td width="50%"><strong angle 적응형 퀘스트 플래너(Adaptive Quest Planner)</strong><br><br><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Farnab825%2FFieldQuest%2Fmain%2Fapps%2Fweb%2Fpublic%2Fscreenshot%2F2.png" alt="Adaptive Quest Planner" width="800" height="405"><br><em angle 맞춤형 15/30/60분 미션, 앉아서 이용 가능한 접근성 및 사용자 지정 식물학적 초점(Tailored 15/30/60m missions, seated accessibility & custom botanical focus).</em></td> </tr></tbody></table> <table width="100%"><tbody"><tr"><td width="50%"><strong angle 식물학 현장 스튜디오(Botanical Field Studio)</strong><br><br><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Farnab825%2FFieldQuest%2Fmain%2Fapps%2Fweb%2Fpublic%2Fscreenshot%2F4.png" alt="Field Studio" width="800" height="814"><br><em angle 역사적 양식 및 고전 판화 I–VII(Historical styles & Classical Plates I–VII).</em></td><td width="50%"><strong angle 음향 캐노피 사운드 매핑(Acoustic Canopy Sound Mapping)</strong><br><br><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Farnab825%2FFieldQuest%2Fmain%2Fapps%2Fweb%2Fpublic%2Fscreenshot%2F8.png" alt="Sound Mapping" width="800" height="854"><br><em angle 음향 층화 및 지의류 조사(Acoustic stratification & lichen census).</em></td> </tr></tbody></table> <table width="100%"><tbody><tr><td width="50%"> <strong style="font-size: 1.2em;">프로덕션 멀티 클라우드 복원력 (Production Multi-Cloud Resilience)</strong> <br><br><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Farnab825%2FFieldQuest%2Fmain%2Fapps%2Fweb%2Fpublic%2Fscreenshot%2F6.png" alt="클라우드 AI 설정 (Cloud AI Settings)" width="800" height="841"><br><em style="font-size: 0.9em;">Gemini 및 Groq의 캐스케이딩(cascading) 9단계 자동 장애 복구(auto-failover).</em></td><td width="50%"> <strong style="font-size: 1.2em;">에어갭 로컬 AI 컨테이너 (Air-Gapped Local AI Container)</strong> <br><br><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Farnab825%2FFieldQuest%2Fmain%2Fapps%2Fweb%2Fpublic%2Fscreenshot%2F7.png" alt="로컬 AI 컨테이너 (Local AI Container)" width="800" height="850"><br><em style="font-size: 0.9em;">100% 프라이빗 Ollama (qwen2.5:3b, gemma2:2b).</em></td></tr></tbody></table>

코드

The 전체 코드베이스는 MIT 라이선스 하에 오픈 소스로 공개됩니다:

GitHub logo arnab825 / FieldQuest

FieldQuest 🌿

당신의 동네가 당신의 피드보다 더 흥미롭습니다.

FieldQuest는 세련되고, 오픈 소스이며, AI 기반의 오프라인 우선(offline-first) 자연 탐험형 Progressive Web App (PWA)입니다. 이 앱은 사람들이 화면에 붙어 있는 시간을 줄이고, 대신 집 문 바로 바깥에 존재하는 살아있는 생물 다양성—도시 공원, 발코니 화분, 조용한 교외 거리, 또는 숲길—을 탐험하는 데 더 많은 시간을 보내도록 영감을 줍니다.

우리의 철학 및 과학적 근거 (Our Philosophy & Science)

FieldQuest는 또 다른 피상적인 챗봇 래퍼(chatbot wrapper)가 아닙니다. 이는 명확한 과학적, 교육적 근거를 바탕으로 설계된 반(反)챗봇 자연 관찰 도구입니다:

인지과학 및 주의력 회복 이론(Attention Restoration Theory, ART): Kaplan & Kaplan의 인지 심리학에 뿌리를 둔 이 이론에 따르면, 장시간의 화면 사용은 직접적인 실행적 주의력(direct executive attention)을 고갈시킵니다. 비자발적인 자연 감각 몰입("soft fascination")이 집중력을 회복시켜 줍니다. FieldQuest는 탐험가들이 걸으면서 유리창만 응시하는 대신 주머니에 휴대폰을 넣도록 능동적으로 **화면 최소화 모드(Screen-Down Mode)**를 사용합니다.
식물 생태 기능 형태학 및 생지표: 관찰형 퀘스트는 참가자들에게 기본적인 생태학적 원리, 즉 잎맥 구조(leaf venation architecture), 나무껍질 습도 기울기(bark moisture gradients), 그리고 공생체로서의 지의류 등을 교육합니다.

View on GitHub

기술 스택 (Technical Stack)

프론트엔드: React 19, TypeScript, Vite, Tailwind CSS v4, Dexie.js (IndexedDB), Canvas 2D composite renderer, vite-plugin-pwa.
백엔드: Node.js LTS, Express 5, TypeScript, Zod 스키마 유효성 검사(schema validation).
로컬 AI: 오픈 웨이트 모델인 qwen2.5:3b와 gemma2:2b를 실행하는 Ollama.
컨테이너화: Rootless 멀티 스테이지 Podman 및 Docker compose (web, api, ai).

구축 방법 (How I Built It)

1. 하이브리드 AI 아키텍처 및 9단계 장애 복구 매트릭스 (Hybrid AI Architecture & 9-Tier Failover Matrix)

FieldQuest는 현장에서 절대 다운되지 않도록 설계되었습니다. 만약 하나의 API가 속도 제한(rate limits)에 걸리거나 셀룰러 서비스가 끊기더라도, 시스템은 다음 단계로 원활하게 연쇄적으로 작동합니다:

[Tier 1-4] Google Gemini 클러스터 (gemini-3.8-flash → gemini-3.1-flash → flash-latest)
     │ (429 할당량 초과 또는 오류 발생 시)
     ▼
...

2. 컨테이너화된 Podman 오케스트레이션 (Containerized Podman Orchestration)

전체 스택은 rootless Podman을 사용하여 실행됩니다:

npm run podman:up
npm run podman:pull-gemma

3가지 마이크로서비스(microservices)를 실행합니다:

fieldquest-web (React PWA, 포트 5173)
fieldquest-api (Express 5 게이트웨이, 포트 4000)
fieldquest-ai (Ollama AI 데몬, 영구 모델 볼륨을 가진 포트 11434)

오픈 혁신(Open Innovation)은 왜 중요한가요?

자연 속 진정한 프라이버시: 트레일에서 사진을 찍고 사색을 기록할 때, 당신의 생각은 중앙 집중식 클라우드 광고 엔진으로 전송되어서는 안 됩니다. 온디바이스(on-device)에서 구동되는 오픈 웨이트 모델(qwen2.5:3b, gemma2:2b)은 사용자에게 절대적인 데이터 주권(data sovereignty)을 제공합니다.
셀 타워 없이 작동하는 오프라인 복원력: 폐쇄형 API는 활성 인터넷 연결을 필요로 합니다. 숲, 공원, 산에는 종종 통신 신호가 약합니다. 오픈 모델은 생성형 지능이 엣지 노트북(edge laptops), Raspberry Pi 또는 에어갭(air-gapped) 로컬 장치에서 구동되도록 허용합니다.
임의적인 지원 중단 및 페이월로부터의 자유: 독점 API는 가격을 변경하거나, 컨텍스트를 줄이거나, 하룻밤 사이에 작동을 멈출 수 있습니다. 오픈 혁신은 자연 탐험가와 교육자들이 외부 의존성 없이 영원히 FieldQuest를 운영할 수 있음을 보장합니다.

나의 에이전트 세션 (My Agent Session)

이 프로젝트는 Antigravity AI Agent의 페어 프로그래밍 워크플로우 도움을 받아 구축되었습니다:

Gemini와 Groq를 활용한 반복적인 다중 모델 폴백 체인(multi-model fallback chain) 설계.
제로 레이턴시 로컬 관측 기록 저장을 위한 Dexie IndexedDB 클라이언트 스키마.
장식적인 린네안 경계(Linnaean borders)와 단일 페이지 벡터 PDF 인쇄 기능을 갖춘 박물관급 HTML5 Canvas 2D 합성 포리오 생성기.
rootless Podman compose 및 Vitest 자동화 스위트(테스트 27개 통과)를 사용한 엔드투엔드 컨테이너화.

FieldQuest: 주변 환경이 피드보다 더 흥미로운 이유

요약

핵심 포인트