출고 라벨
라벨 프린터로 뽑는 작은 출고 라벨을 만듭니다. 용지 크기와 방향, Code 128 바코드, 그리고 PDF 대신 PNG 로 받는 법을 배웁니다.
여기서 배우는 것
편집기로 만들기
- 용지를 A5 가로로 두고 여백을 12px 로 줄입니다. 라벨은 종이가 곧 라벨이므로 여백이 크면 인쇄 면적을 잃습니다.
- 방향은 크기 뒤에 적용됩니다 — a5 + landscape 는 가로로 긴 A5 입니다.
- QR·바코드를 넣고 종류를 Code 128 로 고릅니다. 물류 라벨은 스캐너가 한 줄로 훑으므로 1차원 바코드가 맞습니다.
- 바코드는 가로로 길게, 높이는 넉넉히 잡습니다. 상자 비율이 무너지면 스캐너가 못 읽습니다.
- 주문번호와 목적지를 큼직하게 적습니다. 라벨은 사람이 1미터 밖에서 읽는 문서입니다.
스키마 · API 로 만들기
- page.size 와 page.orientation 이 용지를 정합니다. a4 · a5 · letter · legal 을 쓸 수 있습니다.
- code 노드는 props.text 를 인코딩합니다. codeKind 로 종류를 정하고, ecc 는 QR 에만 뜻이 있습니다.
- format 을 "png" 로 두면 그림으로 받습니다. 라벨 프린터 소프트웨어는 대개 그림을 더 잘 다룹니다.
- 그림에는 페이지가 없습니다. 인쇄하면 세 장이 될 문서는 한 장의 긴 그림이 되고, 머리글·바닥글·쪽번호도 없습니다.
완성 문서
아래 JSON 이 위 두 순서가 만드는 바로 그 문서입니다. 저희 테스트가 이 문서를 검증하고 경고 없이 렌더되는지 확인하므로, 그대로 붙여 넣어 쓰셔도 됩니다.
{
"v": 1,
"unit": "px",
"page": {
"size": "a5",
"orientation": "landscape",
"margin": {
"t": 12,
"r": 12,
"b": 12,
"l": 12
},
"header": "",
"footer": ""
},
"fonts": [],
"styles": [
{
"id": "s_big",
"fontFamily": "Liberation Sans",
"fontSize": 30,
"fontWeight": 700,
"italic": false,
"color": "#111111",
"bg": "transparent",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
},
{
"id": "s_l",
"fontFamily": "Liberation Sans",
"fontSize": 13,
"fontWeight": 400,
"italic": false,
"color": "#222222",
"bg": "transparent",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
},
{
"id": "s_cap",
"fontFamily": "Liberation Sans",
"fontSize": 10,
"fontWeight": 400,
"italic": false,
"color": "#666666",
"bg": "transparent",
"align": "center",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
}
],
"nodes": [
{
"id": "n_dest",
"parent": "",
"order": 0,
"type": "label",
"x": 0,
"y": 0,
"w": 400,
"h": 40,
"show": "",
"styleId": "s_big",
"props": {
"text": "{{ data.dest }}",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Destination"
},
{
"id": "n_order",
"parent": "",
"order": 1,
"type": "label",
"x": 0,
"y": 46,
"w": 400,
"h": 22,
"show": "",
"styleId": "s_l",
"props": {
"text": "Order {{ data.order }} · {{ data.boxes }} boxes",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Order"
},
{
"id": "n_code",
"parent": "",
"order": 2,
"type": "code",
"x": 0,
"y": 86,
"w": 500,
"h": 110,
"show": "",
"styleId": "s_l",
"props": {
"text": "{{ data.barcode }}",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "code128",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Barcode"
},
{
"id": "n_code_l",
"parent": "",
"order": 3,
"type": "label",
"x": 0,
"y": 200,
"w": 500,
"h": 16,
"show": "",
"styleId": "s_cap",
"props": {
"text": "{{ data.barcode }}",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Barcode digits"
}
]
}요청 본문입니다. template 자리에 위 문서를, data 자리에 아래 데이터를 넣습니다.
{
"template": "(the document above)",
"data": {
"dest": "Suwon DC 3",
"order": "SO-2026-8841",
"boxes": 3,
"barcode": "SO20268841"
},
"format": "png"
}