단 하나의 컴포넌트로 만드는 웹 페이지 전체: TsgcHTMLComponent_Site 소개

2026년 7월 6일 · 컴포넌트

sgcHTML은 이미 Delphi, C++ Builder, .NET 개발자에게 Bootstrap 5 마크업을 렌더링하는 60개 이상의 서버 사이드 컴포넌트를 제공합니다 — 그리드, 차트, 폼, 채팅 등 페이지에 넣는 모든 것을 말이죠. 하지만 여전히 프로젝트마다 손으로 조립해야 하는 것이 하나 있었습니다. 바로 페이지 그 자체입니다. 상단 바, 사이드 메뉴, 푸터. 모든 화면을 감싸는 그 부분 말입니다. 오늘부터 그 반복 코드는 자체 컴포넌트를 갖게 됩니다.

TsgcHTMLComponent_Site는 단 하나의 컴포넌트로 웹 페이지 전체를 만듭니다 — 헤더, 내비게이션 메뉴, 메인 콘텐츠, 푸터까지 말이죠. 브랜드를 설정하고, 메뉴 항목 몇 개를 추가하고, 콘텐츠를 넣은 다음 HTML 속성을 읽으면 됩니다. 그리고 전체 레이아웃이 하나의 Layout 속성으로 구동되기 때문에, 단 한 줄만 바꿔서 여섯 가지 서로 다른 페이지 구성 사이를 전환할 수 있습니다.

껍데기가 곧 반복 코드였다

실제 웹 애플리케이션을 보면 대부분의 픽셀은 크롬(chrome)입니다. 로고와 사용자 메뉴가 있는 헤더, 내비게이션 링크가 담긴 사이드바, 콘텐츠 영역, 푸터. 그 크롬은 모든 페이지에서 동일하며, 지금까지 모든 sgcHTML 프로젝트는 그것을 매번 다시 만들어야 했습니다 — 내비게이션 바를 위한 손으로 작성한 HTML 문자열, 커스텀 CSS로 위치를 잡은 TsgcHTMLComponent_Sidebar, 마지막에 붙인 푸터. 작동은 했지만, 누구도 두 번은 작성하고 싶지 않았던 부분이었습니다.

TsgcHTMLComponent_Site는 그 껍데기를 일급 컴포넌트로 만든 것입니다. 기존의 TsgcHTMLComponent_NavBar와 TsgcHTMLComponent_Sidebar를 조합하고, 이를 Bootstrap 템플릿으로 감싼 뒤, 전체를 소수의 속성을 통해 노출합니다. 다음은 완전한 페이지입니다:

uses
  sgcHTML_Component_Site;

var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title       := 'Acme Admin';
    oSite.Layout      := slTopNavSidebarLeft;
    oSite.Theme.Preset := stpBlue;

    oSite.Brand.Text  := 'Acme';
    oSite.Brand.Href  := '/';

    // one menu drives the sidebar (and the mobile off-canvas)
    oSite.AddMenu('Dashboard', '/',          'bi-speedometer2').Active := True;
    oSite.AddMenu('Customers', '/customers',  'bi-people');
    oSite.AddMenu('Invoices',  '/invoices',   'bi-receipt');

    oSite.AddContent('<h1 class="h3">Welcome back</h1>');
    oSite.Footer.Text := '(c) 2026 Acme';

    Response := oSite.HTML;   // a complete <!DOCTYPE html> page
  finally
    oSite.Free;
  end;
end;

이것이 페이지 전체입니다. 브랜드가 있는 상단 내비게이션 바, 메뉴로 구성된 왼쪽 사이드바, 가운데의 콘텐츠, 하단의 푸터, 로드된 Bootstrap 5, 모바일에서의 반응형까지 말이죠.

여섯 가지 레이아웃, 하나의 속성

껍데기를 컴포넌트로 만드는 이유는, 껍데기야말로 콘텐츠를 건드리지 않고 다시 스타일링하고 싶은 바로 그것이기 때문입니다. Layout을 설정하면 동일한 브랜드, 메뉴, 콘텐츠가 완전히 다른 페이지로 재배치됩니다:

slTopNavSidebarLeft — 전형적인 관리자 레이아웃: 상단 바에 고정된 왼쪽 사이드바를 더한 형태.
slSidebarLeft / slSidebarRight — 상단 바 없이 좌우 어느 쪽에나 놓이는 문서형 또는 앱형 사이드바.
slTopNav — 마케팅 / 포털 레이아웃: 상단 내비게이션, 가운데 정렬 콘텐츠, 사이드바 없음.
slIconRail — 좁은 아이콘 전용 레일이 있는 컴팩트한 대시보드.
slOffcanvas — 모바일 우선: 메뉴가 햄버거 버튼 뒤에 숨어 있다가 슬라이드로 나타남.

단 한 줄만 바꾸면 — oSite.Layout := slIconRail; — 헤더, 메뉴, 콘텐츠가 다시 흐릅니다. 코드의 다른 부분은 아무것도 바뀌지 않습니다.

프리셋과 테마

개별 설정을 일일이 연결하기보다 하나의 룩을 고르고 싶다면, Preset 속성이 레이아웃과 테마를 한 번의 할당으로 묶어 줍니다 — spAdmin, spDashboard, spPortal, spDocs, spLanding, spApp. 더 세밀한 제어가 필요하다면, Theme 하위 객체가 색상 프리셋(stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), 라이트 · 다크 · 시스템 중 하나인 Mode, 그리고 선택적 커스텀 기본 색상을 담고 있습니다.

oSite.Preset      := spDashboard;   // icon rail + violet + dark
oSite.Theme.Mode  := stmSystem;     // follow the OS colour scheme
oSite.Theme.Primary := '#0057B8';   // or override the accent directly

모든 것이 기본 포함

헤더에는 모든 애플리케이션이 다시 구현하는 요소들이 담겨 있습니다. 플래그 하나로 켜면 컴포넌트가 마크업, CSS, 그리고 소량의 JavaScript를 만들어 냅니다:

작은 화면에서 오프캔버스 메뉴로 자동으로 접히는 반응형 사이드바;
Header.ShowThemeSwitcher와 Header.ShowLanguageSwitcher 드롭다운;
사용자 이름과 함께 표시되는 Header.ShowUser 아바타, 그리고 Header.ShowLogout 컨트롤;
사이드바와 모바일 메뉴 양쪽에 데이터를 공급하여 내비게이션을 한 번만 정의하게 하는 단일 Menu 컬렉션.

콘텐츠 영역은 여전히 순수한 sgcHTML입니다. AddContent는 어떤 마크업이든 받아들이고, AddSection은 제목이 붙은 카드로 감쌉니다 — 그래서 다른 60개 이상의 컴포넌트(그리드, 차트, 폼) 중 무엇이든 페이지에 바로 넣을 수 있습니다.

Delphi, C++ Builder, .NET

sgcHTML의 나머지 부분과 마찬가지로, 이 컴포넌트도 세 가지 언어 모두에서 동일한 API로 제공됩니다. Delphi와 C++ Builder 버전은 상속된 HTML 속성을 읽고, .NET 버전은 GetHTML()을 노출합니다. 렌더링된 페이지는 바이트 단위까지 동일합니다. Bootstrap은 기본적으로 CDN에서 로드되므로 별도로 배포할 것이 없습니다.

받는 방법

TsgcHTMLComponent_Site는 sgcHTML의 일부이며, 자체 아이콘과 함께 컴포넌트 팔레트에 설치됩니다. 전체 안내는 컴포넌트 페이지를, 전체 컴포넌트 목록은 기능 매트릭스를, 전체 레퍼런스는 온라인 도움말을 참고하세요. 무료 체험판으로 모든 것을 직접 시험해 볼 수 있습니다.

질문, 피드백, 또는 새로운 레이아웃 템플릿에 대한 아이디어가 있으신가요? 문의하기 — 코드를 직접 작성한 사람들에게서 답변을 받으실 수 있습니다.