← 포트폴리오 목록

AI 학업 분석 컨설팅 플랫폼

해외 이용자를 포함한 대상으로 AI 분석 모델 기반 리포트를 제공하는 교육·컨설팅 플랫폼을 설계합니다.

신청건 대기열 처리 아키텍처 설계Bull Queue 기반 대기열과 재시도 정책을 설계해 분석 신청 처리 상태를 안정적으로 추적하는 구조를 구축합니다.
토큰화 결제 흐름 설계카드 정보를 서버에 저장하지 않는 결제 흐름을 설계하고, 웹훅 이벤트로 결제 상태를 신청 건에 자동 반영합니다.
리스트-상세 워크스페이스 구조 구축신청 리스트와 상세 패널을 결합해 진행 상태·문서·결제·상담을 한 화면에서 확인 가능하도록 설계합니다.
서비스 타입Web
업종AI 서비스
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaSocket.ioBull Queue
주요 기능
  • 분석 신청 접수 및 진행현황 워크스페이스
  • 해외 결제 연동
  • 분석 결과 리포트 조회
  • 실시간 상담 채팅
Overview

프로젝트 개요

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

해외 이용자를 포함한 대상으로 AI 분석 모델 기반 리포트를 제공하는 교육·컨설팅 플랫폼을 설계합니다. 분석 신청부터 결제, 결과 리포트 확인, 실시간 상담 채팅까지 이어지는 사용자 흐름을 구현하며, 신청 데이터는 백엔드 아키텍처 설계 원칙에 따라 대기열을 거쳐 분석 파이프라인으로 전달됩니다. 결제·개인정보 데이터는 전송 구간과 저장소 모두에서 암호화해 보안을 확보합니다.

작업 범위

  • 분석 신청 접수 및 진행현황 워크스페이스: 이용자가 분석 항목별 데이터를 입력하고 성적표·에세이·활동 이력 등 문서를 첨부해 신청 건을 접수하며, 신청 리스트에서 선택한 항목의 진행 상태를 상세 패널로 확인할 수 있는 구조를 구현합니다
  • 해외 결제 연동: 분석 신청 건에 대한 온라인 결제를 해외 결제 게이트웨이(Stripe 등)와 연동하여 처리하며, 결제 상태와 신청 건을 자동으로 연결하는 흐름을 구현합니다
  • 분석 결과 리포트 조회: 파이썬 기반 분석 모델 실행이 완료되면 결과 리포트를 화면에서 확인하고 PDF로 내려받을 수 있는 화면을 구현합니다
  • 실시간 상담 채팅: 신청 건별로 담당 상담사와 실시간 채팅을 주고받을 수 있는 화면을 구현하며, 대면 절차 없이 웹에서 상담이 완결되는 흐름을 설계합니다

주요 업무

  • 분석 신청 접수 및 진행현황 워크스페이스 화면: 신청 데이터를 검증한 뒤 대기열에 등록하고, 대기열 순번과 처리 상태를 실시간으로 갱신하는 백엔드 구조를 Node.js 기반으로 구현합니다. 클라우드 샌드박스에서 실행되는 분석 파이프라인과 상태를 동기화합니다
  • 해외 결제 연동 화면: 카드 정보를 서버에 저장하지 않는 토큰화 결제 구조를 설계하고, 결제 성공·실패·취소 웹훅을 신청 상태와 동기화합니다
  • 분석 결과 리포트 조회 화면: 분석 파이프라인 결과를 구조화된 JSON으로 수신해 화면에 시각화하고, jsPDF로 리포트 원본을 생성합니다
  • 실시간 상담 채팅 화면: Socket.io 기반 채팅 채널을 신청 건 단위로 분리하고, 읽음 확인·파일 공유·상담 이력 저장 구조를 구현합니다
AI 학업 분석 컨설팅 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

해외 이용자의 결제 실패·인증 방식 차이를 흡수하는 결제 흐름 설계가 필요하며

게이트웨이 웹훅 재시도 로직으로 대응합니다

성적·에세이 등 민감한 개인정보를 다루므로 저장·전송 구간 암호화와 접근 로그 설계가 필요하며

컬럼 단위 암호화와 감사 로그로 대응합니다

분석 신청이 몰릴 때 대기열 처리 지연이 발생할 수 있어

재시도 정책과 우선순위 큐 설계로 대응합니다

기술 스택 선정 근거를 비개발자도 이해할 수 있도록 설명하는 문서화 작업이 필요하며

아키텍처 다이어그램과 쉬운 설명 자료로 정리해 전달합니다

구현 내용

핵심 기능 상세

핵심 기능 1

분석 신청 접수 및 진행현황 워크스페이스

이용자가 분석 항목별 데이터를 입력하고 성적표·에세이·활동 이력 등 문서를 첨부해 신청 건을 접수하며, 신청 리스트에서 선택한 항목의 진행 상태를 상세 패널로 확인할 수 있는 구조를 구현합니다.

  • Bull Queue로 분석 신청 작업을 큐잉하고 재시도·실패 처리 정책을 설계
  • Multer + AWS S3 기반 다중 문서 업로드 및 파일 검증 파이프라인 구현
  • React Query로 신청 리스트-상세 뷰 상태를 동기화하고 폴링 간격을 단계별로 조정

리스트-상세 워크스페이스 구조로 신청건별 진행 상태·첨부 문서·결제 여부를 한 화면에서 추적할 수 있도록 설계합니다.

분석 신청 접수 및 진행현황 워크스페이스
분석 신청 접수 및 진행현황 워크스페이스 실제 화면
핵심 기능 2

해외 결제 연동

분석 신청 건에 대한 온라인 결제를 해외 결제 게이트웨이(Stripe 등)와 연동하여 처리하며, 결제 상태와 신청 건을 자동으로 연결하는 흐름을 구현합니다.

  • 해외 결제 게이트웨이의 Payment Intent 흐름을 참고한 결제 상태 머신 설계
  • 웹훅 이벤트 기반으로 결제 성공·실패를 신청 건 상태에 자동 반영
  • 결제·환불 이력을 별도 테이블로 관리해 마이페이지 결제 내역 조회에 재사용

카드 정보를 직접 저장하지 않는 토큰화 결제 구조로 처리 범위를 최소화하고, 결제·개인정보 데이터는 전송 구간과 저장소 모두 암호화합니다.

해외 결제 연동
해외 결제 연동 실제 화면
핵심 기능 3

분석 결과 리포트 조회

파이썬 기반 분석 모델 실행이 완료되면 결과 리포트를 화면에서 확인하고 PDF로 내려받을 수 있는 화면을 구현합니다.

  • 클라우드 샌드박스에서 실행된 분석 파이프라인 결과를 폴링/웹훅으로 수신해 반영
  • jsPDF 기반 리포트 다운로드 기능 구현
  • Recharts로 분석 항목별 결과를 도식화하는 결과 요약 카드 구현

분석 결과를 비개발자도 바로 이해할 수 있도록 쉬운 설명을 곁들인 요약 카드와 상세 리포트 2단 구조로 나눠 설계합니다.

분석 결과 리포트 조회
분석 결과 리포트 조회 실제 화면
핵심 기능 4

실시간 상담 채팅

신청 건별로 담당 상담사와 실시간 채팅을 주고받을 수 있는 화면을 구현하며, 대면 절차 없이 웹에서 상담이 완결되는 흐름을 설계합니다.

  • Socket.io로 신청 건 단위 채팅 채널을 분리하고 재접속 시 이력을 복원
  • 읽음 확인 및 상담사 온라인 상태 표시 구현
  • 채팅 내 파일 공유 시 업로드 화면과 동일한 검증 로직 재사용

신청 건과 채팅 채널을 1:1로 매핑해 상담 맥락(신청 항목·업로드 문서·결제 상태)을 상담 화면에서 함께 확인할 수 있도록 설계합니다.

실시간 상담 채팅
실시간 상담 채팅 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

요구사항 분석 및 DB·대기열 아키텍처 설계 · 2026.09

분석 신청·결제·리포트 도메인 모델링, PostgreSQL 테이블 22개 정의, Bull Queue 작업 구조 설계

STEP 2

인증·결제·문서 업로드 API 개발 · 2026.09

Express 기반 JWT 인증, 해외 결제 게이트웨이 연동, S3 문서 업로드 API 32개 구현

STEP 3

신청 워크스페이스 및 상담 채팅 UI 개발 · 2026.09

React 기반 리스트-상세 워크스페이스, Socket.io 상담 채팅 화면 구현

STEP 4

결과 리포트 연동 및 통합 테스트 · 2026.09

분석 파이프라인 결과 수신·PDF 리포트 생성 연동, 결제·인증 통합 테스트 62개 케이스 작성

프로젝트 성과

주요 성과

신청건 대기열 처리 아키텍처 설계Bull Queue 기반 대기열과 재시도 정책을 설계해 분석 신청 처리 상태를 안정적으로 추적하는 구조를 구축합니다.
토큰화 결제 흐름 설계카드 정보를 서버에 저장하지 않는 결제 흐름을 설계하고, 웹훅 이벤트로 결제 상태를 신청 건에 자동 반영합니다.
리스트-상세 워크스페이스 구조 구축신청 리스트와 상세 패널을 결합해 진행 상태·문서·결제·상담을 한 화면에서 확인 가능하도록 설계합니다.
개인정보 암호화 저장 구조 설계성적·에세이 등 민감 데이터를 컬럼 단위로 암호화하고 전송 구간은 TLS로 보호하는 구조를 구현합니다.
Highlights

기술적 주안점

  • 리스트-상세 워크스페이스 구조로 신청건별 진행 상태·첨부 문서·결제 여부를 한 화면에서 추적할 수 있도록 설계합니다
  • 카드 정보를 직접 저장하지 않는 토큰화 결제 구조로 처리 범위를 최소화하고, 결제·개인정보 데이터는 전송 구간과 저장소 모두 암호화합니다
  • 분석 결과를 비개발자도 바로 이해할 수 있도록 쉬운 설명을 곁들인 요약 카드와 상세 리포트 2단 구조로 나눠 설계합니다

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

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기