요약: 단일 샷(single-shot) LLM 프롬프트는 종종 깨진 HTML이나 버그가 있는 레이아웃을 출력합니다. LLM을 에이전트 루프(agentic loop)로 감싸서 코드를 작성하고, 이를 이미지로 렌더링하며, 자신의 결과물을 검사하고 반복적으로 수정하게 함으로써, 저는 5~10턴 내에 매우 정확한 출력을 달성할 수 있었습니다.

최근 저는 LLM이 즉석에서 HTML을 생성해야 하는 작업을 수행하고 있었습니다. 처음에는 표준적인 원샷(one-shot) 접근 방식을 사용했습니다. 프롬프트를 작성하고, HTML 생성을 요청한 다음, 그 결과를 렌더링해 보려고 했습니다. 하지만 결과는 항상 약간씩 어긋났습니다. 코드는 대체로 올바른 것처럼 보였지만, 실제로 렌더링을 시도할 때마다 작고 짜증 나는 레이아웃 오류가 있었습니다.

그때 저는 기본적인 프롬프팅에서 벗어나 LLM 호출을 사용자 정의 에이전트 루프 안에 넣기로 결정했습니다. 모델이 자신의 출력물을 검사하도록 하는 것만으로 모든 것이 바뀌었습니다.

LLM 코드 생성을 더 정확하게 하려면 어떻게 해야 하나요?

모델에 의존하는 단일 샷 프롬프트보다는, 에이전트 루프 안에 모델을 감싸서 사용하면 LLM 코드 생성의 정확도를 훨씬 높일 수 있습니다. LLM에게 자신의 코드를 실행하고 출력물을 검사할 수 있는 도구를 제공하면, 최종 결과를 전달하기 전에 스스로 오류를 수정하고 버그를 고칠 수 있게 됩니다.

LLM이 첫 시도에 완벽한 코드를 출력할 것이라고 기대하는 것은, 개발자에게 모니터를 끄고 복잡한 UI를 작성하라고 요청하는 것과 같습니다. 우리는 그런 방식으로 코드를 작성하지 않습니다. 몇 줄을 작성하고, 브라우저를 새로 고치고, 이상한 마진 문제를 찾아내어 코드를 수정합니다.

모델이 자신의 코드를 실행하고, 무엇이 잘못되었는지 보고, 자신의 작업을 편집할 수 있는 루프를 구축함으로써 출력 품질이 상당히 향상됩니다. 이는 QA(품질 보증)의 부담을 사용자로부터 모델 자체로 옮기는 것입니다.

에이전트 루프란 무엇이며 어떻게 작동하나요?

에이전트 루프는 LLM이 작업을 반복적으로 실행하고, 외부 도구를 사용하여 자신의 출력물을 평가하며, 여러 턴에 걸쳐 코드를 개선하는 디자인 패턴입니다. 시각적 작업의 경우, 이는 코드를 생성하고, 이를 이미지로 렌더링한 다음, 그 이미지를 다시 LLM에게 보내 검사하게 하는 것을 포함합니다.

HTML 생성 실험에서 저는 특정 도구들을 이용한 루프를 구축했습니다. 단순히 원시 텍스트만 받는 것이 아니라, 시스템은 모델이 자신의 시각적 결과물을 검토할 수 있도록 단계별 파이프라인을 따랐습니다.

코드 생성에 시각적 피드백이 필요한 이유?

시각적 피드백은 LLM이 원시 코드 문자열만으로는 레이아웃 버그, 겹치는 텍스트, 또는 렌더링 문제를 쉽게 감지할 수 없기 때문에 필요합니다. 출력을 이미지로 변환하면 멀티모달 모델(multimodal model)이 실제 레이아웃을 시각적으로 검사하여 텍스트에서는 보이지 않는 실수를 포착할 수 있습니다.

제가 원시 HTML 문자열만 모델에 다시 입력했을 때는, 겹치는 문제를 볼 수 없었습니다. 태그 자체는 기술적으로 유효했기 때문에, 텍스트 기반 모델은 모든 것이 괜찮다고 가정했습니다.

하지만 HTML을 JPEG로 변환하여 그 이미지를 LLM에게 다시 보내자, 모델은 즉시 버그를 발견할 수 있었습니다. 5~10번의 반복(turns) 만에 출력물은 '대부분 깨진 상태'에서 제가 원하는 정확한 결과물로 바뀌었습니다. LLM이 자신의 작업물을 볼 수 있는 방법을 제공하는 것은 자체 수정(self-correction)을 믿을 수 없을 만큼 효과적으로 만듭니다.

FAQ

좋은 결과를 얻기 위해 에이전트 루프는 몇 번의 반복이 필요한가요?

제 경험상, 이 루프는 보통 5~10번의 반복 내에 제대로 작동합니다. 처음 몇 번의 반복은 기본적인 구조를 설정하고, 나머지 반복들은 사소한 정렬, 글꼴 문제, 렌더링 오류 등을 정리하는 역할을 합니다.

에이전트 루프를 실행하면 API 지연 시간과 비용이 증가하나요?

네, 여러 번의 반복을 실행하면 지연 시간(latency)과 토큰 사용량 모두가 증가합니다. 하지만 정확도가 우선순위인 작업—예를 들어 고객에게 노출되는 UI 컴포넌트 생성—의 경우, 그 트레이드오프는 거의 항상 가치가 있습니다.

시각적 자가 수정 루프를 구축하는 데 필요한 도구는 무엇인가요?

루프를 오케스트레이션(orchestrate)할 기본 스크립트, HTML을 이미지로 변환할 헤드리스 브라우저 도구(Playwright 또는 Puppeteer와 같은), 그리고 텍스트 프롬프트와 이미지 입력을 모두 수용할 수 있는 멀티모달 LLM이 필요합니다.