신규: sgcCustomization HTML. 귀하의 웹 애플리케이션을 대신 구축해 드립니다. 필요한 애플리케이션을 설명해 주시면 저희 팀이 sgcHTML + sgcWebSockets로 구축해 드립니다. 패키지는 €149부터 시작합니다.
sgcCustomization HTML 알아보기
Delphi 7 ~ 13, C++ Builder 및 .NET 110개 컴포넌트, 10개 패밀리

sgcHTML: Delphi, C++ Builder 및 .NET용 웹 UI 컴포넌트

Delphi, C++ Builder 및 .NET에서 바로 완전하고 현대적인 웹 UI를 구축하십시오. sgcHTML은 차트, 그리드, 폼, 대시보드, 채팅 등 110개의 즉시 사용 가능한 위젯을 갖춘 서버 사이드 컴포넌트 프레임워크입니다. 많은 위젯이 TDataSet에 바로 바인딩되고, Bootstrap 5 마크업으로 렌더링되며 htmx를 통해 인터랙티브하게 유지됩니다. 사용자가 Object Pascal 또는 C#을 작성하면 sgcHTML이 HTML, CSS 및 JavaScript를 작성합니다.

DelphiC++ Builder.NETBootstrap 5 + htmx데이터 연동 / TDataSetJavaScript 불필요

직접 구축하고 싶지 않으십니까? 저희가 대신 구축해 드립니다 →

브라우저 창에 표시된 Delphi용 sgcHTML 기반 ERP 대시보드: KPI 카드, 매출 막대 차트, 최근 인보이스 그리드.

시작하기 →

sgcHTML만으로 만든 하나의 애플리케이션

고객, 제품, 공급업체, 송장 관리에 대시보드 차트, 역할 기반 관리자 기능, passkey 로그인을 더했습니다. DLL 없이 7.7 MB짜리 Delphi 실행 파일 하나로 SQLite 기반의 완전한 웹 ERP를 제공합니다.

exe 하나로 돌아가는 완전한 ERP

ERP: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

고객

ERP: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

송장

ERP: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

보고서

110개 컴포넌트, 10개 패밀리

내비게이션 요소부터 데이터 그리드, 차트, 폼, 오버레이, AI 채팅까지, Bootstrap 5의 전체 구성 요소를 네이티브 컴포넌트로 제공합니다. 각 항목은 Delphi, C++ Builder, .NET 예제가 있는 자체 페이지로 연결됩니다.

내비게이션 및 구조

NavBar, Sidebar, Breadcrumb, Tabs, Pagination, Toolbar, TreeView, Stepper, Dropdown, ButtonGroup, ListGroup, DashboardLayout, Splitter.

컴포넌트 보기 →

데이터 및 표

Grid, DataTable, TreeGrid, PivotTable, Calendar, Scheduler, Timeline, ActivityFeed, KanbanBoard, Gantt: 정렬, 필터링, 내보내기가 가능하며 데이터셋에 바인딩됩니다.

컴포넌트 보기 →

차트 및 시각화

Chart (Chart.js), CandlestickChart, Gauge, Heatmap, Sparkline, TreeMap, Diagram (SVG flow), Map (Leaflet), QRCode, Barcode: 사용자 자신의 데이터셋을 기반으로 한 시각화.

컴포넌트 보기 →

폼 및 입력

Form, Edit, Memo, CheckBox, RadioGroup, Select, MultiSelect, InputGroup, AutoComplete, DatePicker, TimePicker, ColorPicker, Slider, FileUpload, RichEditor, Rating, SignaturePad, Transfer.

컴포넌트 보기 →

콘텐츠 및 레이아웃

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video, Badge, PDFViewer: 대시보드를 위한 카드, 미디어, KPI 타일.

컴포넌트 보기 →

오버레이 및 피드백

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder, ContextMenu, ProgressBar, JobProgress, LogViewer: 대화 상자와 상태 표시 화면.

컴포넌트 보기 →

채팅 및 AI

ChatBox, Chat (WhatsApp 스타일), 제공자 선택기, 토큰 스트리밍 및 RAG 출처 인용 기능을 갖춘 AIChat, 실시간 접속 상태를 위한 Presence.

컴포넌트 보기 →

인증

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (passkeys), UserManagement, RolesPermissions: 바로 사용할 수 있는 로그인 흐름과 관리자 화면.

컴포넌트 보기 →

계측기 및 SCADA

Gauge, LinearGauge, LED, LEDBar, SegmentDisplay, Odometer, AnalogClock, Compass, VUMeter, Knob, ToggleSwitch, PushButton, NumericStepper, StripChart, Oscilloscope, Annunciator, SCADAPanel. 제어실 패널을 서버가 MQTT 바인딩으로 실시간으로 유지합니다.

컴포넌트 보기 →

인프라 및 엔진

EngineServer, HTMXEngine, PageBuilder, TemplateBootstrap, ThemeController, ThemeBuilder, HTMXFragment, HTMXRouter: 페이지를 제공하고 실시간으로 유지하는 비시각적 구성 요소.

컴포넌트 보기 →

전체 기능 매트릭스 보기 →

사용자는 Pascal 또는 C#을 작성하고, sgcHTML은 프런트엔드를 작성합니다.

sgcHTML은 기존 Delphi, C++ Builder 또는 .NET 백엔드를 웹 애플리케이션 서버로 전환합니다. 모든 컴포넌트는 Bootstrap 5 HTML을 내보내는 네이티브 클래스입니다. htmx는 손으로 작성한 JavaScript 한 줄 없이도 페이지를 인터랙티브하고 실시간으로 유지합니다.

HTML을 렌더링하는 컴포넌트

모든 위젯은 클래스입니다: TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form 외 86개가 더 있습니다. 속성을 설정한 다음 HTML 속성을 읽으면 즉시 제공할 수 있는 깔끔한 Bootstrap 5 마크업을 얻을 수 있습니다.

사용자 자신의 서버로 제공

TsgcHTMLEngine_Server 를 배치하거나(또는 HTML을 기존 TsgcWebSocketHTTPServer에 연결하십시오). 요청은 OnCommandGet 핸들러에 도착하며, 사용자는 컴포넌트로 구성한 페이지로 응답합니다. 외부 웹 스택이 필요 없습니다.

WebBroker 및 DataSnap 호스팅

sgcHTML은 sgcWebSockets 서버에 종속되지 않습니다. 컴포넌트로 구성한 동일한 페이지를 모든 Embarcadero WebBroker 애플리케이션에서 TsgcHTMX_Engine_Server_WebBroker를 통해 제공하거나, REST 엔드포인트와 동일한 포트에서 실시간 WebSocket 푸시를 사용하여 DataSnap 서버에서 제공하십시오.

WebBroker 및 DataSnap 호스팅 →

htmx를 통한 인터랙티브 기능

TsgcHTMX_Engine_Server 를 추가하면 클릭, 폼 전송, 실시간 업데이트가 Pascal/C# 이벤트 핸들러로 왕복합니다. 서버가 HTML 조각을 제자리에서 교체합니다. JavaScript 빌드 체인 없이 SPA 같은 사용감을 얻습니다.

WebSocket을 통한 실시간 처리

htmx가 sgcWebSockets 서버 위에서 실행되기 때문에, 연결된 모든 브라우저에 실시간 HTML을 푸시할 수 있습니다. 대시보드, 모니터 및 채팅 창은 데이터가 변경되는 즉시 업데이트됩니다. 서버 주도 방식이며 폴링이 없습니다. 프록시가 WebSocket을 차단하는 곳에서는 같은 페이지가 대신 서버 전송 이벤트로 업데이트를 받을 수 있습니다.

테마 및 템플릿

TsgcHTMLTemplate_Bootstrap 은 콘텐츠를 완전한 반응형 문서로 감쌉니다. TsgcHTMLThemeController 와 TsgcHTMLThemeBuilder 는 라이트/다크 테마와 공유 스타일시트를 제공합니다. Bootstrap 5.3과 htmx가 내장되어 있으므로 런타임에 CDN이 필요 없습니다.

직접 데이터베이스 바인딩

Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline 및 Form은 TDataSet 에 바로 바인딩되며, LoadFromDataSet / DataSource를 사용합니다. 컴포넌트를 쿼리에 연결하면 행이 렌더링됩니다.

현지화된 UI, 17개 언어

sgcHTML은 버튼, 레이블, 유효성 검사 메시지 등 내장 UI 텍스트를 17개 언어로 제공합니다: 영어, 스페인어, 프랑스어, 독일어, 포르투갈어, 이탈리아어, 네덜란드어, 스웨덴어, 노르웨이어, 폴란드어, 체코어, 터키어, 러시아어, 중국어, 일본어, 한국어 및 아랍어. sgcHTMLSetLanguage 로 하나를 선택하면 컴포넌트가 CJK, 키릴 문자 및 아랍어를 포함한 올바른 네이티브 문자로 방문자의 언어에 맞게 렌더링됩니다. 아랍어나 히브리어 같은 우측에서 좌측으로 쓰는 언어는 페이지 전체를 자동으로 반전합니다. 페이지가 dir="rtl"로 렌더링되고 Bootstrap의 RTL 스타일시트를 불러오며, 사이드바, 그리드, 스테퍼, 채팅 및 기타 컴포넌트를 좌우 반전하므로 코드를 바꿀 필요가 없습니다.

기본적으로 안전한 출력

모든 컴포넌트는 동적 텍스트, 속성, 인라인 JavaScript 및 URL을 자동 HTML, 속성, JavaScript 및 URL 인코딩과 URL 정리(sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL)를 거쳐 처리하므로, 사용자 데이터가 자신의 컨텍스트를 벗어나 스크립트를 주입할 수 없습니다. 추가 작업 없이 XSS 및 주입 방어가 켜져 있습니다.

우측에서 좌측으로 쓰는 언어: 아랍어와 히브리어

아랍어와 히브리어는 페이지 전체를 자동으로 우측에서 좌측으로 전환합니다: dir="rtl", Bootstrap의 RTL 스타일시트, 좌우 반전된 컴포넌트가 적용되며 코드 변경은 필요 없습니다.

우측에서 좌측(RTL)

한 페이지를 영어, 아랍어, 히브리어로 제공합니다. 아랍어나 히브리어를 선택하면 사이드바부터 그리드까지 전체 레이아웃이 오른쪽에서 왼쪽으로 전환됩니다. 코드 변경 없이 언어만 바꾸면 됩니다.

버튼, 레이블, 유효성 검사 메시지 등 내장 UI 텍스트를 영어, 스페인어, 프랑스어, 독일어, 포르투갈어, 이탈리아어, 네덜란드어, 스웨덴어, 노르웨이어, 폴란드어, 체코어, 터키어, 러시아어, 중국어, 일본어, 한국어, 아랍어로 제공합니다. 언어는 sgcHTMLSetLanguage로 선택합니다.

라이브 데모 열기 →

현지화 도움말 항목 읽기

sgcHTML의 새로운 기능

추가된 모든 기능은 사용하기 전까지 꺼져 있으므로, 이를 사용하지 않는 페이지는 이전과 똑같이 렌더링됩니다. 전체 목록은 다음 문서에 있습니다: 기능 매트릭스.

ChatGPT와 Claude 안의 페이지

MCP 도구가 텍스트 대신 페이지로 응답하며, 이 페이지는 일반 웹 페이지에 사용하는 것과 같은 컴포넌트로 만들어져 ChatGPT, Claude, VS Code에서 렌더링됩니다. Enterprise 또는 All-Access 에디션, 또는 sgcAI 팩이 필요합니다. MCPApp을 참조하십시오.

AI 페이지 생성기

페이지를 설명하거나 디자이너에 스크린샷을 건네면, 사용자 자신의 컴포넌트로 페이지를 구성합니다. 레지스트리에서 만든 스키마를 기준으로 응답하므로 제공하지 않은 클래스를 이름으로 지정할 수 없으며, 수락하기 전까지는 아무것도 적용되지 않습니다. Enterprise 또는 All-Access 에디션 또는 sgcAI 팩의 AI 유닛이 필요합니다. 가이드 읽기.

하나의 컴포넌트로 만든 CRUD

한 테이블의 목록, 검색, 페이징, 폼, 삭제, 쓰기 경로를 하나의 컴포넌트로 제공하며, 데이터셋 또는 사용자 자신의 SQL을 대상으로 합니다. IDE 마법사가 이를 생성합니다. CRUD를 참조하십시오.

그리드에 질문하기

일상 언어로 된 질문이 필터, 정렬, 그룹화, 강조 표시로 변환되며, 무엇이든 적용되기 전에 사용자 자신의 열을 기준으로 검증됩니다. 내장 파서를 통해 API 키 없이 동작하며, 에디션에 AI 유닛이 포함되어 있으면 일곱 개의 제공자와 함께 동작합니다. AIAssistant를 참조하십시오.

닫힌 브라우저에 도달하기

WebSocket을 차단하는 네트워크를 위한 서버 전송 이벤트, 실행 중이 아닌 브라우저를 위한 Web Push, 알림 수신함, 환경설정 테이블을 제공합니다. Web Push에는 Enterprise 또는 All-Access 에디션이 필요합니다. WebPush를 참조하십시오.

세션, 라우팅, 테스트

쿠키 세션, CSRF 토큰, 로그인 제한, 역할별 라우트 보호를 제공합니다. 라우트의 경로 매개변수와 메서드 필터, 페이지 템플릿의 단일 페이지 내비게이션, 그리고 생성한 마크업을 테스트하는 도우미도 있습니다. Auth를 참조하십시오.

ASP.NET Core Razor Tag Helpers

Telerik이나 DevExpress 방식으로 ASP.NET Core MVC 또는 Razor Pages 애플리케이션을 만드신다면, 이제 sgcHTML도 같은 언어를 사용합니다. 다음과 같은 Tag Helper: <sgc-grid>, <sgc-form>, <sgc-dialog> 및 <sgc-chart>, 그리고 대응하는 fluent API인 Html.Sgc()는 서버에서 Bootstrap 5 HTML을 렌더링하고 htmx로 컨트롤러와 통신합니다. 배워야 할 JavaScript 프레임워크도, 작성해야 할 JSON 데이터 소스도 없습니다. Razor 계층은 esegece.sgcHTML.AspNetCore NuGet 패키지에 포함되며 Community 에디션에서도 사용할 수 있습니다.

IQueryable 위의 그리드

<sgc-grid> 는 서버에서 페이징, 정렬, 필터(텍스트와 범위), 검색을 처리하고 XLSX와 PDF로 내보냅니다. 컨트롤러는 this.SgcGrid(request, query)로 응답하고, EF Core가 모든 클릭을 매개변수화된 SQL로 바꿉니다. push-url 은 페이지, 정렬, 필터를 주소 표시줄에 유지하므로 새로 고침과 뒤로 가기 버튼도 동작합니다.

asp-for로 바인딩하는 폼

<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> 및 <sgc-autocomplete> 는 모델에 asp-for 로 모델에 바인딩되고 각 입력 아래에 ModelState 오류를 표시합니다. <sgc-form hx="true"> 는 htmx로 전송하며, this.SgcRedirect(url) 은 유효한 저장 후에 이동합니다.

대화 상자에서 편집

sgc-dialog="name" 이 지정된 요소는 자신의 URL을 <sgc-dialog>에 불러옵니다. 유효한 전송 후 this.SgcCloseDialog("edit-order", refresh: "orders") 가 대화 상자를 닫고 그리드를 다시 불러옵니다. 직접 작성하는 스크립트 없이 구현하는 팝업 편집 패턴입니다.

SignalR 없이 실시간으로 푸시되는 차트

<sgc-chart> 는 정적 데이터를 렌더링하거나, refresh-every="5s"로 액션을 폴링하거나, live="true"로 동작합니다. 백그라운드 서비스가 hub.BroadcastChartAsync(...) 를 호출하면 열려 있는 모든 브라우저가 sgcHTML WebSocket을 통해 차트를 다시 그립니다. Telerik과 DevExpress 차트는 서버 푸시를 위해 SignalR 구성이 필요하지만, sgcHTML에는 기본으로 내장되어 있습니다.

@* Views/Orders/Index.cshtml, page 1 renders inline from the model *@
@model IQueryable<OrderRow>

<sgc-grid name="orders" key="Id" items="Model"
          asp-action="Read" asp-export-action="Export" export="xlsx,pdf"
          page-size="15" sortable="true" filterable="true"
          searchable="true" push-url="true">
    <sgc-column field="Reference" searchable="true" />
    <sgc-column field="Customer" searchable="true" />
    <sgc-column field="OrderDate" title="Date" format="{0:yyyy-MM-dd}" filter="range" />
    <sgc-column field="Total" format="{0:N2}" align="right" filter="range" />
    <sgc-column field="Paid" />
</sgc-grid>
// Program.cs
builder.Services.AddControllersWithViews();
builder.Services.AddSgcHtml(o => o.ServeRootPage = false);  // the MVC app owns "/"
builder.Services.AddSgcHtmlRazor();   // SgcDataRequest binder, grid state, /sgcHTML.css
// ...
app.UseWebSockets();   // before UseSgcHtml, needed by live charts
app.UseSgcHtml();
app.MapDefaultControllerRoute();

// Controllers/OrdersController.cs
public class OrdersController : Controller
{
    private readonly ShopDb FDb;

    public OrdersController(ShopDb db) { FDb = db; }

    // An IQueryable projection: EF Core turns paging, sort and filters into SQL.
    private IQueryable<OrderRow> Rows() =>
        FDb.Orders.AsNoTracking().Select(o => new OrderRow
        {
            Id = o.Id, Reference = o.Reference, Customer = o.Customer.Name,
            OrderDate = o.OrderDate, Total = o.Total, Paid = o.Paid
        });

    public IActionResult Index() => View(Rows());

    // Every page, sort, filter and search click of the grid lands here.
    public IActionResult Read(SgcDataRequest request) => this.SgcGrid(request, Rows());

    // The toolbar export links: the filtered and sorted rows as XLSX or PDF.
    public IActionResult Export(SgcDataRequest request) =>
        this.SgcGridExport(request, Rows(), "orders");
}
@* The same grid with the fluent builder, the twin of Html.Kendo().Grid<T>() *@
@(Html.Sgc().Grid<OrderRow>("orders")
    .Key(o => o.Id)
    .Columns(c =>
    {
        c.Bound(o => o.Reference).Searchable();
        c.Bound(o => o.Customer).Searchable();
        c.Bound(o => o.OrderDate).Title("Date").Format("{0:yyyy-MM-dd}").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Total).Format("{0:N2}").Align("right").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Paid);
    })
    .Items(Model)
    .Read("Read")
    .Export(SgcExportFormat.Xlsx, SgcExportFormat.Pdf)
    .ExportAction("Export")
    .Pageable(15)
    .Sortable().Filterable().Searchable().PushUrl())
@* _Layout.cshtml: live="ws" opens the WebSocket that live charts listen to *@
<sgc-scripts live="ws" />

@* The view *@
<sgc-chart name="live-orders" type="line" height="260" live="true">
    <sgc-series name="Orders / s" data="new double[] { 0 }" color="#dc3545" />
</sgc-chart>
// builder.Services.AddHostedService<LiveSalesFeed>();
public sealed class LiveSalesFeed : BackgroundService
{
    private readonly ISgcHtmlHub FHub;
    private readonly Queue<string> FLabels = new Queue<string>();
    private readonly Queue<double> FValues = new Queue<double>();

    public LiveSalesFeed(ISgcHtmlHub hub) { FHub = hub; }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        var oRandom = new Random();
        while (!stoppingToken.IsCancellationRequested)
        {
            await Task.Delay(1000, stoppingToken);
            FLabels.Enqueue(DateTime.Now.ToString("HH:mm:ss"));
            FValues.Enqueue(oRandom.Next(0, 20));
            if (FValues.Count > 20) { FLabels.Dequeue(); FValues.Dequeue(); }

            // One WebSocket message redraws the chart in every open browser.
            await FHub.BroadcastChartAsync("live-orders", FLabels.ToArray(),
                new SgcChartSeries("Orders / s", FValues.ToArray(), "#dc3545"));
        }
    }
}

Telerik UI for ASP.NET Core나 DevExpress에서 오십니까? [DataSourceRequest] 는 SgcDataRequest가 되고, ToDataSourceResult 는 this.SgcGrid(request, query) (데이터만 필요하면 query.ToSgcDataResult(request) )가 되며, Html.Kendo().TextBoxFor(m => m.X) 는 Html.Sgc().TextBoxFor(m => m.X)가 됩니다. 실행 가능한 MVC 데모 22.RazorMvc는 Telerik 주문 샘플을 EF Core 위에서 sgcHTML로 다시 작성한 것입니다.

몇 줄로 만드는 웹 대시보드

HTTP 서버를 시작하고, htmx 엔진을 연결한 다음, 컴포넌트로 구성한 페이지로 요청에 응답하십시오. Delphi, C++ Builder 및 .NET에서 동일한 API를 사용합니다.

uses
  sgcWebSocket_Server, sgcHTMX_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Component_Chart;

// 1. Start a server and attach the htmx engine
FServer := TsgcWSHTTPServer.Create(nil);
FServer.Port := 8080;
FServer.OnCommandGet := HandleGet;

FHTMX := TsgcHTMX_Engine_Server.Create(nil);
FHTMX.Server := FServer;        // realtime htmx over WebSocket

FServer.Active := True;

// 2. Build the page from components
function TForm1.BuildDashboard: string;
var
  oChart: TsgcHTMLComponent_Chart;
  oPage: TsgcHTMLTemplate_Bootstrap;
begin
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oPage := TsgcHTMLTemplate_Bootstrap.Create(nil);
  try
    oChart.ChartType := ctBar;
    oChart.AddLabel('Q1'); oChart.AddLabel('Q2'); oChart.AddLabel('Q3');
    oChart.AddDataset('Revenue', [1200, 1900, 1500],
      '#7C3AED', 'rgba(124,58,237,.25)', True);

    oPage.Title := 'Dashboard';
    oPage.BodyContent := oChart.HTML;   // component -> HTML
    Result := oPage.GetHTML;            // full Bootstrap document
  finally
    oPage.Free;
    oChart.Free;
  end;
end;
// includes: sgcWebSocket_Server.hpp, sgcHTMX_Engine_Server.hpp,
//           sgcHTML_Template_Bootstrap.hpp, sgcHTML_Component_Chart.hpp

// 1. Start a server and attach the htmx engine
FServer = new TsgcWSHTTPServer(this);
FServer->Port = 8080;
FServer->OnCommandGet = HandleGet;

FHTMX = new TsgcHTMX_Engine_Server(this);
FHTMX->Server = FServer;          // realtime htmx over WebSocket

FServer->Active = true;

// 2. Build the page from components
String __fastcall TForm1::BuildDashboard()
{
  TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
  TsgcHTMLTemplate_Bootstrap *oPage = new TsgcHTMLTemplate_Bootstrap(NULL);
  try
  {
    oChart->ChartType = ctBar;
    oChart->AddLabel("Q1"); oChart->AddLabel("Q2"); oChart->AddLabel("Q3");
    oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
      "#7C3AED", "rgba(124,58,237,.25)", true);

    oPage->Title = "Dashboard";
    oPage->BodyContent = oChart->HTML;   // component -> HTML
    return oPage->GetHTML();             // full Bootstrap document
  }
  __finally
  {
    delete oPage;
    delete oChart;
  }
}
using esegece.sgcWebSockets;

// 1. Start a server and attach the htmx engine
var server = new TsgcWebSocketHTTPServer();
server.Port = 8080;
server.OnCommandGet += HandleGet;

var htmx = new TsgcHTMX_Engine_Server();
htmx.Server = server;            // realtime htmx over WebSocket

server.Active = true;

// 2. Build the page from components
string BuildDashboard()
{
    var chart = new TsgcHTMLComponent_Chart();
    chart.ChartType = TsgcHTMLChartType.ctBar;
    chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
    chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
        "#7C3AED", "rgba(124,58,237,.25)", true);

    var page = new TsgcHTMLTemplate_Bootstrap();
    page.Title = "Dashboard";
    page.BodyContent = chart.HTML;   // component -> HTML
    return page.GetHTML();            // full Bootstrap document
}

2분 만에 보는 sgcHTML

서버 사이드 컴포넌트와 Bootstrap 5 마크업, htmx로 Delphi에서 완전한 웹 UI를 만듭니다. JavaScript 빌드 단계는 필요 없습니다.

고수준 컴포넌트 또는 저수준 노드

위젯을 한 줄로 원할 때는 즉시 사용 가능한 컴포넌트를 사용하고, 마크업을 완전히 제어해야 할 때는 노드 계층으로 내려가십시오.

컴포넌트 계층

110개의 TsgcHTMLComponent_* 위젯입니다. 속성을 구성하고, 선택적으로 데이터셋을 바인딩한 다음, HTML을 읽습니다. 많은 컴포넌트는 한 줄 인라인 사용을 위한 정적 Build(...) 헬퍼도 제공합니다.

노드 / 구성 계층

TsgcHTMLContainer (자체 닫힘 태그를 위한 Void 플래그 포함), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton 및 TsgcHTMLTable 같은 기본 요소를 어떤 레이아웃으로든 구성한 다음 TsgcHTMLTemplate_Bootstrap으로 렌더링합니다. 노드 세트에는 TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode 및 TsgcHTMLImage와 같은 Bootstrap 빌딩 블록도 포함됩니다.

비주얼 페이지 빌더

TsgcHTMLPageBuilder 와 그 디자인 타임 편집기를 사용하면 IDE에서 페이지를 조립할 수 있으며, TsgcHTMLThemeController 는 앱 전체에 걸쳐 라이트/다크 테마를 관리합니다.

sgcHTML이 실행되는 곳

대상세부 정보
Delphi 7 ~ 13Delphi 7, 2007, 2009, 2010, XE부터 XE8, 10 Seattle부터 10.4 Sydney, 11 Alexandria, 12 Athens, 13 Florence. Windows, macOS, Linux를 모두 지원합니다.
C++ BuilderC++ Builder (동일 버전)
.NET.NET 8, .NET 9, .NET 10, .NET Standard 2.0, Windows, Linux, macOS 호스트에서 ASP.NET Core Razor Tag Helpers와 함께 사용합니다.
호스팅sgcWebSockets HTTP 서버, 모든 WebBroker 애플리케이션, DataSnap 서버 또는 ASP.NET Core.
브라우저Bootstrap 5와 htmx 에셋이 내장되어 있습니다. 런타임에 CDN이 필요 없습니다.

sgcHTML은 서버 사이드 라이브러리입니다. 휴대폰은 네트워크로 HTML을 받으므로 Android와 iOS는 빌드 대상이 아닙니다.

지금 실제로 실행 중인 15개의 애플리케이션

아래의 모든 화면은 sgcHTML을 통해 자체 HTML을 서비스하는 Delphi 애플리케이션입니다. JavaScript 빌드 단계도, 별도의 프런트엔드 프로젝트도 없습니다. 각 로그인 페이지에 이미 입력되어 있는 자격 증명으로 로그인하십시오.

ERP: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

ERP

고객, 제품, 공급업체와 청구 관리에 대시보드 차트, 역할 기반 관리자 기능, passkey 로그인을 더했습니다.

라이브 데모 열기 →
리포팅 & BI: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

리포팅 & BI

대시보드, 리포트 카탈로그, 애드혹 피벗 빌더, 그리고 27,000건의 주문 라인을 프로세스 내에서 직접 조회하는 탐색 뷰를 제공합니다.

라이브 데모 열기 →
POS 판매 관리: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

POS 판매 관리

카테고리, 프로모션, 보류 판매, 교대 관리, 실시간 고객 디스플레이를 갖춘 터치 방식 계산대입니다.

라이브 데모 열기 →
창고 관리(WMS): sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

창고 관리 (WMS)

입고, 출고, 재고 현황, 이동, 순환 재고 조사에 스캐너용 핸드헬드 단말 화면까지 제공합니다.

라이브 데모 열기 →
현장 서비스: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

현장 서비스

엔지니어와 작업 일정을 관리하는 배차 보드, Gantt 플래너, 실시간 기술자 지도를 제공합니다.

라이브 데모 열기 →
관리 콘솔: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

관리 콘솔

입력과 동시에 검색하고 인라인으로 추가, 편집, 삭제하며, 모두 htmx 프래그먼트로 교체되어 페이지를 새로 고치지 않습니다.

라이브 데모 열기 →
실시간 모니터: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

실시간 모니터

서버 지표를 WebSocket으로 out-of-band htmx 프래그먼트에 푸시해 KPI 카드와 차트를 실시간으로 갱신합니다.

라이브 데모 열기 →
우측에서 좌측: sgcHTML로 만든 Delphi 웹 애플리케이션이 아랍어로 표시되고 전체 레이아웃이 좌우 반전된 모습입니다.

우측에서 좌측(RTL)

한 페이지를 영어, 아랍어, 히브리어로 제공합니다. 아랍어나 히브리어를 선택하면 사이드바부터 그리드까지 전체 레이아웃이 오른쪽에서 왼쪽으로 전환됩니다. 코드 변경 없이 언어만 바꾸면 됩니다.

라이브 데모 열기 →
고객 포털: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

고객 포털

로그인 뒤에서 고객이 자신의 주문, 프로필, 지원 티켓을 직접 확인하는 셀프서비스 공간입니다.

라이브 데모 열기 →
멀티테넌트 SaaS: sgcHTML로 만든 Delphi 웹 애플리케이션이 브라우저에서 실행되는 모습입니다.

멀티테넌트 SaaS

공개 마케팅 사이트, 요금제 페이지, 가입 절차 뒤에 테넌트별로 격리된 컨트롤 플레인을 둡니다.

라이브 데모 열기 →

추가 온라인 데모: AI, 계측기, SCADA

AI 데이터 팩

데이터 그리드, 피벗 테이블, 폼을 평범한 문장으로 다룹니다. 26,000건의 주문 내역에 필터, 정렬, 그룹화를 적용하고, AI 컬럼 어시스턴트와 스마트 붙여넣기도 제공합니다. API 키 없이 실행됩니다.

라이브 데모 열기 →

쇼핑 어시스턴트

sgcHTML 컴포넌트만으로 구축된 온라인 매장으로, 답변이 제품 카탈로그에 근거한 플로팅 채팅 어시스턴트를 갖추고 있습니다. 온라인 버전은 LLM API 키가 필요하지 않습니다.

라이브 데모 열기 →

MCP 앱

ChatGPT, Claude 또는 VS Code 안에서 렌더링되는 Delphi 애플리케이션입니다. MCP 도구가 sgcHTML 페이지를 반환하면 호스트가 이를 표시하며, 그 안의 버튼도 그대로 작동합니다.

라이브 데모 열기 →

계측기

시뮬레이션된 보일러 루프를 위한 제어실입니다. 게이지, 디스플레이, 운전자 조작 컨트롤, 스트립 차트, 오실로스코프가 폴링 없이 서버에 의해 실시간으로 유지됩니다.

라이브 데모 열기 →

SCADA / IoT

탱크, 밸브, 펌프와 애니메이션 흐름을 갖춘 냉각수 플랜트 미믹으로, 게이지, 스트립 차트, 알람까지 모두 MQTT로 구동됩니다. 온라인 버전은 시뮬레이션된 플랜트를 실행합니다.

라이브 데모 열기 →

모든 온라인 데모 보기 →

슬라이드 없는 짧은 영상

모든 영상은 이 애플리케이션들이 실제로 실행되는 화면을 녹화한 것이며, 해설과 자막이 함께 제공됩니다. 재생 버튼을 누르기 전에는 아무것도 내려받지 않습니다.

컴포넌트 카탈로그

그리드와 차트부터 Kanban 보드와 서명 패드까지 110개 컴포넌트를 둘러봐요.

그리드, 아홉 가지 동작까지

정렬, 필터, 페이징, 인라인 편집, 선택, 데이터셋 바인딩을 모두 Pascal에서 제어합니다.

htmx 빠르게 훑기

프래그먼트 교체가 페이지 새로고침을 어떻게 대신하는지, 그리고 그 Delphi 코드가 어떤 모습인지 보여 줘요.

WebSocket으로 실시간

서버 지표를 out-of-band 프래그먼트로 밀어 넣어 카드와 차트를 바뀌는 대로 갱신합니다.

REST 계층 없는 계산대

POS 데모가 중간에 JSON API 없이 프로세스 안에서 데이터베이스를 바로 읽습니다.

데이터에서 바로 뽑는 리포트

주문 라인 27,000건 위에서 대시보드와 피벗 빌더, 탐색 뷰를 돌립니다.

한 앱에 컴포넌트 50개

창고 데모가 화면마다 어떤 컴포넌트를 쓰는지 하나씩 세어 봅니다.

배차 담당자와 기술자, 나란히

같은 애플리케이션이 데스크톱 보드와 휴대폰에서 서로 동기화된 채로 돌아갑니다.

멀티테넌트 격리, 직접 증명

바이너리 하나, 데이터베이스 하나로 테넌트별 엄격한 분리를 말이 아니라 화면으로 보여 줍니다.

고객 포털

로그인 뒤에서 주문과 프로필, 지원 티켓을 셀프서비스로 처리합니다.

새로고침 없는 실시간 CRUD

입력과 동시에 검색하고, 인라인 추가와 수정, 삭제를 htmx 프래그먼트로 교체합니다.

티켓 흐름을 갖춘 헬프데스크

회원 가입, 티켓 스레드, 상태 변경까지 모두 서버에서 렌더링해요.

내 데이터에 근거한 AI 어시스턴트

쇼핑 도우미가 답을 지어내지 않고 상품 카탈로그를 근거로 답해요.

사이트 전체 레이아웃

내비게이션과 사이드바, 페이지 구성을 Site 컴포넌트로 만듭니다.

WebBroker에 끼워 넣기

기존 Delphi WebBroker 애플리케이션에 sgcHTML 출력을 더해요.

WebBroker와 DataSnap을 함께

이미 갖추고 있는 서비스 계층 위에서 최신 프런트엔드를 제공해요.

라이선스 선택

모든 라이선스에는 전체 소스 코드, 1년간의 업데이트 및 70% 갱신 할인이 포함됩니다.

Delphi & C++ Builder

sgcWebSockets Core 포함

€299 / 개발자

1년 업데이트

  • 110개 HTML/UI 컴포넌트
  • Delphi & C++ Builder
  • Bootstrap 5 + htmx 엔진
  • 데이터 연동 TDataSet 바인딩
  • 전체 소스 코드
  • 무료 바이너리 재배포
Single — €299 Team — €449 Site — €749

.NET

.NET Framework, .NET Core, .NET 5+ (NuGet)

€299 / 개발자

1년 업데이트

  • 서버 사이드 HTML/UI 컴포넌트
  • Bootstrap 5 + htmx 엔진
  • 전체 소스 코드
  • 무료 바이너리 재배포
Single — €299 Team — €449 Site — €749

sgcCustomization HTML

저희가 웹 애플리케이션을 대신 구축해 드립니다.

€149

세 가지 일회성 패키지

sgcCustomization HTML을 이용하면 필요한 애플리케이션을 설명해 주시는 것만으로, eSeGeCe 팀이 sgcHTML + sgcWebSockets 컴포넌트로 구축해 드립니다.

sgcCustomization HTML 알아보기

sgcHTML은 단독 컴포넌트 팩입니다. 위 가격에는 sgcHTML의 기반이 되는 sgcWebSockets Core 런타임 이 이미 포함되어 있어서 주문에 따로 추가할 것이 없습니다.

지금 있는 곳에서 시작하세요

다른 웹 프레임워크에서 오십니까?

IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder 또는 D2Bridge로 구축한 웹 애플리케이션이 이미 있으십니까? 단계별 가이드가 각 프레임워크의 개념 매핑과 함께 sgcHTML로 이전하는 과정을 안내합니다. 저희 팀이 이전을 계획하거나 수행하는 데 도움을 드리길 원하시면 마이그레이션 지원 양식도 있습니다.

마이그레이션 가이드 열기 →
프레임워크 비교 →

이미 WebBroker 또는 DataSnap을 사용 중이십니까?

모든 Embarcadero WebBroker 애플리케이션에서, 또는 REST 엔드포인트와 동일한 포트에서 실시간 WebSocket 푸시를 사용하는 DataSnap 서버에서 컴포넌트로 구성한 동일한 페이지를 제공하십시오.

WebBroker 및 DataSnap 호스팅 →

직접 구축하고 싶지 않으십니까?

sgcCustomization HTML을 사용하면 필요한 애플리케이션을 설명하기만 하면 eSeGeCe 팀이 sgcHTML + sgcWebSockets 컴포넌트로 대신 구축해 드립니다. €149부터 시작하는 세 가지 일회성 패키지가 있으며, 라이선스하신 컴포넌트로 컴파일, 확장 및 스타일 변경이 가능한 완전한 프로젝트를 받게 됩니다.

sgcCustomization HTML 알아보기 →

sgcHTML 사용해 보기

sgcHTML은 sgcWebSockets All-Access 체험판에 포함되어 있습니다. 설치 프로그램 하나로 두 제품을 모두 받을 수 있습니다.

RAD Studio / Delphi 다운로드

체험판은 단일 워크스테이션에서 제한된 기간 동안 사용할 수 있습니다. 모든 sgcHTML 컴포넌트가 포함되어 있습니다.

무료 체험판 다운로드 →

C++ Builder 다운로드

C++ Builder (동일 버전)

무료 체험판 다운로드 →

NuGet 패키지

모든 .NET 대상을 위해 nuget.org에서 직접 설치하세요.

NuGet에서 보기 →

데모

GitHub의 sgcHTML for ASP.NET Core 데모 소스 코드.

GitHub에서 보기 →

자주 묻는 질문

아니요. 라이브러리가 Bootstrap 5 마크업과 htmx 속성을 만들어 내고, 버튼이 새로 고침 없이 서버로 전송하고 페이지 일부를 교체하게 해 주는 것이 htmx입니다. 상호작용을 Pascal로 기술하면 속성은 자동으로 생성됩니다. 원한다면 CustomHead 와 BodyEndHTML를 통해 직접 만든 스크립트를 추가할 수도 있습니다.

HTTP 응답에 직접 씁니다. HTML 은 일반 string 속성이라 어떤 서버든 사용할 수 있습니다. 포함된 데모는 Professional 빌드에서는 TsgcWSHTTPServer 를, 그렇지 않으면 TIdHTTPServer 를 사용합니다. ResponseNo := 200 과 ContentType := 'text/html; charset=utf-8'을 설정하고 그 문자열을 ContentText에 할당합니다.

TsgcHTMLComponent_Site유닛의 sgcHTML_Component_Site.pas입니다. 완전한 페이지 셸을 렌더링하므로 내비게이션, 사이드바, 테마, 콘텐츠 영역을 직접 조립하지 않아도 됩니다. 컴포넌트를 만들고 AddMenu 와 AddContent 또는 AddSection을 호출한 다음 HTML 속성을 읽으세요. 포함된 Site 데모가 정확히 그렇게 합니다.

페이지를 노드로 만들면 안전합니다. 노드가 텍스트를 쓰면서 이스케이프하기 때문입니다. 노드를 우회해서 직접 마크업을 이어 붙일 때 위험이 생깁니다. 예를 들어 사용자 입력으로 만든 문자열을 AddContent 에 넘기는 경우입니다. 사용자 데이터가 들어가는 것에는 노드 유닛을 사용하세요.

아니요, 그리고 의도된 동작입니다. SGC_HTML 은 883번째 줄의 {$IFNDEF ANDROID} 와 884번째 줄의 {$IFNDEF IOS} 안인 885번째 줄에 정의되므로 그 대상에서는 모든 sgcHTML 유닛이 빈 유닛으로 컴파일됩니다. 서버 측 라이브러리라서 휴대폰은 네트워크로 HTML을 받습니다. 그래서 모바일 대상에는 렌더러가 필요하지 않습니다. Windows, macOS, Linux는 모두 지원합니다.

다운로드에는 Demos\60.HTML\01.RunTime아래에 열다섯 개가 넘는 런타임 데모가 들어 있습니다. ERP 대시보드, 헬프데스크, 판매 시점 관리, 창고, 보고서 앱, 현장 서비스 앱 등이 있습니다. 갤러리 에 각 데모의 짧은 동영상이 있습니다.

도움말 및 리소스

온라인 도움말

모든 컴포넌트에 Delphi, C++ Builder, .NET 예제가 있습니다.

온라인 도움말 →

시작하기

HTTP 서버를 시작하고, htmx 엔진을 연결한 다음, 컴포넌트로 만든 페이지로 요청에 응답하세요.

빠른 시작 →

PDF 가이드

시작하기 가이드: VCL 폼 위에서 페이지를 디자인하고, Surface의 action으로 Delphi 코드를 실행하며, 여섯 개의 QuickStart 데모를 따라가 보세요.

시작하기 가이드 (PDF, 영어) →

기능 매트릭스

110개 컴포넌트, 10개 패밀리

전체 기능 매트릭스 보기 →

갤러리

지금 실제로 실행 중인 15개의 애플리케이션

갤러리 →
3,000+개발자
20+년
761+컴포넌트
30+API 통합
5플랫폼
30일 환불 보장만족하지 않으세요? 구매 후 30일 이내에 전액 환불을 요청하세요. 환불 정책 보기

IDE를 벗어나지 않고 웹 UI를 배포하십시오

이미 사용 중인 언어로 Delphi, C++ Builder 또는 .NET 애플리케이션에 차트, 그리드, 폼, 대시보드 및 실시간 페이지를 추가하십시오.

eSeGeCe의 다른 제품

sgcHTML을 당사의 다른 Delphi, C++ Builder 및 .NET 컴포넌트 라이브러리와 함께 사용하십시오.

sgcWebSockets

엔터프라이즈 WebSocket, HTTP/2, MQTT, AMQP, WebRTC 및 AI/LLM 컴포넌트입니다. sgcHTML 애플리케이션에 실시간 메시징과 전체 네트워킹 스택을 추가하십시오.

다른 관점 보기 →

sgcQUIC

Delphi, C++ Builder 및 .NET용 QUIC 및 HTTP/3 클라이언트 및 서버 컴포넌트입니다. 손실이 많은 네트워크에서도 더 빠른 페이지 로드를 위해 sgcHTML이 렌더링한 UI를 HTTP/3로 제공할 수 있습니다.

다른 관점 보기 →

sgcWebRTC

Delphi, C++ Builder용 완전한 WebRTC 미디어 엔진입니다. 오디오/영상 통화, 데이터 채널, 화면 공유를 지원하며, sgcWebSockets Enterprise의 애드온입니다.

다른 관점 보기 →

sgcSign

엔터프라이즈 디지털 서명: 10개 키 제공자와 21개 EU 국가 프로필을 갖춘 XAdES, PAdES, CAdES 및 ASiC.

다른 관점 보기 →

sgcOpenAPI

OpenAPI 3.0 파서 및 SDK 생성기입니다. 어떤 OpenAPI 사양이든 몇 초 만에 강력한 형식의 Delphi 클라이언트로 전환합니다.

다른 관점 보기 →

sgcBiometrics

Delphi 및 C++ Builder용 네이티브 Windows Hello, 지문 및 Windows Biometric Framework 컴포넌트입니다.

다른 관점 보기 →

sgcIndy

Delphi 7부터 13까지 지원하는 최신 TLS, IPv6 및 HTTP/2를 갖춘 업데이트된 Indy TCP/IP 컴포넌트입니다.

다른 관점 보기 →

sgcAI

Delphi 및 C++ Builder용 15개의 AI, LLM 및 MCP 컴포넌트입니다. 채팅 컴포넌트 하나로 OpenAI, Anthropic, Gemini, DeepSeek, Ollama, Grok 및 Mistral에 연결됩니다. 단독으로 동작하며 sgcWebSockets Core 런타임이 함께 제공됩니다.

다른 관점 보기 →

sgcMQ

Delphi 및 C++ Builder용 MQTT 3.1.1 및 5.0, AMQP 0.9.1, AMQP 1.0, Apache Kafka 및 STOMP 클라이언트 컴포넌트입니다. 단독으로 동작하며 sgcWebSockets Core 런타임이 함께 제공됩니다.

다른 관점 보기 →

sgcCrypto

Delphi, C++ Builder용 범용 암호화 라이브러리입니다. 대칭 및 비대칭 암호화, 해싱, 포스트 퀀텀 알고리즘을 지원하며, sgcWebSockets Standard 이상부터 무료로 제공됩니다.

다른 관점 보기 →

sgcSocial

WhatsApp Business Cloud API 및 Telegram TDLib 클라이언트입니다. 단독으로 동작하며 sgcWebSockets Core 런타임이 포함되어 있습니다.

다른 관점 보기 →