최성재

PDF를 업로드하면 문서 기반 대화가 가능한 RAG 챗봇. Vercel 배포 제약(4.5MB)을 Storage 직접 업로드로 우회하고, HNSW 인덱스 기반 벡터 검색과 RLS 데이터 격리로 멀티유저 환경의 문서 QA 서비스를 구현

• 문서 업로드 및 인덱싱 — PDF 페이지별 텍스트 추출 후 text-embedding-3-large(3072차원) 벡터 임베딩 생성, 업로드/임베딩 단계별 로딩 상태 표시
• 문서 기반 채팅 — HNSW 인덱스 + 코사인 유사도 Top-10 검색으로 관련 컨텍스트 추출, Vercel AI SDK + Gemini 2.5 Flash로 답변 생성, 출처 페이지 번호 제공
• 세션 관리 — 1개 PDF에서 주제별 대화 세션 생성·전환·삭제, 세션별 최근 10건 대화 히스토리를 프롬프트에 결합하여 맥락 유지
• 인증 및 보안 — Google OAuth + Supabase Auth 연동, Next.js 미들웨어 라우트 보호, 6개 테이블에 RLS 정책 적용으로 사용자별 데이터 완전 격리
• 크레딧 시스템 — Vercel AI Gateway의 호출 전/후 total_used 차이로 토큰 비용 산출, fire-and-forget 비동기 로깅으로 응답 지연 없이 사용량 추적

• [문제]Vercel API 라우트 body 크기 제한(4.5MB)으로 대용량 PDF 업로드 실패, 서버리스 환경에서 3072차원 임베딩 생성까지 대기 시간 발생
• [해결]클라이언트 → Supabase Storage 직접 업로드(10MB)로 body limit 우회 후 API에 메타데이터만 전송. 임베딩 생성은 서버에서 처리하며, 업로드 중/임베딩 중/완료 3단계 상태를 Zustand로 관리하여 사용자에게 현재 처리 단계 표시
• [문제]페이지 단위 청킹에서 관련 없는 컨텍스트가 Top-K에 포함되어 답변 품질 저하
• [해결]HNSW 인덱스(vector_cosine_ops) 적용으로 검색 성능 확보, Top-10 유사도 결과와 최근 대화 히스토리 10건을 결합한 프롬프트 구성으로 정확도 향상. 출처 페이지 번호를 함께 제공하여 답변 신뢰성 강화
• [문제]크레딧 사용량 로깅이 API 응답을 블로킹하여 채팅 응답 지연 발생
• [해결]fire-and-forget IIFE 패턴으로 크레딧 로깅을 비블로킹 처리, 응답 반환 후 비동기로 Vercel AI Gateway 비용 산출 및 DB 기록. 실패 시 catch 로깅만 수행하여 사용자 경험에 영향 없도록 설계

• PDF 추출 → 임베딩(3072차원) → HNSW 벡터 검색 → LLM 답변 생성까지 end-to-end RAG 파이프라인 설계 및 Vercel 서버리스 환경에 안정적 배포
• Container/View 패턴으로 UI/로직 분리, 5개 독립 Zustand 스토어로 관심사별 상태 관리 아키텍처 구축
• Supabase의 PostgreSQL + pgvector + Storage + Auth를 단일 플랫폼에서 통합 운영, 6개 테이블 RLS 정책으로 멀티테넌트 데이터 격리 구현

• GSAP ScrollTrigger 활용 시네마틱 스크롤 애니메이션 (9개 섹션)
• Zustand 기반 다단계 본인인증 시스템 (KCP PASS 연동)
• 동적 메타데이터, JSON-LD, Sitemap.xml 서버사이드 SEO
• Sharp/AVIF 이미지 최적화 (75% 감소), 폰트 서브셋 자동화 (70% 감소)

• [문제]이미지 파일 용량 과다(평균 3.2MB), Pretendard 폰트 2MB로 초기 로딩 시간 평균 3-5초 소요
• [해결]Sharp를 활용한 WebP/AVIF 자동 변환 스크립트, subset-font로 폰트 서브셋 자동 생성. 이미지 75% 감소(800KB), 폰트 70% 감소(600KB). 이미지/폰트 최적화로 모바일(4G) 기준 초기 로딩 체감 시간을 약 5초 → 1.5초로 단축했고, 프로덕션 Lighthouse 성능 점수를 72 → 95로 개선했습니다
• [문제]KCP PASS 본인인증 완료 후 부모 창으로 결과 전달 안 됨, iOS/Android WebView에서 회원가입 중단
• [해결]팝업 윈도우(window.open) + URL 폴링 방식으로 전환. 인증 완료 시 콜백 URL 파라미터로 결과를 전달받아 setInterval로 팝업 URL 변화를 감지하는 구조로 변경. iOS/Android WebView 환경에서도 인증 결과 전달 정상화
• [문제]검색엔진이 SPA 동적 콘텐츠 크롤링 실패, 네이버/구글 검색 결과 미노출
• [해결]Next.js Metadata API로 서버사이드 메타데이터 생성, JSON-LD 구조화 데이터 구현, 동적 Sitemap.xml 자동 생성. 구글 "한조각" 브랜드명 검색 시 상위 노출 (Search Console 기준, 2025년 10월)

• 초기 화면에 필요한 핵심 데이터는 서버에서 렌더링(SSR/RSC)하여 첫 로딩을 안정함
• Lighthouse SEO 점수 95/100
• 구글 "한조각" 브랜드명 검색 시 상위 노출 (Search Console 기준, 2025년 10월)

• KCP PASS 본인인증, 간편 로그인 (PIN), 생체 인증 (WebView Bridge)
• 투자 모집중 상품 관리, 상세 페이지, 투자하기, 결제
• 마이페이지 (투자 현황, 배당금, 입출금 내역, 계좌 관리)
• 1대1 문의, FAQ, 공지사항, 알림 센터 (푸시 알림)

• [문제]Next.js의 서버사이드와 클라이언트사이드에서 API baseURL이 달라야 하는 문제 (서버는 직접 백엔드 호출, 브라우저는 CORS 우회 필요)
• [해결]getBaseURL() 함수로 환경 자동 감지, 서버사이드는 직접 백엔드 URL(NEXT_PUBLIC_API_BASE_URL) 사용, 클라이언트는 Next.js rewrites를 통한 /api 프록시 사용. Axios 인터셉터로 헤더 자동 추가 및 응답 데이터 unwrap 처리
• [문제]iOS/Android 모바일 브라우저에서 키보드가 올라올 때 하단 고정 버튼이 가려져 사용자가 조작 불가
• [해결]모바일에서 키보드가 올라오면 하단 버튼이 가려지는 문제 해결. visualViewport API로 키보드 높이를 실시간 감지하고, 하단 고정 버튼을 키보드 위로 자동 이동. iPhone 홈바(Safe Area)도 함께 대응
• [문제]본인인증(X-ENCRYPTED-AUTH) → 로그인(AUTH-TOKEN) 2단계 인증 시스템에서 각 페이지별 접근 권한이 달라 라우팅 로직이 복잡해짐
• [해결]Next.js middleware로 서버사이드 인증 검증 및 자동 리다이렉트 구현. 쿠키 기반 인증 상태 확인 후 미인증은 /auth, 본인인증만 완료는 /auth/login, 전체 인증 완료는 정상 접근. 게스트 모드(/auth/guest) 별도 처리
• [문제]다른 디바이스에서 중복 로그인 시 기존 세션이 유지되어 보안 이슈 발생
• [해결]Axios 응답 인터셉터에서 duplicated_login 플래그 감지 시 모든 쿠키 자동 삭제, 로그인 페이지로 강제 리다이렉트. 클라이언트사이드에서 자동 처리되어 사용자 혼란 최소화
• [문제]Flutter WebView와 웹 간 양방향 통신 시 타입 안정성 부재, 액션별로 다른 payload/response 타입 관리 어려움
• [해결]TypeScript 조건부 타입(PayloadByAction<T>, ResponseByAction<T>)으로 액션별 타입 자동 추론 구현. 함수 오버로딩으로 각 액션(toFlutterBio, toFlutterRegister 등)마다 정확한 타입 체크. requestFlutterData() 함수 하나로 모든 브릿지 통신 타입 안전하게 처리

• getBaseURL() 함수로 SSR/CSR 환경 자동 감지, API 통신 에러율 0% 달성
• middleware 기반 인증 상태 검증으로 잘못된 페이지 접근 방지, 라우팅 정확도 100%
• Axios 인터셉터로 duplicated_login 플래그 감지 시 자동 세션 정리, 보안 강화

• 권한 기반 멀티 대시보드 (중앙, 병원, 장비 관리자)
• TanStack Table v8 고급 데이터 테이블 (서버사이드 페이지네이션, 컬럼 리사이징)
• Lexical Rich Text 에디터 (약관, 뉴스, FAQ 작성)
• Recharts 대시보드 시각화 (KPI 카드, 투자 트렌드, 파이 차트)
• 31개 모듈화된 API Hooks, 10개 이상 도메인 관리

• [문제]중앙 관리자, 병원 관리자, 장비 관리자 등 3가지 권한에 따라 서로 다른 레이아웃과 메뉴 필요, 단일 레이아웃 + 조건부 렌더링은 복잡함
• [해결]권한별 레이아웃 분리를 Route Groups + 서버 권한 확인으로 설계하여, 발생하던 hydration 이슈를 구조적으로 제거하고 레이아웃/메뉴 코드의 복잡도를 낮췄습니다
• [문제]10개 이상 도메인에 대해 일관된 테이블 UI 필요, 페이지네이션/정렬/필터링/행 선택/컬럼 리사이징 등 복잡한 기능 요구, 도메인마다 새로 만들면 중복 코드 과다
• [해결]TanStack Table v8 Headless UI 선택, 범용 DataTable 컴포넌트 설계, TypeScript 제네릭 활용. 서버사이드 페이지네이션으로 평균 로딩 0.5초 이내, 컴포넌트 재사용률 95%, 개발 속도 3배 향상

• 풀 CRUD 기능, Excel 다운로드, 실시간 대시보드
• 관리자 작업 효율성 60% 향상 (기존 수동 작업 대비)

• 재사용 가능한 UI 컴포넌트 라이브러리 구축 (26개 컴포넌트)
• 메뉴, Breadcrumb, AutoComplete, Badge, Modal 등 핵심 컴포넌트 리팩토링
• Jest + React Testing Library 기반 단위 테스트
• Storybook을 활용한 컴포넌트 문서화 및 시각적 테스트

• [문제]메뉴와 Breadcrumb 컴포넌트의 과도한 useEffect 사용으로 불필요한 리렌더링 발생, 디버깅 어려움
• [해결]메뉴는 useEffect 제거 및 초기 상태 설정 방식으로 변경, Breadcrumb은 내부 상태 관리를 완전히 제거하고 Props 기반 완전 제어 컴포넌트로 전환.
• [문제]interface와 type import 간 순환 참조로 인한 빌드 에러 발생
• [해결]공통 interface를 별도 types.ts 파일로 분리, interface extends 활용하여 타입 재사용, import 구조를 단방향으로 재설계. 빌드 에러 완전 해결, 타입 재사용성 및 유지보수성 향상

• useEffect 제거 및 Props 기반 제어 컴포넌트 전환으로 불필요한 리렌더링 제거
• 순환 참조 해결로 빌드 안정성 확보

• 문서 업로드 및 OCR 처리 관리 (다중 파일, 실시간 진행률 표시)
• 한글 검색 정규화(NFD 방식), 다중 조건 필터, 디바운스 검색(300ms)
• 계정 및 권한 관리 (USER ↔ MANAGER 역할 변경, 활성/비활성 관리)
• AI 키워드 관리 시스템 (동의어 그룹, 드래그앤드롭 우선순위 조정)
• 목록 상태 유지 기능 (URL 쿼리, sessionStorage 스크롤 복원)

• [문제]목록에서 상세 페이지를 거쳐 돌아올 때 처음으로 초기화 (페이지, 필터, 스크롤 위치 모두 리셋)
• [해결]useQueryString 커스텀 훅으로 URL 기반 페이지 상태 관리, useScrollMemory 훅으로 sessionStorage에 스크롤 위치 저장/복원. 상세에서 돌아올 때 이전 상태 정확히 복원, Work 목록과 계정관리 목록 모두 적용
• [문제]한글 검색 시 자모 분리 문제로 특정 조합에서 검색 실패
• [해결]검색어 전송 전 NFD(Compatibility Decomposition) 정규화 적용. 모든 한글 검색이 일관되게 작동, 자모 분리 문자도 정확히 검색

• 5개의 독립적인 Zustand 스토어로 관심사 분리, 확장 가능한 아키텍처 구축
• 사용자 경험 중심 개발, 보일러플레이트 90% 감소, 타입 안정성 확보