Teachable Machine · TensorFlow.js · 클라이언트 사이드 AI의 모든 것
💡 Key Takeaways
Google Teachable Machine — 코딩 없이 이미지 분류 모델을 학습할 수 있는 Google의 무료 도구.
TensorFlow.js — AI 모델을 브라우저(JavaScript)에서 직접 실행하는 오픈소스 라이브러리.
클라이언트 사이드 추론 — 모든 계산이 사용자 기기에서 이루어져 서버 전송이 불필요합니다.
개인정보 완전 보호 — 네트워크 전송 자체가 없으므로 사진이 외부로 나갈 물리적 경로가 없습니다.
🧠 1. 딥러닝 이미지 분류란?
체인소맨 캐릭터닮은꼴 서비스의 핵심은 딥러닝 기반 이미지 분류(Image Classification) 기술입니다. 이미지 분류란, 입력된 이미지가 사전에 정의된 여러 카테고리(클래스) 중 어떤 것에 해당하는지 AI가 판단하는 작업입니다.
본 서비스에서 분류 대상 클래스는 체인소맨의 10개 캐릭터(덴지·레제·마키마·아키·키시베·히메노·천사의 악마·포치타·코베니·요시다)입니다. AI 모델은 입력 이미지를 분석해 각 캐릭터 클래스와의 유사도를 확률값(0~1 사이의 소수, 즉 0~100%)으로 반환합니다.
신경망이 이미지를 처리하는 방식
딥러닝 신경망은 인간 뇌의 신경 연결 구조를 모방한 수학적 모델입니다. 이미지 분류에 주로 쓰이는 합성곱 신경망(CNN, Convolutional Neural Network)은 다음 과정을 거칩니다:
입력층: 이미지가 픽셀값(RGB 숫자 배열)으로 변환됩니다.
합성곱층(Convolutional Layer): 필터를 슬라이딩하며 엣지, 텍스처, 패턴 등 저수준 특징을 추출합니다.
풀링층(Pooling Layer): 공간 차원을 줄여 계산량을 낮추고 위치 불변성을 부여합니다.
완전연결층(Fully Connected Layer): 추출된 특징을 종합해 각 클래스별 확률을 계산합니다.
소프트맥스(Softmax): 출력값을 확률로 정규화해 모든 클래스 확률의 합이 100%가 되게 합니다.
🔧 2. Google Teachable Machine이란?
Google Teachable Machine은 머신러닝 전문 지식이 없는 일반인도 브라우저에서 바로 이미지·오디오·포즈 인식 모델을 학습시킬 수 있는 구글의 무료 웹 플랫폼입니다. 2019년 출시 이후 전 세계 교육자, 아티스트, 개발자들이 다양한 창의적 프로젝트에 활용하고 있습니다.
모델 학습 과정
체인소맨 캐릭터닮은꼴 모델은 다음 과정으로 만들어졌습니다:
각 체인소맨 캐릭터(10개)의 이미지 데이터를 수집합니다.
Teachable Machine 플랫폼에서 각 클래스에 해당 이미지들을 업로드합니다.
"모델 학습" 버튼을 누르면 구글 클라우드에서 모델이 자동 학습됩니다.
학습 완료된 모델을 공개 URL로 내보내기(Export)합니다.
내보낸 URL을 TensorFlow.js로 로드해 브라우저에서 실행합니다.
전이 학습(Transfer Learning)
Teachable Machine은 내부적으로 전이 학습(Transfer Learning)을 활용합니다. MobileNet이나 EfficientNet과 같이 대규모 이미지 데이터(ImageNet)로 이미 사전 학습된 모델을 기반으로, 소수의 커스텀 이미지만으로도 효율적으로 새 분류 작업을 학습합니다. 덕분에 상대적으로 적은 데이터로도 합리적인 분류 성능을 낼 수 있습니다.
⚡ 3. TensorFlow.js — 브라우저에서 AI 실행하기
TensorFlow.js는 Google이 개발한 오픈소스 머신러닝 라이브러리로, Python 환경에서 주로 사용하던 TensorFlow의 기능을 JavaScript 환경(브라우저 및 Node.js)에서도 사용할 수 있게 해줍니다.
브라우저 AI 실행의 장점
레이턴시 제로: 서버에 데이터를 보내고 응답을 기다릴 필요가 없습니다. 모든 처리가 로컬에서 즉시 이루어집니다.
프라이버시 보호: 이미지 데이터가 네트워크를 통해 외부로 전송되지 않으므로, 이론상 데이터 유출 경로가 없습니다.
오프라인 지원 가능: 모델이 한 번 다운로드되면 인터넷 연결 없이도 추론을 실행할 수 있습니다(PWA 캐시 활용 시).
서버 비용 절감: 서버 사이드 AI 처리 비용이 들지 않습니다.
하드웨어 가속
TensorFlow.js는 기기에 따라 다른 백엔드(Backend)를 자동 선택해 최적 성능을 냅니다:
WebGL 백엔드: GPU를 활용해 병렬 행렬 연산을 수행합니다. 대부분의 데스크탑·모바일 기기에서 사용됩니다.
WebAssembly(WASM) 백엔드: GPU가 없거나 WebGL을 지원하지 않는 환경에서 CPU 최적화 연산을 수행합니다.
CPU 백엔드: 폴백(fallback) 옵션으로, 위 두 가지가 모두 불가할 때 사용됩니다.
🔒 4. 개인정보가 안전한 이유 — 기술적 설명
체인소맨 캐릭터닮은꼴 서비스는 사용자 이미지를 외부 서버로 전송하지 않는다고 명시하고 있습니다. 이것이 기술적으로 어떻게 가능한지 구체적으로 설명합니다.
네트워크 트래픽 분석
브라우저의 개발자 도구(F12 → Network 탭)를 열고 서비스를 사용하면서 네트워크 요청을 직접 확인해볼 수 있습니다. 분석 시 이미지 데이터(multipart/form-data나 base64 인코딩된 대용량 POST 요청)가 외부 도메인으로 전송되지 않는다는 것을 직접 확인하실 수 있습니다.
서비스 이용 중 네트워크 요청이 발생하는 것은 다음과 같이 한정됩니다:
최초 모델 로드: teachablemachine.withgoogle.com에서 AI 모델 파일(약 5~15MB)을 한 번 다운로드합니다.
Google Analytics / Clarity: 익명 페이지 방문 통계만 전송됩니다(이미지 데이터 없음).
Google AdSense: 광고 로드를 위한 광고 서버 요청만 발생합니다(이미지 데이터 없음).
WebRTC 카메라 데이터 처리
카메라 탭 사용 시, 브라우저 표준 API인 MediaDevices.getUserMedia()로 카메라 스트림을 가져옵니다. 이 스트림은 <canvas> 엘리먼트로 렌더링되고, TensorFlow.js가 캔버스의 픽셀 데이터를 직접 읽어 추론합니다. 네트워크 소켓은 전혀 관여하지 않습니다.
이미지 업로드 데이터 처리
이미지 업로드 시, FileReader API가 파일을 로컬 메모리에 읽어들입니다. 이 데이터는 <img> 엘리먼트로 렌더링 후 TensorFlow.js가 직접 처리합니다. fetch()나 XMLHttpRequest 등의 외부 전송 API가 사용되지 않습니다.
⚠️ 5. AI 분석의 한계와 정확도
체인소맨 캐릭터닮은꼴 AI는 엔터테인먼트 목적의 서비스입니다. 분석 결과를 과학적·의학적 사실로 받아들이지 않는 것이 중요합니다. 다음과 같은 기술적 한계가 있습니다:
학습 데이터의 한계: 모델은 학습 시 사용된 이미지 분포에 의존합니다. 학습 데이터에 충분히 포함되지 않은 얼굴 유형에서는 정확도가 낮을 수 있습니다.
클래스 수의 한계: 10개 클래스 중 하나로 반드시 분류되므로, 실제로 어떤 캐릭터와도 크게 닮지 않은 경우에도 가장 높은 확률의 클래스가 출력됩니다.
이미지 품질 민감성: 저해상도, 역광, 강한 필터 적용 이미지에서는 신뢰도가 낮아집니다.
애니메이션-실제 인물 격차: 모델은 만화/애니메이션 캐릭터 이미지로 학습되어 있어 실사 얼굴과의 매핑은 근본적으로 추상적·재미 목적의 비교입니다.
이러한 한계를 이해하고, 결과를 가볍게 즐기는 엔터테인먼트로 접근하는 것을 권장합니다. 여러 번 시도해 다양한 결과를 즐겨보세요!
⛓️
체인소맨 캐릭터닮은꼴 팀
애니메이션·만화 팬 커뮤니티 기반의 AI 엔터테인먼트 서비스 제작팀. Google Teachable Machine과 TensorFlow.js를 활용해 누구나 무료로 즐길 수 있는 캐릭터 닮은꼴 분석 서비스를 개발·운영합니다.