← 포트폴리오 목록

기업 워크숍 프로그램 검색·견적 플랫폼

기업 담당자가 목적·인원·예산·지역 등 다중 조건으로 워크숍 프로그램을 검색하고, 자연어로 요청하면 AI가 적합한 프로그램을 추천하며, 파트너사가 직접 프로그램을 등록해 카탈로그를 넓히는 맞춤 데모를 React와 Node.js 기반으로 구현합니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종플랫폼
기술 스택
React 18TypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaOpenAI API
주요 기능
  • 기업 맞춤 워크숍 프로그램 검색·필터
  • AI 자연어 프로그램 추천
  • 프로그램 상세 및 맞춤 견적 요청
  • 파트너사 프로그램 등록

프로젝트 개요

범위: 개발, 디자인, 기획

기업 담당자가 목적·인원·예산·지역 등 다중 조건으로 워크숍 프로그램을 검색하고, 자연어로 요청하면 AI가 적합한 프로그램을 추천하며, 파트너사가 직접 프로그램을 등록해 카탈로그를 넓히는 맞춤 데모를 React와 Node.js 기반으로 구현합니다. 프로그램·견적 데이터는 확장 가능한 DB 구조로 설계해, 이후 통합 CRM과 자동 정산, 일정 관리·강사 매칭 기능으로 자연스럽게 확장하고 구축 후에도 유지보수하기 쉬운 구조를 유지합니다.

작업 범위

  • 기업 맞춤 워크숍 프로그램 검색·필터: 목적·참여인원·진행시간·지역·실내외·예산·프로그램 유형 등 다양한 조건을 조합해 워크숍 프로그램을 검색하고, 카테고리 필터 칩으로 결과를 빠르게 좁혀 카드 그리드로 탐색하는 화면을 제공합니다
  • AI 자연어 프로그램 추천: "100명 신입사원 대상 3시간 팀빌딩"처럼 자연어로 요청을 입력하면 LLM API가 조건을 파싱해 인원·시간·목적에 맞는 프로그램을 추천 카드로 제시하는 화면을 제공합니다
  • 프로그램 상세 및 맞춤 견적 요청: 프로그램 소개·교육 효과·진행 프로세스·준비사항·후기·관련 프로그램을 확인하고, 회사명·담당자·희망 날짜·인원·예산·요청사항을 입력해 견적을 요청하는 화면을 제공합니다
  • 파트너사 프로그램 등록: 강사·팀빌딩 업체·교육업체·공간 등 파트너사가 회원가입 후 자체 프로그램을 등록하거나 운영사 양식에 맞춰 제안서를 업로드하는 화면을 제공합니다

주요 업무

  • 기업 맞춤 워크숍 프로그램 검색·필터 화면: 프로그램-카테고리-파트너사 관계를 담는 확장 가능한 DB 구조로 스키마를 설계하고, 다중 필터 조건을 URL 쿼리와 동기화하는 검색 상태 관리를 구현합니다
  • AI 자연어 프로그램 추천 화면: 자연어 요청을 구조화된 필터 파라미터로 변환하는 프롬프트 체계를 설계하고, 파싱 결과를 검색 엔진의 필터 조건에 그대로 연결합니다
  • 프로그램 상세 및 맞춤 견적 요청 화면: 상세 페이지 데이터와 견적 요청 폼을 하나의 흐름으로 연결하고, 접수된 견적은 관리자 견적 관리 큐로 즉시 전달되는 구조를 구현합니다
  • 파트너사 프로그램 등록 화면: 파트너 유형별로 다른 등록 항목을 조건부 폼으로 분기하고, 등록된 프로그램은 운영사 검수 대기 상태로 저장됩니다
기업 워크숍 프로그램 검색·견적 플랫폼
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

목적·인원·예산·지역 등 다차원 필터 조합의 검색 성능을 유지하는 인덱싱 전략

자연어 추천 요청에서 모호하거나 상충하는 조건(예산 대비 인원 초과)을 감지해 안내하는 로직 설계

파트너사가 등록한 프로그램 정보의 형식·품질 편차를 표준 스키마로 정규화하는 검증 규칙

동일 프로그램에 다수 파트너사의 유사 제안이 등록될 때 중복 노출을 방지하는 판별 로직

구현 내용

핵심 기능 상세

핵심 기능 1

기업 맞춤 워크숍 프로그램 검색·필터

목적·참여인원·진행시간·지역·실내외·예산·프로그램 유형 등 다양한 조건을 조합해 워크숍 프로그램을 검색하고, 카테고리 필터 칩으로 결과를 빠르게 좁혀 카드 그리드로 탐색하는 화면을 제공합니다.

  • 목적·인원·예산·지역 등 7개 필터 조건을 조합하는 동적 쿼리 빌더를 URL 쿼리스트링과 동기화
  • 필터 chips 가로 스크롤 UI와 카드 그리드에 Intersection Observer 기반 무한 스크롤 적용
  • 프로그램-카테고리-파트너사 관계형 스키마를 PostgreSQL로 설계해 신규 카테고리 확장에 대응

다중 필터 조건을 URL 상태와 동기화하는 검색 엔진을 설계해, 조건별 탐색 결과를 링크로 공유하고 확장 가능한 프로그램 스키마 위에서 카테고리를 계속 늘려갈 수 있는 구조를 구현합니다.

기업 맞춤 워크숍 프로그램 검색·필터
기업 맞춤 워크숍 프로그램 검색·필터 실제 화면
핵심 기능 2

AI 자연어 프로그램 추천

"100명 신입사원 대상 3시간 팀빌딩"처럼 자연어로 요청을 입력하면 LLM API가 조건을 파싱해 인원·시간·목적에 맞는 프로그램을 추천 카드로 제시하는 화면을 제공합니다.

  • OpenAI API 기반 자연어 조건 파싱 프롬프트 설계로 인원·시간·목적·예산 추출
  • 파싱 실패·모호 조건 발생 시 추가 질문을 유도하는 폴백 대화 흐름 구현
  • 파싱된 조건을 검색 엔진 필터 파라미터로 직접 매핑하는 어댑터 계층 구현

자연어 요청을 구조화된 검색 조건으로 변환하는 파싱 어댑터를 설계해, AI 추천과 일반 검색이 동일한 필터 엔진을 공유하는 구조를 구현합니다.

AI 자연어 프로그램 추천
AI 자연어 프로그램 추천 실제 화면
핵심 기능 3

프로그램 상세 및 맞춤 견적 요청

프로그램 소개·교육 효과·진행 프로세스·준비사항·후기·관련 프로그램을 확인하고, 회사명·담당자·희망 날짜·인원·예산·요청사항을 입력해 견적을 요청하는 화면을 제공합니다.

  • 프로그램 상세 데이터를 이미지 갤러리·구성·프로세스 섹션으로 구조화해 렌더링
  • 견적 요청 폼의 항목별(연락처/인원/예산) 유효성 검증 규칙 구현
  • 견적 요청 접수 시 관리자 알림 큐에 전달하는 이벤트 발행 로직 구현

프로그램 상세 열람과 견적 요청을 하나의 흐름으로 연결해, 접수된 요청이 곧바로 관리자 견적 관리 파이프라인으로 이어지는 구조를 설계합니다.

프로그램 상세 및 맞춤 견적 요청
프로그램 상세 및 맞춤 견적 요청 실제 화면
핵심 기능 4

파트너사 프로그램 등록

강사·팀빌딩 업체·교육업체·공간 등 파트너사가 회원가입 후 자체 프로그램을 등록하거나 운영사 양식에 맞춰 제안서를 업로드하는 화면을 제공합니다.

  • 강사/업체/공간 등 파트너 유형별 회원가입 및 프로필 입력 폼 분기 구현
  • 프로그램 등록 폼에 이미지·영상 첨부와 임시 저장(초안) 기능 구현
  • 등록 프로그램을 검수대기 상태로 저장하는 승인 워크플로우 스키마 설계

파트너 유형별 등록 흐름을 조건부 폼으로 분기하면서도 동일한 프로그램 스키마에 수렴시켜, 다양한 공급자가 하나의 카탈로그로 통합되는 구조를 설계합니다.

파트너사 프로그램 등록
파트너사 프로그램 등록 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

요구사항 분석 및 검색·견적 데이터 모델 설계 · 2026.09

프로그램·카테고리·파트너사·견적 흐름 ERD 설계, PostgreSQL 테이블 정의 및 관계 매핑

STEP 2

검색·AI 추천 백엔드 API 개발 · 2026.09

Express 기반 다중 필터 검색 API 구현, OpenAI API 연동으로 자연어 조건 파싱 로직 구현

STEP 3

탐색·상세·견적요청 화면 개발 · 2026.09

React 검색 그리드, 프로그램 상세, 견적 요청 폼 UI 구현 및 Tailwind CSS 스타일링

STEP 4

파트너사 등록 플로우 및 통합 테스트 · 2026.09

파트너 유형별 회원가입·프로그램 등록 폼 구현, 검색부터 견적요청까지 통합 테스트

개발 결과

자연어 조건 파싱 추천 엔진 구현LLM API로 인원·시간·목적 등 자연어 요청을 구조화된 검색 조건으로 변환하는 프롬프트 설계와 파싱 로직을 구현합니다.
다중 조건 검색 쿼리 빌더 설계목적·인원·예산·지역·실내외 등 7개 필터 조건을 조합 가능한 동적 쿼리 빌더로 구현하고 URL 상태와 동기화합니다.
견적 요청 접수 파이프라인 구축선택 프로그램·인원·예산 등 항목별 유효성 검증과 접수 후 관리자 알림 큐 연동 구조를 구축합니다.
파트너사 온보딩 플로우 설계강사·업체·공간 등 파트너 유형별 가입 폼 분기와 프로그램 등록 초안 저장 로직을 설계합니다.

기술적 주안점

  • 다중 필터 조건을 URL 상태와 동기화하는 검색 엔진을 설계해, 조건별 탐색 결과를 링크로 공유하고 확장 가능한 프로그램 스키마 위에서 카테고리를 계속 늘려갈 수 있는 구조를 구현합니다
  • 자연어 요청을 구조화된 검색 조건으로 변환하는 파싱 어댑터를 설계해, AI 추천과 일반 검색이 동일한 필터 엔진을 공유하는 구조를 구현합니다
  • 프로그램 상세 열람과 견적 요청을 하나의 흐름으로 연결해, 접수된 요청이 곧바로 관리자 견적 관리 파이프라인으로 이어지는 구조를 설계합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의