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

> Clean Markdown view of GeekNews topic #20917. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20917](https://news.hada.io/topic?id=20917)
- GeekNews Markdown: [https://news.hada.io/topic/20917.md](https://news.hada.io/topic/20917.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-05-15T10:21:02+09:00
- Updated: 2025-05-15T10:21:02+09:00
- Original source: [github.com/mrktsm](https://github.com/mrktsm/codecafe)
- Points: 11
- Comments: 3

## Summary

브라우저 기반 실시간 협업 개발 환경으로, **Zero Setup**과 **직관적 UI**를 통해 누구나 쉽게 공동 코딩이 가능합니다. **픽셀 퍼펙트 실시간 미리보기**와 **VS Code 스타일 편집기**, **브라우저 터미널** 등 다양한 개발 지원 기능을 제공합니다. **Operational Transformation** 알고리즘을 직접 구현하여 동시 입력과 충돌을 원활하게 처리하며, 최적의 협업 경험을 제공합니다. 앞으로 **사용자 인증**, **프로젝트 저장 기능**, **코딩 히스토리 재생** 등 추가 기능을 계획하고 있습니다.

## Topic Body

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

## Comments



### Comment 38720

- Author: kaydash
- Created: 2025-05-16T00:51:49+09:00
- Points: 1

code server가 이미 있어서 차별점을 잘 모르겠지만  
채팅과 코딩 히스토리 재생이 추가될경우는 좋을것같아요

### Comment 38710

- Author: pcj9024
- Created: 2025-05-15T16:04:39+09:00
- Points: 2

vscode에 live share라는 기능이 생각나네요  
실시간 채팅에 코드놓고 동시편집도 되고 그랬었는데  
주니어들 멘토링하거나 온라인강의하거나 소개해줘도 다들 잘 쓰지는 않더라구요

### Comment 38697

- Author: turastory
- Created: 2025-05-15T10:53:31+09:00
- Points: 1

Zed도 그렇고 실시간 동시 작업에 대한 수요가 얼마나 있을지 모르겠네요. 작업하는 모든 사람이 동일한 에디터를 사용해야 한다는 문제도 있을 것 같은데, 또 성능이나 사용자 경험이 정말 중요한 소프트웨어이다보니..