스크린샷을 Delphi 웹 페이지로 바꾸기

2026년 9월 26일 · 컴포넌트

화면에 대해 얻을 수 있는 가장 좋은 명세서는 바로 그 화면이 대체하는 화면의 사진입니다. 그리고 이것이야말로 코드 생성기가 읽을 수 없는 단 한 가지입니다. sgcWebSockets 2026.10은 sgcHTML 비주얼 디자이너에 AI 페이지 생성기를 추가합니다. 페이지를 한 문장으로 설명하거나 스크린샷을 건네주면, 여러분의 컴포넌트만으로 페이지를 만들어냅니다.

결과로 나오는 것은 마크업도 아니고 프레임워크도 아닙니다. 폼이 소유하는 평범한 sgcHTML 컴포넌트이며, Object Inspector에서 편집할 수 있고, 디자이너가 설치되어 있지 않아도 컴파일되는 Object Pascal로 내보낼 수 있습니다.

말로 설명하기

IDE에서는 프롬프트 상자가 Web Design 탭의 툴바에 있으며, Generate와 Refine 옆에 있습니다. 디자이너 자체를 호스팅하는 애플리케이션에서는 이것이 하나의 컴포넌트입니다.

uses
  sgcHTMLDesign_AI;

FGenerator := TsgcHTMLDesignAIGenerator.Create(Self);
FGenerator.Surface := oSurface;
FGenerator.APIKey := ReadSetting('openai.key');
FGenerator.Model := 'gpt-4o-mini';

oErrors := TStringList.Create;
try
  vTree := FGenerator.Generate(
    'an orders page with a search box, a grid of this month''s orders ' +
    'and a chart of the totals by customer', oErrors);
  if vTree <> '' then
    FGenerator.Apply(vTree, oErrors);
finally
  oErrors.Free;
end;

아니면 사진으로 찍기

같은 생성기가 이미지도 읽을 수 있습니다. 교체 대상 애플리케이션의 스크린샷, 디자인 도구에서 나온 목업, 화이트보드에 그린 스케치의 사진 등입니다.

vTree := FGenerator.GenerateFromImage('C:\shots\orders.png',
  'ignore the sidebar', oErrors);

여기서 설명 문구는 선택 사항이며, 페이지를 설명하기보다는 무엇을 봐야 할지를 좁혀 줍니다. 이미지에서 레이아웃, 제목, 표의 열, 폼의 레이블을 읽어내고, 읽어낸 내용을 caption에 기록합니다. 디자이너에서 버튼 이름은 From image이며, 돌아오는 결과는 동일한 Accept와 Discard를 가진 같은 후보안입니다.

코드가 아니라 디자인 트리로 응답합니다

이 부분이 장난감과 프로젝트 근처에 두고 써도 될 만한 것을 가르는 지점입니다. 모델은 절대 마크업을 작성하지 않고 절대 Pascal도 작성하지 않습니다. 대신 디자인 트리로 응답합니다. 디자인 표면 자체가 저장하고 불러오는 것과 동일한 JSON입니다.

{"version":1,"nodes":[
  {"kind":"section","caption":"Orders","children":[
    {"kind":"row","children":[
      {"kind":"column","width":12,"children":[
        {"kind":"component","class":"TsgcHTMLComponent_Grid",
         "props":{"ElementID":"orders","Title":"Orders of the month"}}
      ]}]}]}]}

노드 종류는 다섯 가지이며, 그중 하나가 컴포넌트 클래스를 지정합니다. 경계는 바로 거기에 있습니다.

세 가지 경계, 그리고 그중 어느 것도 프롬프트가 아닙니다

스키마는 여러분의 레지스트리에서 나옵니다. 요청에는 클래스 열거값이 정확히 등록된 컴포넌트 집합과 일치하는 JSON 스키마가 담겨 있으며, Classes 속성으로 더 좁혀집니다. 모델은 존재하지 않는 클래스나, 여러분이 제공하지 않은 클래스를 지정할 수 없습니다.

응답은 정규화됩니다. NormalizeTree는 알지 못하는 모든 키를 버리고, 클래스가 등록되지 않은 노드를 버리며, 트리를 MaxNodes로 제한하고, 속성 목록을 표면이 읽을 수 있는 형태로 다시 작성합니다.

표면은 엄격하게 읽습니다. LoadTreeJSON은 알 수 없는 노드 종류, 등록되지 않은 클래스, 존재하지 않거나 쓸 수 없는 속성, 그리고 속성이 거부하는 값을 건너뛰고 그 사실을 보고합니다. 살아남지 못한 항목의 목록은 언제나 받아볼 수 있습니다.

마크업은 생성된 트리가 결코 신뢰받지 못하는 유일한 것입니다. AllowRawHTML이 켜져 있지 않은 한 html 노드는 이스케이프된 텍스트로 로드되므로, 스크립트로 응답하도록 설득당한 모델이 있더라도 그 스크립트는 페이지에 보이는 텍스트로만 놓일 뿐 그 이상은 아무것도 하지 못합니다.

먼저 후보안, 그다음 페이지

Generate는 아무것도 없는 상태에서 시작합니다. Refine은 지금 상태의 페이지에서 시작해서 변경 후 페이지 전체를 요청하며, 절대 패치를 요청하지 않습니다. 이는 둘을 비교할 수 있도록 하기 위해서입니다. 둘 다 페이지를 직접 건드리지 않습니다. 둘 다 트리로 응답할 뿐이며, 그것을 표면에 올리는 것은 Apply입니다. 이것이 Accept와 Discard를 정직하게 유지하는 이유이며, Accept는 되돌리기 한 단계를 남겨 둡니다.

키는 어디에 있는가

프로젝트가 아니라 여러분의 컴퓨터 안에 있습니다. 설정 페이지는 Tools › Options › Third Party › sgcHTML AI page generator입니다. 여기서 공급자, API 키, 모델, 선택적인 기본 URL, caption을 요청할 언어, 그리고 받아들일 최대 트리 크기를 설정합니다. 키는 사용자별로 보관되며 .dfm, .dproj, 페이지 어디에도 기록되지 않으므로 소스 관리 밖에 유지됩니다.

업그레이드

이 생성기는 sgcHTML의 일부입니다. 공급자 경로는 Windows 전용인 AI 유닛을 사용합니다. 이 유닛이 없어도 컴포넌트는 여전히 컴파일되며, 공급자가 없다는 한 줄짜리 메시지로 응답하므로, 이를 사용하는 프로젝트는 모든 플랫폼에서 빌드됩니다. 디자인 중인 페이지 자체는 Refine이 필요로 하는 것, 즉 페이지 자체를 제외하고는 어디로도 전송되지 않습니다.

다음 읽을거리

영상으로 보기

이에 관한 짧은 영상이 eSeGeCe 채널에 있습니다.

질문, 피드백, 마이그레이션 도움이 필요하신가요? 문의하기 — 코드를 작성한 사람들에게서 직접 답변을 받으실 수 있습니다.