CodeCafé - 브라우저에서 협업 코딩 가능한 오픈소스 편집기

• 브라우저 기반 실시간 협업 개발 환경으로 수업이나 페어 프로그래밍에 적합하지 않은 기존 문서 기반 협업 툴의 한계를 해결하고자 개발
• "실시간 협업 코딩은 복잡하다"는 고정관념을 깨고, 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를 직접 구현하여 다음을 지원함:
  • 동시 입력 감지 및 변환
  • 의도 보존 및 충돌 해결
  • 클라이언트 간 상태 동기화 유지
• 이로 인해 실시간 협업 환경에서 자연스럽고 부드러운 사용자 경험 제공

향후 계획

• 사용자 인증 및 프로젝트 저장 기능
• 음성/텍스트 채팅 통합
• 코딩 히스토리 재생 기능
• 다양한 언어 지원 확대