APOD-Mood-Gallery: 시각적으로 풍부한 AI 기반 인터랙티브 천문 갤러리
발행: (2026년 3월 1일 오후 07:47 GMT+9)
3 분 소요
원문: Dev.to
Source: Dev.to
Overview
APOD Mood Gallery는 NASA의 Astronomy Picture of the Day (APOD) 를 팔로우하는 우주 애호가, 천문학 사랑가, 그리고 천체 사진 팬들을 위해 만든 프로그레시브 웹 앱(PWA)입니다. 사용자는 과학적인 관점뿐 아니라 시각적 미학, 감성적인 분위기, 그리고 개인화된 컬렉션을 통해 우주를 탐험할 수 있으며, 모든 기능은 클라이언트‑사이드 AI와 3D 렌더링으로 구동됩니다.
Features
- AI Image Analysis – TensorFlow.js (MobileNet)를 이용한 브라우저 내 사생활 보호 이미지 분석으로 시각적 특성을 파악하고 이미지를 “무드”별로 분류합니다.
- Dynamic Color Palettes – 각 천문 이미지에서 조화로운 색상 팔레트를 자동으로 추출하며, Web Worker를 사용해 UI가 끊기지 않도록 합니다.
- 3D Solar System & Exoplanets –
astronomy-engine과react‑three‑fiber를 활용해 실시간 행성 위치를 인터랙티브하게 탐색합니다. - Personalized “For You” Feed – 로컬 추천 엔진이 사용자의 선호 우주 이미지를 학습해 맞춤 피드를 제공합니다.
- Mood Board Creator – 즐겨 찾는 이미지를 시각적 무드 보드로 구성하고 PDF 또는 ZIP 형태로 로컬에 내보낼 수 있습니다.
- PWA Support – 오프라인 기능과 백그라운드 APOD 동기화가 가능한 설치 가능한 앱입니다.
Technical Details
- Frontend Framework: React 19 + Vite를 사용해 빠르고 현대적인 개발 환경을 구현했습니다.
- Styling: Tailwind CSS, PostCSS, Autoprefixer.
- Machine Learning:
@tensorflow/tfjs와 MobileNet 모델(@tensorflow-models/mobilenet)을 이용한 브라우저 내 이미지 분류. - 3D Rendering:
three,@react-three/fiber,@react-three/drei,astronomy-engine을 활용해 정확한 천체 수학을 구현했습니다. - State & Performance: 커스텀 로컬‑스토리지 서비스와 Web Worker를 사용해 이미지 픽셀을 병렬 처리함으로써 메인 스레드 차단을 방지합니다.