diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts
index 25df9f8d..0bf35e75 100644
--- a/backend-node/src/app.ts
+++ b/backend-node/src/app.ts
@@ -90,6 +90,7 @@ import externalCallConfigRoutes from "./routes/externalCallConfigRoutes";
 import dataflowExecutionRoutes from "./routes/dataflowExecutionRoutes";
 import dashboardRoutes from "./routes/dashboardRoutes";
 import reportRoutes from "./routes/reportRoutes";
+import barcodeLabelRoutes from "./routes/barcodeLabelRoutes";
 import openApiProxyRoutes from "./routes/openApiProxyRoutes"; // 날씨/환율 API
 import deliveryRoutes from "./routes/deliveryRoutes"; // 배송/화물 관리
 import riskAlertRoutes from "./routes/riskAlertRoutes"; // 리스크/알림 관리
@@ -278,6 +279,7 @@ app.use("/api/external-call-configs", externalCallConfigRoutes);
 app.use("/api/dataflow", dataflowExecutionRoutes);
 app.use("/api/dashboards", dashboardRoutes);
 app.use("/api/admin/reports", reportRoutes);
+app.use("/api/admin/barcode-labels", barcodeLabelRoutes);
 app.use("/api/open-api", openApiProxyRoutes); // 날씨/환율 외부 API
 app.use("/api/delivery", deliveryRoutes); // 배송/화물 관리
 app.use("/api/risk-alerts", riskAlertRoutes); // 리스크/알림 관리
diff --git a/backend-node/src/controllers/barcodeLabelController.ts b/backend-node/src/controllers/barcodeLabelController.ts
new file mode 100644
index 00000000..3159c4e0
--- /dev/null
+++ b/backend-node/src/controllers/barcodeLabelController.ts
@@ -0,0 +1,218 @@
+/**
+ * 바코드 라벨 관리 컨트롤러
+ * ZD421 등 바코드 프린터용 라벨 CRUD 및 레이아웃/템플릿
+ */
+
+import { Request, Response, NextFunction } from "express";
+import barcodeLabelService from "../services/barcodeLabelService";
+
+function getUserId(req: Request): string {
+  return (req as any).user?.userId || "SYSTEM";
+}
+
+export class BarcodeLabelController {
+  async getLabels(req: Request, res: Response, next: NextFunction) {
+    try {
+      const page = Math.max(1, parseInt((req.query.page as string) || "1", 10));
+      const limit = Math.min(100, Math.max(1, parseInt((req.query.limit as string) || "20", 10)));
+      const searchText = (req.query.searchText as string) || "";
+      const useYn = (req.query.useYn as string) || "Y";
+      const sortBy = (req.query.sortBy as string) || "created_at";
+      const sortOrder = (req.query.sortOrder as "ASC" | "DESC") || "DESC";
+
+      const data = await barcodeLabelService.getLabels({
+        page,
+        limit,
+        searchText,
+        useYn,
+        sortBy,
+        sortOrder,
+      });
+
+      return res.json({ success: true, data });
+    } catch (error) {
+      return next(error);
+    }
+  }
+
+  async getLabelById(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { labelId } = req.params;
+      const label = await barcodeLabelService.getLabelById(labelId);
+      if (!label) {
+        return res.status(404).json({
+          success: false,
+          message: "바코드 라벨을 찾을 수 없습니다.",
+        });
+      }
+      return res.json({ success: true, data: label });
+    } catch (error) {
+      return next(error);
+    }
+  }
+
+  async getLayout(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { labelId } = req.params;
+      const layout = await barcodeLabelService.getLayout(labelId);
+      if (!layout) {
+        return res.status(404).json({
+          success: false,
+          message: "레이아웃을 찾을 수 없습니다.",
+        });
+      }
+      return res.json({ success: true, data: layout });
+    } catch (error) {
+      return next(error);
+    }
+  }
+
+  async createLabel(req: Request, res: Response, next: NextFunction) {
+    try {
+      const body = req.body as {
+        labelNameKor?: string;
+        labelNameEng?: string;
+        description?: string;
+        templateId?: string;
+      };
+      if (!body?.labelNameKor?.trim()) {
+        return res.status(400).json({
+          success: false,
+          message: "라벨명(한글)은 필수입니다.",
+        });
+      }
+      const labelId = await barcodeLabelService.createLabel(
+        {
+          labelNameKor: body.labelNameKor.trim(),
+          labelNameEng: body.labelNameEng?.trim(),
+          description: body.description?.trim(),
+          templateId: body.templateId?.trim(),
+        },
+        getUserId(req)
+      );
+      return res.status(201).json({
+        success: true,
+        data: { labelId },
+        message: "바코드 라벨이 생성되었습니다.",
+      });
+    } catch (error) {
+      return next(error);
+    }
+  }
+
+  async updateLabel(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { labelId } = req.params;
+      const body = req.body as {
+        labelNameKor?: string;
+        labelNameEng?: string;
+        description?: string;
+        useYn?: string;
+      };
+      const success = await barcodeLabelService.updateLabel(
+        labelId,
+        {
+          labelNameKor: body.labelNameKor?.trim(),
+          labelNameEng: body.labelNameEng?.trim(),
+          description: body.description !== undefined ? body.description : undefined,
+          useYn: body.useYn,
+        },
+        getUserId(req)
+      );
+      if (!success) {
+        return res.status(404).json({
+          success: false,
+          message: "바코드 라벨을 찾을 수 없습니다.",
+        });
+      }
+      return res.json({ success: true, message: "수정되었습니다." });
+    } catch (error) {
+      return next(error);
+    }
+  }
+
+  async saveLayout(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { labelId } = req.params;
+      const layout = req.body as { width_mm: number; height_mm: number; components: any[] };
+      if (!layout || typeof layout.width_mm !== "number" || typeof layout.height_mm !== "number" || !Array.isArray(layout.components)) {
+        return res.status(400).json({
+          success: false,
+          message: "width_mm, height_mm, components 배열이 필요합니다.",
+        });
+      }
+      await barcodeLabelService.saveLayout(
+        labelId,
+        { width_mm: layout.width_mm, height_mm: layout.height_mm, components: layout.components },
+        getUserId(req)
+      );
+      return res.json({ success: true, message: "레이아웃이 저장되었습니다." });
+    } catch (error) {
+      return next(error);
+    }
+  }
+
+  async deleteLabel(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { labelId } = req.params;
+      const success = await barcodeLabelService.deleteLabel(labelId);
+      if (!success) {
+        return res.status(404).json({
+          success: false,
+          message: "바코드 라벨을 찾을 수 없습니다.",
+        });
+      }
+      return res.json({ success: true, message: "삭제되었습니다." });
+    } catch (error) {
+      return next(error);
+    }
+  }
+
+  async copyLabel(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { labelId } = req.params;
+      const newId = await barcodeLabelService.copyLabel(labelId, getUserId(req));
+      if (!newId) {
+        return res.status(404).json({
+          success: false,
+          message: "바코드 라벨을 찾을 수 없습니다.",
+        });
+      }
+      return res.json({
+        success: true,
+        data: { labelId: newId },
+        message: "복사되었습니다.",
+      });
+    } catch (error) {
+      return next(error);
+    }
+  }
+
+  async getTemplates(req: Request, res: Response, next: NextFunction) {
+    try {
+      const templates = await barcodeLabelService.getTemplates();
+      return res.json({ success: true, data: templates });
+    } catch (error) {
+      return next(error);
+    }
+  }
+
+  async getTemplateById(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { templateId } = req.params;
+      const template = await barcodeLabelService.getTemplateById(templateId);
+      if (!template) {
+        return res.status(404).json({
+          success: false,
+          message: "템플릿을 찾을 수 없습니다.",
+        });
+      }
+      const layout = JSON.parse(template.layout_json);
+      return res.json({ success: true, data: { ...template, layout } });
+    } catch (error) {
+      return next(error);
+    }
+  }
+}
+
+export default new BarcodeLabelController();
diff --git a/backend-node/src/routes/barcodeLabelRoutes.ts b/backend-node/src/routes/barcodeLabelRoutes.ts
new file mode 100644
index 00000000..ba580e7e
--- /dev/null
+++ b/backend-node/src/routes/barcodeLabelRoutes.ts
@@ -0,0 +1,41 @@
+import { Router } from "express";
+import barcodeLabelController from "../controllers/barcodeLabelController";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+const router = Router();
+
+router.use(authenticateToken);
+
+router.get("/", (req, res, next) =>
+  barcodeLabelController.getLabels(req, res, next)
+);
+router.get("/templates", (req, res, next) =>
+  barcodeLabelController.getTemplates(req, res, next)
+);
+router.get("/templates/:templateId", (req, res, next) =>
+  barcodeLabelController.getTemplateById(req, res, next)
+);
+router.post("/", (req, res, next) =>
+  barcodeLabelController.createLabel(req, res, next)
+);
+
+router.get("/:labelId", (req, res, next) =>
+  barcodeLabelController.getLabelById(req, res, next)
+);
+router.get("/:labelId/layout", (req, res, next) =>
+  barcodeLabelController.getLayout(req, res, next)
+);
+router.put("/:labelId", (req, res, next) =>
+  barcodeLabelController.updateLabel(req, res, next)
+);
+router.put("/:labelId/layout", (req, res, next) =>
+  barcodeLabelController.saveLayout(req, res, next)
+);
+router.delete("/:labelId", (req, res, next) =>
+  barcodeLabelController.deleteLabel(req, res, next)
+);
+router.post("/:labelId/copy", (req, res, next) =>
+  barcodeLabelController.copyLabel(req, res, next)
+);
+
+export default router;
diff --git a/backend-node/src/services/barcodeLabelService.ts b/backend-node/src/services/barcodeLabelService.ts
new file mode 100644
index 00000000..c5399cf9
--- /dev/null
+++ b/backend-node/src/services/barcodeLabelService.ts
@@ -0,0 +1,247 @@
+/**
+ * 바코드 라벨 관리 서비스
+ * ZD421 등 라벨 디자인 CRUD 및 기본 템플릿 제공
+ */
+
+import { v4 as uuidv4 } from "uuid";
+import { query, queryOne, transaction } from "../database/db";
+import { BarcodeLabelLayout } from "../types/barcode";
+
+export interface BarcodeLabelMaster {
+  label_id: string;
+  label_name_kor: string;
+  label_name_eng: string | null;
+  description: string | null;
+  width_mm: number;
+  height_mm: number;
+  layout_json: string | null;
+  use_yn: string;
+  created_at: string;
+  created_by: string | null;
+  updated_at: string | null;
+  updated_by: string | null;
+}
+
+export interface BarcodeLabelTemplate {
+  template_id: string;
+  template_name_kor: string;
+  template_name_eng: string | null;
+  width_mm: number;
+  height_mm: number;
+  layout_json: string;
+  sort_order: number;
+}
+
+export interface GetBarcodeLabelsParams {
+  page?: number;
+  limit?: number;
+  searchText?: string;
+  useYn?: string;
+  sortBy?: string;
+  sortOrder?: "ASC" | "DESC";
+}
+
+export interface GetBarcodeLabelsResult {
+  items: BarcodeLabelMaster[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export class BarcodeLabelService {
+  async getLabels(params: GetBarcodeLabelsParams): Promise<GetBarcodeLabelsResult> {
+    const {
+      page = 1,
+      limit = 20,
+      searchText = "",
+      useYn = "Y",
+      sortBy = "created_at",
+      sortOrder = "DESC",
+    } = params;
+
+    const offset = (page - 1) * limit;
+    const conditions: string[] = [];
+    const values: any[] = [];
+    let idx = 1;
+
+    if (useYn) {
+      conditions.push(`use_yn = $${idx++}`);
+      values.push(useYn);
+    }
+    if (searchText) {
+      conditions.push(`(label_name_kor LIKE $${idx} OR label_name_eng LIKE $${idx})`);
+      values.push(`%${searchText}%`);
+      idx++;
+    }
+    const where = conditions.length ? `WHERE ${conditions.join(" AND ")}` : "";
+
+    const countSql = `SELECT COUNT(*) as total FROM barcode_labels ${where}`;
+    const countRow = await queryOne<{ total: string }>(countSql, values);
+    const total = parseInt(countRow?.total || "0", 10);
+
+    const listSql = `
+      SELECT label_id, label_name_kor, label_name_eng, description, width_mm, height_mm,
+             layout_json, use_yn, created_at, created_by, updated_at, updated_by
+      FROM barcode_labels ${where}
+      ORDER BY ${sortBy} ${sortOrder}
+      LIMIT $${idx++} OFFSET $${idx}
+    `;
+    const items = await query<BarcodeLabelMaster>(listSql, [...values, limit, offset]);
+
+    return { items, total, page, limit };
+  }
+
+  async getLabelById(labelId: string): Promise<BarcodeLabelMaster | null> {
+    const sql = `
+      SELECT label_id, label_name_kor, label_name_eng, description, width_mm, height_mm,
+             layout_json, use_yn, created_at, created_by, updated_at, updated_by
+      FROM barcode_labels WHERE label_id = $1
+    `;
+    return queryOne<BarcodeLabelMaster>(sql, [labelId]);
+  }
+
+  async getLayout(labelId: string): Promise<BarcodeLabelLayout | null> {
+    const row = await this.getLabelById(labelId);
+    if (!row?.layout_json) return null;
+    try {
+      return JSON.parse(row.layout_json) as BarcodeLabelLayout;
+    } catch {
+      return null;
+    }
+  }
+
+  async createLabel(
+    data: { labelNameKor: string; labelNameEng?: string; description?: string; templateId?: string },
+    userId: string
+  ): Promise<string> {
+    const labelId = `LBL_${uuidv4().replace(/-/g, "").substring(0, 20)}`;
+    let widthMm = 50;
+    let heightMm = 30;
+    let layoutJson: string | null = null;
+
+    if (data.templateId) {
+      const t = await this.getTemplateById(data.templateId);
+      if (t) {
+        widthMm = t.width_mm;
+        heightMm = t.height_mm;
+        layoutJson = t.layout_json;
+      }
+    }
+    if (!layoutJson) {
+      const defaultLayout: BarcodeLabelLayout = {
+        width_mm: widthMm,
+        height_mm: heightMm,
+        components: [],
+      };
+      layoutJson = JSON.stringify(defaultLayout);
+    }
+
+    await query(
+      `INSERT INTO barcode_labels (label_id, label_name_kor, label_name_eng, description, width_mm, height_mm, layout_json, use_yn, created_by)
+       VALUES ($1, $2, $3, $4, $5, $6, $7, 'Y', $8)`,
+      [
+        labelId,
+        data.labelNameKor,
+        data.labelNameEng || null,
+        data.description || null,
+        widthMm,
+        heightMm,
+        layoutJson,
+        userId,
+      ]
+    );
+    return labelId;
+  }
+
+  async updateLabel(
+    labelId: string,
+    data: { labelNameKor?: string; labelNameEng?: string; description?: string; useYn?: string },
+    userId: string
+  ): Promise<boolean> {
+    const setClauses: string[] = [];
+    const values: any[] = [];
+    let idx = 1;
+    if (data.labelNameKor !== undefined) {
+      setClauses.push(`label_name_kor = $${idx++}`);
+      values.push(data.labelNameKor);
+    }
+    if (data.labelNameEng !== undefined) {
+      setClauses.push(`label_name_eng = $${idx++}`);
+      values.push(data.labelNameEng);
+    }
+    if (data.description !== undefined) {
+      setClauses.push(`description = $${idx++}`);
+      values.push(data.description);
+    }
+    if (data.useYn !== undefined) {
+      setClauses.push(`use_yn = $${idx++}`);
+      values.push(data.useYn);
+    }
+    if (setClauses.length === 0) return false;
+    setClauses.push(`updated_at = CURRENT_TIMESTAMP`);
+    setClauses.push(`updated_by = $${idx++}`);
+    values.push(userId);
+    values.push(labelId);
+
+    const updated = await query<{ label_id: string }>(
+      `UPDATE barcode_labels SET ${setClauses.join(", ")} WHERE label_id = $${idx} RETURNING label_id`,
+      values
+    );
+    return updated.length > 0;
+  }
+
+  async saveLayout(labelId: string, layout: BarcodeLabelLayout, userId: string): Promise<boolean> {
+    const layoutJson = JSON.stringify(layout);
+    await query(
+      `UPDATE barcode_labels SET width_mm = $1, height_mm = $2, layout_json = $3, updated_at = CURRENT_TIMESTAMP, updated_by = $4 WHERE label_id = $5`,
+      [layout.width_mm, layout.height_mm, layoutJson, userId, labelId]
+    );
+    return true;
+  }
+
+  async deleteLabel(labelId: string): Promise<boolean> {
+    const deleted = await query<{ label_id: string }>(
+      `DELETE FROM barcode_labels WHERE label_id = $1 RETURNING label_id`,
+      [labelId]
+    );
+    return deleted.length > 0;
+  }
+
+  async copyLabel(labelId: string, userId: string): Promise<string | null> {
+    const row = await this.getLabelById(labelId);
+    if (!row) return null;
+    const newId = `LBL_${uuidv4().replace(/-/g, "").substring(0, 20)}`;
+    await query(
+      `INSERT INTO barcode_labels (label_id, label_name_kor, label_name_eng, description, width_mm, height_mm, layout_json, use_yn, created_by)
+       VALUES ($1, $2 || ' (복사)', $3, $4, $5, $6, $7, 'Y', $8)`,
+      [
+        newId,
+        row.label_name_kor,
+        row.label_name_eng,
+        row.description,
+        row.width_mm,
+        row.height_mm,
+        row.layout_json,
+        userId,
+      ]
+    );
+    return newId;
+  }
+
+  async getTemplates(): Promise<BarcodeLabelTemplate[]> {
+    const sql = `
+      SELECT template_id, template_name_kor, template_name_eng, width_mm, height_mm, layout_json, sort_order
+      FROM barcode_label_templates ORDER BY sort_order, template_id
+    `;
+    const rows = await query<BarcodeLabelTemplate>(sql);
+    return rows || [];
+  }
+
+  async getTemplateById(templateId: string): Promise<BarcodeLabelTemplate | null> {
+    const sql = `SELECT template_id, template_name_kor, template_name_eng, width_mm, height_mm, layout_json, sort_order
+                 FROM barcode_label_templates WHERE template_id = $1`;
+    return queryOne<BarcodeLabelTemplate>(sql, [templateId]);
+  }
+}
+
+export default new BarcodeLabelService();
diff --git a/backend-node/src/types/barcode.ts b/backend-node/src/types/barcode.ts
new file mode 100644
index 00000000..19f3b31d
--- /dev/null
+++ b/backend-node/src/types/barcode.ts
@@ -0,0 +1,61 @@
+/**
+ * 바코드 라벨 백엔드 타입
+ */
+
+export interface BarcodeLabelComponent {
+  id: string;
+  type: "text" | "barcode" | "image" | "line" | "rectangle";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  zIndex: number;
+  // text
+  content?: string;
+  fontSize?: number;
+  fontColor?: string;
+  fontWeight?: string;
+  // barcode
+  barcodeType?: string;
+  barcodeValue?: string;
+  showBarcodeText?: boolean;
+  // image
+  imageUrl?: string;
+  objectFit?: string;
+  // line/rectangle
+  lineColor?: string;
+  lineWidth?: number;
+  backgroundColor?: string;
+}
+
+export interface BarcodeLabelLayout {
+  width_mm: number;
+  height_mm: number;
+  components: BarcodeLabelComponent[];
+}
+
+export interface BarcodeLabelRow {
+  label_id: string;
+  label_name_kor: string;
+  label_name_eng: string | null;
+  description: string | null;
+  width_mm: number;
+  height_mm: number;
+  layout_json: string | null;
+  use_yn: string;
+  created_at: string;
+  created_by: string | null;
+  updated_at: string | null;
+  updated_by: string | null;
+}
+
+export interface BarcodeLabelTemplateRow {
+  template_id: string;
+  template_name_kor: string;
+  template_name_eng: string | null;
+  width_mm: number;
+  height_mm: number;
+  layout_json: string;
+  sort_order: number;
+  created_at: string;
+}
diff --git a/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx b/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx
new file mode 100644
index 00000000..8d55ca5c
--- /dev/null
+++ b/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { BarcodeDesignerToolbar } from "@/components/barcode/designer/BarcodeDesignerToolbar";
+import { BarcodeDesignerLeftPanel } from "@/components/barcode/designer/BarcodeDesignerLeftPanel";
+import { BarcodeDesignerCanvas } from "@/components/barcode/designer/BarcodeDesignerCanvas";
+import { BarcodeDesignerRightPanel } from "@/components/barcode/designer/BarcodeDesignerRightPanel";
+import { BarcodeDesignerProvider } from "@/contexts/BarcodeDesignerContext";
+
+export default function BarcodeLabelDesignerPage() {
+  const params = useParams();
+  const labelId = (params.labelId as string) || "new";
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <BarcodeDesignerProvider labelId={labelId}>
+        <div className="flex h-screen flex-col overflow-hidden bg-gray-50">
+          <BarcodeDesignerToolbar />
+          <div className="flex flex-1 overflow-hidden">
+            <BarcodeDesignerLeftPanel />
+            <BarcodeDesignerCanvas />
+            <BarcodeDesignerRightPanel />
+          </div>
+        </div>
+      </BarcodeDesignerProvider>
+    </DndProvider>
+  );
+}
diff --git a/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx b/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx
new file mode 100644
index 00000000..914e111a
--- /dev/null
+++ b/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { BarcodeListTable } from "@/components/barcode/BarcodeListTable";
+import { Plus, Search, RotateCcw } from "lucide-react";
+import { useBarcodeList } from "@/hooks/useBarcodeList";
+
+export default function BarcodeLabelManagementPage() {
+  const router = useRouter();
+  const [searchText, setSearchText] = useState("");
+
+  const { labels, total, page, limit, isLoading, refetch, setPage, handleSearch } = useBarcodeList();
+
+  const handleSearchClick = () => {
+    handleSearch(searchText);
+  };
+
+  const handleReset = () => {
+    setSearchText("");
+    handleSearch("");
+  };
+
+  const handleCreateNew = () => {
+    router.push("/admin/screenMng/barcodeList/designer/new");
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="w-full max-w-none space-y-8 px-4 py-8">
+        <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">바코드 라벨 관리</h1>
+            <p className="mt-2 text-gray-600">ZD421 등 바코드 프린터용 라벨을 작성하고 출력합니다</p>
+          </div>
+          <Button onClick={handleCreateNew} className="gap-2">
+            <Plus className="h-4 w-4" />
+            새 라벨
+          </Button>
+        </div>
+
+        <Card className="shadow-sm">
+          <CardHeader className="bg-gray-50/50">
+            <CardTitle className="flex items-center gap-2">
+              <Search className="h-5 w-5" />
+              검색
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="flex gap-2">
+              <Input
+                placeholder="라벨명으로 검색..."
+                value={searchText}
+                onChange={(e) => setSearchText(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleSearchClick();
+                  }
+                }}
+                className="flex-1"
+              />
+              <Button onClick={handleSearchClick} className="gap-2">
+                <Search className="h-4 w-4" />
+                검색
+              </Button>
+              <Button onClick={handleReset} variant="outline" className="gap-2">
+                <RotateCcw className="h-4 w-4" />
+                초기화
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="shadow-sm">
+          <CardHeader className="bg-gray-50/50">
+            <CardTitle className="flex items-center justify-between">
+              <span className="flex items-center gap-2">
+                바코드 라벨 목록
+                <span className="text-muted-foreground text-sm font-normal">(총 {total}건)</span>
+              </span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <BarcodeListTable
+              labels={labels}
+              total={total}
+              page={page}
+              limit={limit}
+              isLoading={isLoading}
+              onPageChange={setPage}
+              onRefresh={refetch}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/barcode/BarcodeListTable.tsx b/frontend/components/barcode/BarcodeListTable.tsx
new file mode 100644
index 00000000..9cb2bca5
--- /dev/null
+++ b/frontend/components/barcode/BarcodeListTable.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+import { useState } from "react";
+import { BarcodeLabelMaster } from "@/types/barcode";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Copy, Trash2, Loader2 } from "lucide-react";
+import { barcodeApi } from "@/lib/api/barcodeApi";
+import { useToast } from "@/hooks/use-toast";
+import { useRouter } from "next/navigation";
+import { format } from "date-fns";
+
+interface BarcodeListTableProps {
+  labels: BarcodeLabelMaster[];
+  total: number;
+  page: number;
+  limit: number;
+  isLoading: boolean;
+  onPageChange: (page: number) => void;
+  onRefresh: () => void;
+}
+
+export function BarcodeListTable({
+  labels,
+  total,
+  page,
+  limit,
+  isLoading,
+  onPageChange,
+  onRefresh,
+}: BarcodeListTableProps) {
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isCopying, setIsCopying] = useState(false);
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const totalPages = Math.ceil(total / limit);
+
+  const handleEdit = (labelId: string) => {
+    router.push(`/admin/screenMng/barcodeList/designer/${labelId}`);
+  };
+
+  const handleCopy = async (labelId: string) => {
+    setIsCopying(true);
+    try {
+      const response = await barcodeApi.copyLabel(labelId);
+      if (response.success) {
+        toast({
+          title: "성공",
+          description: "바코드 라벨이 복사되었습니다.",
+        });
+        onRefresh();
+      }
+    } catch (error: any) {
+      toast({
+        title: "오류",
+        description: error.message || "바코드 라벨 복사에 실패했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsCopying(false);
+    }
+  };
+
+  const handleDeleteClick = (labelId: string) => {
+    setDeleteTarget(labelId);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deleteTarget) return;
+
+    setIsDeleting(true);
+    try {
+      const response = await barcodeApi.deleteLabel(deleteTarget);
+      if (response.success) {
+        toast({
+          title: "성공",
+          description: "바코드 라벨이 삭제되었습니다.",
+        });
+        setDeleteTarget(null);
+        onRefresh();
+      }
+    } catch (error: any) {
+      toast({
+        title: "오류",
+        description: error.message || "바코드 라벨 삭제에 실패했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const formatDate = (dateString: string | null) => {
+    if (!dateString) return "-";
+    try {
+      return format(new Date(dateString), "yyyy-MM-dd");
+    } catch {
+      return dateString;
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  if (labels.length === 0) {
+    return (
+      <div className="text-muted-foreground flex h-64 flex-col items-center justify-center">
+        <p>등록된 바코드 라벨이 없습니다.</p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[80px]">No</TableHead>
+              <TableHead>라벨명</TableHead>
+              <TableHead className="w-[120px]">템플릿 유형</TableHead>
+              <TableHead className="w-[120px]">작성자</TableHead>
+              <TableHead className="w-[120px]">수정일</TableHead>
+              <TableHead className="w-[200px]">액션</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {labels.map((label, index) => {
+              const rowNumber = (page - 1) * limit + index + 1;
+              return (
+                <TableRow
+                  key={label.label_id}
+                  onClick={() => handleEdit(label.label_id)}
+                  className="cursor-pointer hover:bg-muted/50"
+                >
+                  <TableCell className="font-medium">{rowNumber}</TableCell>
+                  <TableCell>
+                    <div>
+                      <div className="font-medium">{label.label_name_kor}</div>
+                      {label.label_name_eng && (
+                        <div className="text-muted-foreground text-sm">{label.label_name_eng}</div>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {label.width_mm != null && label.height_mm != null
+                      ? `${label.width_mm}×${label.height_mm}mm`
+                      : label.template_type || "-"}
+                  </TableCell>
+                  <TableCell>{label.created_by || "-"}</TableCell>
+                  <TableCell>{formatDate(label.updated_at || label.created_at)}</TableCell>
+                  <TableCell>
+                    <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
+                      <Button
+                        size="icon"
+                        variant="outline"
+                        onClick={() => handleCopy(label.label_id)}
+                        disabled={isCopying}
+                        className="h-8 w-8"
+                        title="복사"
+                      >
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        size="icon"
+                        variant="destructive"
+                        onClick={() => handleDeleteClick(label.label_id)}
+                        className="h-8 w-8"
+                        title="삭제"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2 p-4">
+          <Button variant="outline" size="sm" onClick={() => onPageChange(page - 1)} disabled={page === 1}>
+            이전
+          </Button>
+          <span className="text-muted-foreground text-sm">
+            {page} / {totalPages}
+          </span>
+          <Button variant="outline" size="sm" onClick={() => onPageChange(page + 1)} disabled={page === totalPages}>
+            다음
+          </Button>
+        </div>
+      )}
+
+      <AlertDialog open={deleteTarget !== null} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>바코드 라벨 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              이 바코드 라벨을 삭제하시겠습니까?
+              <br />
+              삭제된 라벨은 복구할 수 없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              disabled={isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeleting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  삭제 중...
+                </>
+              ) : (
+                "삭제"
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
diff --git a/frontend/components/barcode/designer/BarcodeComponentPalette.tsx b/frontend/components/barcode/designer/BarcodeComponentPalette.tsx
new file mode 100644
index 00000000..e28ff12d
--- /dev/null
+++ b/frontend/components/barcode/designer/BarcodeComponentPalette.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useDrag } from "react-dnd";
+import { Type, Barcode, Image, Minus, Square } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { BarcodeLabelComponent } from "@/types/barcode";
+import { v4 as uuidv4 } from "uuid";
+
+const ITEMS: { type: BarcodeLabelComponent["type"]; label: string; icon: React.ReactNode }[] = [
+  { type: "text", label: "텍스트", icon: <Type className="h-4 w-4" /> },
+  { type: "barcode", label: "바코드", icon: <Barcode className="h-4 w-4" /> },
+  { type: "image", label: "이미지", icon: <Image className="h-4 w-4" /> },
+  { type: "line", label: "선", icon: <Minus className="h-4 w-4" /> },
+  { type: "rectangle", label: "사각형", icon: <Square className="h-4 w-4" /> },
+];
+
+const MM_TO_PX = 4;
+
+function defaultComponent(type: BarcodeLabelComponent["type"]): BarcodeLabelComponent {
+  const id = `comp_${uuidv4()}`;
+  const base = { id, type, x: 10 * MM_TO_PX, y: 10 * MM_TO_PX, width: 80, height: 24, zIndex: 0 };
+
+  switch (type) {
+    case "text":
+      return { ...base, content: "텍스트", fontSize: 10, fontColor: "#000000" };
+    case "barcode":
+      return {
+        ...base,
+        width: 120,
+        height: 40,
+        barcodeType: "CODE128",
+        barcodeValue: "123456789",
+        showBarcodeText: true,
+      };
+    case "image":
+      return { ...base, width: 60, height: 60, imageUrl: "", objectFit: "contain" };
+    case "line":
+      return { ...base, width: 100, height: 2, lineColor: "#000", lineWidth: 1 };
+    case "rectangle":
+      return { ...base, width: 80, height: 40, backgroundColor: "transparent", lineColor: "#000", lineWidth: 1 };
+    default:
+      return base;
+  }
+}
+
+function DraggableItem({
+  type,
+  label,
+  icon,
+}: {
+  type: BarcodeLabelComponent["type"];
+  label: string;
+  icon: React.ReactNode;
+}) {
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: "barcode-component",
+    item: { component: defaultComponent(type) },
+    collect: (m) => ({ isDragging: m.isDragging() }),
+  }));
+
+  return (
+    <div
+      ref={drag}
+      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm hover:border-blue-500 hover:bg-blue-50 ${
+        isDragging ? "opacity-50" : ""
+      }`}
+    >
+      {icon}
+      <span>{label}</span>
+    </div>
+  );
+}
+
+export function BarcodeComponentPalette() {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm">요소 추가</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {ITEMS.map((item) => (
+          <DraggableItem key={item.type} type={item.type} label={item.label} icon={item.icon} />
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx b/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx
new file mode 100644
index 00000000..15136668
--- /dev/null
+++ b/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { useRef } from "react";
+import { useDrop } from "react-dnd";
+import { useBarcodeDesigner, MM_TO_PX } from "@/contexts/BarcodeDesignerContext";
+import { BarcodeLabelCanvasComponent } from "./BarcodeLabelCanvasComponent";
+import { BarcodeLabelComponent } from "@/types/barcode";
+import { v4 as uuidv4 } from "uuid";
+
+export function BarcodeDesignerCanvas() {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const {
+    widthMm,
+    heightMm,
+    components,
+    addComponent,
+    selectComponent,
+    showGrid,
+    snapValueToGrid,
+  } = useBarcodeDesigner();
+
+  const widthPx = widthMm * MM_TO_PX;
+  const heightPx = heightMm * MM_TO_PX;
+
+  const [{ isOver }, drop] = useDrop(() => ({
+    accept: "barcode-component",
+    drop: (item: { component: BarcodeLabelComponent }, monitor) => {
+      if (!canvasRef.current) return;
+      const offset = monitor.getClientOffset();
+      const rect = canvasRef.current.getBoundingClientRect();
+      if (!offset) return;
+
+      let x = offset.x - rect.left;
+      let y = offset.y - rect.top;
+      // 드롭 시 요소 중앙이 커서에 오도록 보정
+      x -= item.component.width / 2;
+      y -= item.component.height / 2;
+      x = Math.max(0, Math.min(x, widthPx - item.component.width));
+      y = Math.max(0, Math.min(y, heightPx - item.component.height));
+
+      const newComp: BarcodeLabelComponent = {
+        ...item.component,
+        id: `comp_${uuidv4()}`,
+        x: snapValueToGrid(x),
+        y: snapValueToGrid(y),
+        zIndex: components.length,
+      };
+      addComponent(newComp);
+    },
+    collect: (m) => ({ isOver: m.isOver() }),
+  }), [widthPx, heightPx, components.length, addComponent, snapValueToGrid]);
+
+  return (
+    <div className="flex flex-1 items-center justify-center overflow-auto bg-gray-100 p-6">
+      <div
+        key={`canvas-${widthMm}-${heightMm}`}
+        ref={(r) => {
+          (canvasRef as any).current = r;
+          drop(r);
+        }}
+        className="relative bg-white shadow-lg"
+        style={{
+          width: widthPx,
+          height: heightPx,
+          minWidth: widthPx,
+          minHeight: heightPx,
+          backgroundImage: showGrid
+            ? `linear-gradient(to right, #e5e7eb 1px, transparent 1px),
+               linear-gradient(to bottom, #e5e7eb 1px, transparent 1px)`
+            : undefined,
+          backgroundSize: showGrid ? `${MM_TO_PX * 5}px ${MM_TO_PX * 5}px` : undefined,
+          outline: isOver ? "2px dashed #2563eb" : "1px solid #d1d5db",
+        }}
+        onClick={(e) => {
+          if (e.target === e.currentTarget) selectComponent(null);
+        }}
+      >
+        {components.map((c) => (
+          <BarcodeLabelCanvasComponent key={c.id} component={c} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/barcode/designer/BarcodeDesignerLeftPanel.tsx b/frontend/components/barcode/designer/BarcodeDesignerLeftPanel.tsx
new file mode 100644
index 00000000..9062041e
--- /dev/null
+++ b/frontend/components/barcode/designer/BarcodeDesignerLeftPanel.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { BarcodeTemplatePalette } from "./BarcodeTemplatePalette";
+import { BarcodeComponentPalette } from "./BarcodeComponentPalette";
+
+export function BarcodeDesignerLeftPanel() {
+  return (
+    <div className="flex min-h-0 w-64 shrink-0 flex-col overflow-hidden border-r bg-white">
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <ScrollArea className="h-full">
+          <div className="space-y-4 p-4">
+            <BarcodeTemplatePalette />
+            <BarcodeComponentPalette />
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/barcode/designer/BarcodeDesignerRightPanel.tsx b/frontend/components/barcode/designer/BarcodeDesignerRightPanel.tsx
new file mode 100644
index 00000000..aaa92d2c
--- /dev/null
+++ b/frontend/components/barcode/designer/BarcodeDesignerRightPanel.tsx
@@ -0,0 +1,251 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Trash2 } from "lucide-react";
+import { useBarcodeDesigner } from "@/contexts/BarcodeDesignerContext";
+import { BarcodeLabelComponent } from "@/types/barcode";
+
+export function BarcodeDesignerRightPanel() {
+  const {
+    components,
+    selectedComponentId,
+    updateComponent,
+    removeComponent,
+    selectComponent,
+    widthMm,
+    heightMm,
+    setWidthMm,
+    setHeightMm,
+  } = useBarcodeDesigner();
+
+  const selected = components.find((c) => c.id === selectedComponentId);
+
+  if (!selected) {
+    return (
+      <div className="w-72 border-l bg-white p-4">
+        <p className="text-muted-foreground text-sm">요소를 선택하면 속성을 편집할 수 있습니다.</p>
+        <div className="mt-4 space-y-2">
+          <Label className="text-xs">라벨 크기 (mm)</Label>
+          <div className="flex gap-2">
+            <Input
+              type="number"
+              min={10}
+              max={200}
+              value={widthMm}
+              onChange={(e) => setWidthMm(Number(e.target.value) || 50)}
+            />
+            <span className="py-2">×</span>
+            <Input
+              type="number"
+              min={10}
+              max={200}
+              value={heightMm}
+              onChange={(e) => setHeightMm(Number(e.target.value) || 30)}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const update = (updates: Partial<BarcodeLabelComponent>) =>
+    updateComponent(selected.id, updates);
+
+  return (
+    <div className="w-72 border-l bg-white">
+      <div className="border-b p-2 flex items-center justify-between">
+        <span className="text-sm font-medium">속성</span>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-destructive"
+          onClick={() => {
+            removeComponent(selected.id);
+            selectComponent(null);
+          }}
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
+      <div className="space-y-4 p-4">
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <Label className="text-xs">X (px)</Label>
+            <Input
+              type="number"
+              value={Math.round(selected.x)}
+              onChange={(e) => update({ x: Number(e.target.value) || 0 })}
+            />
+          </div>
+          <div>
+            <Label className="text-xs">Y (px)</Label>
+            <Input
+              type="number"
+              value={Math.round(selected.y)}
+              onChange={(e) => update({ y: Number(e.target.value) || 0 })}
+            />
+          </div>
+          <div>
+            <Label className="text-xs">너비</Label>
+            <Input
+              type="number"
+              min={4}
+              value={Math.round(selected.width)}
+              onChange={(e) => update({ width: Number(e.target.value) || 10 })}
+            />
+          </div>
+          <div>
+            <Label className="text-xs">높이</Label>
+            <Input
+              type="number"
+              min={4}
+              value={Math.round(selected.height)}
+              onChange={(e) => update({ height: Number(e.target.value) || 10 })}
+            />
+          </div>
+        </div>
+
+        {selected.type === "text" && (
+          <>
+            <div>
+              <Label className="text-xs">내용</Label>
+              <Input
+                value={selected.content || ""}
+                onChange={(e) => update({ content: e.target.value })}
+                placeholder="텍스트"
+              />
+            </div>
+            <div>
+              <Label className="text-xs">글자 크기</Label>
+              <Input
+                type="number"
+                min={6}
+                max={72}
+                value={selected.fontSize || 10}
+                onChange={(e) => update({ fontSize: Number(e.target.value) || 10 })}
+              />
+            </div>
+            <div>
+              <Label className="text-xs">글자 색</Label>
+              <Input
+                type="color"
+                value={selected.fontColor || "#000000"}
+                onChange={(e) => update({ fontColor: e.target.value })}
+                className="h-9 w-20 p-1"
+              />
+            </div>
+          </>
+        )}
+
+        {selected.type === "barcode" && (
+          <>
+            <div>
+              <Label className="text-xs">바코드 유형</Label>
+              <Select
+                value={selected.barcodeType || "CODE128"}
+                onValueChange={(v) => update({ barcodeType: v })}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="CODE128">CODE128</SelectItem>
+                  <SelectItem value="CODE39">CODE39</SelectItem>
+                  <SelectItem value="EAN13">EAN13</SelectItem>
+                  <SelectItem value="EAN8">EAN8</SelectItem>
+                  <SelectItem value="QR">QR 코드</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className="text-xs">값</Label>
+              <Input
+                value={selected.barcodeValue || ""}
+                onChange={(e) => update({ barcodeValue: e.target.value })}
+                placeholder="123456789"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={selected.showBarcodeText !== false}
+                onCheckedChange={(v) => update({ showBarcodeText: v })}
+              />
+              <Label className="text-xs">숫자 표시 (1D)</Label>
+            </div>
+          </>
+        )}
+
+        {selected.type === "line" && (
+          <>
+            <div>
+              <Label className="text-xs">선 두께</Label>
+              <Input
+                type="number"
+                min={1}
+                value={selected.lineWidth || 1}
+                onChange={(e) => update({ lineWidth: Number(e.target.value) || 1 })}
+              />
+            </div>
+            <div>
+              <Label className="text-xs">색상</Label>
+              <Input
+                type="color"
+                value={selected.lineColor || "#000000"}
+                onChange={(e) => update({ lineColor: e.target.value })}
+                className="h-9 w-20 p-1"
+              />
+            </div>
+          </>
+        )}
+
+        {selected.type === "rectangle" && (
+          <>
+            <div>
+              <Label className="text-xs">테두리 두께</Label>
+              <Input
+                type="number"
+                min={0}
+                value={selected.lineWidth ?? 1}
+                onChange={(e) => update({ lineWidth: Number(e.target.value) || 0 })}
+              />
+            </div>
+            <div>
+              <Label className="text-xs">테두리 색</Label>
+              <Input
+                type="color"
+                value={selected.lineColor || "#000000"}
+                onChange={(e) => update({ lineColor: e.target.value })}
+                className="h-9 w-20 p-1"
+              />
+            </div>
+            <div>
+              <Label className="text-xs">배경 색</Label>
+              <Input
+                type="color"
+                value={selected.backgroundColor || "#ffffff"}
+                onChange={(e) => update({ backgroundColor: e.target.value })}
+                className="h-9 w-20 p-1"
+              />
+            </div>
+          </>
+        )}
+
+        {selected.type === "image" && (
+          <div>
+            <Label className="text-xs">이미지 URL</Label>
+            <Input
+              value={selected.imageUrl || ""}
+              onChange={(e) => update({ imageUrl: e.target.value })}
+              placeholder="https://..."
+            />
+            <p className="text-muted-foreground mt-1 text-xs">또는 나중에 업로드 기능 연동</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/barcode/designer/BarcodeDesignerToolbar.tsx b/frontend/components/barcode/designer/BarcodeDesignerToolbar.tsx
new file mode 100644
index 00000000..a7b0f598
--- /dev/null
+++ b/frontend/components/barcode/designer/BarcodeDesignerToolbar.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { ArrowLeft, Save, Loader2, Download, Printer } from "lucide-react";
+import { useBarcodeDesigner } from "@/contexts/BarcodeDesignerContext";
+import { barcodeApi } from "@/lib/api/barcodeApi";
+import { useToast } from "@/hooks/use-toast";
+import { generateZPL } from "@/lib/zplGenerator";
+import { BarcodePrintPreviewModal } from "./BarcodePrintPreviewModal";
+
+export function BarcodeDesignerToolbar() {
+  const router = useRouter();
+  const { toast } = useToast();
+  const {
+    labelId,
+    labelMaster,
+    widthMm,
+    heightMm,
+    components,
+    saveLayout,
+    isSaving,
+  } = useBarcodeDesigner();
+
+  const handleDownloadZPL = () => {
+    const layout = { width_mm: widthMm, height_mm: heightMm, components };
+    const zpl = generateZPL(layout);
+    const blob = new Blob([zpl], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = (labelMaster?.label_name_kor || "label") + ".zpl";
+    a.click();
+    URL.revokeObjectURL(url);
+    toast({ title: "다운로드", description: "ZPL 파일이 다운로드되었습니다. Zebra 프린터/유틸에서 사용하세요." });
+  };
+
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false);
+  const [printPreviewOpen, setPrintPreviewOpen] = useState(false);
+  const [newLabelName, setNewLabelName] = useState("");
+  const [creating, setCreating] = useState(false);
+
+  const handleSave = async () => {
+    if (labelId !== "new") {
+      await saveLayout();
+      return;
+    }
+    setSaveDialogOpen(true);
+  };
+
+  const handleCreateAndSave = async () => {
+    const name = newLabelName.trim();
+    if (!name) {
+      toast({
+        title: "입력 필요",
+        description: "라벨명을 입력하세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+    setCreating(true);
+    try {
+      const createRes = await barcodeApi.createLabel({
+        labelNameKor: name,
+      });
+      if (!createRes.success || !createRes.data?.labelId) throw new Error(createRes.message || "생성 실패");
+      const newId = createRes.data.labelId;
+
+      await barcodeApi.saveLayout(newId, {
+        width_mm: widthMm,
+        height_mm: heightMm,
+        components: components.map((c, i) => ({ ...c, zIndex: i })),
+      });
+
+      toast({ title: "저장됨", description: "라벨이 생성되었습니다." });
+      setSaveDialogOpen(false);
+      setNewLabelName("");
+      router.push(`/admin/screenMng/barcodeList/designer/${newId}`);
+    } catch (e: any) {
+      toast({
+        title: "저장 실패",
+        description: e.message || "라벨 생성에 실패했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex items-center justify-between border-b bg-white px-4 py-2">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="gap-1"
+            onClick={() => router.push("/admin/screenMng/barcodeList")}
+          >
+            <ArrowLeft className="h-4 w-4" />
+            목록
+          </Button>
+          <span className="text-muted-foreground text-sm">
+            {labelId === "new" ? "새 라벨" : labelMaster?.label_name_kor || "바코드 라벨 디자이너"}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            className="gap-1"
+            onClick={() => setPrintPreviewOpen(true)}
+          >
+            <Printer className="h-4 w-4" />
+            인쇄 미리보기
+          </Button>
+          <Button size="sm" variant="outline" className="gap-1" onClick={handleDownloadZPL}>
+            <Download className="h-4 w-4" />
+            ZPL 다운로드
+          </Button>
+          <Button size="sm" className="gap-1" onClick={handleSave} disabled={isSaving || creating}>
+            {(isSaving || creating) ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="h-4 w-4" />
+            )}
+            저장
+          </Button>
+        </div>
+      </div>
+
+      <BarcodePrintPreviewModal
+        open={printPreviewOpen}
+        onOpenChange={setPrintPreviewOpen}
+        layout={{
+          width_mm: widthMm,
+          height_mm: heightMm,
+          components: components.map((c, i) => ({ ...c, zIndex: i })),
+        }}
+        labelName={labelMaster?.label_name_kor || "라벨"}
+      />
+
+      <Dialog open={saveDialogOpen} onOpenChange={setSaveDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>새 라벨 저장</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-2 py-2">
+            <Label>라벨명 (한글)</Label>
+            <Input
+              value={newLabelName}
+              onChange={(e) => setNewLabelName(e.target.value)}
+              placeholder="예: 품목 바코드 라벨"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSaveDialogOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleCreateAndSave} disabled={creating}>
+              {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx b/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx
new file mode 100644
index 00000000..3552f5fe
--- /dev/null
+++ b/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx
@@ -0,0 +1,262 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+import { BarcodeLabelComponent } from "@/types/barcode";
+import { useBarcodeDesigner } from "@/contexts/BarcodeDesignerContext";
+import JsBarcode from "jsbarcode";
+import QRCode from "qrcode";
+import { getFullImageUrl } from "@/lib/api/client";
+import { MM_TO_PX } from "@/contexts/BarcodeDesignerContext";
+
+interface Props {
+  component: BarcodeLabelComponent;
+}
+
+// 1D 바코드 렌더
+function Barcode1DRender({
+  value,
+  format,
+  width,
+  height,
+  showText,
+}: {
+  value: string;
+  format: string;
+  width: number;
+  height: number;
+  showText: boolean;
+}) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  useEffect(() => {
+    if (!svgRef.current || !value.trim()) return;
+    try {
+      JsBarcode(svgRef.current, value.trim(), {
+        format: format.toLowerCase(),
+        width: 2,
+        height: Math.max(20, height - (showText ? 14 : 4)),
+        displayValue: showText,
+        margin: 2,
+      });
+    } catch {
+      // ignore
+    }
+  }, [value, format, height, showText]);
+
+  return (
+    <div className="flex h-full w-full items-center justify-center overflow-hidden">
+      <svg ref={svgRef} className="max-h-full max-w-full" />
+    </div>
+  );
+}
+
+// QR 렌더
+function QRRender({ value, size }: { value: string; size: number }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    if (!canvasRef.current || !value.trim()) return;
+    QRCode.toCanvas(canvasRef.current, value.trim(), {
+      width: Math.max(40, size),
+      margin: 1,
+    });
+  }, [value, size]);
+
+  return (
+    <div className="flex h-full w-full items-center justify-center overflow-hidden">
+      <canvas ref={canvasRef} />
+    </div>
+  );
+}
+
+export function BarcodeLabelCanvasComponent({ component }: Props) {
+  const {
+    updateComponent,
+    removeComponent,
+    selectComponent,
+    selectedComponentId,
+    snapValueToGrid,
+  } = useBarcodeDesigner();
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0, compX: 0, compY: 0 });
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, w: 0, h: 0 });
+  const ref = useRef<HTMLDivElement>(null);
+  const selected = selectedComponentId === component.id;
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    selectComponent(component.id);
+    if ((e.target as HTMLElement).closest("[data-resize-handle]")) {
+      setIsResizing(true);
+      setResizeStart({
+        x: e.clientX,
+        y: e.clientY,
+        w: component.width,
+        h: component.height,
+      });
+    } else {
+      setIsDragging(true);
+      setDragStart({ x: e.clientX, y: e.clientY, compX: component.x, compY: component.y });
+    }
+  };
+
+  useEffect(() => {
+    if (!isDragging && !isResizing) return;
+
+    const onMove = (e: MouseEvent) => {
+      if (isDragging) {
+        const dx = e.clientX - dragStart.x;
+        const dy = e.clientY - dragStart.y;
+        updateComponent(component.id, {
+          x: Math.max(0, snapValueToGrid(dragStart.compX + dx)),
+          y: Math.max(0, snapValueToGrid(dragStart.compY + dy)),
+        });
+      } else if (isResizing) {
+        const dx = e.clientX - resizeStart.x;
+        const dy = e.clientY - resizeStart.y;
+        updateComponent(component.id, {
+          width: Math.max(20, resizeStart.w + dx),
+          height: Math.max(10, resizeStart.h + dy),
+        });
+      }
+    };
+    const onUp = () => {
+      setIsDragging(false);
+      setIsResizing(false);
+    };
+
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, [
+    isDragging,
+    isResizing,
+    dragStart,
+    resizeStart,
+    component.id,
+    updateComponent,
+    snapValueToGrid,
+  ]);
+
+  const style: React.CSSProperties = {
+    position: "absolute",
+    left: component.x,
+    top: component.y,
+    width: component.width,
+    height: component.height,
+    zIndex: component.zIndex,
+  };
+
+  const border = selected ? "2px solid #2563eb" : "1px solid transparent";
+  const isBarcode = component.type === "barcode";
+  const isQR = component.barcodeType === "QR";
+
+  const content = () => {
+    switch (component.type) {
+      case "text":
+        return (
+          <div
+            style={{
+              fontSize: component.fontSize || 10,
+              color: component.fontColor || "#000",
+              fontWeight: component.fontWeight || "normal",
+              overflow: "hidden",
+              wordBreak: "break-all",
+              width: "100%",
+              height: "100%",
+            }}
+          >
+            {component.content || "텍스트"}
+          </div>
+        );
+      case "barcode":
+        if (isQR) {
+          return (
+            <QRRender
+              value={component.barcodeValue || ""}
+              size={Math.min(component.width, component.height)}
+            />
+          );
+        }
+        return (
+          <Barcode1DRender
+            value={component.barcodeValue || "123456789"}
+            format={component.barcodeType || "CODE128"}
+            width={component.width}
+            height={component.height}
+            showText={component.showBarcodeText !== false}
+          />
+        );
+      case "image":
+        return component.imageUrl ? (
+          <img
+            src={getFullImageUrl(component.imageUrl)}
+            alt=""
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: (component.objectFit as "contain") || "contain",
+            }}
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-gray-100 text-xs text-gray-400">
+            이미지
+          </div>
+        );
+      case "line":
+        return (
+          <div
+            style={{
+              width: "100%",
+              height: component.lineWidth || 1,
+              backgroundColor: component.lineColor || "#000",
+              marginTop: (component.height - (component.lineWidth || 1)) / 2,
+            }}
+          />
+        );
+      case "rectangle":
+        return (
+          <div
+            style={{
+              width: "100%",
+              height: "100%",
+              backgroundColor: component.backgroundColor || "transparent",
+              border: `${component.lineWidth || 1}px solid ${component.lineColor || "#000"}`,
+            }}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      style={{ ...style, border }}
+      className="cursor-move overflow-hidden bg-white"
+      onMouseDown={handleMouseDown}
+    >
+      {content()}
+      {selected && component.type !== "line" && (
+        <div
+          data-resize-handle
+          className="absolute bottom-0 right-0 h-2 w-2 cursor-se-resize bg-blue-500"
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            setIsResizing(true);
+            setResizeStart({
+              x: e.clientX,
+              y: e.clientY,
+              w: component.width,
+              h: component.height,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx b/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx
new file mode 100644
index 00000000..0db9b65e
--- /dev/null
+++ b/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Download, Printer, Loader2, AlertCircle } from "lucide-react";
+import { BarcodeLabelLayout } from "@/types/barcode";
+import { generateZPL } from "@/lib/zplGenerator";
+import {
+  printZPLToZebraBLE,
+  isWebBluetoothSupported,
+  getUnsupportedMessage,
+} from "@/lib/zebraBluetooth";
+import {
+  printZPLToBrowserPrint,
+  getBrowserPrintHelpMessage,
+} from "@/lib/zebraBrowserPrint";
+import { useToast } from "@/hooks/use-toast";
+import { BarcodeLabelCanvasComponent } from "./BarcodeLabelCanvasComponent";
+import { MM_TO_PX } from "@/contexts/BarcodeDesignerContext";
+
+const PREVIEW_MAX_PX = 320;
+
+interface BarcodePrintPreviewModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  layout: BarcodeLabelLayout;
+  labelName?: string;
+}
+
+export function BarcodePrintPreviewModal({
+  open,
+  onOpenChange,
+  layout,
+  labelName = "라벨",
+}: BarcodePrintPreviewModalProps) {
+  const { toast } = useToast();
+  const [printing, setPrinting] = useState(false);
+
+  const { width_mm, height_mm, components } = layout;
+  const widthPx = width_mm * MM_TO_PX;
+  const heightPx = height_mm * MM_TO_PX;
+  const scale =
+    widthPx > PREVIEW_MAX_PX || heightPx > PREVIEW_MAX_PX
+      ? Math.min(PREVIEW_MAX_PX / widthPx, PREVIEW_MAX_PX / heightPx)
+      : 1;
+  const previewW = Math.round(widthPx * scale);
+  const previewH = Math.round(heightPx * scale);
+
+  const zpl = generateZPL(layout);
+  const bleSupported = isWebBluetoothSupported();
+  const unsupportedMsg = getUnsupportedMessage();
+
+  const handleDownloadZPL = () => {
+    const blob = new Blob([zpl], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${labelName}.zpl`;
+    a.click();
+    URL.revokeObjectURL(url);
+    toast({ title: "다운로드", description: "ZPL 파일이 저장되었습니다." });
+  };
+
+  const handlePrintToZebra = async () => {
+    const canUseBle = bleSupported;
+    if (!canUseBle) {
+      // Browser Print만 시도 (스크립트 로드 후 기본 프린터로 전송)
+      setPrinting(true);
+      try {
+        const result = await printZPLToBrowserPrint(zpl);
+        if (result.success) {
+          toast({ title: "전송 완료", description: result.message });
+          onOpenChange(false);
+        } else {
+          toast({
+            title: "출력 실패",
+            description: result.message,
+            variant: "destructive",
+          });
+          toast({
+            title: "안내",
+            description: getBrowserPrintHelpMessage(),
+            variant: "default",
+          });
+        }
+      } catch (e: unknown) {
+        toast({
+          title: "오류",
+          description: (e as Error).message || "Zebra 출력 중 오류가 발생했습니다.",
+          variant: "destructive",
+        });
+      } finally {
+        setPrinting(false);
+      }
+      return;
+    }
+
+    // Web Bluetooth 지원 시: Browser Print 먼저 시도, 실패하면 BLE로 폴백
+    setPrinting(true);
+    try {
+      const bpResult = await printZPLToBrowserPrint(zpl);
+      if (bpResult.success) {
+        toast({ title: "전송 완료", description: bpResult.message });
+        onOpenChange(false);
+        return;
+      }
+      const bleResult = await printZPLToZebraBLE(zpl);
+      if (bleResult.success) {
+        toast({ title: "전송 완료", description: bleResult.message });
+        onOpenChange(false);
+      } else {
+        toast({
+          title: "출력 실패",
+          description: bleResult.message,
+          variant: "destructive",
+        });
+        toast({
+          title: "안내",
+          description: getBrowserPrintHelpMessage(),
+          variant: "default",
+        });
+      }
+    } catch (e: unknown) {
+      toast({
+        title: "오류",
+        description: (e as Error).message || "Zebra 출력 중 오류가 발생했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setPrinting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>인쇄 미리보기</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <p className="text-muted-foreground text-sm">
+            {width_mm}×{height_mm}mm · {components.length}개 요소
+          </p>
+
+          {/* 미리보기 캔버스 (축소) */}
+          <div className="flex justify-center rounded border bg-gray-100 p-4">
+            <div
+              className="relative bg-white shadow"
+              style={{
+                width: previewW,
+                height: previewH,
+                transformOrigin: "top left",
+              }}
+            >
+              <div
+                className="pointer-events-none"
+                style={{
+                  transform: `scale(${scale})`,
+                  transformOrigin: "0 0",
+                  width: widthPx,
+                  height: heightPx,
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                }}
+              >
+                {components.map((c) => (
+                  <BarcodeLabelCanvasComponent key={c.id} component={c} />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {!bleSupported && (
+            <div className="flex gap-2 rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
+              <AlertCircle className="h-4 w-4 shrink-0" />
+              <span>
+                Web Bluetooth 미지원 브라우저입니다. Zebra Browser Print 앱을 설치하면 출력할 수 있습니다.
+                {unsupportedMsg && ` ${unsupportedMsg}`}
+              </span>
+            </div>
+          )}
+
+          <p className="text-muted-foreground text-xs">
+            {bleSupported ? (
+              <>
+                Zebra 프린터를 Bluetooth LE로 켜 두고, 출력 시 기기 선택에서 프린터를 선택하세요.
+                (Chrome/Edge 권장)
+                {typeof navigator !== "undefined" && /Android/i.test(navigator.userAgent) && (
+                  <> Android에서는 목록에 인근 BLE 기기가 모두 표시되므로, &apos;ZD421&apos; 등 프린터 이름을 골라 주세요.</>
+                )}
+              </>
+            ) : null}
+            {typeof navigator !== "undefined" && /Android/i.test(navigator.userAgent) && (
+              <>
+                {" "}
+                목록에 프린터가 안 나오면 지브라 공식 &apos;Zebra Browser Print&apos; 앱을 설치한 뒤, 앱에서 프린터 검색·기본 설정 후 이 사이트를 허용하면 출력할 수 있습니다.
+              </>
+            )}
+          </p>
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button variant="outline" size="sm" onClick={handleDownloadZPL} className="gap-1">
+            <Download className="h-4 w-4" />
+            ZPL 다운로드
+          </Button>
+          <Button
+            size="sm"
+            className="gap-1"
+            onClick={handlePrintToZebra}
+            disabled={printing}
+          >
+            {printing ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Printer className="h-4 w-4" />
+            )}
+            Zebra 프린터로 출력
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/components/barcode/designer/BarcodeTemplatePalette.tsx b/frontend/components/barcode/designer/BarcodeTemplatePalette.tsx
new file mode 100644
index 00000000..4eb026ba
--- /dev/null
+++ b/frontend/components/barcode/designer/BarcodeTemplatePalette.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Loader2, Search } from "lucide-react";
+import { useBarcodeDesigner } from "@/contexts/BarcodeDesignerContext";
+import { barcodeApi, BarcodeLabelTemplate } from "@/lib/api/barcodeApi";
+
+type Category = "all" | "basic" | "zebra";
+
+export function BarcodeTemplatePalette() {
+  const { applyTemplate } = useBarcodeDesigner();
+  const [templates, setTemplates] = useState<BarcodeLabelTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [category, setCategory] = useState<Category>("all");
+  const [searchText, setSearchText] = useState("");
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await barcodeApi.getTemplates();
+        if (res.success && res.data) setTemplates(res.data);
+      } catch {
+        setTemplates([]);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  const filtered = useMemo(() => {
+    let list = templates;
+    if (category === "basic") {
+      list = list.filter((t) => t.template_id.startsWith("TMPL_"));
+    } else if (category === "zebra") {
+      list = list.filter((t) => t.template_id.startsWith("ZJ"));
+    }
+    const q = searchText.trim().toLowerCase();
+    if (q) {
+      list = list.filter(
+        (t) =>
+          t.template_id.toLowerCase().includes(q) ||
+          (t.template_name_kor && t.template_name_kor.toLowerCase().includes(q)) ||
+          (t.template_name_eng && t.template_name_eng.toLowerCase().includes(q))
+      );
+    }
+    return list;
+  }, [templates, category, searchText]);
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm">라벨 규격</CardTitle>
+        </CardHeader>
+        <CardContent className="flex justify-center py-4">
+          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm">라벨 규격</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div className="relative">
+          <Search className="text-muted-foreground absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2" />
+          <Input
+            placeholder="코드·이름으로 찾기"
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            className="h-8 pl-8 text-xs"
+          />
+        </div>
+        <div className="flex gap-1">
+          <Button
+            variant={category === "all" ? "secondary" : "ghost"}
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => setCategory("all")}
+          >
+            전체
+          </Button>
+          <Button
+            variant={category === "basic" ? "secondary" : "ghost"}
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => setCategory("basic")}
+          >
+            기본
+          </Button>
+          <Button
+            variant={category === "zebra" ? "secondary" : "ghost"}
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => setCategory("zebra")}
+          >
+            제트라벨
+          </Button>
+        </div>
+        <ScrollArea className="h-[280px] pr-2">
+          <div className="space-y-1">
+            {filtered.length === 0 ? (
+              <p className="text-muted-foreground py-2 text-center text-xs">검색 결과 없음</p>
+            ) : (
+              filtered.map((t) => (
+                <Button
+                  key={t.template_id}
+                  variant="outline"
+                  size="sm"
+                  className="h-auto w-full justify-start py-1.5 text-left"
+                  onClick={() => applyTemplate(t.template_id)}
+                >
+                  <span className="truncate">{t.template_name_kor}</span>
+                  <span className="text-muted-foreground ml-1 shrink-0 text-xs">
+                    {t.width_mm}×{t.height_mm}
+                  </span>
+                </Button>
+              ))
+            )}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/contexts/BarcodeDesignerContext.tsx b/frontend/contexts/BarcodeDesignerContext.tsx
new file mode 100644
index 00000000..cd5b668a
--- /dev/null
+++ b/frontend/contexts/BarcodeDesignerContext.tsx
@@ -0,0 +1,336 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  ReactNode,
+  useEffect,
+  useRef,
+} from "react";
+import {
+  BarcodeLabelComponent,
+  BarcodeLabelLayout,
+  BarcodeLabelMaster,
+} from "@/types/barcode";
+import { barcodeApi } from "@/lib/api/barcodeApi";
+import { useToast } from "@/hooks/use-toast";
+import { v4 as uuidv4 } from "uuid";
+
+interface BarcodeDesignerContextType {
+  labelId: string;
+  labelMaster: BarcodeLabelMaster | null;
+  widthMm: number;
+  heightMm: number;
+  components: BarcodeLabelComponent[];
+  selectedComponentId: string | null;
+  isLoading: boolean;
+  isSaving: boolean;
+
+  setWidthMm: (v: number) => void;
+  setHeightMm: (v: number) => void;
+  addComponent: (component: BarcodeLabelComponent) => void;
+  updateComponent: (id: string, updates: Partial<BarcodeLabelComponent>) => void;
+  removeComponent: (id: string) => void;
+  selectComponent: (id: string | null) => void;
+  reorderComponent: (id: string, direction: "up" | "down") => void;
+
+  loadLabel: () => Promise<void>;
+  loadLayout: () => Promise<void>;
+  saveLayout: () => Promise<void>;
+  applyTemplate: (templateId: string) => Promise<void>;
+
+  gridSize: number;
+  showGrid: boolean;
+  setShowGrid: (v: boolean) => void;
+  snapValueToGrid: (v: number) => number;
+}
+
+const BarcodeDesignerContext = createContext<BarcodeDesignerContextType | undefined>(undefined);
+
+const MM_TO_PX = 4;
+const DEFAULT_WIDTH_MM = 50;
+const DEFAULT_HEIGHT_MM = 30;
+
+export function BarcodeDesignerProvider({
+  labelId,
+  children,
+}: {
+  labelId: string;
+  children: ReactNode;
+}) {
+  const [labelMaster, setLabelMaster] = useState<BarcodeLabelMaster | null>(null);
+  const [widthMm, setWidthMm] = useState(DEFAULT_WIDTH_MM);
+  const [heightMm, setHeightMm] = useState(DEFAULT_HEIGHT_MM);
+  const [components, setComponents] = useState<BarcodeLabelComponent[]>([]);
+  const [selectedComponentId, setSelectedComponentId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [showGrid, setShowGrid] = useState(true);
+  const [gridSize] = useState(2); // mm
+  const { toast } = useToast();
+  const selectedComponentIdRef = useRef<string | null>(null);
+  selectedComponentIdRef.current = selectedComponentId;
+
+  const snapValueToGrid = useCallback(
+    (v: number) => Math.round(v / (gridSize * MM_TO_PX)) * (gridSize * MM_TO_PX),
+    [gridSize]
+  );
+
+  const loadLabel = useCallback(async () => {
+    if (labelId === "new") {
+      setLabelMaster(null);
+      setWidthMm(DEFAULT_WIDTH_MM);
+      setHeightMm(DEFAULT_HEIGHT_MM);
+      setComponents([]);
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const res = await barcodeApi.getLabelById(labelId);
+      if (res.success && res.data) {
+        setLabelMaster(res.data);
+        if (res.data.width_mm != null) setWidthMm(res.data.width_mm);
+        if (res.data.height_mm != null) setHeightMm(res.data.height_mm);
+      }
+    } catch (e: any) {
+      toast({
+        title: "오류",
+        description: e.message || "라벨 정보를 불러오지 못했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [labelId, toast]);
+
+  const loadLayout = useCallback(async () => {
+    if (labelId === "new") return;
+    try {
+      const res = await barcodeApi.getLayout(labelId);
+      if (res.success && res.data) {
+        setWidthMm(res.data.width_mm);
+        setHeightMm(res.data.height_mm);
+        setComponents(res.data.components || []);
+      }
+    } catch {
+      // 레이아웃 없으면 빈 상태 유지
+    }
+  }, [labelId]);
+
+  // labelId 변경 시에만 초기 로드 (loadLabel/loadLayout을 deps에 넣지 않아 무한 루프 방지)
+  useEffect(() => {
+    let cancelled = false;
+    setIsLoading(true);
+
+    const run = async () => {
+      if (labelId === "new") {
+        setLabelMaster(null);
+        setWidthMm(DEFAULT_WIDTH_MM);
+        setHeightMm(DEFAULT_HEIGHT_MM);
+        setComponents([]);
+        if (!cancelled) setIsLoading(false);
+        return;
+      }
+      try {
+        const res = await barcodeApi.getLabelById(labelId);
+        if (cancelled) return;
+        if (res.success && res.data) {
+          setLabelMaster(res.data);
+          if (res.data.width_mm != null) setWidthMm(res.data.width_mm);
+          if (res.data.height_mm != null) setHeightMm(res.data.height_mm);
+        }
+        const layoutRes = await barcodeApi.getLayout(labelId);
+        if (cancelled) return;
+        if (layoutRes.success && layoutRes.data) {
+          setWidthMm(layoutRes.data.width_mm);
+          setHeightMm(layoutRes.data.height_mm);
+          setComponents(layoutRes.data.components || []);
+        }
+      } catch (e: any) {
+        if (!cancelled) {
+          toast({
+            title: "오류",
+            description: e.message || "라벨을 불러오지 못했습니다.",
+            variant: "destructive",
+          });
+        }
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    };
+
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [labelId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const addComponent = useCallback((component: BarcodeLabelComponent) => {
+    setComponents((prev) => [...prev, { ...component, id: component.id || `comp_${uuidv4()}` }]);
+    setSelectedComponentId(component.id || null);
+  }, []);
+
+  const updateComponent = useCallback((id: string, updates: Partial<BarcodeLabelComponent>) => {
+    setComponents((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, ...updates } : c))
+    );
+  }, []);
+
+  const removeComponent = useCallback((id: string) => {
+    setComponents((prev) => prev.filter((c) => c.id !== id));
+    setSelectedComponentId((sid) => (sid === id ? null : sid));
+  }, []);
+
+  // Delete / Backspace 키로 선택된 요소 삭제 (입력 필드에서는 무시)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "Delete" && e.key !== "Backspace") return;
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+      const sid = selectedComponentIdRef.current;
+      if (sid) {
+        e.preventDefault();
+        removeComponent(sid);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [removeComponent]);
+
+  const reorderComponent = useCallback((id: string, direction: "up" | "down") => {
+    setComponents((prev) => {
+      const idx = prev.findIndex((c) => c.id === id);
+      if (idx < 0) return prev;
+      const next = [...prev];
+      const swap = direction === "up" ? idx - 1 : idx + 1;
+      if (swap < 0 || swap >= next.length) return prev;
+      [next[idx], next[swap]] = [next[swap], next[idx]];
+      return next.map((c, i) => ({ ...c, zIndex: i }));
+    });
+  }, []);
+
+  const saveLayout = useCallback(async () => {
+    if (labelId === "new") {
+      toast({
+        title: "저장 불가",
+        description: "먼저 라벨을 저장한 뒤 레이아웃을 저장할 수 있습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+    setIsSaving(true);
+    try {
+      const layout: BarcodeLabelLayout = {
+        width_mm: widthMm,
+        height_mm: heightMm,
+        components: components.map((c, i) => ({ ...c, zIndex: i })),
+      };
+      await barcodeApi.saveLayout(labelId, layout);
+      toast({ title: "저장됨", description: "레이아웃이 저장되었습니다." });
+    } catch (e: any) {
+      toast({
+        title: "저장 실패",
+        description: e.message || "레이아웃 저장에 실패했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  }, [labelId, widthMm, heightMm, components, toast]);
+
+  const applyTemplate = useCallback(
+    async (templateId: string) => {
+      try {
+        const res = await barcodeApi.getTemplateById(templateId);
+        const layout = res.success && res.data ? (res.data as { layout?: BarcodeLabelLayout }).layout : null;
+        if (layout && typeof layout.width_mm === "number" && typeof layout.height_mm === "number") {
+          setWidthMm(layout.width_mm);
+          setHeightMm(layout.height_mm);
+          setComponents(
+            (layout.components || []).map((c) => ({
+              ...c,
+              id: c.id || `comp_${uuidv4()}`,
+            }))
+          );
+          setSelectedComponentId(null);
+          const name = (res.data as { template_name_kor?: string }).template_name_kor || "템플릿";
+          toast({
+            title: "템플릿 적용",
+            description: `${name} 적용됨 (${layout.width_mm}×${layout.height_mm}mm)`,
+          });
+        } else {
+          toast({
+            title: "템플릿 적용 실패",
+            description: "레이아웃 데이터가 없습니다.",
+            variant: "destructive",
+          });
+        }
+      } catch (e: any) {
+        toast({
+          title: "템플릿 적용 실패",
+          description: e.message || "템플릿을 불러오지 못했습니다.",
+          variant: "destructive",
+        });
+      }
+    },
+    [toast]
+  );
+
+  const value: BarcodeDesignerContextType = {
+    labelId,
+    labelMaster,
+    widthMm,
+    heightMm,
+    components,
+    selectedComponentId,
+    isLoading,
+    isSaving,
+    setWidthMm,
+    setHeightMm,
+    addComponent,
+    updateComponent,
+    removeComponent,
+    selectComponent: setSelectedComponentId,
+    reorderComponent,
+    loadLabel,
+    loadLayout,
+    saveLayout,
+    applyTemplate,
+    gridSize,
+    showGrid,
+    setShowGrid,
+    snapValueToGrid,
+  };
+
+  return (
+    <BarcodeDesignerContext.Provider value={value}>
+      {children}
+      {isLoading && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20">
+          <div className="bg-background flex flex-col items-center gap-2 rounded-lg border p-4 shadow-lg">
+            <div className="border-primary h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
+            <span className="text-sm">라벨 불러오는 중...</span>
+          </div>
+        </div>
+      )}
+    </BarcodeDesignerContext.Provider>
+  );
+}
+
+export function useBarcodeDesigner() {
+  const ctx = useContext(BarcodeDesignerContext);
+  if (ctx === undefined) {
+    throw new Error("useBarcodeDesigner must be used within BarcodeDesignerProvider");
+  }
+  return ctx;
+}
+
+export { MM_TO_PX };
diff --git a/frontend/hooks/useBarcodeList.ts b/frontend/hooks/useBarcodeList.ts
new file mode 100644
index 00000000..e20fe811
--- /dev/null
+++ b/frontend/hooks/useBarcodeList.ts
@@ -0,0 +1,65 @@
+import { useState, useEffect } from "react";
+import { BarcodeLabelMaster, GetBarcodeLabelsParams } from "@/types/barcode";
+import { barcodeApi } from "@/lib/api/barcodeApi";
+import { useToast } from "@/hooks/use-toast";
+
+export function useBarcodeList() {
+  const [labels, setLabels] = useState<BarcodeLabelMaster[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [limit] = useState(20);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const { toast } = useToast();
+
+  const fetchLabels = async () => {
+    setIsLoading(true);
+    try {
+      const params: GetBarcodeLabelsParams = {
+        page,
+        limit,
+        searchText,
+        useYn: "Y",
+        sortBy: "created_at",
+        sortOrder: "DESC",
+      };
+
+      const response = await barcodeApi.getLabels(params);
+
+      if (response.success && response.data) {
+        setLabels(response.data.items);
+        setTotal(response.data.total);
+      }
+    } catch (error: any) {
+      console.error("바코드 라벨 목록 조회 에러:", error);
+      toast({
+        title: "오류",
+        description: error.message || "바코드 라벨 목록을 불러오는데 실패했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLabels();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, searchText]);
+
+  const handleSearch = (text: string) => {
+    setSearchText(text);
+    setPage(1);
+  };
+
+  return {
+    labels,
+    total,
+    page,
+    limit,
+    isLoading,
+    refetch: fetchLabels,
+    setPage,
+    handleSearch,
+  };
+}
diff --git a/frontend/lib/api/barcodeApi.ts b/frontend/lib/api/barcodeApi.ts
new file mode 100644
index 00000000..d056331e
--- /dev/null
+++ b/frontend/lib/api/barcodeApi.ts
@@ -0,0 +1,115 @@
+import { apiClient } from "./client";
+import {
+  BarcodeLabelMaster,
+  BarcodeLabelLayout,
+  GetBarcodeLabelsParams,
+  GetBarcodeLabelsResponse,
+  CreateBarcodeLabelRequest,
+  UpdateBarcodeLabelRequest,
+} from "@/types/barcode";
+
+const BASE_URL = "/admin/barcode-labels";
+
+export interface BarcodeLabelTemplate {
+  template_id: string;
+  template_name_kor: string;
+  template_name_eng: string | null;
+  width_mm: number;
+  height_mm: number;
+  layout_json: string;
+  sort_order: number;
+}
+
+export const barcodeApi = {
+  /** 바코드 라벨 목록 조회 */
+  getLabels: async (params: GetBarcodeLabelsParams) => {
+    const response = await apiClient.get<{
+      success: boolean;
+      data: GetBarcodeLabelsResponse;
+    }>(BASE_URL, { params });
+    return response.data;
+  },
+
+  /** 바코드 라벨 상세 조회 */
+  getLabelById: async (labelId: string) => {
+    const response = await apiClient.get<{
+      success: boolean;
+      data: BarcodeLabelMaster;
+    }>(`${BASE_URL}/${labelId}`);
+    return response.data;
+  },
+
+  /** 라벨 레이아웃 조회 */
+  getLayout: async (labelId: string) => {
+    const response = await apiClient.get<{
+      success: boolean;
+      data: BarcodeLabelLayout;
+    }>(`${BASE_URL}/${labelId}/layout`);
+    return response.data;
+  },
+
+  /** 라벨 레이아웃 저장 */
+  saveLayout: async (labelId: string, layout: BarcodeLabelLayout) => {
+    const response = await apiClient.put<{
+      success: boolean;
+      message: string;
+    }>(`${BASE_URL}/${labelId}/layout`, layout);
+    return response.data;
+  },
+
+  /** 기본 템플릿 목록 */
+  getTemplates: async () => {
+    const response = await apiClient.get<{
+      success: boolean;
+      data: BarcodeLabelTemplate[];
+    }>(`${BASE_URL}/templates`);
+    return response.data;
+  },
+
+  /** 템플릿 상세 (레이아웃 적용용) */
+  getTemplateById: async (templateId: string) => {
+    const response = await apiClient.get<{
+      success: boolean;
+      data: BarcodeLabelTemplate & { layout: BarcodeLabelLayout };
+    }>(`${BASE_URL}/templates/${templateId}`);
+    return response.data;
+  },
+
+  /** 바코드 라벨 생성 (templateId 선택 시 해당 레이아웃 적용) */
+  createLabel: async (data: CreateBarcodeLabelRequest & { templateId?: string }) => {
+    const response = await apiClient.post<{
+      success: boolean;
+      data: { labelId: string };
+      message: string;
+    }>(BASE_URL, data);
+    return response.data;
+  },
+
+  /** 바코드 라벨 수정 */
+  updateLabel: async (labelId: string, data: UpdateBarcodeLabelRequest) => {
+    const response = await apiClient.put<{
+      success: boolean;
+      message: string;
+    }>(`${BASE_URL}/${labelId}`, data);
+    return response.data;
+  },
+
+  /** 바코드 라벨 삭제 */
+  deleteLabel: async (labelId: string) => {
+    const response = await apiClient.delete<{
+      success: boolean;
+      message: string;
+    }>(`${BASE_URL}/${labelId}`);
+    return response.data;
+  },
+
+  /** 바코드 라벨 복사 */
+  copyLabel: async (labelId: string) => {
+    const response = await apiClient.post<{
+      success: boolean;
+      data: { labelId: string };
+      message: string;
+    }>(`${BASE_URL}/${labelId}/copy`);
+    return response.data;
+  },
+};
diff --git a/frontend/lib/zebraBluetooth.ts b/frontend/lib/zebraBluetooth.ts
new file mode 100644
index 00000000..14dcd9ff
--- /dev/null
+++ b/frontend/lib/zebraBluetooth.ts
@@ -0,0 +1,118 @@
+/**
+ * Zebra 프린터 Web Bluetooth LE 연동
+ * Chrome/Edge (Chromium) 에서만 지원. BLE로 ZPL 전송 (512바이트 청크)
+ * 참고: https://developer.zebra.com/content/printing-webapp-using-webbluetooth
+ */
+
+const ZEBRA_BLE_SERVICE_UUID = "38eb4a80-c570-11e3-9507-0002a5d5c51b";
+const ZEBRA_BLE_CHAR_UUID = "38eb4a82-c570-11e3-9507-0002a5d5c51b";
+const CHUNK_SIZE = 512;
+const CHUNK_DELAY_MS = 20;
+
+export function isWebBluetoothSupported(): boolean {
+  if (typeof window === "undefined") return false;
+  return !!(navigator.bluetooth && navigator.bluetooth.requestDevice);
+}
+
+/** 지원 브라우저 안내 문구 */
+export function getUnsupportedMessage(): string {
+  if (!isWebBluetoothSupported()) {
+    return "이 브라우저는 Web Bluetooth를 지원하지 않습니다. Chrome 또는 Edge(Chromium)에서 열어주세요. HTTPS 또는 localhost 필요.";
+  }
+  return "";
+}
+
+export interface ZebraPrintResult {
+  success: boolean;
+  message: string;
+}
+
+/**
+ * Zebra 프린터를 BLE로 선택·연결 후 ZPL 데이터 전송
+ * - 사용자에게 블루투스 기기 선택 창이 뜸 (Zebra 프린터 BLE 선택)
+ * - ZPL을 512바이트 단위로 나누어 순차 전송
+ */
+export async function printZPLToZebraBLE(zpl: string): Promise<ZebraPrintResult> {
+  if (!isWebBluetoothSupported()) {
+    return {
+      success: false,
+      message: "Web Bluetooth를 지원하지 않는 브라우저입니다. Chrome 또는 Edge에서 시도해주세요.",
+    };
+  }
+
+  let device: BluetoothDevice | null = null;
+  let server: BluetoothRemoteGATTServer | null = null;
+
+  try {
+    // 1) 서비스 UUID로만 필터 시 Android에서 Zebra가 광고하지 않으면 목록에 안 나옴.
+    // 2) acceptAllDevices + optionalServices 로 모든 BLE 기기 표시 후, 연결해 Zebra 서비스 사용.
+    const useAcceptAll =
+      typeof navigator !== "undefined" &&
+      /Android/i.test(navigator.userAgent);
+
+    if (useAcceptAll) {
+      device = await navigator.bluetooth.requestDevice({
+        acceptAllDevices: true,
+        optionalServices: [ZEBRA_BLE_SERVICE_UUID],
+      });
+    } else {
+      device = await navigator.bluetooth.requestDevice({
+        filters: [{ services: [ZEBRA_BLE_SERVICE_UUID] }],
+        optionalServices: [ZEBRA_BLE_SERVICE_UUID],
+      });
+    }
+
+    if (!device) {
+      return { success: false, message: "프린터를 선택하지 않았습니다." };
+    }
+
+    server = await device.gatt!.connect();
+    let service: BluetoothRemoteGATTService;
+    try {
+      service = await server.getPrimaryService(ZEBRA_BLE_SERVICE_UUID);
+    } catch {
+      return {
+        success: false,
+        message:
+          "선택한 기기는 Zebra 프린터가 아니거나 BLE 인쇄를 지원하지 않습니다. 'ZD421' 등 Zebra 프린터를 선택해 주세요.",
+      };
+    }
+    const characteristic = await service.getCharacteristic(ZEBRA_BLE_CHAR_UUID);
+
+    const encoder = new TextEncoder();
+    const data = encoder.encode(zpl);
+    const totalChunks = Math.ceil(data.length / CHUNK_SIZE);
+
+    for (let i = 0; i < totalChunks; i++) {
+      const start = i * CHUNK_SIZE;
+      const end = Math.min(start + CHUNK_SIZE, data.length);
+      const chunk = data.slice(start, end);
+      await characteristic.writeValue(chunk);
+      if (i < totalChunks - 1 && CHUNK_DELAY_MS > 0) {
+        await new Promise((r) => setTimeout(r, CHUNK_DELAY_MS));
+      }
+    }
+
+    return { success: true, message: "Zebra 프린터로 전송했습니다." };
+  } catch (err: unknown) {
+    const e = err as Error & { name?: string };
+    if (e.name === "NotFoundError") {
+      return { success: false, message: "Zebra 프린터(BLE)를 찾을 수 없습니다. 프린터 전원과 블루투스 설정을 확인하세요." };
+    }
+    if (e.name === "NotAllowedError") {
+      return { success: false, message: "블루투스 연결이 거부되었습니다." };
+    }
+    return {
+      success: false,
+      message: e.message || "Zebra BLE 출력 중 오류가 발생했습니다.",
+    };
+  } finally {
+    if (server && device?.gatt?.connected) {
+      try {
+        device.gatt.disconnect();
+      } catch {
+        // ignore
+      }
+    }
+  }
+}
diff --git a/frontend/lib/zebraBrowserPrint.ts b/frontend/lib/zebraBrowserPrint.ts
new file mode 100644
index 00000000..b1ca8ad8
--- /dev/null
+++ b/frontend/lib/zebraBrowserPrint.ts
@@ -0,0 +1,121 @@
+/**
+ * Zebra Browser Print 연동
+ * - 지브라 공식 "Zebra Browser Print" 앱(Windows/macOS/Android)과 웹 페이지 통신
+ * - 앱 설치 시 네트워크·Bluetooth 프린터 발견 후 ZPL 전송 가능 (Chrome 권장)
+ * - Android: Browser Print APK 설치 시 Chrome에서 목록에 안 나오는 문제 우회 가능
+ * 참고: https://developer.zebra.com/products/printers/browser-print
+ */
+
+const BROWSER_PRINT_SCRIPT_URL =
+  "https://cdn.jsdelivr.net/npm/zebra-browser-print-min@3.0.216/BrowserPrint-3.0.216.min.js";
+
+/** ZebraPrintResult와 동일한 형태 (zebraBluetooth와 공유) */
+export interface ZebraPrintResult {
+  success: boolean;
+  message: string;
+}
+
+declare global {
+  interface Window {
+    BrowserPrint?: {
+      getDefaultDevice: (
+        type: string,
+        onSuccess: (device: BrowserPrintDevice) => void,
+        onError: (err: string) => void
+      ) => void;
+    };
+  }
+}
+
+interface BrowserPrintDevice {
+  send: (
+    data: string,
+    onSuccess: () => void,
+    onError: (err: string) => void
+  ) => void;
+}
+
+let scriptLoadPromise: Promise<boolean> | null = null;
+
+/** Browser Print 스크립트를 한 번만 동적 로드 */
+function loadBrowserPrintScript(): Promise<boolean> {
+  if (typeof window === "undefined") return Promise.resolve(false);
+  if (window.BrowserPrint) return Promise.resolve(true);
+  if (scriptLoadPromise) return scriptLoadPromise;
+
+  scriptLoadPromise = new Promise((resolve) => {
+    const existing = document.querySelector(
+      `script[src="${BROWSER_PRINT_SCRIPT_URL}"]`
+    );
+    if (existing) {
+      resolve(!!window.BrowserPrint);
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = BROWSER_PRINT_SCRIPT_URL;
+    script.async = true;
+    script.onload = () => resolve(!!window.BrowserPrint);
+    script.onerror = () => resolve(false);
+    document.head.appendChild(script);
+  });
+
+  return scriptLoadPromise;
+}
+
+/** Browser Print 앱이 설치되어 있고 기본 프린터를 사용할 수 있는지 확인 */
+export function isBrowserPrintAvailable(): boolean {
+  return typeof window !== "undefined" && !!window.BrowserPrint;
+}
+
+/**
+ * Zebra Browser Print 앱으로 ZPL 전송 (기본 프린터 사용)
+ * - 앱 미설치 또는 기본 프린터 없으면 실패
+ */
+export function printZPLToBrowserPrint(zpl: string): Promise<ZebraPrintResult> {
+  return loadBrowserPrintScript().then((loaded) => {
+    if (!loaded || !window.BrowserPrint) {
+      return {
+        success: false,
+        message:
+          "Zebra Browser Print 스크립트를 불러올 수 없습니다. CDN 연결을 확인하세요.",
+      };
+    }
+
+    return new Promise<ZebraPrintResult>((resolve) => {
+      window.BrowserPrint!.getDefaultDevice(
+        "printer",
+        (device) => {
+          if (!device) {
+            resolve({
+              success: false,
+              message:
+                "기본 Zebra 프린터가 설정되지 않았습니다. Browser Print 앱에서 프린터를 검색해 기본으로 지정해 주세요.",
+            });
+            return;
+          }
+          device.send(
+            zpl,
+            () => resolve({ success: true, message: "Zebra Browser Print로 전송했습니다." }),
+            (err) =>
+              resolve({
+                success: false,
+                message: err || "Browser Print 전송 중 오류가 발생했습니다.",
+              })
+          );
+        },
+        (err) =>
+          resolve({
+            success: false,
+            message:
+              err ||
+              "Zebra Browser Print 앱이 설치되어 있지 않거나 연결할 수 없습니다. Android에서는 'Zebra Browser Print' 앱을 설치한 뒤 Chrome에서 이 페이지를 허용해 주세요.",
+          })
+      );
+    });
+  });
+}
+
+/** Browser Print 앱 설치/다운로드 안내 문구 */
+export function getBrowserPrintHelpMessage(): string {
+  return "Android에서 Bluetooth 목록에 프린터가 안 나오면, Zebra 공식 'Zebra Browser Print' 앱을 설치한 뒤 앱에서 프린터를 검색·기본 설정하고, 이 사이트를 허용하면 'Zebra 프린터로 출력'으로 인쇄할 수 있습니다.";
+}
diff --git a/frontend/lib/zplGenerator.ts b/frontend/lib/zplGenerator.ts
new file mode 100644
index 00000000..c0b4dd17
--- /dev/null
+++ b/frontend/lib/zplGenerator.ts
@@ -0,0 +1,67 @@
+/**
+ * ZPL(Zebra Programming Language) 생성
+ * ZD421 등 Zebra 프린터용 라벨 데이터 생성 (200 DPI = 8 dots/mm 기준)
+ */
+
+import { BarcodeLabelLayout } from "@/types/barcode";
+
+const MM_TO_PX = 4;
+const DOTS_PER_MM = 8; // 200 DPI
+
+function pxToDots(px: number): number {
+  const mm = px / MM_TO_PX;
+  return Math.round(mm * DOTS_PER_MM);
+}
+
+export function generateZPL(layout: BarcodeLabelLayout): string {
+  const { width_mm, height_mm, components } = layout;
+  const widthDots = Math.round(width_mm * DOTS_PER_MM);
+  const heightDots = Math.round(height_mm * DOTS_PER_MM);
+
+  const lines: string[] = [
+    "^XA",
+    "^PW" + widthDots,
+    "^LL" + heightDots,
+    "^LH0,0",
+  ];
+
+  const sorted = [...components].sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+
+  for (const c of sorted) {
+    const x = pxToDots(c.x);
+    const y = pxToDots(c.y);
+    const w = pxToDots(c.width);
+    const h = pxToDots(c.height);
+
+    if (c.type === "text") {
+      const fontH = Math.max(10, Math.min(120, (c.fontSize || 10) * 4)); // 대략적 변환
+      const fontW = Math.round(fontH * 0.6);
+      lines.push(`^FO${x},${y}`);
+      lines.push(`^A0N,${fontH},${fontW}`);
+      lines.push(`^FD${escapeZPL(c.content || "")}^FS`);
+    } else if (c.type === "barcode") {
+      if (c.barcodeType === "QR") {
+        const size = Math.min(w, h);
+        const qrSize = Math.max(1, Math.min(10, Math.round(size / 20)));
+        lines.push(`^FO${x},${y}`);
+        lines.push(`^BQN,2,${qrSize}`);
+        lines.push(`^FDQA,${escapeZPL(c.barcodeValue || "")}^FS`);
+      } else {
+        // CODE128: ^BC, CODE39: ^B3
+        const mod = c.barcodeType === "CODE39" ? "^B3N" : "^BCN";
+        const showText = c.showBarcodeText !== false ? "Y" : "N";
+        lines.push(`^FO${x},${y}`);
+        lines.push(`${mod},${Math.max(20, h - 10)},${showText},N,N`);
+        lines.push(`^FD${escapeZPL(c.barcodeValue || "")}^FS`);
+      }
+    }
+    // 이미지/선/사각형은 ZPL에서 비트맵 또는 ^GB 등으로 확장 가능 (생략)
+  }
+
+  lines.push("^XZ");
+  return lines.join("\n");
+}
+
+function escapeZPL(s: string): string {
+  return s.replace(/\^/g, "^^").replace(/~/g, "~~");
+}
diff --git a/frontend/types/barcode.ts b/frontend/types/barcode.ts
new file mode 100644
index 00000000..4e6e5e41
--- /dev/null
+++ b/frontend/types/barcode.ts
@@ -0,0 +1,86 @@
+/**
+ * 바코드 라벨 관리 시스템 타입 정의
+ * ZD421 등 바코드 프린터 연동용 라벨 템플릿/출력 관리
+ */
+
+// 캔버스 요소 (디자이너용)
+export interface BarcodeLabelComponent {
+  id: string;
+  type: "text" | "barcode" | "image" | "line" | "rectangle";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  zIndex: number;
+  content?: string;
+  fontSize?: number;
+  fontColor?: string;
+  fontWeight?: string;
+  barcodeType?: string;
+  barcodeValue?: string;
+  showBarcodeText?: boolean;
+  imageUrl?: string;
+  objectFit?: string;
+  lineColor?: string;
+  lineWidth?: number;
+  backgroundColor?: string;
+}
+
+export interface BarcodeLabelLayout {
+  width_mm: number;
+  height_mm: number;
+  components: BarcodeLabelComponent[];
+}
+
+// 바코드 라벨 마스터 (목록/카드용)
+export interface BarcodeLabelMaster {
+  label_id: string;
+  label_name_kor: string;
+  label_name_eng: string | null;
+  description: string | null;
+  width_mm?: number;
+  height_mm?: number;
+  layout_json?: string | null;
+  template_type?: string;
+  use_yn: string;
+  created_at: string;
+  created_by: string | null;
+  updated_at: string | null;
+  updated_by: string | null;
+}
+
+// 목록 조회 응답
+export interface GetBarcodeLabelsResponse {
+  items: BarcodeLabelMaster[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+// 목록 조회 파라미터
+export interface GetBarcodeLabelsParams {
+  page?: number;
+  limit?: number;
+  searchText?: string;
+  useYn?: string;
+  sortBy?: string;
+  sortOrder?: "ASC" | "DESC";
+}
+
+// 생성 요청
+export interface CreateBarcodeLabelRequest {
+  labelNameKor: string;
+  labelNameEng?: string;
+  description?: string;
+  templateType?: string;
+  templateId?: string; // 선택 시 해당 템플릿 레이아웃 적용
+}
+
+// 수정 요청
+export interface UpdateBarcodeLabelRequest {
+  labelNameKor?: string;
+  labelNameEng?: string;
+  description?: string;
+  templateType?: string;
+  useYn?: string;
+}