SpreadJS Excel 동시편집 핵심 기능
이제 JavaScript 만으로 Excel 동시편집 기능 개발이 가능합니다
SpreadJS 동시편집 서버는(Collaboration Server) 엔터프라이즈급 실시간 Excel 협업 개발에 필요한 모든 기능을 기본 제공합니다.
Node.js 환경에서 즉시 실행 가능한 서버와 클라이언트 소켓 관리 및 동기화 로직 등 협업 모듈을 제공하여, 완벽한 Excel 동기화, 충돌 제어 및 협업을 보장합니다.
실시간 Excel 동기화
SpreadJS 운영변환(OT) 엔진이 여러 사용자의 동시 편집을 충돌 없이 지능적으로 지동 병합/편집합니다.
정밀한 사용자 트래킹
각 사용자의 커서 위치, 선택 영역, 편집 상태를 실시간으로 시각화 기능을 제공합니다.
세밀한 사용자 권한 제어
사용자별, 셀 별 편집 권한을 세밀하게 제어합니 다. View/Edit 모드와 시트별 접근 제어를 지원 합니다.
데이터베이스(DB) 통합
MemoryDB, Postgres, SQLite3 및 커스텀 데이터베이스 어댑터를 통해서, 다중 사용자의 Excel 문서 스냅샷 및 작업을 안전하게 저장할 수 있습니다.
자동 재연결 로직
하트비트 및 자동 재연결 로직을 통해 네트워크 끊김 시 자동 재연결하여 데이터 손실 없이 세션 복구 로직을 기본제공합니다.
유연한 협업 로직 커스텀
미들웨어 및 Hook 확장 모델을 지원하며, 개발자는 서버 측 운영 변환(OT) 엔진을 통해 비즈니스 형태에 맞게 Excel 데이터 흐름을 제어할 수 있습니다.
List of Services
SpreadJS 동시편집 기능, 지금 바로 경험해보세요
14일간 무료체험을 통해 실시간 동시 편집 기능을 직접 사용해 보고 궁금한 점을 확인해보세요.
SpreadJS 실시간 동시편집 기능 온라인 데모 & 영상
✨ 데모에서 확인할 수 있는 기능
SpreadJS 실시간 동시편집의 모든 것
영상과 온라인 데모를 통해 실시간 동시편집 기능을 직접 경험해 보세요!
- 실시간 셀 동기화
- 사용자별 컬러 커서 추적 기능
- OT 기반 충돌 자동 해결
- 네트워크 끊김 시 자동 복구
- 작업 내역 실시간 표시
- 사용자 권한 별 편집 제어
▲ 동영상 썸네일을 눌러 바로 영상을 확인해 보세요.
SpreadJS Collaboration Quick Start Guide
SpreadJS 실시간 동시편집 기능 빠른시작 가이드
Node.js WebSocket 서버와 정적 웹 클라이언트를 완전히 분리하여 독립적으로 배포하는 방법을 알아봅니다.
빠른 시작하기 가이드를 따라 SpreadJS 동시편집 기능을 10분안에 쉽게 구축해보세요!
Collaboration Server 설정
Collaboration Client 설정
STEP 1. Collaboration Server 설정 🖥️
프로젝트 생성 및 의존성 설치
백엔드 서버 디렉토리를 생성하고 필요한 패키지를 설치합니다. ES Module 사용을 위해 package.json에 "type": "module"을 반드시 추가해야 합니다.
# 디렉토리 생성
mkdir collaboration-server
cd collaboration-server
npm init -y
{
"name": "collaboration-server",
"version": "1.0.0",
"type": "module",
"scripts": {
"start": "node ./server.js"
},
"dependencies": {}
}
# 패키지 설치
npm install @mescius/js-collaboration @mescius/js-collaboration-ot
npm install @mescius/spread-sheets-collaboration
npm install @mescius/js-collaboration-presence
server.js 작성
WebSocket 서버 로직입니다. SpreadJS 협업 타입을 등록하고 문서 서비스를 초기화합니다.
import http from 'http';
import { Server } from '@mescius/js-collaboration';
import * as OT from '@mescius/js-collaboration-ot';
import { type } from '@mescius/spread-sheets-collaboration';
import { DocumentServices, MemoryDb } from '@mescius/js-collaboration-ot';
import { presenceFeature } from '@mescius/js-collaboration-presence';
// SpreadJS collaboration 타입 등록
OT.TypesManager.register(type);
const httpServer = http.createServer();
const server = new Server({ httpServer });
const port = 8080;
//server.licenseKey = " ";
// 데이터베이스와 어댑터 초기화
const dbAdapter = new MemoryDb();
const docService = new DocumentServices({ db: dbAdapter });
// OT 문서 서비스를 구성합니다
server.useFeature(presenceFeature());
server.useFeature(OT.documentFeature(docService));
// 서버를 시작합니다
httpServer.listen(port, () => {
console.log(`Collaboration server listening on port ${port}`);
});
서버 실행 (Run)
설정이 완료되었습니다. 먼저 DB를 초기화한 후 서버를 구동합니다.
TERMINAL
npm run start
STEP 1 완료 👍
이제 [STEP 2] 클라이언트 설정으로 넘어가 구축을 마무리해보세요.
STEP 2. Collaboration Client 설정 🧑🏻💻
프로젝트 생성 및 패키지 설치
클라이언트 프로젝트를 생성하고 SpreadJS 및 빌드 도구(Webpack)를 설치하고 package.json을 업데이트합니다.
mkdir collaboration-client
cd collaboration-client
npm init -y
{
"name": "collaboration-client",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"dependencies": {}
}
# SpreadJS 및 협업 클라이언트 패키지
npm install @mescius/spread-sheets @mescius/spread-sheets-collaboration-addon
npm install @mescius/js-collaboration-client @mescius/js-collaboration-ot-client
npm install @mescius/spread-sheets-collaboration-client
npm install @mescius/js-collaboration-presence-client
# Webpack 빌드 도구
npm install --save-dev webpack webpack-cli style-loader css-loader
클라이언트 코드 작성 (User-Based)
public/client.js를 생성합니다. 사용자별 동시 편집 식별을 위해 사용자 이름과 색상을 랜덤으로 생성하여 서버에 전달하는 로직이 추가되었습니다.
import * as GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-collaboration-addon';
import { Client } from "@mescius/js-collaboration-client";
import * as OT from "@mescius/js-collaboration-ot-client";
import { type, bind, bindPresence } from '@mescius/spread-sheets-collaboration-client';
import { Presence } from "@mescius/js-collaboration-presence-client";
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
// SpreadJS 동시 작업 데이터 타입 등록
OT.TypesManager.register(type);
// ===== 중요: 실제 동시 작업 서버 주소로 수정 =====
// 로컬 개발 예시:
const SERVER_URL = "ws://127.0.0.1:8080";
// 운영 환경 예시:
// const SERVER_URL = "wss://collab.yourdomain.com";
// const SERVER_URL = "wss://your-app.herokuapp.com";
window.onload = async function () {
// SpreadJS 워크북 초기화
const workbook = new GC.Spread.Sheets.Workbook('ss');
// 클라이언트 연결 생성 및 동시 작업 룸 참여
const conn = new Client(SERVER_URL).connect('room1');
const doc = new OT.SharedDoc(conn);
const presence = new Presence(conn);
// 연결 및 문서 동기화 오류 처리
doc.on('error', (err) => console.error('Collaboration error:', err));
// 서버에서 문서 상태 가져오기
await doc.fetch();
var seed = new Date().valueOf() + "";
const user = {
id: seed,
name: "user" + seed,
permission: {
mode: GC.Spread.Sheets.Collaboration.BrowsingMode.edit,
}
}
if (!doc.type) {
// 초기 콘텐츠로 새 공유 문서 생성
workbook.getActiveSheet().getCell(0, 0).value("default content");
await doc.create(workbook.collaboration.toSnapshot(), type.uri, {});
// 워크북을 공유 문서에 바인딩하여 실시간 동기화
bindPresence(workbook, presence, user);
bind(workbook, doc);
} else {
// 이미 공유 문서가 존재하는 경우 바인딩만 수행
bindPresence(workbook, presence, user);
bind(workbook, doc);
}
};
public/index.html을 생성합니다. 빌드된 번들 파일(client.bundle.js)을 로드합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpreadJS 실시간 동시 작업</title>
<!-- Webpack으로 빌드된 스크립트 로드 -->
<script src="./client.bundle.js"></script>
</head>
<body>
<div id="ss" style="width:100vw; height:95vh; border:1px solid darkgray;"></div>
</body>
</html>
Webpack 구성 및 빌드
루트 디렉토리에 webpack.config.js를 생성하여 번들링 설정을 정의합니다.
const path = require("path");
module.exports = {
entry: "./public/client.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "client.bundle.js",
},
mode: "development",
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
클라이언트 실행 (Run)
Webpack으로 소스 코드를 번들링한 후, 정적 서버를 실행하여 브라우저에서 확인합니다.
TERMINAL
npm run build npx http-server ./public
SpreadJS 실시간 동시편집 기능 구축 완료!
이제 서버와 클라이언트가 완벽하게 분리된 협업 환경이 구축되었습니다.
여러 브라우저 창을 띄워 http://localhost:8080 (또는 설정한 포트)에 접속하면, 각 창마다 다른 색상의 커서가 나타나며 실시간으로 데이터가 동기화되는 것을 확인할 수 있습니다.
🖥️ 서버 설정 다시보기 →
🧑🏻💻 클라이언트 설정 다시보기 →
Next Step: 더 알아보기
SpreadJS 동시편집 기능 확장 가이드
다양한 기업 비즈니스의 요청 사항에 맞추어 Excel 동시 편집 기능을 확장 개발해보세요.
SpreadJS로 완성하는 다양한 엔터프라이즈 비즈니스 기능
SpreadJS의 비즈니스 Excel 확장기능을 지금 확인해 보세요
SpreadJS는 다양한 기업 비즈니스 요구사항에 맞춘 Excel 기반 기능을 제공하여, 복잡한 비즈니스 시스템도 빠르고 효율적으로 개발할 수 있도록 합니다.
Excel 에디터
HTML5 & JS 기반의 완벽한 웹 Excel 에디터를 최종 사용자에게 제공하세요.
-
완전한 Excel 호환성 기존 Excel 파일과 완벽하게 호환되는 웹 에디터
-
친숙한 UI/UX 사용자에게 익숙한 Excel 메뉴와 인터페이스 제공
-
강력한 커스터마이징 개발 요건에 맞춘 유연한 API 및 라이브러리 지원
AI 어시스턴트
자연어 기반의 수식 생성과 데이터 분석으로 업무 효율을 극대화하세요.
-
멀티 AI 모델 지원 OpenAI, Gemini 및 사내 커스텀 AI 연동 가능
-
자연어 명령 텍스트 명령으로 수식 생성, 설명 및 피벗 테이블 자동 구축
-
Excel AI 함수 데이터 분석을 위한 전용 AI 함수 라이브러리 제공
피벗 테이블 (PivotTable)
대량의 데이터를 빠르게 요약하고 인사이트를 도출하는 강력한 분석 도구입니다.
-
Excel 유사 경험 Excel과 동일한 UI와 사용성을 웹에서 구현
-
JS 컨트롤 세트 개발 편의를 위한 전용 컨트롤 및 사용자 정의 기능 제공
-
뷰 매니저 사용자별 분석 화면(View) 저장 및 로드 지원
간트 시트 (GanttSheet)
프로젝트 일정 관리와 리소스 스케줄링 기능을 엑셀 시트에 통합하세요.
-
프로젝트 관리 기능 타임스케일, 태스크바, 캘린더 등 필수 기능 완벽 지원
-
데이터 연동 DataManager를 활용한 손쉬운 데이터 바인딩
-
유연한 호환 Excel 및 JSON 기반의 가져오기/내보내기 지원
데이터 차트 (Data Chart)
데이터를 시각화하여 직관적인 엑셀 대시보드를 생성할 수 있습니다.
-
대시보드 디자이너 코딩 없이 구성 가능한 전용 디자이너 제공
-
다양한 차트 폭넓은 Excel 차트 타입 지원 및 JSON 데이터 연동
-
손쉬운 바인딩 DataManager를 통한 빠르고 간편한 데이터 연결
리포트 시트 (ReportSheet)
복잡한 비즈니스 데이터를 동적인 엑셀 보고서로 변환하는 솔루션입니다.
-
동적 리포팅 JavaScript 기반의 데이터 연동 및 보고서 자동 생성
-
전문적인 스타일링 일관된 레이아웃 유지 및 정교한 서식 적용
-
고급 분석 기능 시트 간 교차 참조 및 데이터 집계 지원
무엇이든 물어보세요!
MESCIUS의 전문가 그룹에게 SpreadJS에 대한 막연한 고민과 궁금증을 들려주세요.
여러분들의 고민을 함께 공감하고 도움을 드리겠습니다.
지금 바로 SpreadJS 동시편집 기능을 경험하세요
Google Sheets, MS365 Excel 처럼 여러 사용자가 실시간으로 협업하는 JavaScript 스프레드시트 프레임워크를 직접 확인해보세요
