# 시작하기

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

Source: https://82label.app/docs/getting-started/

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

```js
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. [디자이너](https://82label.app/designer/)를 열고 용지를 고릅니다: 롤 크기(예: 50×30), [폼텍 시트](https://82label.app/templates/), 택배 송장.
2. 글자·바코드·QR·이미지·선·박스를 놓습니다. 바뀌는 값은 `{{name}}` 처럼 중괄호 두 개로 적습니다([필드](https://82label.app/docs/fields/)).
3. **코드 받기**에서 서식 JSON 이 들어간 코드를 복사하거나, 로그인해서 **저장**하고 서식 ID(`lbl_…`)로 부릅니다.

## 2. 내 사이트에 붙이기

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

```html
<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 을 쓰는 프로젝트라면:

```sh
npm i @82label/core
```

```js
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 출력 프로그램](https://82label.app/docs/agent/)이 있으면 인쇄 창 없이 바로 라벨프린터로 보내고, 없으면 브라우저 인쇄 창을 엽니다. 두 경우 모두 같은 그림이 같은 mm 크기로 나옵니다.

> 브라우저 인쇄 창에서는 **배율 100%(실제 크기)**, **여백 없음**, 용지는 라벨 크기(롤) 또는 A4(시트)로 두세요. 82label 이 `@page` 크기를 지정하므로 대부분 기본값 그대로 맞습니다.

## 다음 단계

- [서식 JSON](https://82label.app/docs/template/): 요소 종류와 좌표
- [롤 라벨](https://82label.app/docs/roll/) · [폼텍 시트](https://82label.app/docs/sheets/) · [택배 송장](https://82label.app/docs/couriers/)
- [바코드](https://82label.app/docs/barcodes/) · [QR](https://82label.app/docs/qr/)
- [인쇄](https://82label.app/docs/printing/) · [출력 프로그램 설치와 연결](https://82label.app/docs/agent/)