2026.03

AI Portfolio

기획 및 개발

경력·프로젝트 탐색과 AI Q&A를 하나의 Next.js 앱으로 통합한 개인 포트폴리오

Next.js 16TypeScriptTailwind CSSshadcn/uiVercel AI SDKOpenAIVercel

프로젝트 개요

정적인 이력서 페이지만으로는 방문자가 궁금한 점을 바로 물어보기 어렵다고 판단했습니다. 그래서 좌측에는 섹션형 포트폴리오, 우측에는 RAG 기반 AI 챗봇을 배치해 '읽기'와 '질문하기'를 동시에 지원하는 구조로 설계했습니다. UI에 보여줄 요약 데이터와 챗봇이 참고할 상세 지식을 분리하고, 별도 벡터 DB 없이도 동작하는 가벼운 RAG 파이프라인을 구성하는 것을 목표로 했습니다.

구조 설계

Presentation Layer

Hero, Career, Projects 등 섹션형 UI와 ChatWidget(데스크톱 패널 / 모바일 Sheet)으로 구성. Career·Project는 홈에서 카드 요약만 보여주고 상세는 별도 페이지로 분리해 스크롤 길이를 줄였습니다.

API Layer

`/api/chat` Route Handler에서 사용자 질문을 받아 RAG 컨텍스트를 검색한 뒤, gpt-4o-mini로 스트리밍 응답을 반환합니다. Vercel AI SDK의 streamText + useChat 조합으로 서버·클라이언트를 일관되게 연결했습니다.

Data Layer

`data/profile.ts`는 카드·뱃지 등 UI 렌더링용 구조화 데이터, `content/*.md`는 챗봇이 참고하는 서술형 지식 베이스입니다. `npm run ingest`로 마크다운을 청크·임베딩해 `data/embeddings.json`에 저장합니다.

RAG Pipeline

질문마다 text-embedding-3-small로 쿼리 임베딩 → embeddings.json과 코사인 유사도 비교 → 상위 4개 청크를 system prompt에 주입. Pinecone 등 외부 DB 없이 소규모 지식 베이스에 적합한 구조입니다.

진행 과정

1. 요구사항 정의 & 정보 구조 설계

포트폴리오의 목적을 '채용 담당자가 빠르게 이해하고, 세부 질문도 바로 할 수 있는 경험'으로 정의했습니다.

·섹션별 콘텐츠 범위 결정 (About, Skills, Career, Case Study, Projects 등)
·UI용 profile.ts와 챗봇용 content/ 이중 데이터 구조 설계
·홈은 요약, 상세는 /career·/project 페이지로 분리하는 IA 수립

2. 포트폴리오 UI 구현

먼저 정적 콘텐츠를 안정적으로 보여주는 UI를 완성한 뒤 AI 기능을 얹는 순서로 진행했습니다.

·shadcn/ui + Tailwind로 섹션 컴포넌트 및 반응형 레이아웃 구성
·Career·Project 카드 + '자세히 보기' 상세 페이지 패턴 적용
·Pretendard 로컬 폰트, ChatWidget 반응형 배치(데스크톱 sticky / 모바일 floating)

3. AI 챗봇 & RAG 구축

챗봇이 profile 요약만이 아니라 content/의 구체적인 경력·프로젝트 서술까지 근거로 답하도록 RAG를 연결했습니다.

·content/*.md 청크 분할 및 ingest 스크립트 작성
·retrieveContext()로 관련 청크 검색 후 system prompt에 주입
·useChat 기반 스트리밍 UI, quota·에러 메시지 처리

4. 배포 & 운영

Vercel 배포 환경에서 API 키, 배포 보호, 임베딩 파일 커밋 전략까지 포함해 마무리했습니다.

·Vercel Production에 OPENAI_API_KEY 설정
·Deployment Protection 해제로 공개 접근 허용
·embeddings.json 커밋 기반 배포로 별도 ingest 빌드 스텝 없이 운영

주요 구현

·App Router 기반 페이지·API Route 구조 설계 및 TypeScript 타입 정의
·profile.ts 단일 소스에서 홈 카드, 상세 페이지, sitemap 메타데이터 연동
·lib/rag/chunk.ts · retrieve.ts와 scripts/ingest.ts로 RAG 파이프라인 구현
·ChatInterface 마크다운 렌더링, suggestedQuestions, 대화 초기화 UX
·경력·프로젝트 상세 컴포넌트(ExperienceDetail, ProjectDetail) 분리로 가독성 확보

설계 포인트

UI 요약 vs 챗봇 지식 이중 데이터 구조벡터 DB 없는 경량 RAG카드 요약 + 상세 페이지 IA스트리밍 AI 응답Vercel 원클릭 배포