🎯 프로젝트 개요
개발하다 보면 코드 스니펫이나 로그를 빠르게 공유해야 할 때가 많아요. 기존 서비스들은 기능이 너무 많거나, 로그인이 필요하거나, 느리거나… 그래서 VibeCoding을 만들었어요.
핵심 컨셉: 방 만들고 → URL 공유하고 → 바로 편집
- URL: https://vibe.example.com
- 개발 기간: 3시간 (MVP)
- 보안 점수: 9.5/10
- 인프라: Oracle Cloud Free Tier
🚀 주요 기능
1. 실시간 동기화 (WebSocket)
- 여러 사용자가 동시에 편집 가능
- 모든 변경사항이 실시간으로 반영
- 자동 재연결 (네트워크 끊김 시)
2. 구문 강조 (Prism.js)
- 60개 이상 언어 지원 (Python, JavaScript, Go, YAML 등)
- 자동 감지 + 수동 선택
- 다크 테마 지원
3. Read-only 링크
?mode=readonly파라미터로 읽기 전용 공유- 편집 불가능 (UI에 배지 표시)
- 로그나 결과물 공유할 때 유용
4. 자동 정리
- 30일 이상 수정 안 된 방 자동 삭제
- 매일 3시 크론잡 실행
- 디스크 공간 관리 + GDPR 준수
🔧 기술 스택
Backend
| |
Frontend
| |
Infrastructure
| |
🔐 보안 고려사항
Phase 1: 기본 보안 (5/10)
- HTTPS (Let’s Encrypt SSL)
- Traefik + Caddy WAF
- Docker 컨테이너 격리
Phase 2: 강화 보안 (8/10)
Rate Limiting
- 10-60 req/min (엔드포인트별)
- 방 생성: 10개/시간 (스팸 방지)
메시지 크기 제한
- WebSocket: 100KB
- Content 검증: 100KB
UUID v4 방 ID
- 예측 불가능:
8fcea2b4-cfdf-48a3-b15f-b450ae0bf02a - 기존:
abc123(위험) → 신규: UUID (안전)
- 예측 불가능:
30일 자동 삭제
- GDPR 준수 (데이터 보존 정책)
- 디스크 공간 관리
Phase 3: 추가 보안 (9.5/10)
Content-Security-Policy
1 2 3Content-Security-Policy: default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com; style-src 'self' https://cdnjs.cloudflare.com;- XSS 공격 방지
- CDN만 화이트리스트 (Prism.js)
추가 보안 헤더
1 2 3 4X-Frame-Options: DENY X-Content-Type-Options: nosniff X-XSS-Protection: 1; mode=block Referrer-Policy: no-referrerRead-only 모드
- 편집 권한 분리
- 로그/결과물 공유 시 안전
📊 성능 제약사항
동시 접속
- 최대 100명 (WebSocket 연결)
- 방당 10명 (실시간 편집)
메시지 크기
- 100KB (코드 스니펫 충분)
- 대용량 파일은 GitLab/GitHub 권장
인프라
- Oracle Cloud Free Tier
- 2 CPU cores
- 1GB RAM
- 50GB disk (17GB available)
- 예산: ₩15,000/년 (도메인만)
🛠️ 개발 과정
1단계: MVP (3시간)
| |
2단계: 보안 강화 (2시간)
- Rate Limiting 구현
- UUID v4 마이그레이션
- 30일 자동 삭제 크론잡
- 보안 감사 (12개 취약점 식별)
3단계: 고급 보안 (1시간)
- CSP 헤더 추가
- Read-only 모드 구현
- 추가 보안 헤더 설정
총 개발 시간: 6시간 (계획 4주 → 실제 6시간)
🎯 왜 3시간 만에 가능했나?
1. 명확한 목표
- “실시간 협업 노트패드” (그 이상도 이하도 아님)
- 불필요한 기능 배제 (인증, 파일 업로드 등)
2. 적절한 기술 선택
- FastAPI: 빠른 개발 + 고성능
- SQLite: 설정 없이 바로 사용
- Vanilla JS: 빌드 도구 불필요
3. 기존 인프라 활용
- Traefik: 이미 설정됨
- Caddy WAF: 공통 보안 레이어
- Let’s Encrypt: 자동 SSL
4. 직접 프로덕션 배포
- 로컬 개발 없음 (시간 절약)
- 실제 환경에서 바로 테스트
- 문제 발생 → 즉시 수정 → 재배포
📈 향후 계획 (Phase 4+)
우선순위 낮음 (필요 시)
JWT 인증
- 사용자 계정 (선택)
- 내 방 목록 관리
비밀번호 보호 방
- 민감한 정보 공유 시
CloudFlare WAF
- 추가 DDoS 방지
- 글로벌 CDN
Local Prism.js
- CDN 의존성 제거
- 완전한 self-hosted
Redis 캐싱
- 성능 최적화
- 세션 관리
💭 배운 점
1. MVP의 힘
4주 계획을 3시간으로 줄일 수 있었던 이유는 핵심 기능에만 집중했기 때문이에요. “나중에 추가할 수 있는 기능"은 과감히 제외했어요.
2. 보안은 처음부터
Phase 1에서 “일단 작동하게” 만들고, Phase 2-3에서 보안을 강화했어요. 하지만 처음부터 보안을 고려했다면 더 좋았을 거예요.
3. 적절한 제약
- 100 동시 접속 제한
- 방당 10명 제한
- 100KB 메시지 크기
이런 제약이 오히려 시스템을 단순하고 안정적으로 만들었어요.
4. 문서화의 중요성
6시간 개발, 2시간 문서화. 나중에 보니 문서가 더 중요했어요. 코드는 까먹어도 문서는 남으니까요.
🔗 링크
마무리
VibeCoding은 “빠르게 만들고, 안전하게 배포하고, 실제로 사용하는” 프로젝트예요. 완벽하지 않지만 충분히 쓸모 있어요.
개발하면서 가장 중요하게 생각한 건:
- 사용자 경험 (로그인 없이 바로 시작)
- 보안 (9.5/10 점수)
- 속도 (WebSocket 실시간 동기화)
앞으로도 필요한 기능이 생기면 Phase 4+로 추가할 계획이에요. 하지만 지금도 충분히 유용하게 쓰고 있어요.
궁금한 점이나 피드백은 언제든 환영해요! 🚀