- Claude Code는 베타를 벗어나 인기 있는 AI 코딩 도구로 자리매김했으며, Supabase와 결합하여 최소한의 노력으로 인터랙티브 앱을 구축할 수 있게 합니다. 🚀
- 핸드 트래킹 앱 개발은 Claude Code의 도움을 받아 프론트엔드 기능 구현부터 시작하며, 이후 Supabase를 활용한 데이터 상호작용(예: 핀치 동작으로 테이블에 데이터 추가)을 목표로 합니다. 🖐️
- Claude Code는
npm install명령어로 쉽게 설치되며 터미널에서cloud명령으로 세션을 시작할 수 있고,cloud.md파일을 통해 LLM에 대한 프로젝트 지침을 설정합니다. 💻 - 프로젝트 기술 스택은 React, Vite, TypeScript, Tailwind CSS, Supabase를 포함하며, 핸드 트래킹에는 Google의 MediaPipe Hands 라이브러리를 활용합니다. 🛠️
- Claude Code는 프롬프트 기반으로 작동하며, 음성 AI를 통한 프롬프트 입력, 백그라운드 코드 실행, 파일 수정 권한 요청 등의 방식으로 개발 과정을 지원합니다. 🗣️
- 초기 Vite 프로젝트 생성 시 루트 디렉토리 충돌 문제나 개발 서버의 코드 변경 미반영 문제(Vite 세션 재시작 필요)와 같은 개발 과정의 특정 난관들이 있었습니다. 🚧
- Claude Code는 웹캠 미리보기, 카메라 열거 및 선택 기능 구현, 핸드 스켈레톤 오버레이 드로잉 등 핸드 트래킹의 핵심 UI 요소를 단계적으로 구축합니다. 📸
- Claude Code 사용 비용은 API 키를 통한 종량제(빠른 토큰 소모) 또는 월 $100의 Max 플랜(무제한 사용)으로 선택할 수 있습니다. 💰
- 핸드 트래킹을 통해 화면 내 원형 객체를 핀치하여 이동시키는 기능을 구현했으며, 초기 성능 문제(화면 깜빡임)가 발생했으나 Claude Code가 이를 성공적으로 디버깅하고 최적화하여 부드러운 작동을 가능하게 했습니다. ✨
Recommanded Videos
