얼굴을 인식해 가면을 씌우고, 펴진 손가락 개수에 따라 화면 이펙트가 바뀌고, 구글 밋처럼 가상 배경까지 갈아끼우는 카메라 앱을 만들어봅니다. 안면인식은 보통 AI 연구팀의 영역이라고 생각하기 쉽지만, 이번에는 코딩 없이 프롬프트 복사-붙여넣기 4번으로 완성합니다. Replit 파워 모드에서 클로드 페이블 5를 사용했고, 영상 기준 제작 비용은 약 5달러였습니다.
영상에서 사용한 스텝 1~4 전체 프롬프트를 이 글에 그대로 담았습니다. 순서대로 붙여넣기만 하면 같은 결과물이 나오도록 설계했기 때문에, 위 영상과 글을 같이 보면서 따라 하면 됩니다.
이 튜토리얼로 무엇을 만들까
완성품은 웹캠 기반 AR 포토부스입니다. 카메라에 얼굴이 잡히면 선택한 가면이 눈 위치에 맞춰 따라붙고, 고개를 기울이면 가면도 같이 기울어집니다. 양손 손가락을 펴면 개수를 세서 0개부터 10개까지 단계별로 다른 이펙트가 화면에 깔리고, 배경은 원본·블러·가상 배경 세 가지 모드로 전환할 수 있습니다.
- 프롬프트 4번으로 앱 완성단계마다 눈에 보이는 결과물이 하나씩 추가되는 구조입니다
- High effort 토글 = 클로드 페이블 5Replit이 가장 어려운 작업 구간에 가장 강력한 모델을 호출합니다
- 설치할 것이 없습니다얼굴·손 인식이 전부 브라우저 안에서 실행되어 서버도 GPU도 필요 없습니다
- 제작 비용 약 5달러영상 데모 전체 기준이며, 레플릿 코어 크레딧으로 한 달에 비슷한 앱 4개 수준입니다
타임스탬프
- 0:00완성 앱 데모 미리보기 — 가면, 손가락 이펙트, 가상 배경
- 0:25웜업 프롬프트로 시작 준비
- 0:51파워 모드 전환과 High effort로 클로드 페이블 5 활성화
- 1:24스텝 2 얼굴 인식 프롬프트 입력과 가면 4종 업로드
- 2:09AR 마스크 앱 1차 완성, 쿼카 가면 테스트
- 2:45스텝 3 손가락 인식 이펙트 프롬프트 추가
- 3:15에러를 스스로 찾아 고치는 셀프 디버깅 장면
- 3:53손가락 개수별 화면 이펙트 실시간 데모
- 5:08스텝 4 배경 블러와 가상 배경 추가
- 5:39제작 비용과 레플릿 코어 요금제 설명
- 6:04크레딧 추가 혜택 안내
- 6:26가상 배경 4종 적용과 최종 결과 확인
이 앱의 얼굴·손 인식과 배경 분리는 구글의 MediaPipe Tasks Vision 라이브러리가 처리합니다. 인식 모델이 브라우저 안에서 직접 실행되기 때문에 별도 서버나 GPU 없이 웹캠만 있으면 작동하고, 그래서 제작 비용도 빌드에 쓰는 크레딧이 전부입니다. 물론 이런 기술 선택까지 전부 프롬프트에 들어 있으니 내용을 몰라도 따라 하는 데 지장은 없습니다.
사전 준비
준비물이 거의 없습니다. 웹캠이 달린 컴퓨터와 Replit 계정이면 충분합니다. 다만 무료 Starter 플랜은 Agent 채팅에 일일 제한이 있고 Economy·Power 모드로 진행하는 Full build를 지원하지 않기 때문에, 이 튜토리얼을 끝까지 따라 하려면 레플릿 코어 플랜 이상이 필요합니다.
시작 전 확인사항
0/4 완료
프롬프트에 "가면 이미지도 같이 만들어 줘"라고 한 줄만 추가하면 Replit이 직접 생성합니다. 영상에서는 쿼카, 로봇, 공군 파일럿, 늑대 4종을 미리 만들어 사용했는데, 눈 부분이 뚫린 투명 PNG라서 가면을 써도 실제 눈이 그대로 보입니다.
Step 1: 웜업 프롬프트로 준비시키기
첫 프롬프트는 일부러 아무것도 만들지 않습니다. 본격적인 빌드는 잠시 뒤 파워 모드에서 시작할 것이기 때문에, 기본 모드에서는 프로젝트를 열고 준비 상태만 만들어 둡니다. 비싼 모드를 켜기 전에 가벼운 모드로 출발선을 맞추는 셈입니다.
지금부터 너랑 앱 하나를 만들 거야. 본격적인 작업은 잠시 뒤에 더 강한 모드로 바꾼 다음에 시킬 거고, 지금은 준비만 해.
아무것도 만들지 마 — 코드도, 파일도, 긴 설명도. 그냥 "준비됐습니다. 강한 모드로 바꾸고 시작 신호를 주세요."라고만 답해."준비됐습니다"라는 답이 오면 1단계는 끝입니다. 이제 모드를 바꿉니다.
Step 2: 파워 모드와 High effort로 클로드 페이블 5 켜기
채팅 입력창 하단의 모드 선택을 보면 기본값이 이코노미로 잡혀 있습니다. 이것을 파워로 바꾸고, 그 아래 토글에서 High effort를 켭니다. Replit 공식 문서 기준으로 High effort를 켜면 Agent가 가장 어려운 작업 구간에서 가장 강력한 프런티어 모델인 클로드 페이블 5를 호출합니다. 모든 요청에 무조건 쓰는 방식이 아니라 정말 어려운 부분에만 선별적으로 투입하기 때문에, 비용은 가장 어려운 작업 기준 최대 2배 수준에서 멈춥니다.
클로드 페이블 5는 앤트로픽이 2026년 6월 9일 공개한 클로드 5 패밀리의 첫 모델이고, 지금까지 일반 공개된 클로드 가운데 가장 강력한 모델입니다. 작업이 길고 복잡할수록 이전 모델과의 격차가 커진다고 공식 발표에서 밝히고 있기 때문에, 이번처럼 얼굴 추적·손 추적·배경 분리를 한 앱에 전부 넣는 작업에 잘 맞습니다.
| 설정 | 용도 | 참고 |
|---|---|---|
| Lite | 작은 수정과 빠른 반복 | 가볍고 빠른 모델 |
| Economy | 일상 빌드 기본값 | 크레딧을 아끼는 모드 |
| Power | 복잡한 기능, 큰 작업 | 이 튜토리얼의 기준 모드 |
| High effort 토글 | 가장 어려운 구간에 클로드 페이블 5 호출 | Economy·Power에서 켤 수 있고 비용은 최대 2배 |
| Turbo 토글 | 2.5배 빠른 응답 | Pro 플랜 전용, 비용 최대 6배 |
Replit은 그때그때 가장 성능 좋은 최신 모델을 연결하는 방식이라, 시간이 지나면 High effort가 호출하는 모델이 더 새로운 모델로 바뀔 수 있습니다. 프롬프트는 그대로 쓰면 되고, 모델이 좋아질수록 결과물도 같이 좋아집니다.
Step 3: 얼굴 인식과 AR 가면 만들기
이제 첫 번째 빌드 프롬프트입니다. 이번 단계의 목표는 하나입니다. 내 얼굴에 가면이 따라붙는 앱을 만드는 것입니다. 손 인식과 배경 기능은 일부러 다음 단계로 미룹니다. 한 번에 전부 시키면 어디서 잘못됐는지 찾기 어렵고, 단계마다 눈에 보이는 결과물이 하나씩 늘어나야 만드는 과정 자체가 재미있기 때문입니다.
좋아, 이제 파워 모드야. 웹캠 AR 앱을 단계별로 키워갈 거야. 오늘의 1단계는 "얼굴 인식 + 가면"이야. 이것만 만들어 — 손 인식이나 배경 기능은 다음 단계에서 추가할 거니까 지금은 넣지 마.
# 기술 스택 (★이대로 — 다른 방식 쓰지 마)
- 구글 MediaPipe Tasks Vision(@mediapipe/tasks-vision)을 공식 CDN에서 로드, FaceLandmarker 사용. 공식 문서의 최신 패턴 그대로, 구버전 legacy API(@mediapipe/face_mesh 등) 금지. 전부 브라우저(클라이언트) 실행 — 서버 ML 없음.
- 바닐라 HTML/CSS/JS, 가능한 한 단일 페이지. getUserMedia 웹캠, 거울 모드(좌우 반전)로 표시.
# 기능 (1단계)
1. 얼굴 추적: FaceLandmarker로 매 프레임 실제 왼눈·오른눈 중심 좌표를 구함.
2. 가면 오버레이 (★눈 기준 정렬): 각 가면 PNG 안의 두 눈 위치를 정규화 좌표(0~1) 상수로 정의해두고, 가면의 눈 앵커가 실제 두 눈에 정확히 겹치도록 — 스케일은 두 눈 사이 거리 비율, 회전은 눈 라인 각도, 위치는 눈 중점 일치 — 계산해서 canvas에 그림. ★얼굴 폭 기준 통짜 정렬 금지(가면마다 눈 위치가 달라 어긋남). 거울 반전 적용 후 좌표 기준. 랜드마크에 스무딩(이동 평균)을 적용해 가면 떨림 방지.
3. 가면 토글: 4종 자리(화면 하단 버튼 + 키보드 1~4). 일단 임시 플레이스홀더로 만들어두고, 곧 PNG 4장을 업로드하면 연결할 거야(그때 가면별 눈 앵커 좌표도 줄게). 앵커 상수는 한 곳에 모아 미세조정 가능하게.
4. UI: 한국어. 어두운 배경에 카메라 화면 크게. 첫 화면에 카메라 허용 안내 + Replit 미리보기에서 카메라가 막히면 새 탭에서 열라는 안내 문구.
# 작업 방식 (★빙빙 돌지 말 것)
- 서브에이전트·delegation 금지. 네가 직접 처음부터 끝까지.
- 과한 추상화·인프라 금지. 단순하게, 적은 파일로. 다음 단계 기능을 미리 만들어두지 마.
- 계획만 길게 세우지 말고 바로 만들어서 한 번에 끝내. 외부 의존성은 MediaPipe CDN 하나면 충분.프롬프트를 보내면 Replit이 작업을 잘게 쪼개서 코드를 만들기 시작합니다. 빌드가 도는 동안 가면 PNG 4장을 채팅창에 드래그해서 업로드해 두고, 1차 빌드가 끝나면 아래 프롬프트로 가면을 연결합니다. 각 가면의 눈 위치 좌표까지 함께 넘기는 것이 포인트입니다.
가면 PNG 4장 업로드했어 — quokka.png(쿼카), robot.png(로봇), pilot.png(파일럿), wolf.png(늑대). 플레이스홀더 대신 이 4장을 토글에 연결하고 버튼에 한국어 이름을 표시해줘. 각 가면의 눈 앵커 좌표(0~1, 좌상단 기준)는 이거야:
- quokka: 왼눈 (0.350, 0.475) / 오른눈 (0.647, 0.475)
- wolf: 왼눈 (0.327, 0.541) / 오른눈 (0.670, 0.541)
- robot: 왼눈 (0.364, 0.490) / 오른눈 (0.602, 0.490)
- pilot: 왼눈 (0.370, 0.400) / 오른눈 (0.630, 0.400) ← 바이저 가면이라 추정값, 보면서 미세조정
가면 전환은 0.2초 정도 부드러운 팝/페이드로, 얼굴이 화면에서 사라지면 가면도 자연스럽게 사라지게.가면마다 그림 속 눈 위치가 다르기 때문에, 얼굴 폭에 맞춰 통째로 씌우면 가면이 어긋납니다. 가면 이미지 안에서 두 눈이 어디에 있는지를 0~1 비율 좌표로 알려주면 실제 두 눈 위에 가면의 눈구멍이 정확히 겹칩니다. 직접 만든 가면을 쓸 때는 이미지 편집 도구에서 눈 중심 위치의 가로·세로 비율을 재서 숫자만 바꿔 넣으면 됩니다.
이 단계 완료 조건
0/4 완료
Step 4: 손가락 개수 인식과 화면 이펙트
가면만 쓰는 것은 한 번 웃고 끝나기 쉽습니다. 이번 단계에서는 양손 손가락을 세서, 펴진 개수에 따라 화면 이펙트가 단계별로 화려해지는 기능을 추가합니다. 새 프로젝트를 만들 필요 없이 같은 채팅에서 이어서 보내면 됩니다.
좋아, 2단계 업그레이드야. 이제 손 인식을 추가해서, 펴진 손가락 개수에 따라 화면 이펙트가 단계별로 강해지게 만들 거야. 기존 얼굴·가면 기능은 그대로 유지.
# 추가 기능
1. 손가락 카운트 (양손)
- HandLandmarker(같은 MediaPipe Tasks Vision, 최신 패턴) 추가. 두 손 추적.
- 검지~새끼: 손가락 끝(tip)이 중간 관절(pip)보다 펴져 있는지로 판정.
- 엄지 (★틀리기 쉬움): x좌표 비교 금지. 거리 기반 — 엄지 끝(landmark 4)↔검지 뿌리(landmark 5) 거리가 엄지 중간관절(3)↔검지 뿌리(5) 거리의 1.2배 이상이면 펴짐. 손바닥 크기로 정규화 + handedness(왼/오른손)와 거울 반전 감안.
- 양손 합산 0~10. 0.2초 안정화(같은 값이 유지될 때만 변경)로 떨림 방지.
- 현재 개수를 화면 상단에 큰 숫자로 표시, 단계가 바뀔 때 숫자가 커졌다 작아지는 팝 + 짧은 비프음.
2. 손가락 개수별 이펙트 (★전부 코드로 그리는 파티클 — 이미지 에셋 없음)
- 0: 없음 / 1: 작은 불씨 / 2: 전기 스파크 / 3: 벚꽃 잎 / 4: 빗줄기+물결 / 5: 푸른 오라
- 6: 화염 / 7: 번개 폭풍 / 8: 눈보라 / 9: 황금 오라 + 빛기둥
- 10 (양손 풀): 피날레 — 화면 전체 불꽃놀이 대폭발 + 화면 흔들림 + 플래시
- 단계가 오를수록 입자 수·크기·밝기가 확실히 화려해져야 함. 숫자만 바뀌고 비슷해 보이면 안 됨.
배경 분리(블러/가상 배경)는 다음 단계에서 할 거니까 아직 만들지 마.프롬프트가 길고 요구사항도 복잡하지만, Replit이 알아서 작업을 여러 액션으로 나눠 순서대로 진행합니다. 영상 3분 15초 장면처럼 빌드 중간에 에러가 나도 스스로 원인을 찾아 고치는 모습을 볼 수 있습니다. 빌드가 끝나면 손가락 개수에 따라 아래 이펙트가 순서대로 나타납니다.
| 손가락 개수 | 이펙트 |
|---|---|
| 0 | 없음 |
| 1 | 작은 불씨 |
| 2 | 전기 스파크 |
| 3 | 벚꽃 잎 |
| 4 | 빗줄기와 물결 |
| 5 | 푸른 오라 |
| 6 | 화염 |
| 7 | 번개 폭풍 |
| 8 | 눈보라 |
| 9 | 황금 오라와 빛기둥 |
| 10 | 불꽃놀이 피날레 — 화면 흔들림과 플래시 |
손가락 인식에서 가장 자주 틀리는 부분이 엄지입니다. 그래서 프롬프트에 x좌표 비교 대신 거리 기반 판정을 쓰라고 못 박아 두었습니다. 그래도 카운트가 너무 예민하거나 둔하게 느껴지면, 증상을 채팅에 그대로 적어 보내면 Replit이 판정 기준을 조정해 줍니다.
이 단계 완료 조건
0/4 완료
Step 5: 배경 블러와 가상 배경 넣기
마지막 업그레이드는 구글 밋이나 줌에서 쓰던 배경 기능입니다. 사람과 배경을 분리해서 배경만 흐리게 만들거나 아예 다른 이미지로 바꾸고, 앞 단계에서 만든 손가락 이펙트는 사람 뒤쪽에 깔리게 해서 입체감을 만듭니다.
좋아, 3단계 업그레이드야. 구글밋이나 줌처럼 배경을 처리할 거야. 기존 기능은 그대로 유지.
# 추가 기능
1. 사람/배경 분리: MediaPipe ImageSegmenter(셀피 세그멘테이션, 같은 Tasks Vision 최신 패턴) 추가 — 매 프레임 사람 실루엣 마스크.
2. 배경 모드 토글: ① 원본 ② 블러(배경만 흐릿, 인물은 선명) ③ 가상 배경.
3. 가상 배경은 여러 개 만들어서 고를 수 있게 (★한 장 말고 선택형):
- 4종 정도: 어두운 네온 스튜디오 / 우주(별·은하) / 노을 하늘 / 사이버 시티 야경
- 코드로 그리거나 네가 이미지를 만들어 넣어도 됨. 썸네일 버튼으로 클릭 전환, 나중에 내가 이미지를 추가로 업로드하면 쉽게 늘릴 수 있는 구조로.
4. 합성 순서 변경 (★중요): 배경 → 손가락 이펙트 → 인물 → 가면 → UI. 즉 이펙트가 사람 '뒤'에 깔려서, 인물이 이펙트 앞에 서 있는 깊이감이 나야 함.
5. 성능: 세그멘테이션은 낮은 해상도로 처리하고 렌더만 원본 해상도로. 프레임 떨어지면 세그멘테이션만 격프레임으로.가상 배경 이미지는 따로 준비할 필요가 없습니다. 영상에서도 네온 스튜디오, 우주, 노을, 사이버 시티 4종을 Replit이 직접 만들어 넣었습니다. 합성 순서를 배경, 이펙트, 인물, 가면 순으로 지정해 두었기 때문에 불꽃이 몸 뒤에서 터지는 깊이감이 생기고, 화면이 단순한 필터 앱에서 무대 연출처럼 바뀝니다.
이 단계 완료 조건
0/4 완료
제작 비용과 요금제
영상의 데모 전체를 만드는 데 들어간 비용은 약 5달러였습니다. Replit은 작업 난이도에 따라 비용이 정해지는 effort 기반 과금이라서, 이 글의 프롬프트처럼 요구사항을 한 번에 명확하게 정리해서 보내면 같은 결과를 더 적은 시도로 얻을 수 있습니다.
레플릿 코어 플랜에는 매달 크레딧이 포함되기 때문에, 이 정도 규모의 앱이라면 한 달에 네 개 정도 만들 수 있는 분량입니다. 더 크고 깊은 앱을 만들고 싶다면 크레딧 단계를 올려서 쓰고 남은 크레딧이 다음 달로 이월되는 Pro 플랜도 있습니다. 아래 링크로 가입하면 코어 기준으로 크레딧을 50% 더 받을 수 있습니다.
자주 막히는 문제
따라 하다 막히는 지점은 대부분 비슷합니다. 아래 항목부터 확인하면 빠르게 풀립니다.
카메라가 켜지지 않습니다
가면이 덜덜 떨립니다
손가락 카운트가 부정확합니다
결과물이 기대보다 허접합니다
프레임이 뚝뚝 끊깁니다
다음 단계
여기까지 하면 가면, 손가락 이펙트, 가상 배경이 모두 들어간 AR 포토부스가 완성됩니다. 이어서 해볼 만한 확장도 많습니다. 셔터 버튼을 추가해서 합성된 화면을 사진으로 저장하게 만들 수도 있고, Replit의 배포 기능으로 공개 링크를 만들어 친구들이 자기 폰 카메라로 바로 써보게 할 수도 있습니다. 가면 PNG를 직접 만들어 종류를 늘리는 것도 좋은 연습이 됩니다.
같은 방식으로 격투 게임을 만든 전작 튜토리얼도 있습니다. 마스터 프롬프트로 기획서를 만들고 스프라이트 시트까지 직접 제작하는 과정이라, 이번 글과는 또 다른 재미가 있습니다.
안면인식 앱을 코딩 없이 만들 수 있는 시대라면, 머릿속에 있는 대부분의 아이디어는 이미 만들 수 있는 아이디어입니다. 오늘 만든 앱이 잘 작동했다면, 다음에는 여러분만의 아이디어를 같은 방식으로 밀어붙여 보시기 바랍니다.