All is Well은 방대한 패널 데이터베이스에서 사용자의 자연어 질의를 지능적으로 처리하여 최적의 패널을 추출하는 차세대 검색 시스템입니다. "캠핑을 좋아하는 30대 서울 거주 여성"과 같은 자연어 질의만으로 36,113명의 패널과 636,248건의 설문 응답 데이터를 검색하고, AI가 생성한 페르소나 및 통계 시각화를 통해 즉각적인 인사이트를 제공합니다.
- 키워드 기반 검색으로 추상적 질의 처리 불가
- 효율성과 정확성의 트레이드오프 문제
- 검색 결과의 제한적 활용 (단순 목록만 제공)
- 비연속적 검색 경험 (매번 새로 검색)
- 새 데이터 추가 시 긴 전처리 시간
- 적응형 하이브리드 검색: 질의 난이도 자동 분류 (SQL/임베딩 동적 선택)
- 지능형 그룹 분석: LLM 기반 페르소나 생성 및 AI 이미지 시각화
- 대화형 연속 검색: LangGraph 세션 관리로 드릴다운 지원
- 실시간 통계 시각화: Chart.js 인터랙티브 차트
- BGE 기반 리랭킹: 전처리 없이 질문-응답 의미 유사성 계산
- 사용자 인터페이스
- 검색, 히스토리, 라이브러리 관리
- Chart.js 통계 시각화
- TanStack Query 서버 상태 관리
- 사용자 인증 (JWT)
- 검색 결과 캐시 관리
- 히스토리 & 라이브러리 CRUD
- CSV 다운로드 제공
- 프록시 패턴으로 보안 강화
- LangGraph 3-Tier 검색 워크플로우
- LLM 기반 쿼리 분석 & 결과 요약
- ChromaDB 벡터 검색
- BGE Reranker 재순위화
- 페르소나 & 이미지 생성
- SQLite: 구조화 데이터 (패널 정보, 정형 질의 응답 데이터)
- ChromaDB: 벡터 검색 (비정형 질문 + 응답)
| Profile | Name | Role | Assigned Task | GitHub |
|---|---|---|---|---|
 |
이석우 | Leader AI·Data Engineer |
Panel Search Pipeline Development Data Structure Development |
 |
 |
양다원 | Full-stack Developer | UI Design & Frontend Development Backend API Development (Login/Search) |
 |
 |
정수현 | AI·Data Engineer | AI Architecture Design Data Embedding |
 |
 |
홍성환 | Full-stack Developer | UI Design & Frontend Development Backend API Development (Library/History/Panel Details) |
 |
- 기업명과 액세스 코드로 간편하게 로그인
- 자연어로 원하는 패널을 검색
- AI 생성 그룹 페르소나 및 이미지
- 인터랙티브 통계 차트
- 개별 패널 목록 및 유사도
- 연속 질문으로 결과를 점진적으로 좁혀가기
- 사용자가 검색했던 기록들 조회 가능
- 사용자가 저장하고 싶은 내용을 라이브러리에 저장
- 사용자가 검색해서 나온 패널의 결과를 csv 파일로 다운로드 가능
- 자연어 질의 입력 (예: "등산을 좋아하는 30대 서울 거주자")
- 실시간 검색 결과 표시
- 검색 결과 개수 및 세션 ID 표시
- 그룹 페르소나: LLM이 생성한 그룹 대표 설명
- 해시태그: 핵심 특성 요약 (#아웃도어 #30대 #액티브)
- AI 생성 이미지: Nano Banana 모델로 페르소나 시각화
- 개별 페르소나: 각 패널의 성향 요약 및 유사도 점수
-
Chart.js 기반 인터랙티브 차트
-
연령대별 분포 (막대 그래프)
-
성별 분포 (원형 차트)
-
지역별 분포
-
직업별 분포
-
소득별 분포 등
-> 클릭 한 번으로 원하는 통계 확인
- 초기 검색: "캠핑을 좋아하는 사람"
- 후속 질문: "이 중에서 서울 거주자만"
- 또 다시: "이 중에서 30대만"
- 세션 기반으로 이전 결과를 유지하며 점진적 필터링
- 검색된 패널 데이터 엑셀 다운로드
- 포함 정보: 패널ID, 나이, 성별, 지역, 직업, 요약, 유사도
- 한글 깨짐 방지 (UTF-8 BOM)
- 최근 검색 기록 조회
- 클릭 한 번으로 이전 검색 결과 복원
- 검색 시간 표시
- 자주 사용하는 검색 저장 기능
- 사용자 지정 제목으로 관리
- 저장된 검색 빠른 재실행
- React 18.x - UI 라이브러리
- TypeScript - 타입 안전성
- Vite - 빌드 도구 및 개발 서버
- React Router v6 - 클라이언트 사이드 라우팅
- Axios - HTTP 클라이언트 및 API 통신
- Tailwind CSS - 유틸리티 기반 스타일링
- Chart.js - 데이터 시각화
- React Chart.js 2 - React용 Chart.js 래퍼
- Lucide React - 아이콘 라이브러리
- Headless UI - 접근성 중심 UI 컴포넌트
- ESLint - 코드 품질 및 일관성 유지
- Prettier - 코드 포맷팅
- TypeScript - 정적 타입 체크
Frontend/
├── .github/ # GitHub 관련 설정
├── node_modules/ # npm 패키지 (자동 생성)
├── public/ # 정적 리소스
│ └── vite.svg # Vite 로고
├── src/
│ ├── api/ # API 통신 레이어
│ │ ├── auth.js # 인증 API (로그인, 토큰 관리)
│ │ ├── client.js # Axios 클라이언트 설정 및 인터셉터
│ │ ├── historyApi.js # 검색 히스토리 API
│ │ ├── libraryApi.js # 라이브러리 (저장된 검색) API
│ │ ├── panel.js # 패널 상세 정보 API
│ │ └── search.js # 검색 API (메인 검색, 드릴다운)
│ ├── assets/ # 정적 자산 (이미지, 아이콘 등)
│ ├── components/ # 재사용 가능한 컴포넌트
│ │ ├── common/ # 공통 컴포넌트
│ │ │ ├── SaveLibraryModal.jsx # 라이브러리 저장 모달
│ │ │ └── sideBar.jsx # 사이드바 네비게이션
│ │ ├── history/ # 히스토리 페이지 컴포넌트
│ │ │ ├── HistoryCard.jsx # 검색 기록 카드
│ │ │ ├── HistoryHeader.jsx # 히스토리 페이지 헤더
│ │ │ └── HistorySearchBar.jsx # 히스토리 검색 바
│ │ ├── library/ # 라이브러리 페이지 컴포넌트
│ │ │ └── LibraryCard.jsx # 저장된 검색 카드
│ │ ├── login/ # 로그인 페이지 컴포넌트
│ │ │ ├── LoginForm.jsx # 로그인 폼
│ │ │ └── LoginHeader.jsx # 로그인 페이지 헤더
│ │ ├── main/ # 메인 페이지 컴포넌트
│ │ │ ├── featureCard.jsx # 기능 소개 카드
│ │ │ ├── main.jsx # 메인 페이지 메인 섹션
│ │ │ └── UserMenu.jsx # 사용자 메뉴 (로그아웃 등)
│ │ ├── panelDetail/ # 패널 상세 페이지 컴포넌트
│ │ │ ├── dummyPanel.js # 더미 데이터 (개발용)
│ │ │ ├── PanelDetailView.jsx # 패널 상세 뷰
│ │ │ ├── PanelHeader.jsx # 패널 상세 헤더
│ │ │ ├── PanelMatchedQuestions.jsx # 매칭된 질문 섹션
│ │ │ ├── PanelProfile.jsx # 패널 프로필 정보
│ │ │ └── PanelSurvey.jsx # 패널 설문 응답
│ │ └── SearchResult/ # 검색 결과 페이지 컴포넌트
│ │ ├── AnalysisCard.jsx # 통계 분석 카드
│ │ ├── AnalysisChart.jsx # Chart.js 기반 차트 컴포넌트
│ │ ├── AnalysisModal.jsx # 통계 분석 모달
│ │ ├── chartUtils.js # 차트 유틸리티 함수
│ │ ├── DownloadMenu.jsx # CSV 다운로드 메뉴
│ │ ├── PanelAnalysis.jsx # 패널 분석 섹션
│ │ ├── PanelResultTable.jsx # 패널 결과 테이블
│ │ ├── PanelTableRow.jsx # 패널 테이블 행
│ │ ├── PersonaCard.jsx # 페르소나 카드 (그룹 페르소나)
│ │ ├── SearchBar.jsx # 드릴다운 검색 바
│ │ ├── SearchResultContent.jsx # 검색 결과 메인 컨텐츠
│ │ └── TablePagination.jsx # 테이블 페이지네이션
│ ├── contexts/ # React Context
│ │ └── HistoryContext.jsx # 히스토리 전역 상태 관리
│ ├── hooks/ # 커스텀 훅
│ │ ├── useDownload.js # CSV 다운로드 훅
│ │ └── useSearchSession.js # 검색 세션 관리 훅
│ ├── pages/ # 페이지 컴포넌트
│ │ ├── Error/ # 에러 페이지들
│ │ │ ├── BadRequest.jsx # 400 에러
│ │ │ ├── NoResult.jsx # 검색 결과 없음
│ │ │ ├── NotFound.jsx # 404 에러
│ │ │ ├── ServerError.jsx # 500 에러
│ │ │ ├── SessionExpired.jsx # 세션 만료
│ │ │ └── Unauthorized.jsx # 401 에러
│ │ ├── History/ # 히스토리 페이지
│ │ │ └── History.jsx
│ │ ├── Library/ # 라이브러리 페이지
│ │ │ └── (Library.jsx 예정)
│ │ ├── Login/ # 로그인 페이지
│ │ │ └── Login.jsx
│ │ ├── Main/ # 메인 페이지
│ │ │ └── Main.jsx
│ │ └── SearchResult/ # 검색 결과 페이지
│ │ └── SearchResult.jsx
│ ├── routes/ # 라우팅 설정
│ │ ├── AppRouter.jsx # 메인 라우터
│ │ └── ProtectedRoute.jsx # 인증 보호 라우트
│ ├── utils/ # 유틸리티 함수
│ │ ├── auth.jsx # 인증 헬퍼 (토큰 관리)
│ │ ├── errorHandler.js # 전역 에러 핸들러
│ │ └── paginationUtils.js # 페이지네이션 유틸
│ ├── index.css # 글로벌 스타일 (Tailwind)
│ ├── main.jsx # 애플리케이션 진입점
│ └── MainLayout.jsx # 메인 레이아웃 (공통 레이아웃)
├── .gitignore # Git 제외 파일 설정
├── eslint.config.js # ESLint 설정
├── index.html # HTML 템플릿
├── package-lock.json # npm 의존성 잠금 파일
├── package.json # 프로젝트 의존성 및 스크립트
├── postcss.config.js # PostCSS 설정 (Tailwind용)
├── pull_request_template.md # PR 템플릿
├── README.md # 프로젝트 문서
├── tailwind.config.js # Tailwind CSS 설정
└── vite.config.js # Vite 빌드 설정-
api/: 백엔드 API 통신을 담당하는 레이어, Axios 기반
-
components/: 페이지별로 구분된 재사용 컴포넌트
-
common/: 전역적으로 사용되는 컴포넌트
-
SearchResult/: 검색 결과 화면의 복잡한 UI 컴포넌트들
-
panelDetail/: 개별 패널 상세 정보 컴포넌트
-
contexts/: React Context API를 사용한 전역 상태
-
hooks/: 재사용 가능한 커스텀 훅
-
pages/: 라우팅되는 페이지 컴포넌트
-
routes/: React Router 설정 및 보호된 라우트
-
utils/: 공통 유틸리티 함수
Node.js 18.x 이상
npm 또는 yarn1. 저장소 클론
git clone https://github.com/fourEdiots/Frontend.git
cd Frontend
2. 의존성 설치
npm install
3. 실행
npm run dev
경로
http://localhost:5173/
- 복잡한 SQL 작성 불필요 → 데이터 분석 인력 시간 절감
- 신속한 인사이트 도출 → 시장 대응 속도 향상
- 반복 작업 자동화 → IT 자원 소모 최소화
- 타겟 마케팅 정확도 향상 → 마케팅 ROI 극대화
- 개인화된 금융/의료 서비스 → 고객 만족도 & 객단가 상승
- 고품질 의사결정 지원 → 사업 성공률 향상
- 연구 생산성 제고 (논문, 특허, 임상 대상자 모집)
- 범용 플랫폼 확장 (마케팅, 금융, 의료, 공공)
- 정확한 정책 수립 지원
- 시스템 신뢰도 & 사용자 만족도 향상
- SQL 지식 없이 자연어로 데이터 탐색
- 조직 전반의 데이터 기반 문화 확산
- 이 프로젝트는 한성대학교 기업연계 SW캡스톤디자인 수업에서 진행되었습니다. [GitHub]