핵심 가이드

커스터마이징

뷰어의 색·로고·도구 구성·언어를 고객사 서비스에 맞게 조정할 수 있습니다. 모든 항목은 선택 사항이며, 지정하지 않으면 기본값이 유지됩니다. 마운트 옵션으로 한 번에 지정하거나, 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,    // 페이지 썸네일 패널
      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`
`pageNav`	페이지 이동 버튼·페이지 표시	`true`
`zoom`	줌 인/아웃·배율 표시	`true`
`orientation`	가로/세로 방향 전환	`true`
`undoRedo`	실행 취소 / 다시 실행	`true`
`history`	이력(다중 사용자 레이어) 패널	`true`
`save`	내장 저장 버튼	`true`

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

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 렌더 전에 적용되므로 초기 화면부터 브랜드가 입혀진 상태로 표시됩니다.