🌍 Plantera — 살아있는 지구에 나무 심기

Source: Dev.to

🌱 내가 만든 것

Plantera는 사용자가 실제 위치에 가상 나무를 심고 전 세계 커뮤니티가 함께 만드는 녹색 지도를 만들 수 있는 인터랙티브한 지구입니다.

핵심 기능

• 지구 어디든 나무 심기 – 위도와 경도로 위치 선택.
• 심은 나무의 이미지 업로드.
• 각 심기에 인용구나 메시지 추가.
• 더 많은 사람이 참여할수록 지구가 점점 푸르게 변하는 모습을 확인.

라이브 데모

https://plantera-phi.vercel.app

저장소

GitHub – anupamthakur-dev/plantera

기술 개요

3D 지구본 & 렌더링

• 식재 위치를 시각화하기 위해 3D 인터랙티브 지구본 사용.
• 성능 최적화:
  • 나무마다 고유 모델을 만들지 않고 식물 종류별로 그룹화.
  • 마커를 지연 렌더링.
  • 대용량 데이터셋을 위한 최적화된 렌더링 로직으로 수천 그루의 나무도 부드럽게 확장 가능.

식재 워크플로우

• 하단에 떠 있는 액션 바에 “묘목 심기 🌱” CTA 배치.
• 부드러운 슬라이드 애니메이션과 흐릿한 배경 오버레이가 적용된 하단 시트 모달.
• 상태 머신 아키텍처로 구축된 모달 시스템으로 UI를 깨뜨리지 않고 향후 확장 가능.
• 다중 이미지 업로드 지원 및 Supabase를 통한 안전한 저장.

Supabase 연동

• 인증, 데이터베이스, 스토리지 서비스 활용.
• 데이터 보호를 위한 행 수준 보안(RLS).
• 데이터베이스 테이블:
  • users
  • plants_planted
  • plant_images

성능 및 확장성

• 모달을 지연 로드.
• 식물 종류별 그룹화.
• 최소한의 3D 모델 사용.
• 효율적인 데이터베이스 쿼리.
  이러한 선택 덕분에 Plantera는 전 세계적인 사용량에서도 반응성을 유지합니다.

개발 하이라이트

• GitHub Copilot을 광범위하게 활용:
  • 확장 가능한 아키텍처 설계.
  • 모달 상태 머신 구축.
  • 서비스 레이어 구조화.
  • 성능 로직 최적화.
  • 깔끔한 TypeScript 인터페이스 생성.

향후 방향

• 실제 나무 심는 단체와의 파트너십.
• 게임화 요소와 커뮤니티 챌린지.
• 나무 성장 애니메이션 및 환경 영향 통계 제공.

Plantera는 지구의 날 인식을 인터랙티브하고 시각적인 커뮤니티 기반 경험으로 전환합니다—심은 각 나무가 환경 행동의 디지털 발자국이 됩니다.

나무를 심어보세요. 🌍