🖨️ 영수증 프린터 원격 인쇄 프로그램 만들기

웹 푸시를 사용해서 할일 목록이나 일정을 원격으로 인쇄할 수 있다.

(오늘의 운세도 뽑을 수 있다)

시작점

• 긱뉴스 영수증 프린터가 내 미루는 버릇을 고쳐줌
• 영수증 프린터로 할 일 관리 - 프린터 준비

위 글을 보고 언젠가 영수증 프린터를 사야겠다고 생각했다.

왜 만들었는가

최근에 코딩하는데 집중하다 보니 스마트폰 알림을 놓쳐서 미팅에 늦는 경우가 생겼는데

물리적으로 알림을 받을 수 있으면 미팅에 안 늦을 거 같아서 만들었다.

라고 왜 만들었냐는 질문에 대답하고 있지만

사실은 그냥 만드는 거 자체가 즐거워서 만들었다.

프린터 구매하기

빅솔론 B300 영수증프린터

어댑터 포함 63000원에 구매했다.

빅솔론 프린터가 국내에서 판매하는 프린터 중 드물게 맥용 드라이버를 지원한다.

프린터 드라이버 설치

빅솔론 B300 소프트웨어 다운로드 센터에서 운영체제에 맞는 드라이버를 설치하면 된다.

맥의 경우

1. 드라이버를 설치
2. 설정 > 프린터 및 스캐너 > 프린터, 스캐너 또는 팩스 추가 버튼
3. Bixolon 프린터 선택 > 사용 > 소프트웨어 선택 > B300 검색 후 드라이버를 선택하면 된다.

이때 이름은 bix처럼 짧게 짓는 게 나중에 터미널이나 SDK에서 사용하기 편하다.

CLI에서 간단한 사용법

드라이버를 설치하고 나면 프린터 상태를 lpstat 명령어로 확인할 수 있다.

$ lpstat -p
bix 프린터가 대기 중입니다.  Fri Dec  5 01:58:04 2025 이후에 활성화됨

텍스트를 euc-kr로 인코딩하고 프린터에 입력하면 실제로 출력된다.

$ echo -e "안녕하세요\\n\\n\\n\\x1D\\x56\\x41" | iconv -f UTF-8 -t EUC-KR | lp -d bix

더 유용해지기 위해선

스마트폰, 슬랙, 웹훅 등등 맥북 외부 어디서든 프린터를 출력할 수 있어야 한다.

슬랙 명령어를 입력하면 프린터에 그대로 출력되고

회의가 시작할 때가 되면 구글 캘린더 일정 정보를 출력되게 하고 싶었다.

WebPrint SDK

빅솔론 프린터가 좋은 게 윈도우, 맥, 웹 등 각종 환경에서 쓸 수 있는 SDK를 제공한다.

SDK를 설치하고 프린터를 연결하면 localhost:18080 주소로 서버가 실행되는데

텍스트, 바코드 출력, 종이 커팅 등등 명령어를 API 요청으로 전송하면 프린터에 전달된다.

SDK 설정 & 테스트

로그인 시 자동 실행 ON, https 대신 http 연결을 위해 SSL 인증서 사용은 OFF했다.

아래 테스트 페이지에서 프린터 이름을 입력하고

출력 버튼을 클릭하면 영수증, 바코드, 그림 등등이 출력되는 걸 확인할 수 있다.

https://bixolon.com/common/WebPrintSDK/Sample_PosPrinter.html

SDK 간단 사용법

프린터 SDK 서버와 통신을 쉽게 도와주는 JS 코드가 있다.

Software Web Print SDK Sample 을 다운로드하면 js 폴더에 위치해있다.

사용법은 다음과 같다. 간단한 텍스트를 출력하고 영수증 종이를 자른다.

var issueID = 1;

// 각 인쇄 작업마다 고유 ID를 부여한다.
setPosId(issueID);

// 프린터 상태를 확인한다. 프린터가 꺼져있으면 에러가 난다.
checkPrinterStatus();

// 텍스트, 높이, 너비, 볼드 여부, 양각/음각, 밑줄, 폰트 타입, 왼쪽/오른쪽/가운데 정렬을 설정해서 출력한다.
printText("Hello World!\n", 0, 0, false, false, false, 0, 1);

// 종이가 잘린다.
cutPaper(1);

// 큐에 쌓인 명령어 데이터를 가져오고 큐를 비운다.
var strSubmit = getPosData();

// 다음 인쇄 작업을 위해 ID를 바꿔준다.
issueID++;

// 프린터로 명령을 보낸다.
requestPrint("bix", strSubmit, function (result) {
  console.log("Print result:", result);
});

한글이 안 나온다..? EUC-KR 인코딩하기

SDK의 printText() 함수로 영어는 잘 출력되는데 한글은 인코딩이 깨져서 외계 문자로 나온다.

iconv-lite를 사용해서 유니코드를 euc-kr(CP949) 형식으로 인코딩을 해야 한다.

yarn을 쓴다면 buffer 패키지도 추가로 설치해야 브라우저에서 런타임 에러가 안 난다.

인코딩한 hex 문자열을 SDK의 directPrintHex() 함수에 넣어주면 한글이 잘 출력된다.

import iconv from "iconv-lite";
import { Buffer } from "buffer";

function encodeToCP949String(text: string): string {
  const buffer = iconv.encode(text, "cp949");
  return Buffer.from(buffer).toString("hex");
}

function print(text) {
  //...

  const encodedText = encodeToCP949String(text);
  directPrintHex(encodedText);

  //...
}

커서 에이전트로 텍스트 입력을 받아 버튼 클릭 시 print()를 출력하는 UI를 만들어 달라고 하면

간단히 쓸 수 있는 프린터 GUI 완성이다.

외부에서 이벤트 수신하기, 웹 푸시

외부에서 맥 로컬에 떠있는 프린터 SDK 서버 통신할 방법이 필요하다.

그래야 슬랙이나 구글 캘린더 이벤트와 연동할 수 있다.

맥의 로컬 포트를 공개하는 건 보안상 문제가 있고,

별도 서버에 데이터를 쌓아두고 N초마다 폴링 하는 건 비효율적이다.

예전에 수강신청 알림 만들 때 썼던 웹 푸시가 떠올랐다.

웹 푸시를 사용하면, 외부에서 구글 푸시 서버를 거쳐 맥 크롬 브라우저로 직접 통신이 가능하다.

웹 푸시 사용법

web-push npm 패키지를 사용하면 쉬워진다.

안전하게 푸시 데이터를 암호화해서 전송하기 위해 랜덤 문자열을 5개나 생성해야 하는데

하나하나 다 이해할 필요는 없고 키에 맞는 값만 잘 입력해 주면 된다.

웹 푸시 프로토콜 글에 각 키에 대한 설명이 잘 나와있다.

1. VAPID 생성하기

VAPID(Voluntary Application Server Identification)는 서버가 클라이언트에게 푸시 메시지를 보낼 때 자신을 식별하는 표준 규격이라고 한다.

npm i -g web-push로 web-push 패키지를 설치하고

아래 명령어를 실행하면 공개키, 비밀키가 생성된다.

> web-push generate-vapid-keys --json
> {"publicKey":"AAAAAAAAAA","privateKey":"BBBBBBBBBB"}

2. 푸시 구독하기

브라우저에서 알림 권한을 얻고 서비스 워커를 등록해서 알림을 구독한다.

이때 applicationServerKey에 위에서 생성한 공개키를 넣어준다.

// 1. 브라우저 알림 권한 얻기
await Notification.requestPermission();

// 서비스 워커 등록하기
const registration = await navigator.serviceWorker.register("/sw.js");

// 웹 푸시 구독하기
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: "AAAAAAAAAA",
});

console.log(subscription.toJSON());

구독 정보는 값을 3개 반환한다.

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/CCCCCCCCCC",
  "expirationTime": null,
  "keys": {
    "p256dh": "DDDDDDDDDD",
    "auth": "EEEEEEEEEE"
  }
}

3. 푸시 보내기

터미널에서 생성한 VAPID 키와 브라우저에서 반환한 구독 정보가 있으면

아래 명령어로 푸시를 보낼 수 있다.

web-push send-notification  \
  --vapid-subject=mailto:example@test.com \
  --vapid-pubkey=AAAAAAAAAA \
  --vapid-pvtkey=BBBBBBBBBB \
  --endpoint=https://fcm.googleapis.com/fcm/send/CCCCCCCCCC \
  --key=DDDDDDDDDD \
  --auth=EEEEEEEEEE \
  --payload=안녕하세요

혹은 노드 서버에서 이렇게 작성할 수 있다.

import webpush from "web-push";

webpush.setVapidDetails(
  "mailto:example@test.com",
  "AAAAAAAAAA", // VAPID PUBLIC KEY
  "BBBBBBBBBB" // VAPID PRIVATE KEY
);

const subscription = {
  endpoint: "https://fcm.googleapis.com/fcm/send/CCCCCCCCCC",
  keys: {
    p256dh: "DDDDDDDDDD",
    auth: "EEEEEEEEEE",
  },
};

webpush.sendNotification(subscription, message);

4. 푸시 받기

서비스 워커(sw.js)에 푸시 이벤트 핸들러를 등록해놓으면 웹 푸시로 보낸 정보를 받을 수 있다.

self.addEventListener("push", (event) => {
  const text = event.data.text();

  console.log("푸시로 받은 텍스트: ", text);
});

푸시를 받으면 프린터 SDK 서버로 인쇄 요청을 보내면 된다.

서비스 워커의 좋은 점

웹 페이지가 닫혀있어도, 심지어 맥북이 잠금 상태일 때도

WIFI가 연결되어 있고 크롬이 완전히 꺼진 상태만 아니라면 푸시를 받아서 명령을 실행할 수 있다.

서비스 워커에서 SDK 서버로 인쇄 요청 보내기

대신 서비스 워커를 사용할 땐 제약이 있다.

문제 1: JS SDK가 서비스 워커에서 지원하지 않는 XMLHttpRequest를 사용한다.

→ 커서 에이전트에게 fetch를 사용하도록 재작성해달라고 한다.

문제 2: 한글 인코딩을 위한 iconv-lite 패키지를 쓰기가 어렵다. 간단히 euc-kr 인코딩을 해주는 패키지가 검색해도 안 나온다.

→ 커서 에이전트에게 euc-kr 인코딩 함수를 작성해달라고 하고, vitest를 설치해 주고 테스트해가면서 틀린 부분을 스스로 파악하고 수정하도록 한다.

푸시 구독 데이터 동기화를 위한 서버 작업

푸시 구독 데이터가 가끔 만료될 때가 있다.

그때마다 구독 데이터를 콘솔에 출력해서 다시 서버 환경 변수에 넣어주기 귀찮으므로

어딘가에 저장해서 가져다 써야 한다.

k8s PV와 sqlite를 쓰거나, 별도 DB 서버를 사용할 수 있지만

성능이 중요하지 않고 데이터도 간단하므로 깃헙 비공개 레포를 파서 JSON 파일을 통째로 저장했다.

전체 구조

인쇄 요청을 보내면 푸시를 보내는 API들을 만들면 끝이다.

전체 구조는 다음과 같다.

zapier, 슬랙에서 웹훅을 통해 메시지를 보내면

노드 서버가 구글 푸시 서버에 전달해 주고

크롬 브라우저 백그라운드에 실행되고 있는 서비스 워커가 프린터 SDK에 인쇄 요청을 보낸다.

사용 사례

미팅 2분 전에 프린트 출력하기

zapier에 구글 캘린더를 연동해서 회의 2분 전에 웹훅을 전송하도록 설정한다.

덕분에 회의 잘 안 늦는다.

레이캐스트로 바로 출력하기

레이캐스트에서 바로 메모를 출력한다.

오늘의 운세

버튼을 누르면 오늘의 운세가 나오게 했다.

회사 사람들에게 프린터 출력 권한을 열어봤다

슬랙에 print_yj 텍스트를 입력하면 프린터에서 텍스트가 인쇄되도록 했다.

그랬더니

이상한 사람도 있고 (차단했다)

보통은 이런 거 보낸다.

코드리뷰 요청도 보낸다.

사장님도 일 열심히 하라고 격려의 말씀을 보내셨다

이름으로 삼행시 보내는 사람도 있다

이상한 사람 차단한 거 걸렸다. 다시 풀어줬다.

마무리

• AI 에이전트 덕분에 시도할 수 있는 프로젝트가 점점 늘어난다. AI랑 싸우지 말고 열심히 이것저것 만들어봐야겠다.
• 이런 걸 뭐 하러 만들었냐며 약간 어이없이 하는 사람을 보는 게 즐겁다.