실시간 협업 서비스 Liveblocks 소개

https://liveblocks.io/

Liveblocks | Ready‑made features for AI & human collaboration

 

📌 Liveblocks란?

Liveblocks는 실시간 협업(Real-time Collaboration) 기능을 쉽게 추가할 수 있도록 지원하는 서비스입니다.
Google Docs의 동시 편집, Figma의 실시간 협업과 같은 기능을 React, Next.js, Vue 등의 프레임워크에서 간단하게 구현할 수 있도록 설계되었습니다.

Liveblocks를 사용하면 실시간 커서(cursor), 다중 사용자 동기화, 상태 공유, 공동 편집(collaborative editing) 등을 빠르게 구축할 수 있습니다.

---

🚀 Liveblocks 주요 특징

✅ 1. 실시간 협업 기능

• 다중 사용자 동기화 (Shared state management)
• 실시간 커서(cursor sharing)
• 사용자 상태(User Presence) 동기화
• 공동 문서 편집 (Google Docs 스타일)

✅ 2. React 및 Next.js와 완벽한 통합

• useSelf, useOthers, useMutation 같은 React Hook 지원.
• Next.js, React, Vue 등 최신 프레임워크와 손쉽게 연결 가능.

✅ 3. 서버리스(Serverless) 기반

• WebSocket 기반으로 빠르게 실시간 데이터 동기화.
• Firebase, Supabase, Convex 등과 함께 사용 가능.

✅ 4. 버전 관리 및 히스토리 추적

• 실시간 동기화 중에도 데이터 손실 없이 버전 관리 가능.
• 협업 중 충돌 방지 및 데이터 정합성 유지.

---

🛠 Liveblocks 기본 사용법

📌 1. Liveblocks 설치

npm install @liveblocks/react

또는 Next.js 프로젝트에서:

npm install @liveblocks/client @liveblocks/react

---

📌 2. Liveblocks 프로젝트 설정

Liveblocks 대시보드에서 API 키를 생성한 후, .env.local 파일에 추가:

NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your-liveblocks-public-key

---

📌 3. Liveblocks RoomProvider 설정

Liveblocks는 "룸(Room)"을 중심으로 여러 사용자를 동기화합니다.

import { RoomProvider } from "@liveblocks/react";

export default function MyApp({ Component, pageProps }) {
  return (
    <RoomProvider id="my-room" initialPresence={{ cursor: null }}>
      <Component {...pageProps} />
    </RoomProvider>
  );
}

---

📌 4. 실시간 커서(Cursor Sharing) 구현

import { useOthers, useSelf, useMyPresence } from "@liveblocks/react";

export default function CursorSharing() {
  const others = useOthers();
  const self = useSelf();
  const [updateMyPresence] = useMyPresence();

  return (
    <div
      onPointerMove={(event) =>
        updateMyPresence({ cursor: { x: event.clientX, y: event.clientY } })
      }
    >
      {others.map(({ connectionId, presence }) =>
        presence.cursor ? (
          <div
            key={connectionId}
            style={{
              position: "absolute",
              left: presence.cursor.x,
              top: presence.cursor.y,
              width: 10,
              height: 10,
              backgroundColor: "red",
              borderRadius: "50%",
            }}
          />
        ) : null
      )}
    </div>
  );
}

🔹 설명:

• useOthers() → 현재 접속한 다른 사용자 목록을 가져옴.
• useSelf() → 현재 사용자 정보 가져옴.
• useMyPresence() → 현재 사용자의 상태(예: 커서 위치) 업데이트.

---

📌 5. 공동 문서 편집 (Collaborative Editing)

Liveblocks는 다중 사용자가 실시간으로 같은 문서를 편집할 수 있도록 지원합니다.

import { useMutation, useStorage } from "@liveblocks/react";

export default function CollaborativeEditor() {
  const document = useStorage((root) => root.document);

  const updateDocument = useMutation(({ storage }, newText) => {
    storage.get("document").set("text", newText);
  }, []);

  return (
    <textarea
      value={document.text}
      onChange={(e) => updateDocument(e.target.value)}
    />
  );
}

---

🔥 Liveblocks vs Firebase vs Supabase vs Yjs

기능 Liveblocks Firebase Firestore Supabase Realtime Yjs

실시간 커서	✅ 기본 제공	❌ 직접 구현 필요	❌ 직접 구현 필요	✅ 가능
공동 문서 편집	✅ 기본 제공	❌ 직접 구현 필요	❌ 직접 구현 필요	✅ 가능
실시간 데이터 동기화	✅ WebSocket 기반	✅ Firestore 기반	✅ Postgres 기반	✅ P2P 가능
충돌 방지 (CRDT)	✅ 지원	❌ 직접 구현 필요	❌ 직접 구현 필요	✅ 가능
Next.js 통합	✅ 최적화	🔵 가능하지만 제한적	🔵 직접 설정 필요	🔵 직접 설정 필요

---

🎯 Liveblocks를 선택해야 하는 경우

• Figma, Google Docs 같은 실시간 협업 기능을 추가하고 싶을 때.
• 커서 공유, 공동 편집, 사용자 상태 동기화 등을 빠르게 구현해야 할 때.
• Firebase/Supabase Realtime이 부족하고 더 강력한 실시간 기능이 필요할 때.

---

📌 Liveblocks 사용 흐름 정리

1. Liveblocks 계정 생성 후 API 키 발급.
2. 프로젝트에 @liveblocks/react 설치.
3. RoomProvider 설정 후, useMyPresence, useOthers 등 훅 활용.
4. 실시간 커서 공유, 공동 문서 편집 등 협업 기능 추가.

---

🎯 마무리

Liveblocks는 실시간 협업 기능을 빠르게 구축할 수 있도록 돕는 서비스입니다.
Firebase나 Supabase보다 강력한 실시간 데이터 동기화가 필요하다면 Liveblocks가 좋은 선택이 될 수 있습니다. 🚀