Skip to content

당신만의 특별한 타로체험! 매력적인 애니메이션과 함께 어디서나 편안하게 즐겨보세요🔮🌠

Notifications You must be signed in to change notification settings

boostcampwm2023/web09-MagicConch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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


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

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

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

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



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

🗒️ 팀 노션  |  🌐 위키


목차


🚀 핵심기능

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

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

2

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

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

image


기술적 도전

멀티 어플리케이션 구축

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

블루/그린 무중단 배포

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

클로바 API를 이용한 AI 채팅

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

WebRTC를 이용한 P2P 통신

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

인터렉티브한 애니메이션

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

우당탕탕 이슈 해결기 💦

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

BE

FE

FE / BE


시스템 아키텍처

magic_conch-system architecture drawio


기술 스택

구분 기술 스택
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