SOUL 홈페이지 — AI 상담원이 맞이하는 대화형 회사 홈페이지

분야: 개발 · 디자인 · 기획 / 웹 / 홈페이지, AI 챗봇·RAG, 관리자(CMS) 참여 기간: 2026.07 ~ 2026.09 관련 기술: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Vercel AI SDK, Claude API, RAG(OpenAI 임베딩 + PostgreSQL pgvector), AWS S3, MCP [프로젝트 개요] 소울의 회사 홈페이지입니다. 소개 페이지를 스크롤하는 대신, 첫 화면에서 AI 상담원과 대화하며 회사·서비스·작업 사례를 알아보고 바로 견적 문의까지 남길 수 있는 앱형 대화 화면으로 만들었습니다. 왼쪽 메뉴와 가운데 대화창, 두 영역만으로 모든 정보를 보여줍니다. [주요 기능] 1. 대화형 첫 화면 - 왼쪽 메뉴(작업·서비스·진행 절차·회사소개·견적 문의)를 누르면 실제 데이터로 만든 카드가 대화창에 바로 나타납니다. - 자유 질문에는 AI 상담원이 실시간으로 답합니다. - RAG 검색: 작업 사례를 물으면 포트폴리오 설명을 임베딩한 벡터 검색으로 질문과 가장 가까운 사례를 찾아, 근거 사례를 이미지 카드로 함께 보여줍니다(예: "교육 앱 만들어 본 적 있어요?" → 다음칸 사례 카드). - 추천 질문 버튼, 새로고침해도 이어지는 대화, 새 대화 시작 지원. 2. 대화창 안 사례 상세 - 작업 카드를 누르면 페이지를 옮기지 않고 대화창 안에서 이미지를 넘겨 보고 설명을 펼쳐 봅니다. - "이 사례와 비슷하게 상담하기"로 바로 문의 대화를 시작할 수 있습니다. 3. 견적 문의 - 대화 중 문의 폼으로 이름·연락처·내용을 남기면 접수되고, 대화 내용을 AI가 요약해 담당자에게 전달합니다. - 임시 휴무일·운영시간을 반영해 응답 시점을 안내합니다. 4. 테마와 모바일 - 웜(기본)·라이트 두 테마를 전환할 수 있고, 선택은 다음 방문에도 유지됩니다. - 모바일에서는 메뉴가 서랍으로 접혀 대화 화면을 넓게 씁니다. 5. 관리자와 AI 에이전트 연동 - 관리자 화면에서 대화 통계·인기 질문, 문의, 포트폴리오, 회사 정보, 휴무일을 관리합니다. - 같은 관리 기능을 MCP 도구로도 제공해, AI 에이전트가 대화로 포트폴리오 등록·회사 정보 수정을 할 수 있습니다. [기술적 특징] - 메뉴 답변은 AI를 거치지 않는 데이터 카드, 자유 질문만 AI 호출 — 응답 속도와 비용을 함께 잡음 - RAG: 포트폴리오를 등록·수정하면 제목과 설명을 자동으로 임베딩해 pgvector 에 저장하고, 질문이 들어오면 코사인 유사도로 사례를 찾아 AI 답변의 근거로 넘김 — 사례를 추가하는 즉시 상담원이 그 사례로 답할 수 있음 - AI 제공사 장애·한도 초과 시 다른 모델로 자동 전환 - 검색엔진용 서비스·회사소개·포트폴리오 페이지와 sitemap·OG 이미지 별도 제공 [성과 및 가치] - 방문자 응대·사례 소개·문의 접수를 24시간 한 화면에서 처리 - 회사 정보와 포트폴리오를 한 번 고치면 화면과 AI 답변에 함께 반영되는 운영 구조 - AI 에이전트가 직접 사이트를 관리할 수 있는 기반 마련