피드로 돌아가기
I Built a Real-Time Artemis II 3D Tracker in One Session — Here's the Engineering Pipeline That Made It Possible
Dev.toDev.to
Frontend

6시간 만에 완성한 실시간 3D 트래커, AI 에이전트의 엔지니어링 파이프라인 전략

I Built a Real-Time Artemis II 3D Tracker in One Session — Here's the Engineering Pipeline That Made It Possible

Wrought2026년 4월 3일9intermediate

Context

AI 기반의 단순 프롬프트 코딩은 테스트와 에러 핸들링이 부족한 불안정한 결과물을 생성. 설계 리뷰와 아키텍처 결정 기록이 부재한 "Vibe Coding" 방식의 한계 직면. 체계적인 공학 프로세스 없이 구현된 코드는 운영 환경에서 런타임 오류와 성능 저하 유발 가능성 높음.

Technical Solution

  • Finding → Research → Design → Blueprint → Implementation → Code Review 순의 단계적 엔지니어링 파이프라인 'Wrought' 적용
  • Vite와 React Three Fiber 조합을 선택하여 SSR 오버헤드를 제거하고 WebGL 캔버스 최적화 및 빠른 HMR 환경 구축
  • 4분 간격의 NASA OEM 데이터를 Lagrange Polynomial 기반 8차 보간법으로 처리하여 60fps의 매끄러운 3D 궤적 시각화 구현
  • 3,000 토큰 미만의 소규모 지식 베이스 특성을 고려해 RAG 대신 System Prompt 주입 방식을 채택한 Gemini 2.5 Flash 챗봇 설계
  • 코드 리뷰 단계를 통해 O(n) 시간 복잡도의 핫패스와 60fps 리렌더링 폭풍 등 치명적인 성능 버그 5건 사전 제거
  • J2000 지구 중심 좌표계 설정과 1단위=10,000km 기준의 정밀한 데이터 파이프라인 설계

Impact

  • 전체 소스 코드 약 8,000라인 및 47개 파일 구성
  • 유닛 테스트 15개 작성 및 빌드 시간 약 2초 달성
  • 최종 번들 사이즈 149KB(App) + 1.1MB(Three.js/R3F)
  • 구현 단계에서의 반복 횟수 1회 및 크리티컬 버그 5건 조기 발견 및 수정

Key Takeaway

상위 단계의 정밀한 설계와 문서화된 청사진은 하위 구현 단계의 시행착오를 제거하고 개발 속도를 가속화함. 기술 선택 시 데이터 규모와 예산 제약에 맞춘 실용적 접근이 오버엔지니어링을 방지하는 핵심임.


AI 에이전트 활용 시 단순 프롬프트가 아닌 '설계-구현-리뷰'의 강제적 파이프라인을 구축하여 코드 품질과 유지보수성을 확보할 것

원문 읽기