Web Worker 기반 100만 행 대용량 CSV 스트리밍 파서와 동적 SQL PIVOT 변환 수학

1. 클라이언트 사이드 대용량 정형 데이터 처리의 장벽과 엔지니어링 과제

웹 브라우저 기반의 데이터 분석(BI) 도구들이 직면하는 가장 치명적인 제약은 자바스크립트의 단일 스레드(Single-Threaded) 이벤트 루프 모델입니다. 기가바이트 단위의 원시 CSV 로그나 수십만 행의 데이터베이스 덤프를 브라우저에 드래그 앤 드롭했을 때, 문자열 분할(split('\n'))과 파싱 연산이 메인 스레드에서 실행되면 브라우저는 즉각 응답 없음 상태(UI Freezing)에 빠지고 사용자는 ‘페이지 멈춤’ 팝업을 마주하게 됩니다.

동시에 조직의 재무제표, 고객 구매 이력, 공정 센서 로그 등 민감한 원천 데이터를 클라우드 서버로 업로드하여 피벗 분석하는 행위는 엄격한 데이터 거버넌스 규정에 위배됩니다. 이에 따라 Every-Forge는 Web Worker 멀티스레딩과 청크 스트리밍(Chunked Stream) 파이프라인을 결합하여 100만 행의 원천 데이터를 메인 스레드 간섭 없이 브라우저 내부에서 실시간으로 집계·변환하는 클라이언트 인메모리 PIVOT 엔진을 개발하였습니다.

데이터 엔지니어링 실무에서 PIVOT 변환은 엑셀이나 SQL 데이터베이스의 고유 기능으로 여겨졌으나, 브라우저 메모리 관리 최적화를 통해 현대 클라이언트 장치의 유휴 컴퓨팅 자원을 십분 활용할 수 있게 되었습니다.

2. 클라이언트 대용량 데이터 처리 방식별 비교 분석

브라우저 내에서 정형 테이블 데이터를 처리하기 위한 아키텍처별 한계와 처리 속도를 비교하면 다음과 같습니다.

3. 관계 대수학적 PIVOT 변환과 다차원 희소 행렬 수학

데이터베이스 관계 대수(Relational Algebra)에서 PIVOT 연산은 좁고 긴 형태(Narrow & Long)의 정규화된 튜플 집합을, 보고서 작성을 위한 넓고 짧은 형태(Wide & Flat)의 다차원 교차 행렬로 투영하는 변환입니다.

3.1. 관계 대수 투영 및 집계 공식

속성 집합 $R(K_1, K_2, \dots, K_p, P, V)$가 주어졌을 때, $K$는 기준 행 키(Row Key), $P$는 컬럼으로 전환될 피벗 속성(Pivot Column, 고유값 $m$개: $\{p_1, p_2, \dots, p_m\}$), $V$는 집계 대상 값(Value Column)입니다.

피벗 변환된 릴레이션 $R_{\text{pivot}}$의 각 셀 $(i, j)$에 위치하는 집계값 $M_{i, j}$는 다음과 같이 정의됩니다:

$M_{i, j} = \bigoplus_{t \in S_{i, j}} t.V$

여기서 $\bigoplus$는 집계 연산자($\sum, \text{Avg}, \max, \min, \text{Count}$)이며, 부분집합 $S_{i, j}$는 다음과 같이 정의되는 튜플 집합입니다:

$S_{i, j} = \left\{ t \in R \;\middle|\; t.K = k_i \;\land\; t.P = p_j \right\}$

3.2. 희소 행렬(Sparse Matrix) 해시 인덱싱

피벗 속성의 고유값 조합 수가 급증할 경우 생성되는 행렬의 대다수 셀은 빈 값($\text{null}$ 또는 $0$)이 되는 희소 행렬 특성을 보입니다. 메모리 낭비를 방지하기 위해 Every-Forge 엔진은 $O(1)$ 접근성을 보장하는 2단계 복합 해시 맵 인덱스를 구축합니다:

$\text{Index}(k_i, p_j) \implies \text{HashMap}<\text{RowKey}, \text{HashMap}<\text{PivotKey}, \text{AggregateAccumulator}>>$

4. Web Worker 기반 청크 스트리밍 파이프라인 아키텍처

대용량 CSV 파일을 브라우저로 가져올 때 FileReader.readAsText()를 호출하면 브라우저 메모리에 수백 메가바이트의 거대 문자열이 한 번에 복사되어 가비지 컬렉터(GC) 폭풍을 유발합니다.

Every-Forge 파이프라인은 File.stream()과 ReadableStreamBYOBReader를 결합하여 고정 크기(예: 256KB)의 Uint8Array 청크 단위로 스트리밍 파싱을 수행합니다. 청크의 경계에서 줄바꿈(\n)이 끊기는 문제는 이전 청크의 잔여 바이트를 다음 청크 선두에 이어붙이는 슬라이딩 윈도우(Sliding Window) 버퍼로 해결합니다.

5. 클라이언트 스트리밍 PIVOT 엔진 구현체

다음은 Web Worker 내부에서 동작하며 스트리밍 방식으로 튜플을 누적하고 집계 행렬을 산출하는 핵심 엔진 구현체입니다.

// Every-Forge Data Lab: Web Worker Streaming Pivot Engine
export type AggregateOp = "SUM" | "COUNT" | "AVG" | "MAX" | "MIN";

export interface PivotConfig {
  rowKeyField: string;
  pivotField: string;
  valueField: string;
  op: AggregateOp;
}

export class StreamingPivotEngine {
  private matrix = new Map<string, Map<string, { sum: number; count: number; max: number; min: number }>>();
  private pivotColumns = new Set<string>();

  processRow(rowKey: string, pivotKey: string, rawValue: number): void {
    this.pivotColumns.add(pivotKey);

    let rowMap = this.matrix.get(rowKey);
    if (!rowMap) {
      rowMap = new Map();
      this.matrix.set(rowKey, rowMap);
    }

    let cell = rowMap.get(pivotKey);
    if (!cell) {
      cell = { sum: 0, count: 0, max: -Infinity, min: Infinity };
      rowMap.set(pivotKey, cell);
    }

    cell.sum += rawValue;
    cell.count += 1;
    cell.max = Math.max(cell.max, rawValue);
    cell.min = Math.min(cell.min, rawValue);
  }

  generatePivotTable(op: AggregateOp): { headers: string[]; rows: any[][] } {
    const colHeaders = Array.from(this.pivotColumns).sort();
    const headers = ["RowKey", ...colHeaders];
    const rows: any[][] = [];

    for (const [rowKey, colMap] of this.matrix.entries()) {
      const rowData: any[] = [rowKey];
      for (const col of colHeaders) {
        const cell = colMap.get(col);
        if (!cell || cell.count === 0) {
          rowData.push(null);
        } else {
          switch (op) {
            case "SUM": rowData.push(cell.sum); break;
            case "COUNT": rowData.push(cell.count); break;
            case "AVG": rowData.push(cell.sum / cell.count); break;
            case "MAX": rowData.push(cell.max); break;
            case "MIN": rowData.push(cell.min); break;
          }
        }
      }
      rows.push(rowData);
    }

    return { headers, rows };
  }
}

6. RFC 4180 CSV 파싱 예외 처리와 브라우저 메모리 한계(Out-of-Memory) 방어

현실의 원천 데이터 CSV는 단순한 쉼표 구분이 아닙니다. 셀 내부에 줄바꿈 기호(\r\n), 따옴표 이스케이프(""), 불완전한 인코딩이 뒤섞인 비정형 구조를 갖습니다. RFC 4180 표준을 엄격히 준수하는 유한 상태 기계(FSM, Finite State Machine)를 Web Worker 내부에 바이트 단위로 구현하여 정규표현식 파싱 대비 처리 속도를 4배 이상 향상시켰습니다.

또한 브라우저 탭당 할당되는 자바스크립트 힙 메모리 한계(통상 2GB~4GB)를 초과하여 브라우저 탭이 강제 종료(OOM Crash)되는 사태를 방지하기 위해, 피벗 연산 시 원시 텍스트 객체를 유지하지 않고 즉각 원시 해시 인덱스로 압축 매핑하는 버퍼 재활용 기법을 적용하였습니다. 이를 통해 100만 행, 50개 컬럼의 거대 데이터셋에서도 150MB 미만의 안정적인 메모리 사용량을 유지합니다.

7. 결론 및 Every-Forge SQL 피벗 분석기 연계

Web Worker와 스트리밍 바이너리 파이프라인의 결합은 과거 데스크톱 설치형 소프트웨어에서나 가능했던 대규모 OLAP 피벗 분석을 웹 브라우저 탭 하나에서 완벽하게 실현합니다.

대용량 CSV 파일 업로드, 실시간 SQL 그룹핑 집계, 그리고 동적 행/열 치환을 외부 서버 전송 없이 100% 프라이빗하게 경험해 보시려면 Every-Forge SQL 피벗 분석기 바로가기를 이용해 보시기 바랍니다.