[React] 웹 의료 영상 뷰어의 새 표준 Cornerstone3D 완전 분석

Deep Dive

웹 의료 영상 뷰어의 새 표준
Cornerstone3D 완전 분석

아키텍처, 렌더링 파이프라인, 패키지 구조, 장단점까지 — 직접 VTK.js로 뷰어를 만든 시각으로 분석합니다.

WebGL · GPU 렌더링 DICOM · NIfTI MPR · MIP · Volume OHIF 통합 오픈소스

01 · Overview

Cornerstone3D란?

Cornerstone3D는 OHIF(Open Health Imaging Foundation)가 주도하여 개발한 웹 기반 의료 영상 렌더링 라이브러리입니다. 2022년 4월에 공개된 이후 기존 Cornerstone(Legacy)의 한계를 극복하고, vtk.js를 렌더링 백본으로 채택하여 GPU 가속 기반의 고성능 의료 영상 뷰잉을 가능하게 합니다.

단순한 렌더러가 아닌 완성형 프레임워크로, DICOM 이미지 로딩부터 MPR, MIP, Volume Rendering, 세그멘테이션, 측정 도구, 뷰포트 동기화까지 의료 영상 뷰어에 필요한 거의 모든 기능을 내장합니다.

2022

최초 공개 (v1.0)

8+

공식 패키지

vtk.js

렌더링 백본

MIT

라이선스

02 · Package Architecture

패키지 구조

Cornerstone3D는 관심사에 따라 명확히 분리된 멀티 패키지 구조를 채택합니다. 각 패키지는 독립적으로 설치·사용 가능하며, 필요한 것만 골라 쓸 수 있습니다.

⚙️

@cornerstonejs/core

렌더링 엔진, 뷰포트, 이미지 캐시, 메타데이터 프로바이더의 핵심 레이어.

🔧

@cornerstonejs/tools

측정 도구(Length, ROI), 세그멘테이션 편집(Brush, Scissors), 크로스헤어, 동기화.

📂

@cornerstonejs/dicom-image-loader

DICOMweb(WADO-RS/URI) 로딩 + Web Worker 기반 오프메인스레드 디코딩.

🧠

@cornerstonejs/nifti-volume-loader

NIfTI 볼륨을 스트리밍 방식으로 청크 단위 로드. 대용량 파일 최적화.

🔄

@cornerstonejs/adapters

DICOM SR · SEG 파일을 Cornerstone 어노테이션 포맷으로 변환하는 어댑터.

🤖

@cornerstonejs/ai

SAM2(Segment Anything Model 2) 기반 AI 스마트 세그멘테이션 지원.

03 · Rendering Engine

렌더링 엔진 — 핵심 혁신

Cornerstone3D의 가장 큰 기술적 도약은 오프스크린 공유 WebGL 컨텍스트입니다. 기존 방식(뷰포트별 독립 WebGL 컨텍스트)의 성능 한계를 근본적으로 해결합니다.

Legacy Cornerstone

뷰포트별 독립 컨텍스트

• 뷰포트마다 별도 WebGL 컨텍스트 생성
• GPU 메모리 중복 점유 (볼륨 N개 복사)
• 브라우저 컨텍스트 수 제한에 취약
• PET/CT Fusion 같은 복잡 레이아웃 불가
• 뷰포트 증가 시 성능 급격히 저하

Cornerstone3D — 현재 기본값

단일 오프스크린 공유 컨텍스트

• 하나의 오프스크린 캔버스로 전체 뷰포트 구동
• Shared Volume Mapper — 텍스처 GPU에 1번만 업로드
• 뷰포트 수에 무관하게 컨텍스트 1개 유지
• 10개 뷰포트도 볼륨 2개(CT+PET)만 GPU에 올림
• 오프스크린 → 온스크린 픽셀 복사로 표시

💡 PET-CT Fusion 3×3 레이아웃(CT 3개 + PET 3개 + Fusion 3개 = 9 뷰포트)에서도 GPU에는 CT, PET 볼륨 텍스처 단 2개만 올라갑니다. Fusion 뷰포트는 이미 업로드된 텍스처를 재사용합니다.

04 · Data Flow

데이터 로딩 파이프라인

DICOMweb 서버에서 데이터를 불러와 뷰포트에 렌더링하기까지의 흐름입니다.

1

Image ID 등록 · MetaData 조회

wadors:https://server/studies/.../frames/1 형태의 Image ID로 이미지를 참조합니다. MetaData Provider에서 PixelSpacing, ImagePosition 등을 조회합니다.

2

Image Loader → Web Worker 디코딩

WADO-RS 요청 → DICOM 파일 수신 → Web Worker 내에서 오프메인스레드로 JPEG 2000 / HTJ2K 등 픽셀 데이터를 디코딩합니다.

3

Image Cache 저장

디코딩된 이미지 객체를 인메모리 캐시에 저장. 같은 이미지 재요청 시 캐시에서 즉시 반환합니다.

4

Volume 구성 (Volume Viewport)

시리즈 전체 슬라이스를 조합해 3D Volume 객체를 생성합니다. Streaming Volume Loader: 현재 슬라이스부터 우선 로드하여 점진적으로 표시합니다.

5

GPU 텍스처 업로드 (Shared Mapper)

볼륨 데이터를 GPU 텍스처로 업로드합니다. 동일 볼륨을 여러 뷰포트가 참조하더라도 텍스처는 1회만 업로드됩니다.

6

오프스크린 렌더링 → 화면 표시

vtk.js WebGL 파이프라인으로 오프스크린 캔버스에 렌더링 후, 각 뷰포트 영역의 픽셀을 온스크린 캔버스로 복사합니다.

05 · Features

주요 기능 대조표

Cornerstone3D의 내장 기능과 커스텀 VTK.js 구현 방식과의 차이를 비교합니다.

기능	Cornerstone3D	커스텀 VTK.js 구현	난이도 차이
MPR (Axial/Sagittal/Coronal)	내장 자동 구성	vtkImageMapper + 좌표계 직접 설정	쉬움
MIP / Average Projection	내장 BlendMode 토글	직접 구현 필요	쉬움
Volume Rendering	내장 Transfer Function 포함	vtkVolumeMapper 수동 설정	보통
세그멘테이션 오버레이	내장 Labelmap · Contour · Surface	RGBA 변환 후 vtkImageSlice	쉬움
세그멘테이션 편집	내장 Brush/Scissors/Threshold	별도 구현 필요 (매우 복잡)	어려움
측정 도구 (Length, ROI)	내장 SVG 어노테이션 + 물리 공간	SVG 오버레이 + 좌표 변환 직접 구현	보통
크로스헤어 동기화	내장 CrosshairsTool	직접 좌표 변환 + 렌더러 연동	보통
뷰포트 동기화	내장 Synchronizer API	직접 이벤트 연결	보통
DICOM 로딩	내장 DICOMweb 완전 지원	별도 라이브러리 필요	쉬움
커스텀 렌더링 파이프라인	제한적 추상화 레이어 내부	VTK API 직접 제어 가능	어려움
비표준 데이터 포맷	부분 지원 플러그인 형태	자유롭게 구현 가능	—

06 · Pros & Cons

장점과 단점

✅ 장점

• 빠른 개발 속도
  MPR, 세그멘테이션, 측정 도구가 모두 내장되어 수개월치 작업이 설치 한 번으로 해결됩니다.
• 공유 GPU 텍스처
  Shared Volume Mapper로 복잡한 PET-CT Fusion 레이아웃도 최소 메모리로 구동됩니다.
• DICOM 표준 완전 지원
  DICOMweb, WADO-RS/URI, DICOM SR 어댑터까지 의료 표준 스택이 기본 탑재됩니다.
• 스트리밍 볼륨 로더
  NIfTI/DICOM 볼륨을 슬라이스 단위로 점진적으로 로드하여 초기 표시 시간을 단축합니다.
• AI 세그멘테이션 내장
  SAM2 기반 스마트 세그멘테이션이 공식 패키지로 제공됩니다.
• OHIF Viewer 통합
  엔터프라이즈급 레퍼런스 뷰어(OHIF)와 공식 통합 CI/CD가 운영됩니다.
• SVG 어노테이션
  모든 측정 도구가 SVG로 렌더링되어 어떤 해상도에서도 선명하게 표시됩니다.

⚠️ 단점

• 커스터마이징 한계
  추상화 레이어가 두꺼워 렌더링 파이프라인을 세밀하게 제어하기 어렵습니다.
• 번들 크기
  vtk.js를 내부적으로 포함하므로 번들이 큽니다. Tree-shaking 효과도 제한적입니다.
• 가파른 학습 곡선
  RenderingEngine, Viewport, ToolGroup, Synchronizer 등 고유 개념을 습득해야 합니다.
• DICOM 중심 설계
  NIfTI 등 비표준 포맷 지원은 별도 패키지로 제공되며, REST API 기반 커스텀 연동에 추가 작업이 필요합니다.
• API 변경 잦음
  v1 → v2 마이그레이션에서 대규모 API 개편이 있었습니다. Breaking Change 빈도가 높습니다.
• 디버깅 난이도
  vtk.js → Cornerstone → 도구 레이어의 3중 추상화로 버그 원인 추적이 복잡합니다.

07 · Decision Matrix

언제 Cornerstone3D를, 언제 커스텀 VTK.js를?

⚖️ 정답은 없습니다. 프로젝트의 요구사항, 팀 규모, 일정, 데이터 포맷에 따라 최적 선택이 달라집니다.

시나리오	Cornerstone3D	커스텀 VTK.js
DICOM / DICOMweb 기반 표준 워크플로	강력 추천	비효율
빠른 MVP, 소규모 팀	적합	리소스 과다
OHIF Viewer 기반 확장	필수	불가
REST API 기반 비표준 데이터 (NIfTI, .nii.gz)	가능 (플러그인)	자유롭게 구현
독자적인 뷰 타입 / 렌더링 로직 필요	제한	적합
Canvas 기반 MIP / 커스텀 오버레이	지원 안 됨	자유롭게 구현
세그멘테이션 편집 도구 (Brush, Scissors)	내장	구현 난이도 높음
번들 크기 최소화	불리	유리

08 · Quick Start

초기화 흐름 — 코드로 보기

// 1. 패키지 설치
// pnpm add @cornerstonejs/core @cornerstonejs/tools @cornerstonejs/dicom-image-loader

import * as cornerstone from '@cornerstonejs/core';
import * as cornerstoneTools from '@cornerstonejs/tools';
import dicomImageLoader from '@cornerstonejs/dicom-image-loader';

// 2. 초기화
await cornerstone.init();
cornerstoneTools.init();
dicomImageLoader.init();

// 3. RenderingEngine 생성 (단일 WebGL 컨텍스트)
const engine = new cornerstone.RenderingEngine('myEngine');

// 4. 뷰포트 구성 (MPR 3분할)
engine.setViewports([
  { viewportId: 'axial',    type: 'ORTHOGRAPHIC', element: divAxial,
    defaultOptions: { orientation: 'AXIAL' } },
  { viewportId: 'sagittal', type: 'ORTHOGRAPHIC', element: divSagittal,
    defaultOptions: { orientation: 'SAGITTAL' } },
  { viewportId: 'coronal',  type: 'ORTHOGRAPHIC', element: divCoronal,
    defaultOptions: { orientation: 'CORONAL' } },
]);

// 5. 볼륨 로드 (스트리밍)
const volume = await cornerstone.volumeLoader.createAndCacheVolume(
  volumeId, { imageIds }
);
await volume.load();   // 점진적 로드 시작

// 6. 도구 그룹 설정
const toolGroup = cornerstoneTools.ToolGroupManager.createToolGroup('tg');
toolGroup.addTool(cornerstoneTools.LengthTool.toolName);
toolGroup.addViewport('axial', 'myEngine');
toolGroup.setToolActive(cornerstoneTools.LengthTool.toolName);

09 · Conclusion

결론 — 어떤 선택이 맞을까?

Cornerstone3D는 표준 DICOM 워크플로를 빠르게 구축해야 하는 팀에게는 현존하는 가장 강력한 선택지입니다. 공유 GPU 텍스처, 스트리밍 볼륨 로더, 내장 세그멘테이션 편집 도구는 직접 구현하려면 수개월이 걸리는 기능들입니다.

반면 비표준 데이터 포맷(NIfTI REST API), 독자적 뷰 타입, Canvas 기반 커스텀 렌더링이 핵심인 프로젝트라면 커스텀 VTK.js 구현이 더 적합합니다. Cornerstone3D의 추상화 레이어는 이런 경우 오히려 걸림돌이 될 수 있습니다.

🧭 두 접근을 혼용하는 전략도 있습니다. DICOM 표준 뷰는 Cornerstone3D로, 커스텀 NIfTI/MIP 뷰는 직접 구현한 VTK.js 파이프라인으로 분리하는 방식입니다.

참고 자료: cornerstonejs.org · GitHub · OHIF Viewer

2026 · NIfTI Viewer 프로젝트 — Cornerstone3D 구조 분석