AI Sparkup

복잡한 AI 세상을 읽는 힘 ⚡

AI 에이전트가 3시간 만에 Flexbox를 구현하다: Agentic Loop 실전 사례

AI에게 코드를 한 번에 완벽하게 짜라고 요구하는 대신, 스스로 테스트하고 디버깅하며 개선할 수 있는 환경을 만들어주면 어떻게 될까요? 전문 개발자가 2주 걸린 작업을 AI 에이전트가 단 3시간 만에 완성한 실험 결과가 그 답을 보여줍니다.

AI 에이전트가 테스트-디버깅-개선 루프를 통해 3시간 만에 Flexbox 알고리즘을 구현한 실험. 프롬프트보다 피드백 설계가 중요한 이유를 보여줍니다.
사진 출처: Scott Logic Blog

소프트웨어 컨설팅 기업 Scott Logic의 Colin Eberhardt가 AI 에이전트의 ‘agentic loop’ 능력을 테스트한 실험 결과를 공유했습니다. 그는 GitHub Copilot(Claude Sonnet 4.5 기반)을 이용해 복잡한 CSS Flexbox 레이아웃 알고리즘을 구현했고, 최종적으로 800줄의 코드와 350개의 테스트 케이스를 3시간 만에 완성했습니다.

출처: The power of agentic loops – implementing flexbox layout in 3 hours – Scott Logic Blog

Agentic Loop란 무엇인가

전통적인 AI 코딩 방식은 ‘one-shot’ 접근이었습니다. 프롬프트를 주면 AI가 한 번에 코드를 생성하는 방식이죠. 문제는 코드가 길어질수록 첫 시도에 완벽하게 작동할 가능성이 급격히 떨어진다는 점입니다.

Agentic loop는 이와 다릅니다. AI에게 목표를 주고, 진행 상황을 평가할 수 있는 도구를 제공한 뒤, 목표가 달성될 때까지 반복하도록 하는 방식입니다. 마치 개발자가 코드를 작성하고 실행하고 검증하며 디버깅하는 과정 그대로를 AI가 수행하는 거죠.

Simon Willison은 이런 agentic loop를 설계하는 능력을 ‘중요한 스킬’이라고 강조했는데, Eberhardt의 실험이 바로 그 이유를 보여줍니다.

완벽한 피드백 메커니즘 설계하기

Eberhardt는 2015년 React.js Conf에서 Christopher Chedeau가 2주간 ‘extreme TDD’ 방식으로 구현했던 Flexbox 알고리즘을 재현하기로 했습니다. 핵심은 브라우저의 레이아웃 엔진을 ‘정답’으로 활용하는 것이었죠.

그가 설계한 피드백 루프는 이렇습니다:

  1. 간단한 초기 구현과 테스트 스위트 생성
  2. 브라우저에서 동일한 입력에 대한 레이아웃 결과를 추출하는 커맨드라인 도구 제작
  3. AI 에이전트에게 단계별 계획을 제시하고, 각 단계마다 테스트를 먼저 만들고 브라우저 결과로 검증한 뒤 구현하도록 지시

흥미로운 점은 에이전트가 250줄짜리 지시사항 파일을 스스로 작성했다는 겁니다. 그리고 각 단계를 완료할 때마다 겪었던 문제와 해결 방법을 기록해 다음 단계에서 활용했죠.

“actually wait” – 에이전트의 사고 과정

실험 중 가장 인상적인 순간은 에이전트가 막혔을 때였습니다. 5-6단계에서 두 개의 테스트가 계속 실패하자, 에이전트의 사고 과정에 이런 독백이 나타났습니다:

  • “actually wait”
  • “erm no”
  • “this is strange”
  • “my understanding is wrong”

Eberhardt는 이것이 자신이 막혔을 때 머릿속을 스치는 생각과 똑같다고 말합니다. 에이전트는 다양한 디버깅 기법을 동원해 알고리즘 각 단계의 출력을 로깅하고, 결국 문제를 해결했습니다.

더 놀라운 건 에이전트가 작업 중 파일 편집을 실수로 망치자 Git에서 복구한 뒤, 더 신중하게 작은 단위로 수정을 진행했다는 점입니다. 스스로 실수에서 배우는 모습이죠.

프롬프트 엔지니어링보다 중요한 것

Eberhardt가 강조한 핵심 인사이트는 이겁니다: 효과적인 피드백 메커니즘이 잘 만든 프롬프트보다 중요하다.

Agentic loop 환경에서는 AI가 여러 번 시도할 수 있기 때문에, 첫 시도의 완성도보다 ‘무엇이 잘못됐는지 알려주는 피드백’이 훨씬 중요합니다. 이 실험에서는 브라우저라는 완벽한 레퍼런스 구현이 있었기에 이상적인 피드백이 가능했죠.

그는 또한 자신이 한 일을 ‘프롬프트 엔지니어링’이라 부르길 거부합니다. “엔지니어링은 정교함과 정밀함을 의미하는데, 나는 그저 몇 문장으로 설명하고 에이전트가 알아서 지시사항을 업데이트하게 했을 뿐”이라는 거죠. 그는 이걸 ‘코칭’에 가깝다고 표현합니다.

한계와 가능성

Eberhardt도 인정하듯, 이 실험은 이상적인 케이스였습니다. Flexbox는 AI 학습 데이터에 많이 포함된 익숙한 영역이고, 브라우저라는 완벽한 정답 제공자가 있었죠.

하지만 그는 이 경험을 통해 “앞으로는 피드백 루프를 만드는 데 훨씬 더 많은 시간을 투자할 것”이라고 말합니다. 레거시 마이그레이션에 루프를 만들 수 있을까? UI 자동화를 통해 MCP로 루프를 구성할 수 있을까? 인간이 자기 작업을 검증하는 방식을 자동화할 수 있을까?

3시간 만에 800줄의 코드와 350개의 테스트를 완성한 이 실험은, AI 에이전트의 가능성을 보여주는 동시에 우리가 어떤 질문을 던져야 하는지 알려줍니다. 핵심은 “AI가 얼마나 똑똑한가”가 아니라 “어떤 피드백 구조를 만들어줄 것인가”입니다.

참고자료:


AI Sparkup 구독하기

최신 게시물 요약과 더 심층적인 정보를 이메일로 받아 보세요! (무료)

Comments

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다