NextH
Inko by NextH

무료 오픈소스 · Apache-2.0 · Self-hosted SDK

웹에 더하는
PDF뷰어와
마크업 기능

Inko 하나로 PDF 열람부터 자유로운 마크업까지. 문서를 찾고, 중요한 곳을 표시하고, 검토 의견을 더하는 경험을 웹 앱 안에서 연결하세요.

저장한 마크업을 불러와 이어서 편집하고, 여러 검토본을 레이어로 겹쳐 비교할 수 있습니다.

  • 계약서·보고서 검토
  • 도면·문서 마크업
  • 검토본 비교·재편집

Inko는 PDF뷰어·마크업 기능과 편집 상태 반환·복원을 제공합니다. 저장·인증·권한·버전 정책과 운영은 호스트 앱이 담당합니다.

문서를 읽는 순간부터, 다음 검토까지
01 · READ PDF뷰어

문서 열람 · 원문 검색 · 텍스트 선택

02 · MARK UP PDF 마크업 기능

펜 · 형광펜 · 텍스트 · 도형

03 · CONTINUE 검토를 이어가는 편집 상태

저장한 상태에서 재편집 · 검토본 레이어 비교

호스트가 관리 저장 · 인증 · 권한 · 버전

What Inko Does

읽고, 표시하고, 이어서 검토하세요.

PDF뷰어와 PDF 마크업 기능부터 편집 상태 복원까지, 하나의 SDK로 연결합니다. 저장·인증·권한·버전 정책은 호스트 앱이 맡습니다.

  1. 01 PDF뷰어

    읽고, 찾고, 필요한 곳으로

    확대·축소와 페이지 이동으로 문서를 살펴보고, 원문 텍스트를 검색·선택·복사합니다. PDF에 내장 목차가 있으면 책갈피로 필요한 곳에 바로 이동합니다.

    문서 열람 · 검색 · 텍스트 선택
  2. 02 PDF 마크업 기능

    중요한 곳에, 생각을 더하세요

    펜으로 적고, 형광펜으로 강조하고, 텍스트와 도형으로 검토 의견을 남기세요. 마크업은 원본 PDF와 분리된 편집 상태로 관리됩니다.

    펜 · 형광펜 · 텍스트 · 도형
  3. 03 편집 상태 복원 · 레이어

    지난 검토에서, 다음 작업으로

    호스트 앱에 저장한 canvasData를 복원해 이어서 편집합니다. 여러 검토본을 읽기 전용 레이어로 겹쳐 보며 의견을 비교할 수 있습니다.

    이어서 편집 · 검토본 레이어

개발자가 얻는 것

문서 경험은 넓히고, 데이터는 기존 앱에서 관리하세요.

PDF뷰어와 마크업 기능을 한 SDK로

PDF 열람·검색과 펜·형광펜·텍스트·도형 마크업을 기존 웹 화면에 연결합니다.

기존 백엔드와 권한 체계를 그대로 씁니다

Inko는 서버를 강제하지 않습니다. 반환된 상태를 현재 DB·API·인증·권한 정책에 맞춰 저장합니다.

저장한 검토본을 다시 활용합니다

canvasData를 복원해 이어서 편집하고, 여러 검토본을 읽기 전용 레이어로 겹쳐 확인합니다.

소스와 배포 위치를 직접 통제합니다

Apache-2.0 소스를 이용자 서버에 self-host하고, 코드·테스트·릴리스 근거를 직접 검토합니다.

PDF Outline · Nested Bookmarks

PDF에 목차가 있으면, 계층형 책갈피로 바로 이동합니다.

Inko는 PDF에 포함된 outline을 읽어 중첩 책갈피 패널로 표시합니다. 항목을 선택하면 목적지 페이지로 이동하고 현재 위치를 강조하며, outline이 없는 문서에는 책갈피 버튼과 빈 패널을 표시하지 않습니다.

CONDITIONAL UI

목차가 있을 때만 노출

PDF의 outline이 비어 있으면 책갈피 버튼과 빈 패널을 화면에 추가하지 않습니다.

NESTED NAVIGATION

계층과 현재 위치를 함께

중첩 목차를 펼치고 접으며, 선택한 목적지로 이동한 뒤 현재 페이지에 맞는 항목을 강조합니다.

ASYNC LIFECYCLE

첫 페이지 표시를 먼저

첫 페이지 렌더를 우선한 뒤 브라우저 idle 구간에 목차를 읽고, 문서가 바뀌면 이전 비동기 결과를 무효화합니다.

이 기능은 PDF 자체에 들어 있는 목차를 읽어 표시합니다. 새 목차 항목을 PDF에 기록하거나 기존 outline을 바꾸는 도구는 포함하지 않습니다.

공개 버전 · PDF 내장 목차 책갈피는 npm 1.2.0에 포함되어 있습니다. 웹 데모에서 직접 체험하거나 공개 소스로 구현을 확인하세요.

Add It to Your App

당신의 웹 앱에, Inko를 연결하세요.

inko-pdf-sdkviewer/sdk/를 이용자 서버에 배치하고 Inko.mount()로 PDF뷰어와 마크업 기능을 연결합니다.
저장 시 반환되는 canvasData는 기존 API·DB·인증·권한 정책에 맞춰 직접 보관합니다.

마크업과 PDF 양식은 각각 저장합니다

onSave는 모든 페이지의 마크업 편집 상태를 canvasData로 반환합니다. 호스트 앱에서 저장한 뒤 다시 불러오면 이어서 편집할 수 있습니다.

별도 exportPdf() 호출은 지원하는 AcroForm 값이 반영된 PDF 바이트를 반환합니다. Inko 마크업은 PDF 바이트에 합성되지 않고 canvasData에 남습니다.

편집 상태와 PDF 내보내기 자세히 보기 →
terminal
npm install inko-pdf-sdk

# viewer/를 호스트의 /pdfv/에 배치하고 SDK 래퍼를 함께 복사
node_modules/inko-pdf-sdk/viewer/
node_modules/inko-pdf-sdk/sdk/inko-sdk.js
host-app/src/pages/document.html
<div id="pdfv-container" style="width:100%;height:80vh"></div>
<script src="/pdfv/sdk/inko-sdk.js"></script>
<script>
  var viewer = Inko.mount('#pdfv-container', {
    src: '/pdfv/index.html',
    pdfUrl: '/files/sample.pdf',
    fileName: 'sample.pdf',
    onSave: async function (canvasData, ok, msg) {
      if (!ok) { console.error(msg); return; }

      // ok는 SDK 직렬화 성공. DB 저장 성공은 API 응답으로 별도 확인
      var response = await fetch('/api/annotations', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          documentId: 'contract-123',
          baseVersion: 7,
          canvasData: canvasData
        })
      });
      if (!response.ok) throw new Error('호스트 저장 API 실패');
    }
  });
</script>

참고 통합 패턴

이 목록은 호환성 보증이나 지원 약속이 아닙니다. Same-Origin Sub-Path를 권장하며, 대상 브라우저와 서버의 보안 정책·호환성은 이용자가 검증합니다.

전체 개발자 문서 보기 →

Implementation Evidence · Open Source

이 사용성을 받치는 구현을, 코드로 확인하세요.

PDF가 길어져도 렌더 작업을 낭비하지 않고, 확대·페이지 이동·문서 교체 뒤에도 편집 상태가 엉키지 않도록 구현했습니다.
상용 PDF 제품이 다루는 핵심 기술 문제를 GitHub 소스·개발자 문서·라이브 데모에서 직접 확인할 수 있습니다.

RENDER PIPELINE 보이는 범위를 먼저, 다시 필요한 결과는 캐시에서
01 PDF.js Worker 해석·페이지 데이터
02 Visible Range 가시 페이지·주변 버퍼
03 LRU Cache 페이지·배율별 재사용
04 Task Guard 이탈·스케일 변경 취소

01 · LONG DOCUMENTS

긴 문서는 화면 주변부터 처리합니다

PDF.js Worker · IntersectionObserver · LRU Cache · RenderTask

가시 페이지와 주변 버퍼를 먼저 렌더하고, 페이지·배율별 결과를 LRU 캐시에 보관합니다. 범위를 벗어나거나 스케일이 바뀐 작업은 취소해 빠른 스크롤과 문서 교체 뒤의 낭비를 줄입니다. Text Layer가 있는 PDF는 원문 선택·복사와 가상화된 전체 페이지 Unicode 리터럴 검색을 제공하며, 내장 outline은 Nested Bookmarks로 연결합니다.

02 · PDF MARKUP

확대·스크롤 뒤에도 마크업 위치를 유지합니다

PaperScope · DPR · Project Coordinates · PointerEvent

각 페이지를 독립 PaperScope로 격리하고 HiDPI 표시와 1.0x 문서 좌표를 분리합니다. 펜 압력·multiply 형광펜·텍스트·도형을 처리하며, 부분 지우기는 교차한 Path를 분할해 필요한 조각만 제거합니다.

03 · REUSABLE STATE

작업 상태를 저장하고 원하는 시점에서 다시 엽니다

canvasData · Overlay · AcroForm · exportPdf()

문서 전체의 페이지별 편집 상태를 canvasData로 반환·복원하고, 호스트 앱이 보관한 검토본을 레이어로 겹쳐 봅니다. 지원하는 네이티브 AcroForm 필드는 AnnotationLayerBuilder·annotationStorage로 표시·입력하며, 현재 값은 canvasData와 분리된 exportPdf() ArrayBuffer로 반환합니다.

04 · INTEGRATION & RELEASE

호스트 연결과 배포 산출물을 검증합니다

source·origin · Payload Validation · Playwright · SBOM

호스트 SDK는 iframe source·origin을 확인하고, 뷰어는 허용 origin 고정과 PDF 입력 형식·크기·URL 스킴을 검사합니다. 고정 120쪽 fixture의 렌더·스크롤·메모리 회귀, SHA256SUMS, CycloneDX SBOM과 GitHub build attestation을 공개 릴리스에 연결합니다.

SVELTE 5 ARCHITECTURE

Svelte 5로 뷰어 인스턴스의 상태와 수명주기를 분리합니다.

문서·페이지·줌·검색·책갈피 상태를 인스턴스별로 소유하고, 문서 교체 시 listener·observer·render task를 함께 정리합니다.

RUNES STATE

$state · $derived 페이지·줌·도구·검색·책갈피 상태를 소유 범위별로 나누고, 필요한 파생 관계를 코드에 명시합니다.

INSTANCE LIFECYCLE

.svelte.ts factory · dispose 뷰어 인스턴스가 listener·observer·렌더 작업의 생성과 정리를 함께 소유해 문서 교체 뒤의 늦은 결과를 격리합니다.

COMPONENT BOUNDARY

Toolbar · Outline · Search · ScrollViewer 무거운 PDF 캔버스와 자주 바뀌는 제어 UI를 TypeScript props 기반 컴포넌트로 분리해 각 책임을 독립 검증합니다.
OPEN STACK
Apache-2.0PDF.js Text · Form · OutlinePaper.jsSvelte 5 + TypeScriptPlaywright E2E · 120쪽 회귀SBOM · Attestation

120쪽 자동 검증은 고정 fixture와 정해진 브라우저 예산으로 빌드 간 회귀를 확인하는 기준이며, 사용자 환경의 절대 성능을 보증하지 않습니다. 위 설계는 제품 환경을 위한 기술적 기반이며 특정 환경의 호환성을 보증하지 않습니다. 설치·연동·인증·권한·저장·운영 검증은 이용자가 담당합니다.

Open Source, With Evidence

기술 설명에, 직접 확인할 수 있는 근거를 더합니다.

NextH는 Inko의 권리 확인된 범용 코어를 Apache-2.0 무료 오픈소스로 공개해, 개발자가 코드·문서·릴리스 산출물을 직접 대조하고 자체 환경에서 평가할 수 있게 합니다.

01

소스로 확인

설명과 구현을 직접 대조

권리 확인된 범용 코어와 API 문서를 함께 공개해 개발자가 제품 경계를 직접 확인할 수 있게 합니다.

02

릴리스로 검증

같은 산출물에 증거를 결박

동일 환경 이중 빌드 해시 비교, checksum, SBOM, 제3자 고지와 테스트 결과를 릴리스와 함께 확인할 수 있습니다.

03

문서로 연결

self-service 통합 경로

PDF 로드부터 편집 상태 저장·복원까지 이용자가 직접 구현하고 검증할 수 있는 문서와 예제를 연결합니다.

Release Status

공개 저장소·패키지·LICENSE

소스와 배포 조건을 공개 채널에서 직접 확인할 수 있습니다.

npm 1.2.0과 GitHub Release v1.2.0을 공개했습니다. 설치할 버전의 소스·변경 이력·검증 자료를 함께 확인하세요.

Clear Boundary

Inko와 호스트 앱의 책임을 구분합니다.

Inko

  • PDF뷰어·PDF 마크업 기능
  • canvasData 반환·복원
  • 저장된 검토본 레이어 표시
  • 선택한 상태에서 이어서 편집

호스트 앱·이용자

  • 저장·인증·권한·버전 정책
  • 설치·연동·환경 검증·배포
  • 백업·보안·업데이트·포크 유지보수

NextH는 Inko에 대해 개별 기술지원·응답 기한·SLA·LTS·특정 환경 호환성 보증을 제공하지 않습니다.