2. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 요구 사항 분석

Vue 3 + Firebase 기반 채팅 앱의 요구 사항 분석서

📌 1. 개요

목표:

사용자 간 1:1 채팅, 음성 메시지 전송, 읽음 확인 등의 기능을 포함한 실시간 채팅 웹 애플리케이션을 개발한다.

주요 기술 스택:

• 프론트엔드: Vue 3, Vuetify, Pinia, Vite
• 백엔드: Firebase (Authentication, Firestore, Storage)
• 배포: Firebase Hosting

📌 2. 사용자 요구 사항

🔐 인증 및 사용자 관리

• 사용자는 이메일/비밀번호 또는 소셜 로그인을 통해 인증할 수 있어야 한다.
• 사용자의 프로필 정보는 Firestore에 저장된다.
• 로그인한 사용자의 상태(온라인/오프라인)와 마지막 접속 시간(last seen)을 확인할 수 있어야 한다.

💬 채팅 기능

• 사용자는 다른 사용자와 1:1 채팅을 할 수 있어야 한다.
• 채팅방에는 실시간으로 메시지를 주고받을 수 있어야 한다.
• 메시지는 텍스트 또는 음성 형태를 지원해야 한다.
• 메시지는 읽음 여부가 표시되어야 하며, 읽은 시간(readAt)을 확인할 수 있어야 한다.
• 채팅방 목록에는 상대방 이름, 마지막 메시지, 전송 시간, 안 읽은 메시지 수가 표시되어야 한다.

🔊 음성 메시지

• 사용자는 브라우저에서 직접 음성 녹음을 시작하고 전송할 수 있어야 한다.
• 녹음은 최대 60초로 제한된다.
• 녹음 중임을 시각적으로 표현(예: 텍스트 깜빡임, 마이크 아이콘 애니메이션)
• 녹음이 완료되면 Firebase Storage에 업로드되고, 메시지로 전송된다.

📱 UI/UX

• Vuetify를 활용한 반응형 디자인
• Drawer 메뉴에서 채팅방으로 이동하면 자동으로 drawer가 닫힌다.
• 읽지 않은 메시지에 대해 빨간 뱃지를 표시한다.
• 채팅방 리스트는 최근 메시지 순으로 정렬된다.

📌 3. 시스템 요구 사항

🔧 기능 요구 사항

분류기능설명

인증	회원가입/로그인	Firebase Authentication
사용자 관리	프로필 저장 및 상태 표시	Firestore 연동
채팅	1:1 메시지 송수신	Firestore를 이용한 실시간 메시지
채팅 UI	채팅방 목록	상대 이름, 마지막 메시지, 읽지 않은 개수
읽음 처리	readBy 및 readAt 필드 처리	메시지 읽음 여부 및 시간
음성 메시지	MediaRecorder + Storage	60초 제한, 실패 시 알림
상태 관리	Pinia	사용자 상태 및 채팅방 정보 관리
성능	Lazy load 및 chunk 분리	Vite + Rollup 최적화

📌 4. 비기능 요구 사항

• 실시간성: Firebase snapshot을 활용한 데이터 실시간 반영
• 보안성: Firestore 보안 규칙, 인증 기반 접근 제한
• 성능: 대용량 chunk 경고 해결 (코드 스플리팅)
• 반응형: 모바일 및 데스크탑 뷰 대응
• 확장성: WebRTC 기반 1:1 통화 기능 확장 고려

📌 5. 제약 조건

• MediaRecorder는 iOS 일부 브라우저에서 제한적으로 동작 (대체 처리 필요)
• Firebase 무료 요금제에서 트래픽/쓰기/저장소 제한 고려
• WebRTC 사용 시 STUN/TURN 서버 구성 필요 (영상통화 도입 시)