Build a Dropbox Paper-Style Collaborative Editor with Next.js and Velt💥

개요

Next.js와 Velt SDK를 활용하여 Dropbox Paper 스타일의 협업 에디터를 구축하는 과정을 설명하며, 실시간 댓글, 사용자 현존 정보, 인앱 알림 기능을 구현하는 방법을 제시한다.

주요 내용

• 기술 스택: Next.js (App Router), TipTap (Rich Text Editor), Velt SDK (협업 인프라), Tailwind CSS, shadcn/ui, Zustand (상태 관리)가 사용된다.
• 프로젝트 구조: app/ (레이아웃 및 Velt 초기화), components/ (UI 및 핵심 기능), paper-document.tsx (TipTap + Velt 통합), top-bar.tsx (현존 정보, 알림, 사이드바 제어), helper/userdb.ts (사용자 전환 로직)로 구성된다.
• Velt SDK: 실시간 댓글, 사용자 현존, 알림, 댓글 사이드바, 다중 사용자 협업을 지원하는 협업 SDK이다.
• 로컬 설정: Velt 클라이언트 SDK 설치, .env 파일에 Velt API 키 설정, GitHub 저장소 클론 및 종속성 설치 후 개발 서버를 실행하여 로컬에서 테스트한다.
• VeltProvider: app/layout.tsx에서 앱 전체를 VeltProvider로 감싸 Velt SDK를 초기화하고 전역 협업 상태를 관리한다.
• TipTap 에디터 통합: components/paper-document.tsx에서 TipTap 에디터를 초기화하고, TiptapVeltComments 확장을 등록하여 텍스트 선택 시 댓글 기능을 활성화하고 Velt 백엔드와 연동한다. addComment 함수로 새 댓글 스레드를 생성하고 renderComments로 기존 댓글을 렌더링한다.
• 현존 정보 및 알림: components/top-bar.tsx에서 VeltPresence로 현재 문서 접속자 목록을 표시하고, VeltNotificationsTool로 인앱 알림 시스템을 구현하며, VeltSidebarButton으로 댓글 사이드바를 토글한다.
• 다중 사용자 전환: helper/userdb.ts와 Zustand를 사용하여 여러 사전 정의된 사용자 간 전환을 시뮬레이션하고, 이를 통해 실시간 현존 정보, 댓글 소유권, 알림 기능을 로컬에서 테스트한다.
• 전체 작동 방식: TipTap 에디터는 Velt 플러그인을 통해 댓글을 Velt에 보내고, 사용자 변경은 VeltProvider를 통해 현존 정보 업데이트 및 댓글 소유권 변경을 유발하며, 댓글 생성은 사이드바와 알림 도구로 동기화된다. VeltProvider는 실시간 연결을 유지하고 모든 컴포넌트가 일관된 업데이트를 받도록 보장한다.

시사점

Velt SDK를 활용하면 복잡한 실시간 협업 인프라를 직접 구축할 필요 없이 며칠 안에 프로덕션 수준의 댓글, 사용자 현존 정보, 알림 기능을 제품에 통합할 수 있어 개발 시간을 단축하고 제품 개발에 집중할 수 있다.