Full Stack
AI 플랫폼을 실제 제품으로 만들기 위한 백엔드, 프론트엔드, 데스크톱 앱, 실시간 스트리밍, 워크플로우 UI 구현 기록입니다.
Rust Gateway · Tauri · Next.js
학습 경로
-
Step 1
백엔드와 API 경계
Rust Gateway, 파일 업로드, 분산 상태 관리 흐름을 봅니다.
- 01
Rust로 API Gateway 만들기: JWT 검증 + CORS + 프록시
Axum 기반 Rust API Gateway의 JWT 인증, CORS 설정, 리버스 프록시, WebSocket 프록시 구현 과정
- 02
2GB 파일 업로드를 위한 프록시 body size 설정
Rust Gateway에서 대용량 파일 업로드를 지원하기 위한 스트리밍 프록시와 body size 제한 설정
- 03
Redis 기반 SSE 세션 상태 공유: 멀티 POD 환경
Kubernetes 멀티 POD 환경에서 SSE 문서 업로드 세션 상태를 Redis로 동기화한 구현 과정
- 01
-
Step 2
프론트엔드 워크플로우
AI 워크플로우 편집기, 실행 패널, 상태 피드백 UI를 묶습니다.
- 01
Next.js 기반 AI 워크플로우 에디터 만들기 (from scratch)
Next.js 15 + React 19 + TypeScript로 무한 캔버스 기반 워크플로우 에디터를 처음부터 구현한 과정. Canvas, Node, Edge 컴포넌트 설계부터 패닝/줌, 그리드 배경, 노드 드래그, forwardRef 패턴까지.
- 02
커스텀 노드 에디터: 드래그 앤 드롭 + 엣지 스냅핑 구현
워크플로우 에디터의 핵심 인터랙션 구현. 노드 드래그 앤 드롭, 엣지 스냅핑(자동 연결), 포트 타입 호환성 체크, 줌/패닝 최적화까지 실전 구현기.
- 03
Workflow Execution Panel: 검증과 에러 핸들링 UI 패턴
XGEN 2.0 워크플로우 에디터의 실행 패널 구현기 — 3단계 검증 레이어, 타입 가드 기반 출력 분기, SSE 스트리밍 실행, 일시정지/재개까지
- 01
-
Step 3
데스크톱 제품화
Tauri, 원격 WebView, 로컬/원격 서비스 통합으로 확장합니다.
- 01
Tauri 2.0으로 AI 데스크톱 앱 만들기
Next.js 프론트엔드와 Rust 백엔드를 결합한 XGEN 데스크톱 AI 워크스테이션 개발기
- 02
Remote WebView 아키텍처: 로컬 앱과 원격 서버 연동
Tauri 데스크톱 앱에서 원격 웹앱을 WebView로 로드하는 Remote WebView 패턴 구현기
- 03
XGEN 데스크톱 앱 고도화: Tauri에서 로컬 Ollama, 백엔드 자동기동, MCP/RAG를 한 번에 연결하기
기존 웹 기반 XGEN 프론트엔드를 Tauri 데스크톱 앱으로 감싸는 수준을 넘어, 로컬 Ollama 자동 기동, Docker Compose 백엔드 자동 시작, MCP 라이브러리 UX, 로컬 모델 서빙 패널, RAG 문서 API 절대경로화를 하나의 앱 경험으로 묶은 과정을 정리한다.
- 01
대표 글
- Full Stack
Tauri 2.0으로 AI 데스크톱 앱 만들기
Next.js 프론트엔드와 Rust 백엔드를 결합한 XGEN 데스크톱 AI 워크스테이션 개발기
TauriRust - Full Stack
Rust로 API Gateway 만들기: JWT 검증 + CORS + 프록시
Axum 기반 Rust API Gateway의 JWT 인증, CORS 설정, 리버스 프록시, WebSocket 프록시 구현 과정
RustAxum - Full Stack
Next.js 기반 AI 워크플로우 에디터 만들기 (from scratch)
Next.js 15 + React 19 + TypeScript로 무한 캔버스 기반 워크플로우 에디터를 처음부터 구현한 과정. Canvas, Node, Edge 컴포넌트 설계부터 패닝/줌, 그리드 배경, 노드 드래그, forwardRef 패턴까지.
Next.jsReact - Full Stack
업무 자동 수집 → 일일 리포트: 500+개 메시지를 Claude로 요약하는 3계층 아키텍처
MS 365(메일, Teams) 500개 이상의 일일 메시지를 자동 수집하고, Claude API로 구조화된 일일 리포트로 변환한 후, Docsify 웹 서비스로 제공하는 end-to-end 자동화 시스템 설계 및 구현 과정을 정리한다. MSAL 토큰 캐싱, MS Graph API 재시도 전략, Claude CLI 통합, Nginx 계층화 캐싱 등 프로덕션 수준의 에러 처리를 다룬다.
MS365MS Graph API
핵심 태그
시리즈
- Rust 커머스 검색 엔진 · 13 posts
- AI 서비스 개발 · 2 posts
- sontrader 자동매매 리서치 · 1 posts
최신 글
전체 글sontrader 자동매매로 가는 순서: 주문보다 신호 증명이 먼저다
한국 주식 자동매매 프로젝트 sontrader의 최종 목표는 자동화다. 다만 주문 봇을 먼저 만드는 대신, 자동매매에 맡겨도 되는 신호를 PIT, OOS, DSR/PBO, 비용, MDD 게이트로 먼저 증명하는 흐름을 정리한다.
XGEN Canvas Chat와 Harness 컴파일: 대화형 워크플로우를 실행 가능한 에이전트 파이프라인으로 만들기
대화로 만든 Canvas 워크플로우를 Harness 노드와 Compile 버튼으로 실행 가능한 에이전트 파이프라인으로 전환하면서 겪은 설계 판단을 정리한다. stage 로그, tool 입출력, LLM narration, 권한 전파, system prompt 주입, UI 재실행 버그까지 다룬다.
XGEN MCP 폐쇄망 번들 시스템: 외부망 패키지를 .tar.gz로 묶어 원클릭 도구 세션까지 연결하기
MCP 서버를 인터넷이 막힌 폐쇄망 XGEN 환경에서 설치하고 실행하기 위해 외부망 번들 빌드, 업로드, 세션 복원, 마켓 카탈로그, 데스크톱 앱 UX를 하나의 흐름으로 연결한 구현 과정을 정리한다. stdio JSON-RPC 응답 correlation 버그와 웹/데스크톱 공통 API 설계까지 다룬다.
XGEN 데스크톱 앱 고도화: Tauri에서 로컬 Ollama, 백엔드 자동기동, MCP/RAG를 한 번에 연결하기
기존 웹 기반 XGEN 프론트엔드를 Tauri 데스크톱 앱으로 감싸는 수준을 넘어, 로컬 Ollama 자동 기동, Docker Compose 백엔드 자동 시작, MCP 라이브러리 UX, 로컬 모델 서빙 패널, RAG 문서 API 절대경로화를 하나의 앱 경험으로 묶은 과정을 정리한다.
sontrader 자동매매 시스템 설계: 전략보다 먼저 주문, 리스크, 기억 계층을 분리하기
국내 주식 자동매매 프로젝트 sontrader를 공개 가능한 범위에서 정리한다. synaptic memory, NautilusTrader, KIS OpenAPI를 연결할 때 전략 수익률보다 먼저 주문 경계, 리스크 제어, 상태 복원, 감사 로그, 실거래 전환 절차를 어떻게 나눠야 하는지 다룬다.
sonlife-app iOS 컨트롤 타워: SwiftUI + SSE 실시간 인박스 + APNs 인라인 승인 + Watch + Siri
음성 녹음 앱이었던 sonlife-app을 자율 에이전트 컨트롤 타워로 진화시켰다. SwiftUI 작업 인박스, SSE 실시간 라이브 카드, 오프라인 큐, APNs 인라인 승인(Face ID), Apple Watch 앱, Siri Shortcuts, 위젯까지 — Phase A부터 M1a까지 9일 만에 40+ 커밋으로 쌓아 올린 iOS 네이티브 클라이언트의 설계와 결정을 정리한다.
현금흐름 예측 실전기 — 256피처 ML의 함정에서 시계열 앙상블까지
48개월 월별 데이터로 기업 현금흐름을 예측하는 프로젝트. 256개 피처 ML이 평균 예측기에 불과하다는 사실을 발견하고, 순수 시계열(AutoARIMA, Chronos-Bolt) + 역MAE 앙상블로 전환하기까지의 과정을 정리한다. Rolling CV, data leakage 수정, 구간 예측까지.
XGEN MS 365 MCP 통합 — Device Code Flow 인증부터 워크플로우 노드까지
XGEN 2.0 AI Agent 플랫폼에 Microsoft 365 MCP 서버를 통합한 과정을 정리한다. Client Credentials에서 Device Code Flow로의 인증 방식 전환, K8s PVC 토큰 캐시, 프론트엔드-백엔드-인프라 3계층에 걸친 아키텍처 설계, 그리고 100개 이상의 MS 365 도구를 프리셋으로 관리하는 방법까지 다룬다.