📑 이 글의 목차
- 🎯 이게 뭔가요? — 포켓몬 AR 데모
- 🎮 지금 바로 체험해보세요! (라이브 링크 + 카드 다운로드)
- 🛠️ 필요한 준비물 (5분이면 충분)
- 📦 단계별 만들기 가이드
- ⚠️ 자주 막히는 포인트
- 🎨 나만의 포켓몬 추가하기
- 🔚 마무리 + Claude 활용 꿀팁
💡 30초 요약
코딩 1도 몰라도 30분이면 만드는 진짜 AR 앱! 포켓몬 카드를 폰으로 비추면 3D 포켓몬이 등장하고, 버튼 누르면 펀치/화염 분사까지! 완전 무료, 설치 필요 없음, 친구한테 링크만 보내면 돼요. GitHub Pages + MindAR + Three.js로 만든 진짜 작동하는 AR 웹앱이에요.
🤖 혹시 따라하기 복잡해 보이세요? 글 끝에 비밀 꿀팁 있으니 끝까지 읽어주세요!
🎯 이게 뭔가요?
이번 프로젝트는 AR(증강현실) 웹앱이에요. 어렵게 들리죠? 쉽게 말하면:
- 📱 폰 카메라로 포켓몬 카드 비추기
- → 카드 위에 3D 포켓몬이 진짜로 나타남
- → ATTACK 버튼 누르면 공격 효과 작렬
- → 카드 두 장 동시에 비추면 둘 다 같이 등장
앱 설치 필요 없어요. 그냥 웹 링크 하나만 있으면 끝. 친구한테 링크 보내면 친구도 자기 폰으로 똑같이 즐길 수 있어요.
🎯 핵심 포인트
이 모든 게 공짜예요. 호스팅도 무료(GitHub Pages), 라이브러리도 오픈소스(MindAR + Three.js), 카드 인식도 무료, 3D 모델도 무료. 돈 한 푼 안 들이고 진짜 AR 앱을 만들 수 있어요.
🎮 지금 바로 체험해보세요!
설명만 읽지 말고 직접 해봐야 진짜 느낌이 와요. 아래 3단계만 따라하세요:
📥 테스트용 카드 이미지 다운로드
집에 포켓몬 카드 없어도 괜찮아요. 아래 이미지를 폰이나 모니터에 띄우고 비추면 됩니다:
| 카드 | 다운로드 링크 | 사용법 |
|---|---|---|
| ⚡ 피카츄 카드 | pikachu_card.jpg 다운로드 | 비추면 피카츄 등장 + 펀치 모션 |
| 🔥 리자몽 카드 | charizard_card.jpg 다운로드 | 비추면 리자몽 등장 + 입에서 화염 |
💡 꿀팁: 카드 이미지를 컴퓨터 모니터에 띄워놓고 폰으로 비춰도 돼요. 또는 인쇄해서 책상에 놓고 비추면 더 자연스러워요!
📺 실제 작동 영상
🛠️ 필요한 준비물 (5분이면 충분)
| 항목 | 어디서 구하나요? | 비용 |
|---|---|---|
| 포켓몬 카드 이미지 | 구글 검색 (jpg/png) | 무료 |
| 3D 포켓몬 모델 | Sketchfab (charizard 검색) | 무료 |
| MindAR 컴파일러 | 공식 도구 | 무료 |
| GitHub 계정 | github.com (무료 가입) | 무료 |
| 코딩 지식 | 없어도 됨 | 0 |
총 준비 시간: 5분
📦 단계별 만들기 가이드
1️⃣ 준비물 모으기
카드 이미지 (jpg)
- 구글에 "pikachu card" "charizard card" 검색
- 1000x1400 정도 해상도로 저장
- 카드 정면이 잘 보이는 깔끔한 이미지가 좋아요
3D 모델 (glb)
- Sketchfab에서 원하는 포켓몬 검색
- 다운로드 시 glTF/GLB 형식 선택
- 사이즈 5MB 이하 추천 (모바일 로딩 빠름)
⚠️ FBX 파일은 너무 무거워서 모바일에서 못 써요. 꼭 GLB로 받으세요.
2️⃣ MindAR로 카드 컴파일하기
MindAR 컴파일러에 접속해서:
- Add Images 버튼 클릭
- 카드 이미지들을 한꺼번에 업로드 (Ctrl/Cmd 누르고 다중 선택)
- Start 버튼 클릭 → 1분 대기
- Download로
targets.mind파일 받기 - 파일명을
pikachu_card.mind로 변경
⚠️ 카드 순서가 중요해요! 위에서부터 0번, 1번 순서로 매겨집니다. 코드에서 anchor 인덱스랑 맞춰야 해요.
3️⃣ 코드 받아서 수정하기
GitHub에서 pokemon-ar 템플릿을 fork하거나 ZIP으로 다운로드.
폴더 구조:
pikachu-ar/ ├── index.html # 메인 코드 ├── assets/ │ ├── pikachu.glb # 3D 모델들 │ ├── charizard.glb │ ├── pikachu_card.jpg # 카드 이미지들 │ ├── charizard_card.jpg │ └── pikachu_card.mind # 방금 만든 트래킹 데이터 └── README.md
4️⃣ GitHub Pages에 배포
- GitHub 새 repo 만들기 (
yourname.github.io) - 압축 푼 폴더 안의 모든 파일을 드래그해서 업로드
- Settings → Pages → Source:
main브랜치 선택 - 2-3분 대기 → 배포 완료
- URL:
https://yourname.github.io/
5️⃣ 폰으로 테스트!
- 폰에서 자기 GitHub Pages URL 접속
- 카메라 권한 허용
- 카드 비추기 → 포켓몬 등장!
💡 안 된다면? HTTPS 필수입니다. GitHub Pages는 자동으로 HTTPS 제공하니 걱정 없어요.
⚠️ 자주 막히는 포인트
⚠️ 카드를 비춰도 인식이 안 돼요
- 원인 1: 조명 부족 → 밝은 곳에서 다시 시도
- 원인 2: 카드 광택 심함 → 홀로그램 카드는 인식 어려움
- 원인 3: .mind 파일 순서 오류 → 컴파일러에서 카드 순서와 코드의 anchor 인덱스 일치하는지 확인
⚠️ 3D 모델이 너무 크거나 너무 작아요
index.html에서 fixedScale 값 조정:
fixedScale: 0.135, // 작게: 0.05, 크게: 0.5
모델 GLB 파일마다 원본 크기가 달라서 직접 조절이 필요해요.
⚠️ 모바일에서 변경사항이 안 보여요
캐시 문제예요. 시크릿 탭으로 접속하거나 설정 → Safari → 방문 기록 지우기로 캐시를 비우세요. 또는 URL 끝에 ?v=2처럼 임의의 값을 붙이면 캐시 우회 가능해요.
⚠️ FBX 파일이 100MB라 못 올려요
gltf.report에 드래그하면 자동으로 GLB 변환 + 최적화돼요. 보통 100MB → 2-3MB로 줄어들어요.
🎨 나만의 포켓몬 추가하기
기본 코드에 새 포켓몬 추가하기는 정말 쉬워요:
loadPokemon({
name: 'Mewtwo', // 포켓몬 이름
glbPath: './assets/mewtwo.glb', // 3D 모델 경로
anchor: mindarThree.addAnchor(2), // 새 카드 번호
fixedScale: 0.1, // 사이즈 조정
});
이렇게 4줄만 추가하면 끝! 5마리, 10마리도 가능해요.
💡 활용 아이디어
포켓몬 컬렉션 인증샷: 친구들과 카드 자랑할 때 영상으로 찍어서 SNS에 올리기. 일반 카드 사진보다 100배 임팩트 있어요.
아이들 교육용: 영어/한국어 카드를 비추면 발음을 들려주고 단어 배우게 만들기. AR + 학습 결합으로 몰입도 폭발.
브랜딩/마케팅: 명함, 포스터, 제품 패키지를 카드처럼 사용해서 자기 브랜드의 마스코트나 제품 홀로그램이 등장하게 만들기.
행사 굿즈: 결혼식 청첩장, 생일 카드를 비추면 신랑신부 3D 캐릭터가 나오는 식. 진짜 인기 폭발할 거예요.
🔚 마무리
이번 프로젝트로 알 수 있는 건, AR 앱 만들기가 더 이상 어렵지 않다는 거예요. 5년 전만 해도 Unity 깔고 ARKit 배우고 앱스토어 심사 받고... 이런 거 다 거쳐야 했는데, 이제는 웹 브라우저 하나로 같은 경험을 만들 수 있어요.
특히 MindAR + Three.js + GitHub Pages 조합은 코딩 입문자가 도전하기 딱 좋은 스택이에요. 복잡한 백엔드도, 데이터베이스도, 결제 시스템도 필요 없어요. HTML 파일 하나로 끝나는 마법이죠.
이번 주말에 자녀와 함께, 또는 친구와 함께 한번 만들어보세요. 포켓몬 카드 한 장만 있으면 되니까요. 만들고 나면 진짜로 신기해요. "내가 이걸 만들었다고?" 싶을 거예요.
다음 글에서는 두 카드끼리 진짜 배틀하는 시스템을 만들어볼게요. HP 바가 있고, 공격 주고받고, 체력 0 되면 KO! 시즌 2 기대해주세요 ⚡
🤖 따라하기 어렵다면? Claude한테 떠넘기세요!
"위 글 너무 길고 복잡해 보여..." 하시는 분들께 꿀팁:
👉 이 글 전체를 긁어서 Claude한테 그대로 던져주세요!
그리고 이렇게 말하세요:
"이 블로그 글대로 포켓몬 AR 앱 만들고 싶어. 처음부터 차근차근 도와줘. 나는 코딩 1도 몰라."
그러면 Claude가 알아서 단계별로 안내해줘요. 막히는 부분 생기면 그냥 캡처해서 보여주면 끝. 이게 바로 바이브코딩 방식이에요 — AI랑 같이 만들기. 🚀
자주 묻는 질문
Q. 진짜 코딩 몰라도 만들 수 있나요?
A. 네! 코드는 그대로 쓰고 GLB 파일과 카드 이미지만 바꾸면 돼요. 텍스트 에디터로 4-5줄만 수정하면 끝.
Q. iPhone, Android 둘 다 작동하나요?
A. 네, Safari 16+ / Chrome 모두 지원해요. WebXR이 아니라 일반 카메라 API를 쓰기 때문에 호환성 좋아요.
Q. 인터넷 없이도 되나요?
A. 처음 한 번은 인터넷 필요해요 (3D 모델, 라이브러리 다운로드). 이후엔 캐시되어서 오프라인도 가능.
Q. 상업적으로 써도 되나요?
A. 코드는 OK인데, 포켓몬 IP는 닌텐도 소유라 비상업적 용도로만 써야 해요. 상업적으로 쓸 거면 자기 캐릭터/마스코트로 만드세요.
Q. 카드 말고 다른 이미지도 인식 가능한가요?
A. 네! 명함, 포스터, 책 표지, 사진 등 어떤 이미지든 가능해요. 단, 텍스처가 풍부하고 패턴이 명확해야 인식이 잘돼요.
📌 바이브코딩 스쿨은 코딩 없이도 AI로 앱을 만들 수 있도록 매일 아침·저녁 최신 내용을 업데이트합니다. 구독하고 놓치지 마세요! 🔔
