📌 왜 만들었나요?
수업 중에 교수님이 자료를 공유하려고 할 때, 회의에서 급하게 파일을 전달해야 할 때, PC에서 스마트폰으로 사진을 옮기고 싶을 때... 여러분은 어떤 방법을 사용하시나요?
기존 파일 공유 방법의 문제점:
- 이메일: 로그인 필요, 용량 제한, 느린 전송 속도
- 메신저 (카카오톡, 텔레그램): 본인 계정에 보내기 번거로움, 압축으로 화질 저하
- 클라우드 (Google Drive, Dropbox): 회원가입 필수, 앱 설치 필요, 권한 설정 복잡
- USB/AirDrop: 물리적 접근 필요, iOS-Windows 간 불가능
이런 불편함을 해결하기 위해 회원가입 없이 바로 사용할 수 있는 실시간 파일 공유 서비스를 만들었습니다.
✨ 핵심 기능: 비로그인 시스템
이 프로젝트의 가장 큰 차별점은 완전한 비로그인 시스템입니다.
🚀 사용 방법 (3단계면 끝!)
- 웹사이트 접속 → 자동으로 6자리 룸 번호 생성 (예: 123456)
- 룸 번호 공유 → QR 코드 또는 번호 전달
- 파일 공유 시작 → 드래그 앤 드롭 또는 Ctrl+V로 업로드
계정 생성, 로그인, 앱 설치 전혀 필요 없습니다.
📱 QR 코드 지원
모바일 접근성을 높이기 위해 QR 코드 기능을 지원합니다:
- PC에서 룸 생성 → QR 코드 표시
- 스마트폰으로 QR 스캔 → 즉시 룸 입장
- PC-모바일 간 파일 전송이 5초 만에 완료
🎯 실제 사용 시나리오
시나리오 1: 대학 강의
👨🏫 교수님: 웹사이트 접속 → 룸 생성 (예: 456789)
→ QR 코드를 빔프로젝터로 화면 공유
👨🎓 학생들: QR 코드 스캔 → 즉시 룸 입장
→ 실시간으로 강의자료 수신시나리오 2: 회의 중 자료 공유
💼 발표자: 룸 번호를 채팅에 공유 (123456)
👥 참석자: 번호 입력 → 입장
📄 파일: 실시간 동기화, 모든 참석자가 동시에 수신시나리오 3: PC-모바일 파일 전송
💻 PC: 룸 생성 → QR 코드 표시
📱 스마트폰: QR 스캔 → 사진 업로드
💻 PC: 실시간으로 사진 수신 → 바로 사용🛠️ 기술 스택 (개발자 분들을 위해)
Backend
- Node.js + TypeScript: 타입 안전성을 갖춘 서버
- Socket.IO: 실시간 양방향 통신 (WebSocket)
- Express: HTTP 서버
- Jest: TDD(Test-Driven Development) 방식으로 개발
Frontend
- Vue 3: 반응형 UI 프레임워크
- Vite: 빠른 빌드 도구
- Tailwind CSS: 유틸리티 기반 스타일링
- Socket.IO Client: 실시간 통신
핵심 아키텍처
클라이언트 A ←→ Socket.IO Server ←→ 클라이언트 B
↓
RoomManager
(메모리 기반 룸 관리)🔐 보안 & 프라이버시
데이터 보관 정책:
- 파일은 서버 메모리에만 임시 저장
- 마지막 사용자가 퇴장하면 룸과 파일 즉시 삭제
- 데이터베이스에 저장하지 않음 (완전한 휘발성)
- 사용자 정보 수집 전혀 없음
보안 기능:
- CORS 설정으로 허용된 도메인만 접근
- 파일 크기 제한 (서버 과부하 방지)
- 파일 타입 검증 (악성 파일 차단 예정)
📊 프로덕션 최적화
프로덕션 환경을 위한 최적화도 완료했습니다:
Frontend
- ✅ Terser를 이용한 console.log 완전 제거
- ✅ 코드 스플리팅 (vendor/socket 청크 분리)
- ✅ Gzip 압축으로 6.4% 용량 절감
Backend
- ✅ 환경별 Logger 유틸리티 (프로덕션에서 디버그 로그 비활성화)
- ✅ Docker 멀티 스테이지 빌드 (이미지 크기 30-50% 감소)
- ✅ Graceful shutdown 처리
🚀 향후 계획
현재는 MVP(Minimum Viable Product) 단계이며, 다음 기능을 개발 중입니다:
Phase 1: 핵심 기능 강화
- 파일 크기 제한 및 예외 처리 강화
- 드래그 앤 드롭 UI 추가
- 다중 파일 ZIP 다운로드
- 파일 미리보기 기능
Phase 2: 사용성 개선
- 텍스트 메시지 공유
- 업로드/다운로드 진행률 표시
- 닉네임 설정
- 다크 모드
Phase 3: 고급 기능
- 룸 비밀번호 설정 (선택적 보안)
- 파일 만료 시간 설정
- 모바일 최적화
🎓 개발 과정에서 배운 것
1. TDD의 중요성
모든 Socket.IO 이벤트를 테스트 코드로 먼저 작성했습니다. 덕분에 리팩토링 시 안정성을 보장할 수 있었습니다.
2. 실시간 통신의 복잡성
- 연결 끊김 처리 (Connection State Recovery)
- 타임아웃 설정
- 에러 핸들링의 중요성
3. 사용자 경험 최우선
기술적으로 완벽한 것보다, 사용자가 5초 안에 이해하고 사용할 수 있는 서비스를 만드는 것이 더 중요했습니다.
🔗 직접 사용해보세요!
서비스: [웹사이트 URL]
GitHub: [저장소 URL
오픈소스 프로젝트이므로 누구나 자유롭게 사용하고 기여할 수 있습니다.
이슈 및 풀 리퀘스트는 언제나 환영합니다!
💬 마치며
"회원가입 없이 바로 쓸 수 있다"는 단순한 컨셉 하나로 시작한 프로젝트입니다.
복잡한 권한 설정, 계정 관리, 로그인 과정 없이 URL 하나면 충분한 세상을 꿈꿉니다. 이 서비스가 여러분의 일상에서 작은 불편함을 해소해주길 바랍니다.
궁금한 점이나 개선 아이디어가 있으시면 언제든 GitHub 이슈로 남겨주세요!
