브라우저에서 CSV 데이터 1,000개 이상을 완전하게 처리하는 대량 바코드 생성기를 만든 방법
Source: Dev.to
만약 전자상거래 스토어를 설정하는 데 누군가를 도와본 적이 있다면, 디지털 부분은 쉽다는 것을 알 수 있습니다. 물리적인 물류는? 바로 여기서 두통이 시작됩니다.
최근에 저는 소규모 기업, 창고 관리자, 그리고 Amazon FBA 판매자들에게 큰 고통을 주는 문제를 발견했습니다: 물리적인 재고 라벨을 인쇄하고 바코드를 생성하는 일. 현재 소프트웨어 환경은 답답합니다. 다음 중 하나를 선택해야만 합니다:
- 구식이면서 무거운 엔터프라이즈 데스크톱 소프트웨어에 **$100+**를 지불하기.
- 간단한 Shopify/WooCommerce 플러그인에 $10 / 월을 지불하기.
- 온라인 생성기를 사용해 민감한 고객 및 재고 CSV 데이터를 그들의 서버에 업로드하도록 강요받기.
2026년이라면 바코드 생성에 서버가 필요할 합당한 이유가 없다는 것을 깨달았습니다. 최신 브라우저는 무거운 데이터 처리를 충분히 수행할 수 있기 때문에, 저는 100 % 클라이언트‑사이드 대안을 만들었습니다: BarcodX.
핵심 철학: “Local‑First” 아키텍처
목표는 간단했습니다: 서버‑사이드 처리 제로. 사용자가 재고 목록을 업로드하면 그 데이터는 사용자의 기기에 머무르며 100 % 데이터 프라이버시를 보장하고, 무거운 PDF 파일을 생성하는 데 드는 서버 호스팅 비용을 없앱니다.
브라우저 내 CSV 파싱
브라우저에서 1,000 + 행의 CSV를 처리하려면 메모리 관리에 신경을 써야 합니다. 메인 스레드에서 모든 것을 파싱하면 UI가 멈춥니다.
- 앱은 File API(
FileReader)를 통해 PapaParse와 같은 효율적인 클라이언트‑사이드 파싱을 사용합니다. - SKU, 가격, 제품명 등 컬럼을 즉시 매핑해 구조화된 데이터를 로컬 상태에 저장합니다.
- HTTP 업로드/다운로드 지연이 없기 때문에 수천 행을 파싱하는 데도 불과 몇 밀리초가 걸립니다.
클라이언트‑사이드 바코드 렌더링
데이터가 구조화되면 다음 단계는 실제 바코드(코드 128, UPC‑A, EAN‑13, QR 코드 등)를 생성하는 것입니다.
- 외부 API를 호출하는 대신 BarcodX는 HTML5
<canvas>요소나 SVG에 직접 바코드를 그립니다. - SVG와 Canvas 그래픽은 무한히 확대가 가능하므로, 사용자가 드래그‑앤‑드롭 편집기에서 라벨 크기를 조정해도 바코드는 선명하게 유지됩니다—픽셀화나 열 프린터에서 흐릿한 선이 나타나지 않습니다.
브라우저 내 PDF 생성
사용자는 특정 프린터(예: Rollo 열 프린터 또는 Avery 5160 스티커 시트)에 맞게 완벽하게 포맷된 PDF가 필요합니다. 수천 개의 고해상도 이미지를 포함한 다중 페이지 PDF를 생성하면 메모리 제한 때문에 브라우저 탭이 쉽게 크래시될 수 있습니다.
렌더링 파이프라인은 최적화되었습니다:
- 선택한 템플릿을 기준으로 정확한 치수를 계산합니다.
- 파싱된 CSV 데이터를 순회하면서 사용자 정의 라벨 디자인(텍스트 + 바코드 + 로고)을 스테이징 영역에 렌더링합니다.
- 이러한 요소들을 압축하고 jsPDF와 같은 라이브러리를 사용해 클라이언트‑사이드 PDF 문서에 직접 기록합니다.
- 최종 파일은 브라우저 다운로드로 바로 트리거됩니다.
결과: Export 버튼을 클릭하면 50페이지짜리 인쇄‑준비 PDF가 즉시 생성되며, 전 과정이 디바이스 CPU만을 사용합니다.
물리적인 재고를 다루고 있거나 클라이언트‑사이드 렌더링을 직접 확인하고 싶다면, barcodx.com에서 무료로 테스트해 보세요.