SOUL 홈페이지 — AI 챗봇 기반 회사 홈페이지 & 관리자 시스템

분야: 개발 · 디자인 · 기획 / 웹 / 홈페이지, AI 챗봇, SaaSㆍ솔루션 참여 기간: 2026.07 ~ (자체 프로젝트, 진행 중) 관련 기술: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Vercel AI SDK, Claude API, PostgreSQL(pgvector), AWS S3, MCP [프로젝트 개요] 소울(SOUL)의 공식 홈페이지입니다. 정적인 회사 소개 페이지 대신, 방문자가 AI 어시스턴트와 대화하며 회사·서비스·포트폴리오를 알아가는 대화형 홈페이지로 설계했습니다. 관리자 시스템과 MCP 서버까지 갖춰 회사 운영 데이터를 웹과 AI 에이전트 양쪽에서 관리할 수 있습니다. [주요 기능] 1. AI 챗봇 홈페이지 - 방문자 질문에 Claude 기반 AI가 실시간 스트리밍으로 응대 - 포트폴리오 질문 시 RAG(pgvector 임베딩 검색)로 실제 프로젝트 사례를 찾아 이미지 카드·첨부파일과 함께 소개 - 장애 대비 이중화: Anthropic 장애/한도 초과 시 OpenAI 모델로 자동 전환 2. 관리자 시스템 - 로그인 인증(HMAC 서명 세션 쿠키) 뒤에서만 접근 가능 - 대시보드: 대화 세션/메시지 통계, 최근 7일 추이, 인기 검색 키워드, 최근 대화 목록 - 포트폴리오 관리: 등록/수정/삭제, 이미지·첨부파일 S3 업로드, 임베딩 자동 재계산 - 회사 정보 관리: 소개·서비스·연락처를 수정하면 챗봇 답변에 즉시 반영 3. MCP 서버 - 관리자에서 가능한 모든 CRUD를 MCP 툴로도 제공 (포트폴리오/회사정보/대시보드 통계) - Claude Code, Cursor 등 AI 에이전트가 대화로 회사 데이터를 직접 관리 가능 [기술적 특징] - Next.js 16 App Router + React 19 서버 컴포넌트/서버 액션 기반 - OpenAI text-embedding-3-small 임베딩 + pgvector 코사인 유사도 검색으로 포트폴리오 RAG 구현 - 대화 로그를 세션 단위로 수집해 대시보드 지표로 집계 - DATABASE_URL이 없으면 로컬 JSON 파일로 동작하는 이중 스토리지 구조 [성과 및 가치] - 방문자 응대·포트폴리오 소개·상담 안내를 AI가 24시간 자동 수행 - 회사 정보와 포트폴리오를 한 곳에서 관리하면 홈페이지와 챗봇에 동시 반영되는 운영 효율 - AI 에이전트 친화적 인프라(MCP)로 사내 업무 자동화의 기반 마련