Syshin0116.dev - 블로그 + 포트폴리오 통합

Nuartz 기반 블로그·포트폴리오·AI 챗봇 통합 사이트

약 2주

2026.03 ~ 진행 중

1인 풀스택 개발

개인 프로젝트

개인 기술 블로그, 프로젝트 포트폴리오, RAG 기반 AI 챗봇을 하나의 도메인으로 통합. Nuartz를 데이터 레이어로 사용하고 Next.js 15 + shadcn/ui로 모던 UI 구현. LangGraph SDK로 blog-rag 백엔드와 연동하여 블로그 콘텐츠 기반 질의응답 제공.

기술 스택

frontend

Next.js 15 (App Router)

React 19

Tailwind CSS v4

shadcn/ui

Framer Motion

content

Nuartz (headless markdown)

FlexSearch (CJK 검색)

D3.js (그래프뷰)

Mermaid

ai

LangGraph SDK

LangChain Core

blog-rag 백엔드 (FastAPI)

auth

Supabase (Google OAuth)

rendering

KaTeX (수식)

Shiki (코드 하이라이팅)

remark/rehype

deployment

Vercel

Bun

주요 성과

✓4개 레포를 3개로 재편하여 통합 사이트 구축
✓Nuartz를 실제 프로덕션에서 사용하며 라이브러리 검증
✓RAG 챗봇으로 블로그 콘텐츠 기반 대화형 검색 제공
✓Obsidian 볼트 → 웹사이트 무중단 퍼블리싱 파이프라인

주요 기능

도전 과제 및 극복

레포 통합

기존 블로그, 포트폴리오, Obsidian 볼트가 별도 레포. Nuartz를 공통 데이터 레이어로 사용하여 하나의 Next.js 앱으로 통합

RAG 백엔드 연동

LangGraph SDK의 스트리밍 응답과 도구 호출을 프론트엔드에서 실시간 시각화. SSE + 상태 관리로 해결

배운 점 및 성장

✓프로덕션 사용이 최고의 라이브러리 테스트
✓Next.js 15 App Router + React 19의 서버 컴포넌트 활용
✓Supabase Auth 통합 경험
✓통합 사이트의 UX 설계: 블로그, 포트폴리오, 챗봇의 조화