82label
내 서식English시작하기

문서 › 시작

시작하기

서식을 만들고 내 사이트에서 첫 라벨을 인쇄합니다.

82label 은 라벨 서식(JSON)과 그 서식을 인쇄하는 라이브러리입니다. 서식은 디자이너에서 mm 단위로 그리고, 내 사이트에서는 Label82.print(서식, 데이터) 한 줄로 인쇄합니다. 라이브러리는 의존성이 없고 MIT 라이선스입니다.

실제 라이브러리로 그린 예제

이 예제의 코드

const template = {
  v: 1,
  name: '상품 바코드 50×30',
  paper: { kind: 'roll', dpi: 203 },
  label: { width: 50, height: 30 },
  elements: [
    { type: 'text', x: 2.5, y: 2, w: 45, h: 6, text: '{{name}}', size: 9, bold: true, fit: 'shrink' },
    { type: 'text', x: 2.5, y: 8, w: 45, h: 4, text: '{{price}}', size: 8 },
    { type: 'barcode', x: 2.5, y: 13, w: 45, h: 15, format: 'code128', value: '{{sku}}' },
  ],
};

const rows = [
  { name: '무선 이어폰 프로', price: '39,000원', sku: 'EP-2026-0412' },
  { name: '고속 충전 케이블 1m', price: '9,900원', sku: 'CB-1M-0007' },
];

Label82.print(template, rows);

위 라벨은 실제 라이브러리로 그린 것입니다. 이 예제 인쇄를 누르면 브라우저 인쇄 창이 50×30mm 용지로 열립니다. 데이터 두 줄이 라벨 두 장이 됩니다.

1. 서식 만들기

  1. 디자이너를 열고 용지를 고릅니다: 롤 크기(예: 50×30), 폼텍 시트, 택배 송장.
  2. 글자·바코드·QR·이미지·선·박스를 놓습니다. 바뀌는 값은 {{name}} 처럼 중괄호 두 개로 적습니다(필드).
  3. 코드 받기에서 서식 JSON 이 들어간 코드를 복사하거나, 로그인해서 저장하고 서식 ID(lbl_…)로 부릅니다.

2. 내 사이트에 붙이기

빌드 도구가 없는 화면이라면 스크립트 한 줄이면 됩니다. 전역 Label82 가 생기고 <label-82> 태그도 등록됩니다.

<script src="https://82label.app/cdn/v0.2.0/82label.min.js"></script>

<button id="print">라벨 인쇄</button>
<script>
  const template = {
    v: 1,
    name: '상품 바코드 50×30',
    paper: { kind: 'roll', dpi: 203 },
    label: { width: 50, height: 30 },
    elements: [
      { type: 'text', x: 2.5, y: 2, w: 45, h: 6, text: '{{name}}', size: 9, bold: true, fit: 'shrink' },
      { type: 'text', x: 2.5, y: 8, w: 45, h: 4, text: '{{price}}', size: 8 },
      { type: 'barcode', x: 2.5, y: 13, w: 45, h: 15, format: 'code128', value: '{{sku}}' },
    ],
  };

  document.getElementById('print').onclick = () =>
    Label82.print(template, [
      { name: '무선 이어폰 프로', price: '39,000원', sku: 'EP-2026-0412' },
      { name: '고속 충전 케이블 1m', price: '9,900원', sku: 'CB-1M-0007' },
    ]);
</script>

npm 을 쓰는 프로젝트라면:

npm i @82label/core
import { print } from '@82label/core';
import template from './labels/product.json'; // 디자이너에서 받은 서식 JSON

async function printLabels(orders) {
  const rows = orders.map((o) => ({ name: o.productName, price: o.priceText, sku: o.sku }));
  const result = await print(template, rows);
  // result.via: 'agent'(출력 프로그램) 또는 'browser'
  return result;
}

3. 인쇄 방식

print() 는 기본(mode: 'auto')으로 PC 에 82label 출력 프로그램이 있으면 인쇄 창 없이 바로 라벨프린터로 보내고, 없으면 브라우저 인쇄 창을 엽니다. 두 경우 모두 같은 그림이 같은 mm 크기로 나옵니다.

다음 단계