sgcHTML 신규 컴포넌트 4종, 신규 라이브 데모 5종

sgcWebSockets 2026.9.0에 4개의 새로운 sgcHTML 컴포넌트가 추가되었습니다. 이번에는 개별적으로 소개하는 대신, 이들을 활용해 5개의 완전한 애플리케이션을 만들었습니다: 창고 관리 시스템, POS 단말, 리포트 및 분석 포털, 멀티 테넌트 SaaS 제어 플레인, 현장 서비스 디스패치 앱입니다. 다섯 개 모두 기존에 있던 ERP, Admin CRUD, Live Monitor, Customer Portal, Helpdesk 데모와 나란히 eSeGeCe 데모 서버에서 오늘부터 실시간으로 운영됩니다.

새로운 컴포넌트는 CameraScanner(브라우저 자체 카메라로 실시간 바코드 및 QR 스캔을 수행하며, 추가로 라이브러리가 필요 없습니다), NumPad(POS용으로 만들어진 터치 숫자 키패드), CommandPalette(여러분의 애플리케이션을 위한 Ctrl+K 빠른 실행 패턴), EmptyState(그리드나 검색 결과에 표시할 내용이 없을 때 보여주는 패널)입니다. 이 글에서는 각 컴포넌트를 차례로 살펴본 다음, 이들을 활용한 다섯 개의 데모를 소개합니다.

CameraScanner — 라이브러리 추가 없이 바코드와 QR 스캔

TsgcHTMLComponent_CameraScanner는 브라우저의 카메라를 열고, 브라우저 자체의 네이티브 BarcodeDetector API를 사용해 바코드와 QR 코드를 디코딩합니다. 번들로 포함된 디코더도 없고 CDN에서 가져오는 것도 없습니다. BarcodeDetector를 사용할 수 없는 환경에서는 패널이 그 사실을 알리고, 애초에 이 API에 의존하지 않는 수동 입력과 사진 촬영을 통해 계속 동작합니다. 카메라는 모든 종료 경로(탭 숨김, 페이지 이탈, 뒤로 가기 버튼)에서 확실히 해제되므로 카메라 표시등은 항상 꺼집니다.

uses
  sgcHTML_Component_CameraScanner;

var
  oScanner: TsgcHTMLComponent_CameraScanner;
begin
  oScanner := TsgcHTMLComponent_CameraScanner.Create(nil);
  try
    oScanner.ScannerID := 'receiving_scan';
    oScanner.Mode := smBoth;               // scan barcodes AND capture a photo
    oScanner.Formats := 'qr_code,ean_13,code_128';
    oScanner.FieldName := 'sku';
    oScanner.ContinuousScan := True;
    oScanner.BeepOnScan := True;

    WebModule.Response := oScanner.HTML;   // camera panel + hidden fields + inline script
  finally
    oScanner.Free;
  end;
end;

NumPad — 잘못된 소수점 구분자를 절대 보내지 않는 키패드

TsgcHTMLComponent_NumPad는 POS 입력을 위해 만들어진 터치 숫자 및 통화 키패드입니다. 짚고 넘어갈 만한 엔지니어링 포인트는, 이 컴포넌트가 마크업과 자체 스크립트에 기록하는 모든 숫자가 로케일에 독립적인 포맷터를 거친다는 점입니다. 브라우저의 지역 설정을 따르는 루틴은 절대 사용하지 않습니다. 이 컴포넌트가 전송하는 히든 필드는 항상 12.50과 같은 형식의 숫자를 담으며, 12,50이 되는 일은 없습니다. 따라서 동일한 폼이 스페인어, 독일어, 영어 브라우저에서도 항상 같은 바이트를 제출합니다.

uses
  sgcHTML_Component_NumPad;

var
  oPad: TsgcHTMLComponent_NumPad;
begin
  oPad := TsgcHTMLComponent_NumPad.Create(nil);
  try
    oPad.PadID := 'till_amount';
    oPad.FieldName := 'amount';
    oPad.Mode := npCurrency;
    oPad.CurrencySymbol := '$';
    oPad.DecimalPlaces := 2;
    oPad.QuickAmounts.CommaText := '5,10,20,50';   // tender shortcut buttons

    WebModule.Response := oPad.HTML;   // display + calculator-style keys + quick amounts
  finally
    oPad.Free;
  end;
end;

CommandPalette — 여러분의 애플리케이션을 위한 Ctrl+K

TsgcHTMLComponent_CommandPalette는 VS Code, Slack, Linear에서 익숙한 Ctrl+K / Cmd+K 오버레이 실행기입니다. 단축키로 열기 전까지는 숨겨져 있고, Esc 또는 배경 클릭으로 닫히며, 입력할 때마다 부분 문자열 검사에 이어 퍼지 서브시퀀스 검사로 필터링되므로, nu를 입력해도 “New User”를 찾아냅니다. 항목들은 클라이언트 측에서 필터링하기 위해 JSON으로 브라우저에 전달되는 대신, 서버에서 마크업으로 렌더링되므로 모든 캡션은 정확히 한 번씩 HTML 인코딩됩니다.

uses
  sgcHTML_Component_CommandPalette;

var
  oPalette: TsgcHTMLComponent_CommandPalette;
begin
  oPalette := TsgcHTMLComponent_CommandPalette.Create(nil);
  try
    oPalette.PaletteID := 'app_commands';

    oPalette.AddItem('New Invoice', '/invoices/new', 'invoice:new', 'Create', 'Ctrl+N');
    oPalette.AddItem('Customer Search', '/customers', '', 'Navigate');
    with oPalette.Items.Add do
    begin
      Caption := 'Export Report';
      Icon := 'bi bi-download';
      DataAction := 'report:export';
      Category := 'Actions';
    end;

    WebModule.Response := oPalette.HTML;   // hidden overlay + inline script
  finally
    oPalette.Free;
  end;
end;

EmptyState — 아직 아무것도 없다고 제대로 알려주는 방법

TsgcHTMLComponent_EmptyState는 그리드, 목록, 검색 결과에 표시할 행이 없을 때 보여주는 패널로, 아이콘 또는 이미지, 제목, 설명, 최대 두 개의 버튼으로 구성됩니다. 스크립트를 전혀 출력하지 않으므로, 페이지가 필요로 하는 만큼 여러 번 out-of-band 프래그먼트로 내보내도 안전합니다. 짚고 넘어갈 보안 참고 사항 하나: Icon은 CSS 아이콘 클래스 또는 인라인 SVG 마크업을 받을 수 있으며, 인라인 마크업은 좁은 범위의 안전성 검사를 거친 뒤 그대로 출력되므로 최종 사용자 입력을 절대 여기에 바인딩해서는 안 됩니다. 신뢰할 수 없는 텍스트는 대신 항상 HTML 인코딩되는 Title과 Description에 바인딩하세요.

uses
  sgcHTML_Enums, sgcHTML_Component_EmptyState;

var
  oEmpty: TsgcHTMLComponent_EmptyState;
begin
  oEmpty := TsgcHTMLComponent_EmptyState.Create(nil);
  try
    oEmpty.Icon := 'bi bi-inbox';
    oEmpty.Title := 'No results';
    oEmpty.Description := 'Try a different search, or clear your filters.';
    oEmpty.ActionCaption := 'Clear filters';
    oEmpty.ActionHref := '/orders';
    oEmpty.ActionStyle := bsPrimary;

    WebModule.Response := oEmpty.HTML;
  finally
    oEmpty.Free;
  end;
end;

// Or the one-line static helper for the simple case:
WebModule.Response := TsgcHTMLComponent_EmptyState.Build('No results', 'Try a different search.');

이들로 만든 다섯 개의 새로운 데모

코드 샘플만으로는 컴포넌트의 용도를 보여주는 데 한계가 있습니다. 그래서 네 개의 새로운 컴포넌트와 함께, 각각 자체 로그인, 실제 SQLite 데이터베이스, 인쇄 가능한 리포트를 갖춘 다섯 개의 완전한 애플리케이션을 전부 sgcHTML만으로 만들었습니다. 다섯 개 모두 현재 eSeGeCe 데모 서버에서 실시간으로 운영되고 있습니다.

창고 관리 (WMS) — 입고, 피킹, 포장, 출하, 재고 실사에 더해 CameraScanner로 바코드를 스캔해 피킹 목록에 바로 반영하는 휴대용 단말기까지 갖췄습니다. 라이브 데모 열기 →

POS 시스템 — NumPad를 중심으로 만든 매장 판매 시스템으로, 상품, 프로모션, 고객, 마감 정산, 매출 보고 기능을 갖췄습니다. 라이브 데모 열기 →

리포트 및 분석 — 매출, 마진, 운영 대시보드와 피벗 빌더, 저장된 보기, 예약 내보내기 작업을 갖췄으며, 화면의 숫자가 실제가 되도록 약 25,000건의 주문 라인을 미리 채워 넣었습니다. 라이브 데모 열기 →

멀티 테넌트 SaaS — 테넌트 온보딩, 결제, 팀 및 역할 관리(동일한 RolesPermissions 컴포넌트를 기반으로 하며, 이제 WebSocket 채널과 함께 일반 폼 제출 옵션도 제공합니다)와 플랜 및 기능 플래그를 위한 플랫폼 관리 콘솔을 갖췄습니다. 라이브 데모 열기 →

현장 서비스 — 작업 배차, 실시간 기술자 지도, 간트 일정 관리, 고객, 자산 및 부품 관리에 더해, 부품을 스캔해 작업에 바로 반영하는 CameraScanner도 다시 활용했습니다. 라이브 데모 열기 →

직접 사용해보기

위 다섯 개를 포함한 열 개의 라이브 데모 전부는 상단 내비게이션의 sgcHTML › 온라인 데모 메뉴에서 이동할 수 있으며, CameraScanner, NumPad, CommandPalette, EmptyState의 전체 속성, 메서드, 이벤트 레퍼런스는 온라인 도움말에서 확인할 수 있습니다.

질문이나 피드백이 있으신가요? 아니면 특정 데모 시나리오를 추가하고 싶으신가요? 문의하기 — 실제로 코드를 작성한 사람에게서 답변을 받으실 수 있습니다.