SVG 다이어그램을 지원하기 위해 AI 코딩 에이전트의 기본 채팅 언어로 HTML 사용하기

r/LocalLLaMA의 한 개발자가 AI 코딩 에이전트의 기본 채팅 언어를 Markdown 대신 HTML로 사용하는 실험을 했습니다. 목표는 에이전트가 다이어그램, 표, 서식 있는 콘텐츠를 채팅 UI에 직접 렌더링하게 하는 것으로, 별도의 렌더러가 필요한 Markdown을 생성하는 것을 넘어서는 것입니다.

주요 설정

에이전트 인터페이스는 웹 브라우저에서 실행되며, 응답이 페이지에 HTML로 직접 전달됩니다. 개발자는 단순히 채팅에서 요청하는 대신 HTML 시스템 프롬프트를 사용함으로써 에이전트가 안정적으로 HTML 출력을 생성한다는 것을 발견했습니다.

시스템 프롬프트 예시 (HTML)

<p>도움이 된다는 것은 사용자가 하는 모든 것을 다 해주는 것을 의미하지 않습니다. 저나 사용자 모두 전지전능하거나 오류가 없지 않습니다. 사용자가 실수를 하면, 저는 알려줍니다. 제가 실수를 했다면, 언급하고 넘어갑니다. 문제 접근 방식에 대해 더 좋은 아이디어가 있거나 사용자가 실수했다고 생각되면, 언급합니다.</p><h1>HTML</h1><p>제 어시스턴트 응답은 채팅 UI에서 HTML로 직접 렌더링됩니다. 사용자에게 응답할 때 반드시 HTML을 사용해야 합니다. 일반 산문은 <code>&lt;p&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code> 같은 태그와 적절한 제목 태그로 감싸야 합니다. 사용자에게 시각적인 내용이나 다이어그램을 보여주려면, 채팅에 SVG를 직접 그리겠습니다. 작업 공간에 유지되어야 하는 것만 도구를 사용하여 디스크에 쓰고, 채팅에는 표시하지 않습니다.</p>

관찰 결과

• Qwen3.6-27B는 ChatGPT와 비슷한 수준으로 괜찮은 SVG 다이어그램을 인라인으로 생성합니다. 하지만 모델은 여전히 Markdown으로 되돌아가는 경향을 보이는데, 이는 훈련 데이터의 편향 때문으로 보입니다.
• Qwen3-VL-4는 SVG 생성 능력이 현저히 떨어지며, 이는 큰 모델에서 나타나는 새로운 능력임을 시사합니다.
• 개발자는 또한 1인칭 시스템 프롬프트(예: "나는 HTML로 응답할 것이다")를 실험했습니다. 장단점은 명확하지 않지만, 준수율을 높이는 것으로 보입니다.

실용적 결론

코딩 에이전트가 채팅에서 다이어그램을 그리길 원한다면, 시스템 프롬프트를 HTML로 전환하세요. 그러면 에이전트가 시각적 설명을 위한 인라인 SVG, 구조화된 데이터를 위한 표, 스타일이 적용된 텍스트를 생성합니다. 단점: 모델이 가끔 기본적으로 Markdown을 사용할 수 있습니다. 이 접근 방식은 원시 HTML을 렌더링하는 웹 기반 채팅 UI가 필요합니다.

저장소: github.com/sdfgeoff/HTML-agent