How It Works

브라우저 AI 분석 원리 완전 가이드

Teachable Machine · TensorFlow.js · 클라이언트 사이드 AI의 모든 것

💡 Key Takeaways

🧠 1. 딥러닝 이미지 분류란?

체인소맨 캐릭터닮은꼴 서비스의 핵심은 딥러닝 기반 이미지 분류(Image Classification) 기술입니다. 이미지 분류란, 입력된 이미지가 사전에 정의된 여러 카테고리(클래스) 중 어떤 것에 해당하는지 AI가 판단하는 작업입니다.

본 서비스에서 분류 대상 클래스는 체인소맨의 10개 캐릭터(덴지·레제·마키마·아키·키시베·히메노·천사의 악마·포치타·코베니·요시다)입니다. AI 모델은 입력 이미지를 분석해 각 캐릭터 클래스와의 유사도를 확률값(0~1 사이의 소수, 즉 0~100%)으로 반환합니다.

신경망이 이미지를 처리하는 방식

딥러닝 신경망은 인간 뇌의 신경 연결 구조를 모방한 수학적 모델입니다. 이미지 분류에 주로 쓰이는 합성곱 신경망(CNN, Convolutional Neural Network)은 다음 과정을 거칩니다:

  1. 입력층: 이미지가 픽셀값(RGB 숫자 배열)으로 변환됩니다.
  2. 합성곱층(Convolutional Layer): 필터를 슬라이딩하며 엣지, 텍스처, 패턴 등 저수준 특징을 추출합니다.
  3. 풀링층(Pooling Layer): 공간 차원을 줄여 계산량을 낮추고 위치 불변성을 부여합니다.
  4. 완전연결층(Fully Connected Layer): 추출된 특징을 종합해 각 클래스별 확률을 계산합니다.
  5. 소프트맥스(Softmax): 출력값을 확률로 정규화해 모든 클래스 확률의 합이 100%가 되게 합니다.

🔧 2. Google Teachable Machine이란?

Google Teachable Machine은 머신러닝 전문 지식이 없는 일반인도 브라우저에서 바로 이미지·오디오·포즈 인식 모델을 학습시킬 수 있는 구글의 무료 웹 플랫폼입니다. 2019년 출시 이후 전 세계 교육자, 아티스트, 개발자들이 다양한 창의적 프로젝트에 활용하고 있습니다.

모델 학습 과정

체인소맨 캐릭터닮은꼴 모델은 다음 과정으로 만들어졌습니다:

  1. 각 체인소맨 캐릭터(10개)의 이미지 데이터를 수집합니다.
  2. Teachable Machine 플랫폼에서 각 클래스에 해당 이미지들을 업로드합니다.
  3. "모델 학습" 버튼을 누르면 구글 클라우드에서 모델이 자동 학습됩니다.
  4. 학습 완료된 모델을 공개 URL로 내보내기(Export)합니다.
  5. 내보낸 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 실행의 장점

하드웨어 가속

TensorFlow.js는 기기에 따라 다른 백엔드(Backend)를 자동 선택해 최적 성능을 냅니다:

🔒 4. 개인정보가 안전한 이유 — 기술적 설명

체인소맨 캐릭터닮은꼴 서비스는 사용자 이미지를 외부 서버로 전송하지 않는다고 명시하고 있습니다. 이것이 기술적으로 어떻게 가능한지 구체적으로 설명합니다.

네트워크 트래픽 분석

브라우저의 개발자 도구(F12 → Network 탭)를 열고 서비스를 사용하면서 네트워크 요청을 직접 확인해볼 수 있습니다. 분석 시 이미지 데이터(multipart/form-data나 base64 인코딩된 대용량 POST 요청)가 외부 도메인으로 전송되지 않는다는 것을 직접 확인하실 수 있습니다.

서비스 이용 중 네트워크 요청이 발생하는 것은 다음과 같이 한정됩니다:

WebRTC 카메라 데이터 처리

카메라 탭 사용 시, 브라우저 표준 API인 MediaDevices.getUserMedia()로 카메라 스트림을 가져옵니다. 이 스트림은 <canvas> 엘리먼트로 렌더링되고, TensorFlow.js가 캔버스의 픽셀 데이터를 직접 읽어 추론합니다. 네트워크 소켓은 전혀 관여하지 않습니다.

이미지 업로드 데이터 처리

이미지 업로드 시, FileReader API가 파일을 로컬 메모리에 읽어들입니다. 이 데이터는 <img> 엘리먼트로 렌더링 후 TensorFlow.js가 직접 처리합니다. fetch()XMLHttpRequest 등의 외부 전송 API가 사용되지 않습니다.

⚠️ 5. AI 분석의 한계와 정확도

체인소맨 캐릭터닮은꼴 AI는 엔터테인먼트 목적의 서비스입니다. 분석 결과를 과학적·의학적 사실로 받아들이지 않는 것이 중요합니다. 다음과 같은 기술적 한계가 있습니다:

이러한 한계를 이해하고, 결과를 가볍게 즐기는 엔터테인먼트로 접근하는 것을 권장합니다. 여러 번 시도해 다양한 결과를 즐겨보세요!

체인소맨 캐릭터닮은꼴 팀

애니메이션·만화 팬 커뮤니티 기반의 AI 엔터테인먼트 서비스 제작팀. Google Teachable Machine과 TensorFlow.js를 활용해 누구나 무료로 즐길 수 있는 캐릭터 닮은꼴 분석 서비스를 개발·운영합니다.

최종 수정일:

🔗 관련 도움말

✅ 링크가 복사됐어요!