PDF뷰어와 마크업 기능을 한 SDK로
PDF 열람·검색과 펜·형광펜·텍스트·도형 마크업을 기존 웹 화면에 연결합니다.
무료 오픈소스 · Apache-2.0 · Self-hosted SDK
Inko 하나로 PDF 열람부터 자유로운 마크업까지. 문서를 찾고, 중요한 곳을 표시하고, 검토 의견을 더하는 경험을 웹 앱 안에서 연결하세요.
저장한 마크업을 불러와 이어서 편집하고, 여러 검토본을 레이어로 겹쳐 비교할 수 있습니다.
Inko는 PDF뷰어·마크업 기능과 편집 상태 반환·복원을 제공합니다. 저장·인증·권한·버전 정책과 운영은 호스트 앱이 담당합니다.
문서 열람 · 원문 검색 · 텍스트 선택
펜 · 형광펜 · 텍스트 · 도형
저장한 상태에서 재편집 · 검토본 레이어 비교
What Inko Does
PDF뷰어와 PDF 마크업 기능부터 편집 상태 복원까지, 하나의 SDK로 연결합니다. 저장·인증·권한·버전 정책은 호스트 앱이 맡습니다.
확대·축소와 페이지 이동으로 문서를 살펴보고, 원문 텍스트를 검색·선택·복사합니다. PDF에 내장 목차가 있으면 책갈피로 필요한 곳에 바로 이동합니다.
문서 열람 · 검색 · 텍스트 선택펜으로 적고, 형광펜으로 강조하고, 텍스트와 도형으로 검토 의견을 남기세요. 마크업은 원본 PDF와 분리된 편집 상태로 관리됩니다.
펜 · 형광펜 · 텍스트 · 도형호스트 앱에 저장한 canvasData를 복원해 이어서 편집합니다. 여러 검토본을 읽기 전용 레이어로 겹쳐 보며 의견을 비교할 수 있습니다.
이어서 편집 · 검토본 레이어개발자가 얻는 것
PDF 열람·검색과 펜·형광펜·텍스트·도형 마크업을 기존 웹 화면에 연결합니다.
Inko는 서버를 강제하지 않습니다. 반환된 상태를 현재 DB·API·인증·권한 정책에 맞춰 저장합니다.
canvasData를 복원해 이어서 편집하고, 여러 검토본을 읽기 전용 레이어로 겹쳐 확인합니다.
Apache-2.0 소스를 이용자 서버에 self-host하고, 코드·테스트·릴리스 근거를 직접 검토합니다.
PDF Outline · Nested Bookmarks
Inko는 PDF에 포함된 outline을 읽어 중첩 책갈피 패널로 표시합니다. 항목을 선택하면 목적지 페이지로 이동하고 현재 위치를 강조하며, outline이 없는 문서에는 책갈피 버튼과 빈 패널을 표시하지 않습니다.
CONDITIONAL UI
NESTED NAVIGATION
ASYNC LIFECYCLE
이 기능은 PDF 자체에 들어 있는 목차를 읽어 표시합니다. 새 목차 항목을 PDF에 기록하거나 기존 outline을 바꾸는 도구는 포함하지 않습니다.
공개 버전 · PDF 내장 목차 책갈피는 npm 1.2.0에 포함되어 있습니다. 웹 데모에서 직접 체험하거나 공개 소스로 구현을 확인하세요.
Add It to Your App
inko-pdf-sdk의 viewer/와 sdk/를 이용자 서버에 배치하고 Inko.mount()로 PDF뷰어와 마크업 기능을 연결합니다.
저장 시 반환되는 canvasData는 기존 API·DB·인증·권한 정책에 맞춰 직접 보관합니다.
onSave는 모든 페이지의 마크업 편집 상태를 canvasData로 반환합니다. 호스트 앱에서 저장한 뒤 다시 불러오면 이어서 편집할 수 있습니다.
별도 exportPdf() 호출은 지원하는 AcroForm 값이 반영된 PDF 바이트를 반환합니다. Inko 마크업은 PDF 바이트에 합성되지 않고 canvasData에 남습니다.
npm install inko-pdf-sdk
# viewer/를 호스트의 /pdfv/에 배치하고 SDK 래퍼를 함께 복사
node_modules/inko-pdf-sdk/viewer/
node_modules/inko-pdf-sdk/sdk/inko-sdk.js<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 소스·개발자 문서·라이브 데모에서 직접 확인할 수 있습니다.
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
RUNES STATE
$state · $derived 페이지·줌·도구·검색·책갈피 상태를 소유 범위별로 나누고, 필요한 파생 관계를 코드에 명시합니다.INSTANCE LIFECYCLE
.svelte.ts factory · dispose 뷰어 인스턴스가 listener·observer·렌더 작업의 생성과 정리를 함께 소유해 문서 교체 뒤의 늦은 결과를 격리합니다.COMPONENT BOUNDARY
Toolbar · Outline · Search · ScrollViewer 무거운 PDF 캔버스와 자주 바뀌는 제어 UI를 TypeScript props 기반 컴포넌트로 분리해 각 책임을 독립 검증합니다.120쪽 자동 검증은 고정 fixture와 정해진 브라우저 예산으로 빌드 간 회귀를 확인하는 기준이며, 사용자 환경의 절대 성능을 보증하지 않습니다. 위 설계는 제품 환경을 위한 기술적 기반이며 특정 환경의 호환성을 보증하지 않습니다. 설치·연동·인증·권한·저장·운영 검증은 이용자가 담당합니다.
Open Source, With Evidence
NextH는 Inko의 권리 확인된 범용 코어를 Apache-2.0 무료 오픈소스로 공개해, 개발자가 코드·문서·릴리스 산출물을 직접 대조하고 자체 환경에서 평가할 수 있게 합니다.
소스로 확인
권리 확인된 범용 코어와 API 문서를 함께 공개해 개발자가 제품 경계를 직접 확인할 수 있게 합니다.
릴리스로 검증
동일 환경 이중 빌드 해시 비교, checksum, SBOM, 제3자 고지와 테스트 결과를 릴리스와 함께 확인할 수 있습니다.
문서로 연결
PDF 로드부터 편집 상태 저장·복원까지 이용자가 직접 구현하고 검증할 수 있는 문서와 예제를 연결합니다.
Release Status
소스와 배포 조건을 공개 채널에서 직접 확인할 수 있습니다.
npm 1.2.0과 GitHub Release v1.2.0을 공개했습니다. 설치할 버전의 소스·변경 이력·검증 자료를 함께 확인하세요.
Clear Boundary
Inko
canvasData 반환·복원호스트 앱·이용자
NextH는 Inko에 대해 개별 기술지원·응답 기한·SLA·LTS·특정 환경 호환성 보증을 제공하지 않습니다.