프로젝트를 위해 직접 Hand Pose Model을 훈련할 수 있는 앱! 🤌

발행: (2026년 2월 28일 오전 11:30 GMT+9)
5 분 소요
원문: Dev.to

Source: Dev.to

커뮤니티

이 도구는 AI/ML 커뮤니티, 특히 직접 모델을 만들어 보고 싶은 사람들을 대상으로 합니다. 제가 AI를 배우기 시작했을 때, 모델을 만들고 파일을 다운로드한 뒤 프로젝트에 가져올 수 있는 리소스가 거의 없었습니다. 서비스에 가입하거나 비용을 지불하지 않고도 사용할 수 있는 것이 드물었습니다. 무료 서비스조차도 종종 제한적입니다.

사전 학습된 모델을 사용하는 것도 문제가 될 수 있습니다. 정확도가 충분히 높지 않을 수 있고, API 키를 발급받아야 하는데, Chrome 확장 프로그램 같은 것을 만들 때 이를 숨기기가 어렵습니다.

내가 만든 것

HandTracker라는 웹사이트를 만들었습니다. 이 사이트에서는 ml5.js를 사용해 직접 손 자세 모델을 학습시킬 수 있습니다. 원하는 제스처를 정의하고 원하는 대로 분류할 수 있습니다—예를 들어 “Hello” 제스처나 고죠의 시그니처 Domain Expansion: Infinite Void 제스처 등.

HandTracker 데모 GIF

데모

실시간 데모

웹사이트에 처음 방문했을 때 화면은 다음과 같습니다:

HandTracker 홈페이지 스크린샷

카메라가 활성화되어 있는지 확인하세요. 그렇지 않으면 앱이 작동하지 않습니다.

설정

설정 스크린샷

클래스 정의

특정 제스처에 해당하는 클래스를 생성합니다(예: ASL의 “A” 사인).

수집

각 클래스마다 몇 개의 데이터 샘플을 캡처할지 선택합니다. 모든 클래스에 대해 동일한 양을 수집하는 것이 권장됩니다.

훈련 파라미터

샘플 크기에 따라 훈련 파라미터를 조정합니다. 모든 설정을 마친 뒤 “Begin Training”(훈련 시작) 버튼을 클릭하면 훈련이 시작됩니다.

훈련 중에는 손이 보이지 않을 때 데이터 수집이 자동으로 일시 중지됩니다.

모델 테스트

훈련이 끝난 후 모델을 테스트할 수 있습니다:

테스트 GIF

훈련된 모델을 ZIP 파일로 다운로드할 수도 있습니다. 압축 파일에는 다음이 포함됩니다:

Model.json
Model.weights.bin
Model_meta.json

구현 방법

앱은 순수 HTML, CSS, JavaScript로 구축되었으며, 머신러닝 기능을 위해 ml5.js, 그래픽을 위해 p5.js를 사용했습니다. 모든 코드는 Google Gemini로 생성했으며 100 % Gemini가 작성했습니다.

코드

소스 코드는 GitHub에 공개되어 있습니다.

기여에 관심이 있다면 자유롭게 풀 리퀘스트를 제출하세요. 이 도구를 무료로 유지하고, 궁극적으로 손 자세 외에도 이미지 분류, 텍스트 생성 등 다양한 작업으로 확장하는 것이 목표입니다.

질문이나 의견이 있나요? 언제든지 알려 주세요!

0 조회
Back to Blog

관련 글

더 보기 »

일이 정신 건강 위험이 될 때

markdown !Ravi Mishrahttps://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fu...