웹캠으로 내 얼굴을 인식하면, 카드보드 로봇이 고개를 돌리고 눈을 깜빡이고 입을 움직여요. 마이크로비트와 서보모터 5개로 만드는 ‘표정 짓는 로봇’ 프로젝트입니다. 제작 시간은 약 2시간, 난이도는 ‘상’이에요.
한눈에 보기
만들면서 필요할 때마다 아래 링크를 눌러 사용하세요.
- 로봇 얼굴 설계도 PDF — 다운받아 카드보드에 붙여 제작
- 하드웨어 조립 영상 — 조립 순서를 영상으로 확인
- 서보모터 90도 정렬 공부 — 조립 전 꼭 익혀두기
- 얼굴 추적 마이크로비트 코드 — MakeCode 블록 / HEX
- 얼굴 인식 웹앱 — 웹캠으로 얼굴 따라가기
- 음성 인식 웹앱 — 말하면 입이 움직여요
- DF-Driver 확장 — 링크 복사 → MakeCode 확장에 붙여넣기
- 더 많은 얼굴 디자인 — 다른 모양으로 도전해보기
로봇이 할 수 있는 움직임
- YAW — 고개 좌우로 돌리기 ↔️
- PITCH — 고개 위아래로 끄덕이기 ↕️
- MOUTH — 입(턱) 벌리기 😮
- RIGHT / LEFT EYE — 양쪽 눈 깜빡이기 😉
1단계 · 설계도 출력하고 자르기
먼저 설계도를 다운로드해 인쇄하고, 카드보드(B골 2~3mm)에 붙인 다음 부품을 하나씩 오려냅니다.
✂️ 선 색깔이 다른 이유
검정색 선은 자르는 선, 파란색 선은 접는 선이에요. 접는 선은 칼로 살짝 칼집(반칼)을 내어주면 훨씬 깔끔하게 접혀요. 이게 포인트!
🖼️ 아래에 설계도 부품 배치도 사진을 넣어주세요 (EYES / UPPER JAW / LOWER JAW / TOP OF HEAD / NOSE / EYE LIDS 등).
나만의 디자인으로 바꾸고 싶다면?
정해진 모양 말고 직접 디자인하고 싶다면 KRAF Studio 채널에서 다양한 카드보드 설계도를 찾아볼 수 있어요. 원하는 모양을 골라 창의적으로 꾸며보세요.
2단계 · 하드웨어 조립하기
부품을 다 잘랐다면 이제 본격 조립! 자르는 것만큼 조립도 만만치 않지만… 도전해봐요. 💪
⚠️ 가장 중요한 규칙: “90도 정렬”
서보모터를 카드보드에 연결하기 전에, 반드시 서보의 검은색 날개를 90도(가운데)로 맞춰 놓고 조립하세요. 0도나 180도로 치우치면 눈·입·목의 움직이는 범위가 너무 좁아져요. (90도 정렬 방법 보기)
조립 순서
- 양쪽 눈 조립하기 — 좌우 눈 부품을 각각 만들어 둡니다.
- 눈 주변 조립 (★ 90도 정렬) — 눈 서보를 정확히 90도에 맞춰야 나중에 눈을 잘 감았다 뜰 수 있어요.
- 턱(입) 부분 조립 (★ 90도 정렬) — 입도 서보를 90도 정렬한 뒤 이어서 조립합니다.
- 눈과 턱 연결 — 만들어 둔 눈 부분과 턱 부분을 합쳐줍니다.
- 머리 윗부분(이마) 연결 — 머리 상단을 덮어 얼굴 형태를 잡아요.
- 코 부분 연결 — 코 부품을 붙여 얼굴 가운데를 완성합니다.
- 입 연결하기 — 아래턱(입) 부품을 결합합니다.
- 입과 얼굴 연결 — 턱이 부드럽게 벌어지도록 본체와 연결해요.
- 눈동자 붙이기 — 눈동자를 붙이면 표정이 살아나요. 👀
- 목 부분 조립 (★ 90도 정렬) — 고개를 좌우·상하로 움직이는 목도 90도 정렬이 중요해요.
- 받침대에 연결해 완성 — 받침대에 목을 연결하고, 마지막으로 건전지로 무게중심까지 맞추면 완성! 🎉
📸 아래에 조립 과정 사진을 단계별로 넣어주세요 (눈 → 턱 → 이마 → 코 → 입 → 목 → 받침대 순서).
3단계 · 마이크로비트 코드 올리기
조립이 끝났으면 서보모터를 S1~S5에 연결하고, 마이크로비트에 코드를 올린 뒤 잘 움직이는지 테스트해요.
① 먼저 DF-Driver 확장 설치
이 프로젝트는 서보 5개를 연결·전원 공급하기 위해 DFRobot 모터 드라이버를 사용해요.
- github.com/DFRobot/pxt-motor 주소 복사
- MakeCode 편집기 → 확장(Extensions) 클릭
- URL 칸에 붙여넣고 추가
② 서보 90도 조정 코드
조립할 때 서보를 90도로 맞추기 위한 기본 코드예요. A/B 버튼으로 각도를 조절하며 정렬할 수 있어요. 👉 서보 90도 조정 코드 열기
③ 얼굴 추적 코드 올리기
아래 코드를 마이크로비트에 올리면 얼굴 인식 웹앱과 통신해 로봇이 움직여요. 👉 얼굴 추적 코드 열기
④ 서보모터 연결 위치 (S1 ~ S5)
| 핀 | 역할 | 테스트 각도 |
|---|---|---|
| S1 | 목 좌우 (Yaw) | 50 ~ 140도 |
| S2 | 목 상하 (Pitch) | 0 ~ 55도 |
| S3 | 입 / 턱 (Mouth) | 50 ~ 130도 |
| S4 | 오른쪽 눈 | 180 ~ 50도 |
| S5 | 왼쪽 눈 | 50 ~ 120도 |
🛠️ 움직임이 어색하다면? (보정하기)
서보는 조립 상태마다 조금씩 다르게 동작해요. 원하는 만큼 움직이지 않으면, 마이크로비트 코드에서 해당 핀의 각도 범위 숫자를 직접 바꿔가며 가장 자연스러운 값을 찾아주세요. (예: S1의 50~140 값을 조금씩 수정)
🖼️ 아래에 S1~S5 서보 연결 사진과 코드 화면 캡처를 넣어주세요.
4단계 · 얼굴 인식 웹앱 실행하기
웹캠이 켜진 컴퓨터에서 웹앱을 열고 마이크로비트와 연결하면 끝! 화면 속 내 얼굴을 따라 로봇이 움직여요.
- 📷 얼굴 따라가는 앱 — 고개·눈·입을 따라 움직여요
- 🗣️ 대화하는 앱 — 말소리에 맞춰 입이 움직여요
💡 연결 순서
① 서보 5개를 S1~S5에 모두 연결 → ② 웹앱 열기 → ③ “micro:bit 연결” 버튼 클릭 → ④ 각 모터가 잘 동작하는지 확인
보너스 · 웹앱 직접 만들어보기
앱을 그냥 쓰는 것에서 한 발 더! VS Code의 Live Server로 얼굴 추적 코드를 직접 실행해볼 수 있어요.
- VS Code 설치 — code.visualstudio.com에서 설치
- 프로젝트 폴더 만들기 — 폴더 안에 index.html 파일과 models 폴더를 넣어요.
- Live Server 확장 설치 — 확장(Ctrl+Shift+X) → “Live Server” 검색 → Ritwick Dey 확장 설치
- 실행 — index.html을 열고 우측 하단 “Go Live” 클릭 (http://127.0.0.1:5500)
폴더 구성
프로젝트폴더/
├── index.html
└── models/
├── tiny_face_detector_model-weights_manifest.json
├── tiny_face_detector_model-shard1
├── face_landmark_68_model-weights_manifest.json
└── face_landmark_68_model-shard1※ 얼굴 인식 라이브러리는 face-api.js 또는 MediaPipe를 사용해요. 전체 코드는 별도 글에서 다룰게요.
필요한 재료 목록
| 번호 | 품명 | 수량 |
|---|---|---|
| 1 | 마이크로비트 V2.21 | 1개 |
| 2 | 모터 드라이버 (DFRobot) | 1개 |
| 3 | 마이크로비트 어댑터 (ring:bit V2) | 1개 |
| 4 | 마이크로 서보 MG90s | 4개 |
| 5 | 표준 서보 MG995 | 1개 |
| 6 | 3핀 점퍼 케이블 | 5개 |
| 7 | M3 너트·볼트 (12mm) | 여러 개 |
| 8 | 긴 볼트 (30mm 이상) | 2개 |
| 9 | M3 와셔 | 여러 개 |
| 10 | 더블클립(종이클립) | 3개 |
| 11 | 박스지 (B골 2~3mm) | 적당량 |
| 12 | 건전지 (무게중심용) | 약간 |
추가로 필요한 도구
자, 가위, 칼, 드라이버, 고무줄, 풀/글루건
완성!
이제 여러분만의 표정 짓는 로봇이 완성됐어요. 카메라 앞에서 고개를 돌려보고, 눈을 깜빡여보고, 입을 벌려보세요. 로봇이 똑같이 따라 한다면 성공! 🎉
움직임이 어색하면 코드의 각도 값을 조금씩 바꿔가며 나만의 최적값을 찾는 게 이 프로젝트의 진짜 재미예요. 친구들과 누구 로봇이 더 자연스러운지 겨뤄보는 것도 추천!