핵심 가이드

커스터마이징

뷰어의 색·로고·도구 구성·언어를 호스트 앱에 맞게 조정할 수 있습니다. 모든 항목은 선택 사항이며, 지정하지 않으면 기본값이 유지됩니다. 마운트 옵션으로 한 번에 지정하거나, applyConfig()로 런타임에 바꿀 수 있습니다.

테마 — 브랜드 컬러와 로고

theme 옵션은 뷰어의 디자인 토큰을 덮어 화이트라벨을 구현합니다. 주 색상을 바꾸면 활성 도구·강조·포커스 등 파생 요소가 일괄 리브랜딩됩니다.

브랜드 적용 js

Inko.mount('#pdf-container', {
  src: '/pdfv/index.html',
  pdfUrl: '/files/document.pdf',

  theme: {
    primaryColor: '#1e6fff',   // 활성 도구·강조·포커스 색
    saveColor:    '#16a34a',   // 저장 버튼 색
    historyColor: '#7c3aed',   // 이력 패널 강조 색
    logoUrl:      '/assets/company-logo.svg',   // 툴바 좌상단 로고
    cssVars: {                 // 임의 디자인 토큰 직접 오버라이드
      '--radius-md': '10px'
    }
  }
});

필드	타입	설명
`primaryColor`	`string`	주 색상 — 활성 도구·강조·포커스 (기본 `#1890ff`)
`saveColor`	`string`	저장 버튼 색 (기본 녹색 계열)
`historyColor`	`string`	이력 패널 강조 색 (기본 보라 계열)
`logoUrl`	`string`	툴바 좌상단에 표시할 로고 이미지 URL
`cssVars`	`object`	임의 CSS 변수 직접 오버라이드 — 정밀 제어용 이스케이프 해치

cssVars는 마지막 수단으로

대부분의 화이트라벨 요구는 primaryColor · saveColor · historyColor · logoUrl 네 가지로 충족됩니다. cssVars는 디자인 토큰을 직접 다루므로 꼭 필요한 경우에만 사용하세요.

도구 구성

tools 옵션으로 노출할 편집 도구, 시작 도구·색·굵기, 툴바 기능 영역을 제어합니다.

도구·기능 제어 js

Inko.mount('#pdf-container', {
  src: '/pdfv/index.html',
  pdfUrl: '/files/document.pdf',

  tools: {
    // 노출할 도구만 나열 — 미지정 시 전체 노출
    enabled: ['pen', 'highlighter', 'text', 'rectangle'],

    defaultTool:  'pen',       // 시작 도구
    defaultColor: '#e8a045',   // 시작 색상
    defaultWidth: 4,           // 시작 굵기

    // 툴바 기능 영역 on/off — 기본 모두 true, false만 명시
    features: {
      thumbnails:  true,    // 페이지 썸네일 패널
      search:      true,    // PDF 원문 Unicode 리터럴 검색
      bookmarks:   true,    // PDF 내장 outline 책갈피 (outline이 있을 때만 표시)
      pageNav:     true,    // 페이지 이동 UI
      zoom:        true,    // 줌 컨트롤
      orientation: true,    // 가로/세로 회전
      undoRedo:    true,    // 실행 취소/다시 실행
      history:     true,    // 이력(레이어) 패널
      save:        false    // 내장 저장 버튼 숨김 — 호스트 버튼으로 대체
    }
  }
});

편집 도구 식별자 (tools.enabled)

식별자	도구
`select`	선택 — 기존 객체 이동·편집
`pen`	펜 (브라우저·기기가 제공하는 압력 값 반영)
`highlighter`	형광펜
`eraser`	지우개
`text`	텍스트 입력
`rectangle`	사각형
`circle`	원
`line`	직선

기능 스위치 (tools.features)

키	제어 대상	기본값
`thumbnails`	페이지 썸네일 패널	`true`
`search`	PDF 원문 전체의 Unicode 리터럴 검색 UI와 `Ctrl`/`Cmd`+`F`	`true`
`bookmarks`	PDF 내장 outline 기반 중첩 책갈피 패널. outline이 있는 문서에서만 버튼 표시	`true`
`pageNav`	페이지 이동 버튼·페이지 표시	`true`
`zoom`	줌 인/아웃·배율 표시	`true`
`orientation`	가로/세로 방향 전환	`true`
`undoRedo`	실행 취소 / 다시 실행	`true`
`history`	이력(다중 사용자 레이어) 패널	`true`
`save`	내장 저장 버튼	`true`

contentSelect는 기본 PDF 내용 모드입니다

contentSelect는 Text Layer 텍스트 선택·복사와 지원하는 네이티브 AcroForm 입력을 위한 모드입니다. defaultTool: 'contentSelect'로 시작할 수 있지만, 현재 tools.enabled로 버튼을 숨기지는 않습니다. 검색을 실행하면 SDK가 이 모드로 자동 전환합니다.

PDF 원문 기능은 입력 문서의 구조를 따릅니다

contentSelect와 features.search는 PDF.js Text Layer가 만들어지는 원문 텍스트를 사용하며 OCR을 수행하지 않습니다. features.bookmarks는 PDF에 이미 들어 있는 outline을 읽기 전용으로 보여주므로 책갈피를 생성하거나 편집하지 않습니다. AcroForm 입력 지원 범위도 대상 PDF와 PDF.js 처리 범위에 따라 달라지므로 실제 문서군에서 검증하세요.

내장 저장 버튼을 숨겨도 저장은 가능합니다

features.save: false로 내장 버튼을 숨긴 뒤, 호스트 페이지의 자체 버튼에서 viewer.save()를 호출하는 구성이 결재 시스템 통합에서 자주 쓰입니다.

다국어 — locale과 messages

한국어(ko, 기본)와 영어(en)가 내장되어 있습니다. messages로 개별 문구를 키 단위로 오버라이드할 수 있어, 내장 언어 위에 서비스 용어를 입히거나 제3의 언어를 구성할 수 있습니다.

언어 설정·문구 오버라이드 js

// 내장 언어: 'ko'(기본) · 'en'
Inko.mount('#pdf-container', {
  src: '/pdfv/index.html',
  pdfUrl: '/files/document.pdf',
  locale: 'en'
});

// 특정 문구만 바꾸기 — messages로 키별 오버라이드
Inko.mount('#pdf-container', {
  src: '/pdfv/index.html',
  pdfUrl: '/files/document.pdf',
  locale: 'en',
  messages: {
    'tool.pen': 'Stylo',
    'toolbar.save': 'Submit'
  }
});

런타임 변경 — applyConfig()

applyConfig({ theme?, tools?, locale?, messages? })는 마운트 이후 언제든 호출할 수 있고, 전달한 키만 부분 갱신합니다. 언어 전환 버튼, 사용자별 권한에 따른 도구 제한 등에 사용합니다.

런타임 부분 갱신 js

var viewer = Inko.mount('#pdf-container', {
  src: '/pdfv/index.html',
  pdfUrl: '/files/document.pdf'
});

// 마운트 이후 언제든 부분 갱신 — 지정한 키만 적용됩니다
document.querySelector('#lang-en').onclick = function () {
  viewer.applyConfig({ locale: 'en' });
};

document.querySelector('#dark-brand').onclick = function () {
  viewer.applyConfig({
    theme: { primaryColor: '#0d1b3e' }
  });
};

마운트 옵션으로 지정한 커스터마이징은 뷰어 준비 직후·PDF 렌더 전에 적용되므로 초기 화면부터 브랜드가 입혀진 상태로 표시됩니다.