-
브라우저 기반 실시간 협업 개발 환경으로 수업이나 페어 프로그래밍에 적합하지 않은 기존 문서 기반 협업 툴의 한계를 해결하고자 개발
- "실시간 협업 코딩은 복잡하다"는 고정관념을 깨고, Zero Setup, 진정한 실시간성, 직관적 UI를 통해 누구나 바로 함께 코딩할 수 있게 설계
-
픽셀 퍼펙트한 실시간 미리보기 지원: HTML/CSS/JS 코드를 작성하자마자 WebView에 즉시 반영
-
협업 기능: Operational Transformation 기반으로 여러 사용자가 충돌 없이 동시 입력 가능
-
VS Code 스타일 편집기: Monaco Editor를 활용한 친숙한 인터페이스 및 자동완성, 문법 강조, 오류 표시 기능 제공
- Xterm.js 기반 브라우저 터미널을 포함하여 입출력 확인 가능
-
무설치 실행: 브라우저만 있으면 즉시 사용 가능
- GNU AGPL 3.0 라이센스
기술 스택
-
프론트엔드: React, TypeScript, Tailwind CSS, Zustand, Xterm.js, Monaco Editor
-
백엔드: Java Spring Boot, WebSocket, Jackson
-
실시간 동기화: 커스텀 Operational Transformation 알고리즘
-
메시지 처리: Redis + Lua 스크립트를 통한 원자적 데이터 처리
-
호스팅: 프론트는 Vercel, 백엔드는 AWS EC2, Redis는 ElastiCache
Operational Transformation(OT)
- OT는 문서의 실시간 동시 편집을 가능하게 하는 핵심 기술로, Google Docs도 이를 기반으로 함
- CodeCafé는 OT를 직접 구현하여 다음을 지원함:
-
동시 입력 감지 및 변환
-
의도 보존 및 충돌 해결
-
클라이언트 간 상태 동기화 유지
- 이로 인해 실시간 협업 환경에서 자연스럽고 부드러운 사용자 경험 제공
향후 계획
-
사용자 인증 및 프로젝트 저장 기능
-
음성/텍스트 채팅 통합
-
코딩 히스토리 재생 기능
-
다양한 언어 지원 확대