얼굴 추적 앱(Face Traking App)

얼굴 추적 앱은 웹캠으로 사람의 얼굴 위치와 표정을 실시간으로 추적하여, 그 값을 블루투스(BLE)로 micro:bit 로봇에 전송하는 웹 앱입니다. 골판지로 만든 로봇 머리가 사람의 얼굴을 따라 움직이고, 입을 벌리면 로봇도 반응하게 만들 수 있습니다.

별도의 설치가 필요 없는 웹 앱(Web App)이며, 브라우저에서 바로 실행되어 Web Bluetooth를 통해 micro:bit 보드와 통신합니다.

지원 환경

1. 데스크톱 웹 브라우저 – Chrome, Edge, Opera
2. ChromeOS (크롬북)
3. Android – Chrome
4. iPhone / iPad – Bluefy 브라우저 필요

주의: Safari와 Firefox는 Web Bluetooth를 지원하지 않습니다. 반드시 Chrome 계열 브라우저를 사용하세요. 또한 카메라 권한과 블루투스 권한을 모두 허용해야 합니다.

어떻게 작동하나요?

앱은 카메라 영상에서 얼굴을 인식해 다음 파라미터를 추출합니다.

• x – 얼굴의 좌우 위치
• y – 얼굴의 상하 위치
• z – 카메라와의 거리
• Yaw – 고개를 좌우로 돌리는 정도
• Pitch – 고개를 위아래로 끄덕이는 정도
• Roll – 고개를 갸웃하게 기울이는 정도
• Mouth – 입을 벌린 정도
• Left Eye / Right Eye – 좌우 눈을 뜬 정도 (눈 깜빡임 감지)

각 파라미터는 0~99 범위의 두 자리 정수로 변환됩니다. 실제 로봇 동작 범위에 맞추는 작업(예: 서보 각도 0~180도로 변환)은 micro:bit 코드에서 직접 계산해 주어야 합니다.

블루투스 통신 규격

앱은 Web Bluetooth의 UART 서비스(블루투스 시리얼 포트)를 통해 micro:bit와 통신합니다. 데이터는 18자리 숫자 문자열 + 줄바꿈(\n) 형태로 초당 10회(10 Hz) 전송됩니다.

자릿수	파라미터	범위
1–2	x	00–99
3–4	y	00–99
5–6	z	00–99
7–8	yaw	00–99
9–10	pitch	00–99
11–12	roll	00–99
13–14	mouth	00–99
15–16	leftEye	00–99
17–18	rightEye	00–99

예를 들어 000000505050000000 이라는 문자열이 들어오면, x=00, y=00, z=00, yaw=50, pitch=50, roll=50, mouth=00, leftEye=00, rightEye=00 을 의미합니다.

값은 텍스트(문자열)로 전송되므로 micro:bit에서 반드시 숫자로 변환해야 합니다. MakeCode에서는 substring(문자열 자르기) 블록으로 두 자리씩 잘라낸 뒤 parseFloat 또는 숫자 변환 블록을 사용하세요. 처음에는 복잡해 보이지만 규칙이 단순해서 학생들도 금방 익힙니다.

사용 순서

1. micro:bit에 블루투스 UART 수신 코드를 업로드합니다. MakeCode 프로젝트 설정에서 Bluetooth pairing을 “JUST WORKS”로 반드시 변경하세요. 그렇지 않으면 앱이 보드를 찾지 못합니다.
2. 앱에서 [카메라 시작]을 눌러 카메라 권한을 허용합니다.
3. [얼굴 모델 다시 로딩]으로 얼굴 인식 모델이 loaded 상태가 되는지 확인합니다.
4. [micro:bit 블루투스 연결]을 눌러 보드를 선택합니다.
5. [1회 테스트 전송]으로 통신이 되는지 먼저 확인합니다.
6. 정상이면 [전송 시작]을 눌러 실시간 제어를 시작합니다. 멈추려면 [전송 정지]를 누릅니다.

화면 상단의 상태 표시(Camera / Model / Face / Bluetooth)를 보면 어느 단계에서 문제가 생겼는지 바로 알 수 있습니다. 수업 중 문제 해결(트러블슈팅)의 좋은 출발점입니다.

수업 아이디어

1. 나를 따라 보는 로봇 (미러 로봇)

x 값을 서보모터 각도로 매핑해 로봇 머리가 사람을 따라 좌우로 돌게 만듭니다. 가장 기본이면서 학생 반응이 가장 좋은 활동입니다. x(0~99)를 서보 각도(0~180)로 바꾸려면 x × 180 ÷ 99 를 계산하면 됩니다. 비례식과 함수 개념을 자연스럽게 연결할 수 있습니다.

2. 입 모양 따라하기

mouth 값이 일정 기준(예: 40)을 넘으면 로봇의 입 서보가 열리도록 조건문을 작성합니다. 임계값(threshold) 개념과 if 조건문을 배우기에 좋습니다.

3. 눈 깜빡임으로 신호 보내기

leftEye / rightEye 값을 이용해 왼쪽 눈만 감으면 로봇이 왼쪽으로, 오른쪽 눈만 감으면 오른쪽으로 회전하게 만듭니다. 두 값의 차이를 비교하는 논리 연산을 다룰 수 있습니다.

4. 거리에 반응하는 로봇

z 값을 이용해 사람이 가까이 다가오면 로봇이 뒤로 물러나거나 LED 밝기가 변하도록 만듭니다. 센서 값에 따른 연속적 반응을 설계하는 활동입니다.

자주 발생하는 문제

micro:bit이 목록에 나타나지 않아요

MakeCode 프로젝트 설정에서 Bluetooth pairing이 JUST WORKS로 되어 있는지 확인하세요. 기본값은 다른 방식으로 설정되어 있어 앱이 보드를 찾지 못합니다.

연결 후 슬픈 얼굴과 에러 코드 020이 떠요

메모리 부족(out of memory) 오류입니다. micro:bit v1은 RAM이 16KB뿐인데 블루투스가 대부분을 차지합니다. 해결 방법은 다음과 같습니다.

1. 코드를 최대한 단순하게 유지합니다.
2. 블루투스 연결 중에는 LED 디스플레이 출력을 피합니다.
3. 나눗셈, 반올림 등 수학 연산을 줄입니다.
4. 가능하면 micro:bit v2를 사용합니다 (RAM 128KB). 가장 확실한 해결책입니다.

얼굴 인식이 안 돼요

Model 상태가 loaded인지, 조명이 충분한지 확인하세요. 역광에서는 인식률이 크게 떨어집니다. 얼굴이 화면 안에 충분히 크게 들어오도록 카메라 거리를 조절하세요.

로봇 움직임이 덜덜 떨려요

10 Hz로 값이 계속 들어오기 때문에 미세한 변화에도 서보가 반응합니다. micro:bit 코드에서 이전 값과 평균을 내는 간단한 필터를 넣거나, 변화량이 일정 수준 이하면 무시하도록 처리하면 훨씬 부드러워집니다. 이 자체가 좋은 심화 과제가 됩니다.

개인정보 안내

1. 이 앱은 교육용으로 제작되었습니다.
2. 얼굴 인식은 전부 사용자의 브라우저 안에서만 처리됩니다. 영상이나 얼굴 이미지는 서버로 전송되거나 저장되지 않습니다.
3. micro:bit로 전송되는 것은 얼굴 이미지가 아니라 위치와 각도를 나타내는 숫자 값뿐입니다.
4. 수업에서 사용할 때는 학생들에게 카메라 사용 사실을 미리 안내해 주세요.