AI•실시간 화상 타로 상담 플랫폼, 마법의 소라고둥

🌠매력적인 애니메이션과 함께 즐기는🌠
🔮AI•실시간 화상 타로 상담🔮

"한 번쯤은 타로 점을 쳐보고 싶지만, 시간과 돈을 투자하면서 보긴 귀찮아..."

걱정하지 마세요!
AI 타로 상담사와 함께 언제 어디서든 무료로 타로 상담을 즐길 수 있어요 💫
원하는 타로 상담사와 실시간 화상 타로 상담도 가능하답니다.
고민이나 궁금증, 어떤 주제든 자유롭게 이야기해보세요 🌌

함께 나누는 이야기를 통해, 더 나은 미래를 상상하는 시간이 되길 바라요 🔮
생동적인 애니메이션과 함께, 당신만의 특별한 타로 체험을 즐겨보세요 ✨

🔗 배포 링크  |  🎥 주요 기능 및 시나리오

💡 기획서  |  📋 백로그  |  📚 기술블로그

🗒️ 팀 노션  |  🌐 위키

목차

• 🚀 핵심기능
  • AI와의 채팅을 통해 타로점을 볼 수 있어요.
  • 실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요.
• 기술적 도전
  • 멀티 어플리케이션 구축
  • 블루/그린 무중단 배포
  • 클로바 API를 이용한 AI 채팅
  • WebRTC를 이용한 P2P 통신
  • 인터렉티브한 애니메이션
• 우당탕탕 이슈 해결기 💦
  • BE
    • 야 너두 무중단 배포 할 수 있어 🫵
    • SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)
  • FE
    • 인터랙티브 웹: 카드 애니메이션
    • 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻
    • 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀
  • FE / BE
    • UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎
    • 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)
• 시스템 아키텍처
• 기술 스택
• 🔮🥛 타로 밀크티 소개

🚀 핵심기능

AI와의 채팅을 통해 타로점을 볼 수 있어요.

사용자가 AI에게 자신의 고민을 자유롭게 이야기하면, 고민 내용을 바탕으로 타로 상담을 진행합니다.
고민 상담 후 사용자가 타로 카드를 뽑으면, AI가 해당 결과를 설명합니다.
사용자는 타로점 결과를 링크나 카카오톡으로 공유할 수 있습니다.

실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요.

타로 전문가와 직접 대면으로 만나지 않고 온라인 상에서 편하게 상담을 받을 수 있습니다.
전문가는 상담을 위한 채팅방을 생성하여 사용자를 초대합니다. 사용자는 해당 채팅방에 접속하여 타로 상담을 받을 수 있습니다.

기술적 도전

멀티 어플리케이션 구축

• 도커 컴포즈로 멀티 어플리케이션 환경을 구성하여 여러 개의 서비스를 한 번에 실행하고 관리합니다.
• nginx를 활용하여 URL에 따라 서로 다른 서비스를 프록시합니다.

블루/그린 무중단 배포

• 블루/그린 무중단 배포를 통해 신규 버전의 배포 과정에서 발생하는 다운타임을 최소화합니다.
• 도커의 캐싱 옵션을 활용하여 빌드 시간을 최적화합니다. 이전 빌드 캐시를 재사용하여 빌드 시간을 단축합니다.
• graceful shutdown으로 파일 입출력과 데이터베이스 커넥션 작업을 안전하게 종료합니다.
• health check로 새로운 어플리케이션이 정상적으로 실행되고 정상적인 응답을 제공할 수 있는지 확인한 후에 트래픽을 전환하여 서비스 중단을 방지합니다.
• 배포를 수행하는 쉘 스크립트를 에러 핸들링하여 시스템 안정성을 확보합니다. 배포 과정에서 오류가 발생하면 즉시 중단되어 기존 시스템에 영향을 미치지 않습니다.

클로바 API를 이용한 AI 채팅

• 클로바 API로부터 응답을 받아올 때, 기존의 요청-응답 방식 대신 스트림 형태로 받아옵니다. 이를 통해 사용자가 처음 응답을 받기까지 걸리는 시간을 최소화 합니다.
• 스트림을 토큰 단위로 클라이언트에게 전달하여 AI와 실시간으로 채팅하는 듯한 사용자 경험을 제공합니다.

WebRTC를 이용한 P2P 통신

• WebRTC API를 활용하여 서버에 부담을 주지 않고 실시간 P2P 커뮤니케이션을 지원합니다.
• 데이터 채널을 통해 이미지, 메세지 등 다양한 종류의 파일을 주고 받습니다.

인터렉티브한 애니메이션

• 카드가 펼쳐지고 회전하는 등의 생생한 애니메이션으로 실제로 타로를 보는 듯한 현장감을 제공합니다.

우당탕탕 이슈 해결기 💦

타로 밀크티의 기술적 도전과 이슈 해결 기록

BE

야 너두 무중단 배포 할 수 있어 🫵

SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)

FE

인터랙티브 웹: 카드 애니메이션

🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻

🚀 복잡함을 단순하게, 더 나은 경험으로 🚀

FE / BE

UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎

소켓 아이고 😇 (Feat. socket.io는 파싱을 해)

시스템 아키텍처

기술 스택

구분	기술 스택
common
frontend
backend
DB
CI/CD
deployment
others

🔗 기술 선택 이유

기술 스택 세부사항

Category	Tech Stack	Description	기술 블로그 링크
인프라	VPC, Server	가상 네트워크 환경으로 보안상 안전한 환경에서 서버 운영하기	NCP 인프라 구축하기
DB	MySQL, Redis, TypeORM	인덱스를 활용하여 조회 성능 높이기 트랜잭션으로 연관된 작업을 하나의 작업으로 묶어 일관성 보장하기 적절한 자료형을 사용하여 디스크 공간 최적화하기	데이터베이스 최적화하기
CI/CD	Docker, Nginx, Shell Script, GitHub Actions	Docker Compose를 활용하여 일관된 방식으로 멀티 어플리케이션 실행하기 Nginx를 이용하여 URL 정보에 따라 적절한 서비스 프록시하기 GitHub Actions와 Shell Script로 자동화된 배포 프로세스 구축하기 블루/그린 무중단 배포 전략으로 서비스의 중단없이 업데이트하기	GitHub Actions로 CI/CD 자동화하기 블루/그린 무중단 배포 구현하기 graceful shutdown으로 사용자 경험 저하 방지하기 health check로 서버 상태 확인하기
테스트	Jest, supertest, Vitest	단위 테스트와 e2e 테스트를 진행하여 코드가 예상대로 동작하는지 확인하기	Jest와 Supertest로 코드 동작 테스트하기
로깅	Winston	로그를 체계적으로 기록하여 개발 및 유지보수성 향상하기	winston과 sentry로 서버가 터지는 이유 분석하기
상태 관리	Zustand	용량이 작은 상태 관리 라이브러리를 사용하여 청크 용량 최소화하기 Context API보다 더 효과적으로 리렌더링을 줄이면서 상태 관리하기	ContextAPI에서 Zustand로 변경한 이유
P2P 통신	WebRTC, socket.io	WebRTC를 이용하여 서버의 부하 없이 실시간 P2P 커뮤니케이션 구현하기 데이터 채널을 활용하여 이미지, 메시지 등 다양한 종류의 데이터 주고받기 공통 소켓 이벤트를 정의하여 오용을 방지하고 시스템 확장성 보장하기	-

🔮🥛 타로 밀크티 소개

타로 밀크티는 FE 3명 & BE 1명 으로 구성되어 있어요!!

인원 불균형을 해결하기 위해 FE 팀원들의 ✨ 풀스택 도전 ✨이 담겨 있어요~
덕분에 BE 팀원은 처음 해보는 배포와 인프라를 성공적으로 마칠 수 있었습니다 🥰

자세한 담당 업무는 여기를 확인해주세요 👍

J027	J028	J072	J165
김유정	김유진	송민형	허지예
Backend	Frontend	Frontend	Frontend