3D 드론 미션 플래너 개발 경험

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발, DevOps

대상자

• 중급~고급 개발자 (React, Go, CesiumJS 사용 경험자)
• 드론 미션 플래너 개발 희망자
• AI 도구 활용 시 주의사항을 학습하고자 하는 개발자
• 난이도 높은 3D 렌더링 최적화 기술 습득 필요자

핵심 요약

• 핵심 기술 스택: Go, React, CesiumJS, MongoDB, Supabase
• 3D 렌더링 최적화: 카메라 높이에 따른 maximumScreenSpaceError 조건 분기 처리 (if-else 로직)
• AI 개발 도구 활용 한계: Cesium과 같은 비주류 기술의 경우 AI가 잘못된 예제 제공 → 100~200 줄 단위로 코드 생성 권장

섹션별 세부 요약

1. 프로젝트 목표 및 동기

• 개발 목적:

- 물리 시스템과 디지털 인터페이스의 교차점에서의 흥미를 구현

- Full-stack 개발 경험 확보 (React, Go, Web Auth)

• 기존 도구 개선:

- Litchi와 같은 기존 드론 플래너의 모바일 통합 및 모던 UI 개선

2. 기술 스택 및 인프라

• 프론트엔드:

- React, Tailwind, Vite

- 3D 지도: CesiumJS (2D: Leaflet)

• 백엔드:

- Go (Golang)

- 인증: Supabase (JWT 기반)

- 데이터베이스: MongoDB

• CI/CD:

- 프론트엔드: Vercel

- 백엔드: Render

3. 3D 렌더링 최적화

• 카메라 높이 기반 조건 분기:

```javascript

const optimizeTileLoading = () => {

const height = viewer.camera.positionCartographic.height;

if (height < 500) { viewer.scene.globe.maximumScreenSpaceError = 2; }

// ...

}

```

• 시간대 API 최적화:

- TimezoneDB API 제한 대응 → 서버 측 해시맵 캐싱 구현

4. 개발 과정의 주요 장애물

• CesiumJS 모듈화 문제:

- @cesium/engine 사용 시 의존성 누락으로 인한 빌드 실패 → 전체 Cesium 패키지 전환

• AI 도구 활용 시 한계:

- 대규모 코드 생성 시 중복/논리 오류 발생 → 작은 단위로 분할 권장

- 비주류 기술 (Cesium)에 대한 AI 응답 정확도 저하

5. 미래 목표

• 모바일 앱 개발:

- DJI Mobile SDK v4 사용 (iOS)

• 성능 개선:

- Cesium 렌더링 최적화 지속

• UI/UX 개선:

- 모바일 웹 UI 재설계 (현재 중단됨)

• 유저 피드백 수집 및 수익화 방안 검토

결론

• 3D 렌더링 최적화는 카메라 높이 조건 분기와 서버 측 캐싱을 통해 실현 가능
• AI 도구 활용 시 작은 단위로 분할하고, 비주류 기술의 경우 주의 필요
• 모바일 통합 및 UI 개선이 향후 핵심 이슈 → DJI SDK v4 활용 권장
• 유저 피드백 수집을 통한 제품 수익화 전략 수립 필요