Tutorial

Teachable Machine으로 나만의 AI 이미지 분류기 만들기

2026년 8월 21일 · jocoding

이 사이트의 "동물상 테스트" 기능은 Google의 Teachable Machine으로 학습시킨 이미지 분류 모델을 쓰고 있습니다. 코드를 한 줄도 안 쓰고 웹캠 사진만으로 모델을 학습시켰는데, 그 과정을 그대로 정리해봅니다.

1. 프로젝트 만들기

Teachable Machine 사이트에서 Get Started → Image Project → Standard image model을 선택하면 바로 학습 화면이 열립니다. 로그인이나 설치가 필요 없습니다.

2. 클래스별로 사진 모으기

분류하고 싶은 클래스 수만큼 클래스를 만들고, 각 클래스에 웹캠 촬영 또는 이미지 업로드로 샘플을 채웁니다. 실전에서 도움이 됐던 팁:

• 클래스당 최소 50장 이상 — 너무 적으면 조명이나 각도가 조금만 바뀌어도 오분류가 늘어납니다.
• 배경과 각도를 다양하게 — 같은 배경, 같은 각도로만 찍으면 모델이 배경을 기준으로 학습해버립니다.
• 클래스 간 샘플 수를 비슷하게 — 한쪽 클래스만 압도적으로 많으면 결과가 그쪽으로 쏠립니다.

3. 학습(Train)

Train Model 버튼을 누르면 브라우저 안에서 바로 학습이 진행됩니다. 별도 서버나 GPU 없이 수십 초~몇 분 내로 끝납니다. 오른쪽 Preview 패널에서 웹캠으로 바로 테스트하면서 오분류가 나오는 케이스를 확인하고, 필요하면 해당 유형의 샘플을 더 추가해 재학습하면 됩니다.

4. 모델 내보내기

Export Model → Upload (shareable link)를 선택하면 Google이 호스팅하는 모델 URL이 생성됩니다(예: https://teachablemachine.withgoogle.com/models/xxxxxxxx/). 별도 서버에 파일을 올릴 필요 없이 바로 웹페이지에서 불러올 수 있습니다.

5. 웹페이지에 임베드하기

Export 화면에서 제공하는 코드를 그대로 쓰면 되는데, 핵심은 이 세 줄입니다.

const URL = "https://teachablemachine.withgoogle.com/models/xxxxxxxx/";
const model = await tmImage.load(URL + "model.json", URL + "metadata.json");
const predictions = await model.predict(imageOrCanvasElement);

tf.min.js와 teachablemachine-image.min.js 두 라이브러리만 CDN으로 불러오면 됩니다. predict()는 <img>, <canvas>, <video> 엘리먼트를 모두 받기 때문에, 웹캠 실시간 판별과 사진 업로드 판별을 같은 모델로 동시에 구현할 수 있습니다.

6. 개인정보 관점에서 주의할 점

tmImage.load() 이후의 추론(predict)은 전부 브라우저 안에서 실행됩니다. 즉 사용자의 웹캠 영상이나 업로드 사진이 서버로 전송되거나 저장되지 않습니다. 이 특성은 개인정보처리방침에도 명시해두는 것이 좋습니다.

정리하면, Teachable Machine은 "라벨링된 사진 모으기 → 브라우저에서 학습 → 링크로 내보내기 → 웹페이지에 3줄로 임베드"라는 흐름 하나로 이미지 분류 AI 기능을 아주 빠르게 프로토타입할 수 있는 도구입니다.