프로젝트 간단 소개

• 홀로그램 키오스크를 통해 익산시의 마스코트 마룡과 대화하여 익산시의 정보를 알아낼 수 있도록 만든 웹애플리케이션입니다.
  • 기본 스텝은 IDLE, WELCOME, LISTENING, PROCESSING, RESPONSE, GOODBYE 6단계입니다.
    • 6단계에 따라 캐릭터의 목소리 혹은 모션 & UI가 다르게 나타납니다.
    • LISTENING 단계에서 사용자가 질문을 하고, RESPONSE 단계에서 캐릭터의 답변을 들을 수 있습니다.
• 향후 다른 지자체에 솔루션 형태로 공급하기 위해 백오피스를 구축하고, 이를 기반으로 클라이언트가 구성되도록 했습니다.
• URI: https://chatbot-aipark.vercel.app/

기여도

• 프론트엔드 100%
• 백엔드 100% (Next.js Full stack)

프로젝트 기간

2024.08 3주

개발 환경

• Visual Studio Code

개발 언어/라이브러리

• 개발 언어: Typescript
• 라이브러리:
  • View: React + next.js 14
  • UI Library: ShadeCN, TailwindCSS
  • DB: postgreSQL(Vercel Postgres) + prisma
  • auth: next-auth (credential)
  • storage: Vercel Blob
  • form validation: zod
  • datetime: luxon

상세 업무

대박사건.. azure TTS sdk 사용하여 생성하자마자 스트리밍 하는 기능 구현중인데 pullStream에서 버퍼로 read할때 막혔다.. 버퍼를 처음엔 UInt8Array객체로 만들었는데 데이터를 read하지 못해서 하루이틀 고생했다. typescript에서 별다른 에러가 없기에 의심없이 타입쪽은 보지 않았다. 비동기적인 순서의 문젠가? 하고 여러가지 순서를 바꿔봤지만 해결안됐다. 근데 이상하게 확실하다는건 bytesRead 데이터는 잘 갖고온다는 것이다. 이건 데이터가 제대로 생성됐다는 거다. 데이터는 있지만 read 오퍼레이션이 제대로 안되고 있다는 확신을 가졌다. 그래서 근본적으로 버퍼가 잘못됐나 하고.. 다시 typescript에 명시된 객체 그대로 다시 선언해서 해봤는데 됐다. typescript가 100% 문제해결해주지 않는다는 점을 알게된 계기가 되었다.

💡 문제해결 경험

몇 개의 첨부파일 업로드는 방법이 간편했지만,
대략 30개에 해당하는 동영상 파일을 전부 업로드하여 DB에 그 정보를 저장하는 작업이 어려웠습니다.
클라이언트사이드 업로드를 진행하였으며, 코드중복을 극한으로 없애고 일관된 프로세스로 진행하기 위한
모듈화 & 컴포넌트화를 진행했습니다.

• 프로젝트가 늘어남에 따라 전체 프로젝트를 일단 모노레포화 하고 작업 시작했습니다.