실시간 간트 차트 만들기: 10,000개 작업을 60fps로

"간트 차트를 웹에서 실시간으로? 성능이 나올까요?"

2년 전 받은 질문입니다. 답은 "YES, 하지만..."

오늘은 10,000개 작업을 60fps로 렌더링하는 간트 차트를 어떻게 구현했는지 공유합니다.

기술 스택 선택: 왜 SVG인가?

Canvas, SVG, DOM 중에 뭘로 그릴까 고민했습니다.

Canvas는 빠르지만 상호작용이 어렵고 접근성이 거의 없습니다.
DOM은 네이티브 이벤트를 지원하지만 1000개만 넘어도 2초가 걸립니다.
SVG는 그 중간입니다. 200ms 정도로 빠르면서도 네이티브 이벤트를 지원합니다.

간트 차트에는 SVG가 최적입니다.

SVG 최적화 전략

하지만 SVG도 그냥 쓰면 느립니다. 최적화가 핵심이죠.

class OptimizedSVGGantt {
  private taskPool: Map<string, SVGRectElement> = new Map();
  
  // 1. Object Pooling으로 DOM 조작 최소화
  getTaskBar(taskId: string): SVGRectElement {
    if (this.taskPool.has(taskId)) {
      return this.taskPool.get(taskId)!;
    }
    
    const rect = document.createElementNS(
      "http://www.w3.org/2000/svg", 
      "rect"
    );
    this.taskPool.set(taskId, rect);
    return rect;
  }
  
  // 2. CSS Transform 활용 (GPU 가속)
  moveTask(element: SVGElement, x: number, y: number) {
    element.style.transform = `translate(${x}px, ${y}px)`;
    element.style.willChange = 'transform';
  }
}

Virtual Scrolling: 10,000개 작업 처리하기

10,000개 작업을 모두 렌더링하면 메모리가 20MB를 넘어갑니다.
해결책은? 화면에 보이는 것만 렌더링하는 겁니다.

class VirtualGantt {
  private itemHeight = 30;
  private buffer = 5;
  
  calculateVisibleRange(
    scrollTop: number,
    viewportHeight: number,
    totalTasks: number
  ): [number, number] {
    const startIndex = Math.floor(scrollTop / this.itemHeight);
    const endIndex = Math.ceil(
      (scrollTop + viewportHeight) / this.itemHeight
    );
    
    // 버퍼 추가 (부드러운 스크롤)
    const bufferedStart = Math.max(0, startIndex - this.buffer);
    const bufferedEnd = Math.min(totalTasks, endIndex + this.buffer);
    
    return [bufferedStart, bufferedEnd];
  }
}

10,000개 중 실제로는 40개만 렌더링됩니다.
메모리 사용량이 95% 줄어듭니다.

WebSocket + CRDT: 실시간 동기화

여러 명이 동시에 같은 작업을 수정하면 어떻게 될까요?
CRDT(Conflict-free Replicated Data Type)가 답입니다.

import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

class RealtimeGanttSync {
  private yDoc: Y.Doc;
  private yTasks: Y.Map<any>;
  
  initialize() {
    this.yDoc = new Y.Doc();
    this.yTasks = this.yDoc.getMap('tasks');
    
    // WebSocket 연결
    new WebsocketProvider(
      'wss://api.plexo.work/gantt',
      'project-123',
      this.yDoc
    );
    
    // 변경사항 감지
    this.yTasks.observe(this.handleRemoteChange);
  }
  
  // 충돌 없이 자동 병합!
  handleRemoteChange = (event: Y.YMapEvent<any>) => {
    event.changes.keys.forEach((change, key) => {
      if (change.action === 'update') {
        const task = this.yTasks.get(key);
        this.updateGanttUI(key, task);
        this.showNotification(`${task.modifiedBy}가 수정함`);
      }
    });
  };
}

Yjs가 자동으로 충돌을 해결합니다.
A가 시작일을 바꾸고 B가 종료일을 바꿔도 문제없습니다.

성능 측정 결과

10,000개 작업 프로젝트 기준:

• 초기 렌더링: 1.2초
• 스크롤 FPS: 55-60fps
• 실시간 업데이트 지연: 50ms
• 메모리 사용: 50MB

최적화 전에는 1000개만 해도 10초가 걸렸습니다.
지금은 50,000개까지 테스트해봤습니다.

실전 구현 팁

프로파일링이 답이다

class PerformanceMonitor {
  measure(name, fn) {
    performance.mark(`${name}-start`);
    const result = fn();
    performance.mark(`${name}-end`);
    
    performance.measure(name, `${name}-start`, `${name}-end`);
    
    const measure = performance.getEntriesByName(name)[0];
    console.log(`${name}: ${measure.duration}ms`);
    
    return result;
  }
}

Chrome DevTools Performance 탭을 열고 측정하세요.
병목이 어디인지 정확히 알 수 있습니다.

점진적 개선

처음부터 완벽할 필요 없습니다.

1단계: 기본 기능 구현 (느려도 OK)
2단계: Virtual Scrolling 적용
3단계: WebWorker로 무거운 계산 분리
4단계: 캐싱 전략 도입
5단계: WebAssembly로 핵심 알고리즘 재작성

사용자 경험 우선

느려도 반응은 즉시 해야 합니다.

async handleUserAction(action) {
  // 즉시 피드백
  this.showLoadingIndicator();
  
  // 무거운 작업은 비동기로
  await this.processInBackground(action);
  
  // 완료 후 업데이트
  this.hideLoadingIndicator();
}

마무리: 기술은 수단일 뿐

아무리 기술적으로 완벽해도, 사용자가 안 쓰면 의미가 없습니다.

우리가 집중한 것:

• 빠른 반응: 클릭하면 즉시 움직여야
• 부드러운 스크롤: 버벅이면 안 써요
• 실시간 동기화: 협업이 핵심이니까
• 직관적 인터페이스: 매뉴얼 없이도 OK

가장 보람 있었던 순간은 사용자가 "우와, 이거 진짜 빠르네요!"라고 했을 때입니다.

여러분도 웹 기반 간트 차트를 만들 계획이신가요?
이 글이 도움이 되길 바랍니다.

---

고성능 실시간 간트 차트를 체험해보세요. Plexo