Home

Jump to bottom

inaemin edited this page Dec 18, 2025 · 3 revisions

logo_animation

slogan_animation

🌟 서비스 소개

CodeJam은 복잡한 설정 없이 클릭 한 번으로 바로 시작할 수 있는 실시간 협업 코딩 플랫폼입니다. 화면 공유의 한계를 넘어, 팀원들과 함께 코드를 직접 수정하고 실시간으로 커서를 따라가며 몰입감 있는 협업 경험을 제공합니다.

핵심 가치

Speed (빠름): 별도 설정 없이 접속 즉시 바로 사용할 수 있습니다.
Lightweight (가벼움): 무거운 IDE 대신 필수 기능만 담아 빠른 로딩 속도를 실현했습니다.
Real-time (실시간): 지연 없는 동기화로 원활한 실시간 협업이 가능합니다.

✨ 주요 기능

1. Zero-Config & Login-Free

즉시 시작: 메인 화면에서 버튼 한 번만 클릭하면 고유한 방 URL이 자동으로 생성됩니다.
익명성 보장: 로그인 없이 일회성 세션으로 개인정보 노출 걱정 없이 협업할 수 있습니다.

2. 강력한 실시간 협업 도구

동시 편집: Yjs(CRDT) 기술로 여러 사람이 동시에 편집해도 충돌 없이 자연스럽게 병합됩니다.
커서 추적 (Follow Mode): 팀원의 아바타를 클릭하면 해당 사용자의 화면과 커서 위치를 실시간으로 따라갈 수 있습니다.
권한 관리: 방장(Host), 편집자(Editor, 최대 6명), 관전자(Viewer)로 역할을 나누어 체계적인 협업이 가능합니다.

3. 고성능 에디터 경험

경량 에디터: CodeMirror 6 기반으로 모바일과 태블릿에서도 부드럽게 작동합니다.
데이터 관리: 편집 내역을 스냅샷으로 저장하여 이전 시점으로 되돌리거나 변경 내역을 확인할 수 있습니다.
자동 만료: 모든 세션은 24시간 후 자동 삭제되어 보안이 유지됩니다.

🛠️ 기술 스택 및 아키텍처

Stack

분류	기술 스택
Frontend	React, TypeScript, CodeMirror 6, Zustand, Tailwind CSS
Backend	NestJS, PostgreSQL, TypeORM, Redis (Session/Cache)
Infra & DevOps	Monorepo (Turborepo), pnpm, NCP Cloud Functions
Real-time Sync	Yjs (CRDT), Socket.IO

전략

Monorepo: 프론트엔드와 백엔드에서 타입을 공유하여 개발 생산성을 향상시켰습니다.
Local-First Architecture: 네트워크가 불안정해도 로컬에서 편집이 가능하며, 연결되면 자동으로 동기화됩니다.
Low Latency: 바이너리 데이터 전송과 Redis를 활용해 응답 지연을 최소화했습니다.

👥 팀원 정보

Team JAMstack

J044 김선향	J094 노주호	J102 민인애	J141 손혜준	J143 송상화