브라우저 기반 AI 분석 원리

📌 핵심 요약

• 완전한 브라우저 AI — 서버 전송 없이 기기(브라우저) 내에서 모든 추론 완결
• TensorFlow.js — Google 개발 오픈소스 JS 머신러닝 라이브러리
• Teachable Machine — 코딩 없이 이미지 분류 모델을 학습할 수 있는 Google 플랫폼
• MobileNet 아키텍처 — 모바일·브라우저 환경에 최적화된 경량 딥러닝 모델
• WebGL 가속 — GPU를 활용한 고속 추론, 일반 기기에서 1~3초 내 완료
• WebRTC — 카메라 스트림을 서버 없이 브라우저에서 직접 처리

🗡️ 작성자 정보

상현 AI 운영팀 — TensorFlow.js 및 Teachable Machine을 활용한 브라우저 AI 서비스 구축 경험 보유. 본 문서는 실제 서비스 개발 과정에서 습득한 기술적 지식을 바탕으로 비개발자도 이해할 수 있게 작성했습니다.

최종 수정일: 2026년 3월 21일

🔍 브라우저 AI란 무엇인가?

AI(인공지능)는 보통 강력한 서버 컴퓨터에서 실행된다고 생각하기 쉽습니다. 하지만 브라우저 AI는 사용자의 기기(스마트폰, PC) 안의 웹 브라우저에서 직접 AI 모델이 실행됩니다. 서버에 데이터를 보내지 않아도 되므로 개인정보가 보호되고 인터넷 연결 속도에 덜 의존합니다.

전통적인 AI 서비스 방식을 비교하면:

• 서버 방식 — 사진 → 서버 업로드 → 서버에서 AI 처리 → 결과 반환 (개인정보 위험, 네트워크 지연)
• 브라우저 방식 — 사진 → 브라우저 내 AI 처리 → 즉시 결과 표시 (개인정보 안전, 빠른 처리)

이 서비스는 두 번째 방식인 완전한 브라우저 AI를 채택했습니다. 얼굴 이미지가 서버로 전송되는 일이 없으며, 분석은 사용자의 기기 안에서만 이루어집니다.

🧠 TensorFlow.js란?

TensorFlow.js는 Google이 개발한 오픈소스 머신러닝 라이브러리입니다. 원래 TensorFlow는 Python 환경(서버·PC)에서 사용하는 라이브러리였지만, TensorFlow.js는 JavaScript 환경, 즉 웹 브라우저와 Node.js에서 딥러닝 모델을 실행할 수 있게 해줍니다.

TensorFlow.js의 주요 특징

• 브라우저 실행 — 추가 설치 없이 웹 페이지에서 바로 사용 가능
• WebGL 가속 — GPU(그래픽카드)를 활용해 행렬 연산을 빠르게 처리
• CPU 폴백 — WebGL이 지원되지 않으면 자동으로 CPU 연산으로 전환
• 모델 이식성 — Python TensorFlow에서 학습한 모델을 변환하여 브라우저에서 사용 가능
• 실시간 처리 — 웹캠 영상을 프레임 단위로 분석하는 실시간 추론 가능

이 서비스에서의 사용

이 서비스는 TensorFlow.js v4.22.0을 CDN을 통해 불러옵니다. 사용자가 페이지를 열면 TensorFlow.js 라이브러리가 브라우저에 로딩되고, 분석 버튼을 누르면 Teachable Machine 모델이 TensorFlow.js 위에서 실행됩니다. 모든 연산은 사용자 기기의 CPU 또는 GPU에서 처리됩니다.

🎓 Google Teachable Machine이란?

Google Teachable Machine은 코딩 지식 없이도 누구나 이미지·오디오·포즈 인식 AI 모델을 만들 수 있는 플랫폼입니다. 구글이 무료로 제공하며, 웹 브라우저에서 직접 사용할 수 있습니다.

Teachable Machine으로 모델 만드는 과정

1. 클래스 정의 — 분류할 카테고리 설정 (이 서비스: 코쿠시보, 도우마, 아카자, 한텐구, 교코, 규타로/다키)
2. 데이터 수집 — 각 클래스에 해당하는 이미지를 수십~수백 장 업로드
3. 모델 학습 — Teachable Machine이 자동으로 MobileNet 기반 모델을 파인튜닝
4. 테스트 — 새 이미지로 분류 결과 확인 및 성능 검증
5. 배포 — 모델을 클라우드에 업로드하고 URL 생성
6. 연동 — TensorFlow.js와 Teachable Machine JS 라이브러리로 웹 서비스에 적용

이 서비스의 모델

이 서비스에서 사용하는 모델은 Teachable Machine의 공개 인프라에 호스팅됩니다. 최초 접속 시 모델 파일(약 5~15MB)이 브라우저에 다운로드되어 캐시됩니다. 이후 재방문 시에는 캐시에서 즉시 로딩되어 빠르게 분석이 시작됩니다.

⚡ MobileNet 아키텍처

MobileNet은 Google이 2017년에 발표한 경량 딥러닝 모델 아키텍처입니다. 일반적인 딥러닝 모델(예: ResNet, VGG)은 수십~수백 MB의 크기와 막대한 연산을 필요로 하지만, MobileNet은 깊이 분리 합성곱(Depthwise Separable Convolution)을 사용해 성능을 유지하면서 크기와 연산량을 대폭 줄였습니다.

MobileNet이 브라우저 AI에 적합한 이유

• 작은 모델 크기 — 전체 모델이 수 MB 수준으로 다운로드가 빠름
• 낮은 연산량 — 스마트폰 CPU/GPU로도 1~3초 내 추론 가능
• 충분한 정확도 — ImageNet 기준 70% 이상 정확도로 분류 작업에 실용적
• 전이 학습 적합 — 사전 학습된 MobileNet 위에 새 분류 레이어를 추가해 Teachable Machine이 파인튜닝

이미지 처리 파이프라인

1. 카메라 또는 업로드 이미지를 224×224 픽셀로 리사이즈
2. 픽셀값을 0~1 사이로 정규화 (RGB 각 채널 / 255)
3. MobileNet 특징 추출기로 고차원 특징 벡터 생성
4. 분류 레이어에서 6개 상현 클래스별 확률값 계산 (소프트맥스 출력)
5. 가장 높은 확률의 클래스를 닮은꼴 결과로 표시

📷 WebRTC — 카메라 처리 원리

WebRTC(Web Real-Time Communication)는 브라우저에서 실시간으로 카메라, 마이크, 화면 공유 등을 다룰 수 있는 웹 표준입니다. 서버를 거치지 않고 브라우저가 직접 카메라 하드웨어에 접근합니다.

카메라 분석 과정

1. 권한 요청 — navigator.mediaDevices.getUserMedia()로 카메라 접근 권한 요청
2. 스트림 수신 — 사용자가 허용하면 카메라 영상 스트림을 <video> 요소에 연결
3. 프레임 캡처 — 분석 버튼 클릭 시 Canvas API로 현재 프레임을 정지 이미지로 추출
4. AI 추론 — 추출된 이미지를 TensorFlow.js 모델에 입력하여 유사도 계산
5. 결과 표시 — 각 캐릭터별 유사도 퍼센트를 화면에 렌더링
6. 메모리 해제 — 이미지 데이터가 메모리에서 자동 삭제됨

HTTPS 보안 요구사항

카메라 API(getUserMedia)는 보안상 HTTPS 환경에서만 동작합니다. 이 서비스는 Cloudflare Pages를 통해 자동으로 HTTPS를 제공합니다. HTTP 연결에서는 카메라 기능이 차단되며, 이는 브라우저의 보안 정책입니다.

📊 브라우저 AI의 한계와 특성

브라우저 AI는 개인정보 보호와 속도 면에서 장점이 있지만, 서버 기반 AI보다 몇 가지 한계가 있습니다. 이를 이해하면 분석 결과를 더 올바르게 해석할 수 있습니다.

모델 크기 제한

브라우저로 다운로드해야 하므로 모델 크기에 제한이 있습니다. 이 서비스는 수 MB의 경량 MobileNet 기반 모델을 사용합니다. 대형 언어모델(GPT-4 등)처럼 수십 GB 크기의 모델은 브라우저에서 실행할 수 없습니다.

학습 데이터의 한계

AI의 정확도는 학습 데이터의 품질과 양에 의존합니다. 이 서비스는 애니메이션 캐릭터 이미지로 학습되었으므로, 실제 사람의 얼굴과는 본질적으로 다른 특성을 가집니다. 따라서 분석 결과는 엄격한 의미의 얼굴 유사도가 아닌, AI가 학습한 패턴과의 매핑 결과입니다.

기기 성능 의존

추론 속도는 사용자 기기의 CPU/GPU 성능에 따라 다릅니다. 최신 플래그십 스마트폰에서는 0.5초 이내, 오래된 저사양 기기에서는 3~5초가 걸릴 수 있습니다. GPU가 없는 환경에서는 CPU 연산으로 자동 전환됩니다.

결과의 엔터테인먼트적 성격

이 서비스는 어디까지나 엔터테인먼트 목적입니다. 결과가 실제 외모와 일치하지 않을 수 있으며, 동일한 얼굴도 조명·각도에 따라 다른 결과가 나올 수 있습니다. 더 자세한 내용은 결과가 달라지는 이유 페이지를 참고하세요.

❓ 자주 묻는 질문

Q. AI가 내 얼굴을 저장하나요?

아니요. 모든 AI 추론이 브라우저(기기) 내에서 완결되며, 이미지 데이터는 어떤 서버에도 전송되지 않습니다. 분석이 완료되면 이미지 데이터는 브라우저 메모리에서 자동으로 해제됩니다. 개인정보 보호에 대한 더 자세한 내용은 AI와 개인정보 페이지를 참고하세요.

Q. 오프라인에서도 사용할 수 있나요?

최초 방문 시 모델 파일이 브라우저 캐시에 저장되면, 이후에는 인터넷 연결이 불안정한 환경에서도 분석이 가능할 수 있습니다. 단, 최초 모델 다운로드와 페이지 로딩에는 인터넷 연결이 필요합니다.

Q. TensorFlow.js와 일반 TensorFlow의 차이는?

TensorFlow는 Python 환경(서버, 연구용 PC)에서 실행되며 대규모 모델 학습에 적합합니다. TensorFlow.js는 JavaScript 브라우저 환경에서 실행되어 서버 없이 사용자 기기에서 AI를 실행할 수 있습니다. 브라우저의 연산 한계로 대규모 모델은 사용 불가하지만, 이 서비스 같은 경량 분류 작업에는 충분합니다.

Q. 분석이 느린 이유는 무엇인가요?

첫 분석 시 Teachable Machine 모델 파일(5~15MB)이 다운로드되어 시간이 걸립니다. 이후에는 캐시에서 빠르게 로딩됩니다. 기기 성능이 낮거나 인터넷 속도가 느린 경우 더 오래 걸릴 수 있습니다. 오류가 발생했다면 오류 해결 가이드를 참고하세요.

Q. 어떤 브라우저에서 가장 잘 동작하나요?

Chrome(크롬)에서 WebGL 가속이 가장 잘 지원되어 최적의 성능을 발휘합니다. Safari(사파리)는 iOS 기기에서 카메라 기능을 포함해 잘 동작합니다. Firefox와 Edge도 지원합니다. 구형 브라우저(Internet Explorer)는 지원하지 않습니다.