코딩 0%로 AR 웹앱 만들기 - 손 동작 인식 캐릭터 게임 완성하기 2026

📑 이 글의 목차

🎂 이게 뭔가요? — 5월 5일 루피 생일 기념 AR
🎮 지금 바로 체험해보세요! (라이브 링크)
🛠️ 사용한 기술 스택 (전부 무료)
📦 단계별 만들기 가이드
⚠️ 자주 막히는 포인트
🎨 나만의 캐릭터로 바꾸기
🔚 마무리 + Claude 활용 꿀팁

💡 30초 요약

5월 5일은 루피 생일! 폰 카메라에 ✊ 주먹 한 개 쥐면 일반 펀치, ✊✊ 두 개 쥐면 고무고무 피스톨이 발사되는 AR 웹앱을 만들었어요! 코딩 1도 몰라도 Claude랑 채팅만으로 완성. Google MediaPipe로 손 추적, Three.js로 3D 캐릭터 띄우고, Mixamo로 진짜 격투 애니메이션 입혔어요. 완전 무료, 설치 필요 없음, 폰 카메라만 있으면 OK!

🤖 혹시 따라하기 복잡해 보이세요? 글 끝에 비밀 꿀팁 있으니 끝까지 읽어주세요!

🎂 이게 뭔가요?

오늘이 5월 5일, 몽키 D. 루피의 생일이잖아요. 원피스 팬으로서 뭔가 특별한 걸 만들고 싶었어요.

그래서 만든 게 루피 AR(증강현실) 웹앱이에요. 어떻게 작동하냐면:

📱 폰 카메라로 책상이나 바닥 비추기
👆 화면 탭 → 그 위치에 루피가 등장
✊ 주먹 한 개 쥐기 → 일반 PUNCH!
✊✊ 주먹 두 개 쥐기 → 고무고무 피스톨!! (오른팔이 5배로 쭉~ 늘어남 🦾)

앱 설치 필요 없어요. 그냥 웹 링크 하나만 있으면 끝. 친구한테 링크 보내면 친구도 자기 폰으로 똑같이 즐길 수 있어요.

🎯 핵심 포인트

이 모든 게 공짜예요. 호스팅도 무료(GitHub Pages), 손 추적 기술도 무료(Google MediaPipe), 3D 엔진도 오픈소스(Three.js), 애니메이션도 무료(Mixamo). 돈 한 푼 안 들이고 진짜 격투 게임 같은 AR 앱을 만들 수 있어요.

🎮 지금 바로 체험해보세요!

설명만 읽지 말고 직접 해봐야 진짜 느낌이 와요. 폰으로 아래 링크 접속하면 끝!

🏴‍☠️ 라이브 데모 🏴‍☠️

👉 ausbro80.github.io/luffy-ar 👈

📱 폰으로 접속 → 카메라 권한 허용 → 바닥 탭 → 주먹 쥐기!

🎬 사용법 (30초면 끝)

단계	동작	결과
1️⃣	START 버튼 클릭	후면 카메라 자동 켜짐
2️⃣	책상이나 바닥 화면 탭	그 자리에 루피 등장 (폭죽 펑!)
3️⃣	✊ 주먹 한 개 쥐기	루피가 일반 펀치 발사
4️⃣	✊✊ 주먹 두 개 쥐기	고무고무 피스톨!! 팔 5배 늘어남 🦾

💡 꿀팁: 친구가 폰을 들고 있고, 본인은 카메라 앞에 두 손 보이게 ✊✊ 주먹 쥐어보세요. 슬로우 모션 + 팔 늘어남이 진짜 영화 같아요!

📺 실제 작동 영상

↑ 두 주먹 ✊✊ 쥐면 루피가 GOMU GOMU PISTOL 발사 (오른팔 쭉~ 늘어남)

🛠️ 사용한 기술 스택 (전부 무료)

기술	역할	비용
MediaPipe Hands	구글이 공짜로 풀어준 손 추적 AI. 손가락 21개 관절을 실시간 인식	무료
Three.js	웹에서 3D 캐릭터를 띄우는 마법의 도구	오픈소스
Mixamo	Adobe가 공짜로 풀어준 3D 애니메이션 라이브러리 (idle, punch 등)	무료
Blender	3D 모델에 애니메이션 입히고 GLB로 내보내기	오픈소스
GitHub Pages	웹사이트 무료 호스팅 (HTTPS 자동 제공)	무료
Claude AI	코드 작성 + 디버깅 다 해줌	무료/유료

총 비용: 0원 💸

🤔 MediaPipe가 뭐예요?
구글이 공개한 AI 모델인데, 웹 브라우저에서 바로 손, 얼굴, 자세를 추적할 수 있어요. 예전엔 이런 거 만들려면 머신러닝 박사 학위 필요했는데, 이젠 그냥 가져다 쓰면 돼요. 진짜 좋은 시대예요.

📦 단계별 만들기 가이드

1️⃣ 3D 캐릭터 모델 구하기

3D 모델 (glb 파일)

Sketchfab에서 "luffy" 검색
다운로드 시 glTF/GLB 형식 선택
사이즈 5MB 이하 추천 (모바일 로딩 빠름)

⚠️ FBX 파일은 너무 무거워서 모바일에서 못 써요. 꼭 GLB로 받으세요. FBX밖에 없으면 gltf.report에서 변환하세요.

2️⃣ Mixamo로 애니메이션 입히기

Mixamo(Adobe 무료 서비스)에 접속해서:

회원가입 (무료)
다운받은 GLB 모델 업로드
자동으로 본(뼈대)이 입혀짐
애니메이션 라이브러리에서 Idle(대기) 선택 → 다운로드
다시 Punching 선택 → 다운로드

이렇게 하면 같은 캐릭터에 두 가지 애니메이션이 입혀진 파일이 생겨요.

3️⃣ Blender로 두 애니메이션 합치기

Blender(무료) 열어서:

Idle 애니메이션 GLB 임포트
Punching 애니메이션 NLA Track으로 추가
둘 다 같은 Armature(뼈대)에 연결
File → Export → glTF 2.0 → "All Actions" 체크 ⭐ 중요!
luffy_animated.glb로 저장

⚠️ "All Actions" 체크 안 하면 한 가지 애니메이션만 들어가요. 꼭 체크!

4️⃣ Claude한테 코드 받기

Claude한테 이렇게 말하면 돼요:

"MediaPipe Hands로 손 추적하고, Three.js로 GLB 모델 띄우는 AR 웹앱 만들어줘. 화면 탭하면 바닥에 캐릭터 등장하고, 주먹 쥐면 punch 애니메이션 재생되게 해줘. 두 주먹 쥐면 오른팔이 5배로 늘어나는 효과도 추가해줘."

그러면 Claude가 알아서 HTML 파일 하나로 다 짜줘요.

5️⃣ GitHub Pages에 배포

GitHub 새 repo 만들기 (이름: luffy-ar)
HTML 파일 + GLB 파일 업로드
Settings → Pages → Source: main 브랜치 선택
2-3분 대기 → 배포 완료
URL: https://yourname.github.io/luffy-ar/

6️⃣ 폰으로 테스트!

폰에서 자기 GitHub Pages URL 접속
카메라 권한 허용
바닥 탭 → 캐릭터 등장
주먹 쥐기 → 펀치!

💡 안 된다면? HTTPS 필수입니다. GitHub Pages는 자동으로 HTTPS 제공하니 걱정 없어요.

⚠️ 자주 막히는 포인트

저도 이거 만들면서 진짜 많이 헤맸어요. 같은 실수 안 하시도록 공유합니다:

⚠️ 캐릭터가 T자 자세로 굳어있어요

원인: GLB 파일에 애니메이션이 없거나, mixer를 안 만들어서.
해결: Mixamo에서 idle 애니메이션 받아서 Blender로 합치기. 코드에서는 THREE.AnimationMixer로 재생.

⚠️ 카메라가 자꾸 셀카(전면)로 돌아가요

원인: iOS Safari가 facingMode: 'environment'를 무시하는 경우 있음.
해결: navigator.mediaDevices.enumerateDevices()로 모든 카메라 목록 받아서, 라벨에 "back"이나 "rear" 들어간 카메라를 deviceId로 직접 지정해서 사용. 이러면 100% 후면 카메라로 고정돼요.

⚠️ 팔이 안 늘어나요

원인: Mixamo 애니메이션이 본의 scale 키프레임을 가지고 있어서, 우리가 늘려도 매 프레임 1로 덮어씀.
해결: 코드로 punch 애니메이션 클립의 tracks 중에서 RightArm/RightForeArm의 .scale 트랙만 필터로 제거. 그러면 우리가 설정한 scale 값이 유지돼요.

⚠️ 본 이름이 안 맞아요

원인: Mixamo 본은 원래 mixamorig:RightArm인데, GLTFLoader가 콜론(:)을 자동 제거해서 mixamorigRightArm이 됨.
해결: 본 매칭할 때 n.includes('RightArm')처럼 부분 문자열 매칭하면 둘 다 잡힘.

⚠️ 모바일에서 변경사항이 안 보여요

캐시 문제예요. 시크릿 탭으로 접속하거나 설정 → Safari → 방문 기록 지우기로 캐시를 비우세요. 또는 URL 끝에 ?v=2처럼 임의의 값을 붙이면 캐시 우회 가능해요.

🎨 나만의 캐릭터로 바꾸기

루피 말고 다른 캐릭터로도 가능해요:

나의 히어로 아카데미아 데쿠 — 풀카울로 펀치
나루토 — 라센건 발동
드래곤볼 손오공 — 카메하메하 발사
본인 캐릭터 — 자기만의 마스코트로 시그니처 동작

방법은 똑같아요:

Sketchfab에서 캐릭터 모델 받기
Mixamo에서 원하는 동작 애니메이션 입히기
Blender에서 합쳐서 GLB로 export
코드의 luffy.glb를 새 파일로 교체

💡 활용 아이디어

인스타/틱톡 콘텐츠: 친구와 영상 찍어서 SNS에 올리기. 일반 영상보다 임팩트 100배. "어떻게 만들었어요?" 댓글 폭주 예상.

아이들 교육용: 캐릭터를 영어 단어 발음 가르치게 만들기. 손을 들면 다음 단어, 주먹 쥐면 발음 들리게. AR + 학습 결합으로 몰입도 폭발.

브랜드 마스코트: 회사 마스코트 캐릭터를 AR로 띄우기. 명함이나 포스터에 QR 붙여놓고, 비추면 마스코트가 인사하는 식.

K-POP 팬 굿즈: 좋아하는 아이돌 모델을 띄워서 댄스 동작 인식하면 같이 춤추게 만들기. 팬덤 폭발.

결혼식/생일: 청첩장이나 생일 카드에 QR 붙여서, 폰으로 비추면 신랑신부 또는 주인공 3D 캐릭터가 등장하는 깜짝 선물.

🔚 마무리

이번 프로젝트로 알 수 있는 건, AR + 손 추적 같은 첨단 기술이 더 이상 어렵지 않다는 거예요. 5년 전만 해도 Unity 깔고, ARKit 배우고, 머신러닝 모델 학습시키고... 이런 거 다 거쳐야 했는데, 이제는 구글이랑 메타랑 어도비가 공짜로 다 풀어놨어요. 우리는 그냥 가져다 조립만 하면 돼요.

특히 MediaPipe + Three.js + Mixamo 조합은 진짜 강력해요. 손, 얼굴, 자세 인식부터 3D 렌더링, 애니메이션까지 다 무료로 끝나니까요. HTML 파일 하나로 옛날 게임 회사가 몇 달 걸려서 만들 만한 걸 만들 수 있어요.

이번 주말에 자녀와 함께, 또는 친구와 함께 한번 만들어보세요. 좋아하는 캐릭터 하나만 골라서요. 만들고 나면 진짜로 신기해요. "내가 이걸 만들었다고?" 싶을 거예요.

다음 글에서는 두 캐릭터끼리 진짜 배틀하는 AR 게임을 만들어볼게요. HP 바, 콤보 공격, 카메라가 자동으로 캐릭터를 따라가는 시스템까지! 시즌 2 기대해주세요 🦾

🤖 따라하기 어렵다면? Claude한테 떠넘기세요!

"위 글 너무 길고 복잡해 보여..." 하시는 분들께 꿀팁:

👉 이 글 전체를 긁어서 Claude한테 그대로 던져주세요!

그리고 이렇게 말하세요:

"이 블로그 글대로 루피 AR 앱 만들고 싶어. 처음부터 차근차근 도와줘. 나는 코딩 1도 몰라."

그러면 Claude가 알아서 단계별로 안내해줘요. 막히는 부분 생기면 그냥 캡처해서 보여주면 끝. 이게 바로 바이브코딩 방식이에요 — AI랑 같이 만들기. 🚀

자주 묻는 질문

Q. 진짜 코딩 몰라도 만들 수 있나요?
A. 네! 저도 코드 한 줄 직접 짠 적 없어요. Claude한테 채팅으로 부탁만 했어요. "이렇게 해줘" → 코드 받기 → GitHub에 올리기. 끝.

Q. iPhone, Android 둘 다 작동하나요?
A. 네, Safari 16+ / Chrome 모두 지원해요. WebXR이 아니라 일반 카메라 API + MediaPipe를 쓰기 때문에 호환성 좋아요.

Q. 손 추적이 잘 안 돼요
A. 밝은 곳에서 하세요. 어두우면 MediaPipe가 손 인식을 못해요. 카메라 앞에 손 전체가 보이게 들어주세요.

Q. 인터넷 없이도 되나요?
A. 처음 한 번은 인터넷 필요해요 (3D 모델, MediaPipe 모델 다운로드). 이후엔 캐시되어서 오프라인도 가능.

Q. 상업적으로 써도 되나요?
A. 코드는 OK인데, 원피스 IP는 토에이/슈에이샤 소유라 비상업적 용도로만 써야 해요. 상업적으로 쓸 거면 자기 캐릭터/마스코트로 만드세요.

Q. 다른 동작도 인식 가능한가요?
A. 네! MediaPipe는 손가락 21개 관절을 다 추적하니까 가위/바위/보, 따봉, 하트 등 어떤 손동작이든 만들 수 있어요. 응용 무궁무진!

📌 바이브코딩 스쿨은 코딩 없이도 AI로 앱을 만들 수 있도록 매일 아침·저녁 최신 내용을 업데이트합니다. 구독하고 놓치지 마세요! 🔔