← 프로젝트 목록

대표 프로젝트

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

비개발 임직원을 위한 AI 교육 시리즈(1~3차 완료 · 총 118장)를 기획 · 강의하고, 브라우저에서 학습이 직접 돌아가는 인터랙티브 슬라이드 플랫폼을 개발 · 공개 호스팅 — 커리큘럼 · 플랫폼 · 라이브 데모 1인

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

개요

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

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

커리큘럼 설계 · 교안 제작 · 플랫폼 개발 · 실강의까지 1인으로 수행했으며, 슬라이드 전체를 공개 사이트와 GitHub 저장소로 오픈해 누구나 직접 볼 수 있습니다.

아키텍처 · 데이터 흐름

  1. 1차 완료 — AI 기초(43장): 퍼셉트론 · XOR · 다층 신경망 · 역전파 → 청중이 손글씨를 그려 인식시키는 MNIST 라이브 데모
  2. 2차 완료 — 산업 속의 AI(51장): CNN(얼굴탐지 라이브) · RNN/LSTM · LLM(추론 스트리밍) · 생성(GAN→Diffusion) · 음성(TTS 라이브) · 코딩 AI → 트랜스포머 + 자기지도학습으로 수렴하는 클라이맥스
  3. 3차 완료 — AI에게 일을 시키다(24장): "말만 하던 천재가 일하게 되기까지" 역사 서사 — ChatGPT의 결핍(2022) → 에이전트(ReAct→AutoGPT) → MCP 표준화 → Agent Skills → 결합
  4. 3차 피날레 — 텔레그램 에이전트(LangGraph)가 실서비스(Conoti)를 사람 승인 하에 제어하는 라이브 데모 + Cursor에 노션 · Conoti MCP를 연결하는 시연
  5. 4차(기획) — 핸즈온 워크숍: 실제 업무에 AI · 코딩 에이전트를 적용하는 실습

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

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

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

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

실시간 AI 데모 API (FastAPI)

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

공개 호스팅 파이프라인

도커 + Nginx(SPA 폴백), 타임스탬프 릴리스 + current 심볼릭링크 무중단 갱신. 맥미니 + Cloudflare 터널로 공개 도메인에 직접 호스팅.

AI 활용

신경망 · 딥러닝 기초

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

CNN · RNN · 트랜스포머

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

생성형 · 음성 · 코딩 AI

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

LLM 에이전트 · MCP · 스킬 (3차)

ChatGPT의 결핍(2022)에서 에이전트(ReAct→AutoGPT), MCP 표준화, Agent Skills까지의 역사를 서사로 전달하고, 텔레그램 에이전트(LangGraph)로 실서비스를 사람 승인 하에 제어하는 라이브 데모와 Cursor MCP 연동 시연으로 마무리.

서비스 자동화 · 운영

설치 없는 라이브 학습

브라우저에서 모델 학습 · 추론이 바로 돌아가도록 만들어, 청중이 환경 설정 없이 즉석에서 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인으로 수행 — 1~3차 완료 (총 118장)
  • React + TensorFlow.js로 브라우저에서 직접 도는 인터랙티브 ML 학습 데모 제작
  • 3차: 에이전트 · MCP · 스킬을 역사 서사로 풀고, 텔레그램 에이전트(LangGraph)의 실서비스 제어 라이브 데모로 실증
  • 슬라이드 전체를 공개 사이트 + GitHub로 오픈, 사내 AI 도입 · 확산을 주도

사내 임직원 교육 프로젝트로, 특정 업무 도메인 정보는 제외하고 정리했습니다. 강의 슬라이드와 라이브 데모는 상단의 공개 사이트 · GitHub 저장소에서 직접 보실 수 있습니다.

← 프로젝트 목록