React Three Fiber와 Gemini AI로 공간 3D 지식 그래프를 만들었습니다 🌌

Source: Dev.to

Hey developers! 👋

나는 언제나 기존의 메모 앱이 우리의 뇌를 부자연스러운 선형 리스트로 강제한다는 느낌을 받았다. 우리의 생각은 연결되고, 혼란스럽고, 공간적이다. 그래서 나는 이를 해결하기 위한 실험을 몇 주 동안 만들었다.

그 이름은 Echo Archive다.

노트가 3D 별자리 안에 존재하는 공간형 지식 관리 시스템이다.

🛠 The Tech Stack

가볍지만 시각적으로 몰입감 있게 만들고 싶었다.

• Frontend: React 18 + Vite
• 3D Engine: Three.js & React Three Fiber (drei)
• AI Core: Google Gemini AI (via API)
• Styling: Tailwind CSS + Lucide Icons
• Storage: LocalStorage (Privacy first, no cloud database)

🧠 The AI Integration

가장 멋진 부분은 Gemini를 통합한 것이었다. gemini-2.5-flash 모델을 사용하고 있기 때문에 다음을 구현할 수 있었다:

• Auto‑Tagging: AI가 메모를 읽고 컨텍스트에 기반해 카테고리를 제안한다.
• Smart Continue: 작가의 블록? AI가 문장을 이어준다.
• Abstracts: 긴 메모 상단에 TL;DR 요약을 자동으로 생성한다.

🌌 The Challenge: Mobile 3D Navigation

휴대폰 화면에서 3D 궤도 제어를 자연스럽게 만드는 것은 까다로웠다. 텍스트 편집기를 실수로 트리거하지 않으면서 한 손가락으로 우주를 팬하고 두 손가락으로 줌할 수 있도록 터치 이벤트를 신중히 매핑해야 했다.

🔗 Try it out

v1.0을 방금 출시했으며 네비게이션 감각에 대한 피드백을 받고 싶다!

Live Demo:

공간 인터페이스에 대해 어떻게 생각하는지 알려줘. 미래인가, 아니면 단순한 기믹인가?

Cheers!