← 프로젝트 목록

대표 프로젝트 · 비공개 자산

사내 AI 교육 세미나 — 인터랙티브 학습 플랫폼 직접 구축 · 강의

비개발 임직원을 위한 4부작 AI 교육 시리즈를 기획 · 강의하고, 브라우저에서 학습이 직접 돌아가는 인터랙티브 슬라이드 플랫폼을 직접 개발 — 커리큘럼 · 플랫폼 · 라이브 데모 1인

2026 · 커리큘럼 설계 · 플랫폼 개발 · 강의 단독 (React · TensorFlow.js · FastAPI)
  • React
  • TypeScript
  • Vite
  • TensorFlow.js
  • FastAPI
  • SSE
  • Docker
  • Nginx

개요

신경망 기초부터 딥러닝 · LLM · AI 에이전트까지, 비개발 임직원이 업무에 AI를 적용할 수 있도록 설계한 사내 AI 교육 시리즈입니다. 추상 이론을 라이브 데모와 시각화로 풀어내 누구나 따라올 수 있게 했습니다.

PowerPoint 대신 React + TypeScript로 웹 기반 인터랙티브 슬라이드 플랫폼을 직접 만들고, 브라우저(TensorFlow.js)와 백엔드(FastAPI) 라이브 데모를 연동했습니다.

커리큘럼 설계 · 교안 제작 · 플랫폼 개발 · 실강의까지 1인으로 수행했으며, AI 역량과 비개발자 대상 전달력을 함께 보여주는 사례입니다.

아키텍처 · 데이터 흐름

  1. 1차 — AI 기초: 퍼셉트론 · XOR · 다층 신경망 · 역전파를 가격예측 · MNIST 손글씨 인식 라이브 데모로 설명
  2. 2차 — 산업 속 AI 모델: CNN(이미지) · RNN/LSTM(시계열) · LLM(언어), 생성형 AI(GAN→Diffusion) · 음성(STT/TTS) · 코딩 AI
  3. 수렴 — 6개 ML 패러다임이 트랜스포머 + 대규모 자기지도 사전학습으로 수렴하는 흐름을 정리
  4. 3차 — LLM 에이전트 & MCP: 자율 루프로서의 에이전트, 도구 연결 계층(MCP), 스킬 조합, 실제 AI 서비스 사례
  5. 4차(선택) — 핸즈온 워크숍: 실제 업무에 AI · 코딩 에이전트를 적용하는 실습

인터랙티브 슬라이드 (React)

React 18 + TypeScript + Vite로 만든 웹 슬라이드. 키보드 내비게이션 · 전체화면 · 목차 점프, 영역별 색상 토큰으로 개념을 구분.

브라우저 ML 데모 (TensorFlow.js)

청중이 직접 MNIST 신경망을 학습시키고 손글씨를 그려 즉석에서 인식시키는, 설치 없이 브라우저에서 도는 라이브 데모.

실시간 AI 데모 API (FastAPI)

LLM 추론을 SSE로 스트리밍하고 음성합성(TTS)을 제공하는 백엔드. 웹캠 얼굴인식 등 강의 중 실시간 시연을 지원.

버전 배포 파이프라인

도커 멀티스테이지 빌드 → Nginx(SPA 폴백), 타임스탬프 릴리스 + current 심볼릭링크로 무중단 갱신.

AI 활용

신경망 · 딥러닝 기초

퍼셉트론의 한계(XOR)에서 다층 신경망 · 활성함수 · 역전파까지, 회귀 예제와 시각화로 직관적으로 전달.

CNN · RNN · 트랜스포머

이미지(CNN) · 시계열(RNN/LSTM) · 언어(LLM) 모델의 원리와 어텐션 · 트랜스포머 구조를 라이브 추론 데모와 함께 설명.

생성형 · 음성 · 코딩 AI

GAN→Diffusion 생성 파이프라인, STT/TTS 음성 워크플로, 코드 생성 특화 LLM을 시연 중심으로 소개.

LLM 에이전트 & MCP

자율 루프로서의 에이전트와 도구 연결 계층(MCP), 스킬 조합을 통해 AI를 실제 업무 자동화로 잇는 방법을 교육.

서비스 자동화 · 운영

설치 없는 라이브 학습

브라우저에서 모델 학습 · 추론이 바로 돌아가도록 만들어, 청중이 환경 설정 없이 즉석에서 AI를 체험하도록 자동화.

자동 버전 배포

타임스탬프 릴리스 디렉터리 + current 심볼릭링크 + 짧은 갱신 주기로, 교안 수정이 무중단으로 바로 반영되는 배포 흐름.

컨테이너화 배포

도커 멀티스테이지 빌드와 Nginx SPA 라우팅으로 어디서든 동일하게 재현 가능한 배포 산출물 구성.

비개발자 맞춤 전달

가격예측 · 손글씨 인식 같은 친숙한 비유와 라이브 데모로, 비개발 임직원도 추상 개념을 체감하도록 설계.

업무 적용 연결

OCR · 문서 요약 · 예측 · 회의록 작성 등 일반화한 업무 시나리오로 연결해, 각 팀이 자기 업무에 AI를 적용하도록 유도.

기술 스택

프론트엔드

  • React 18
  • TypeScript
  • Vite
  • Tailwind CSS

브라우저 ML

  • TensorFlow.js
  • 실시간 추론
  • 인터랙티브 시각화

백엔드 데모

  • FastAPI
  • SSE 스트리밍
  • TTS 음성합성
  • 로컬 LLM(Ollama)

배포

  • Docker
  • Nginx
  • 릴리스 버저닝
  • Cloudflare Tunnel

핵심 역할 · 성과

  • 커리큘럼 설계 · 교안 제작 · 플랫폼 개발 · 실강의까지 1인으로 수행
  • React + TensorFlow.js로 브라우저에서 직접 도는 인터랙티브 ML 학습 데모 제작
  • FastAPI로 LLM 스트리밍 · 음성합성 등 실시간 AI 데모를 강의에 통합
  • 비개발 임직원이 업무에 AI를 적용하도록 사내 AI 도입 · 확산을 주도

사내 임직원 교육 목적의 프로젝트로, 특정 회사 · 업무 도메인 정보는 제외하고 교육 플랫폼 · 커리큘럼 · 기법 수준으로만 정리했습니다. 강의 교안 · 라이브 데모는 문의 시 별도 공유드립니다.

← 프로젝트 목록