Elementor에서 페이지를 조립하는 에이전트 구축: 아이디어에서 작업 파이프라인까지

한 개발자가 Telegram과 통합된 WordPress 및 Elementor에서 페이지를 구축하는 AI 에이전트를 개발한 과정을 설명했습니다. 첫 번째 버전에서는 Elementor용 MCP 도구를 사용했지만, 사용자가 즉시 응답하지 않으면 요청이 유실되고, 반복 요청 시 중복 작업이 생성되며, 에이전트가 스킬을 우회하고 MCP를 직접 호출하려는 문제가 빠르게 드러났습니다. 이를 해결하기 위해 SQLite를 사용한 작업 큐(Task Queue)를 도입하여 사용자 질문 전에 레코드를 생성하고, 열린 작업(Open Task) 확인과 작업을 스킬에 위임하라는 엄격한 규칙을 추가했습니다. 복합 질문의 경우 CLI next-question을 구현하여 한 번에 하나씩 질문하도록 했습니다. 또한 작업 상태를 차단형(Blocking: 대기 중, 차단됨, 완료)과 비차단형(Non-blocking: 준비 완료)으로 분리하여 사용자 입력 없이 단계 진행이 가능하면 에이전트가 계속 실행되도록 했습니다. 테스트 격리를 위해 페이지 생성은 기본적으로 베타 환경에서 이루어지며, 프로덕션으로의 승격은 별도의 전송 워크플로우(Transfer Workflow)를 통해서만 가능합니다. Elementor 간격 오류는 elementor-spacing-builder.md 모듈로 해결했으며, 이 모듈은 컨테이너와 위젯 간의 차이를 수정합니다. 최종 답변은 별도의 CLI인 result_cli.py로 이동하여 워크플로우 질문에서 분리했습니다. 빌드 품질은 CLI를 통해서만 확인하며, 자체 확인(Self-asserting)은 금지됩니다. 가장 어려운 부분은 Figma와의 통합이었습니다. 초기 컴파일러 버전은 정보를 손실했고, 이후 Figma JSON을 Elementor JSON으로 직접 변환하는 엄격한 Python 컴파일러로 전환했습니다. 버전 14에서는 시맨틱 트리(Semantic Tree)를 추가하여 시맨틱과 레이아웃을 분리했습니다. 자산 내보내기도 최적화하여 VECTOR 경로는 SVG로 내보내지 않고, 명시적 사양이 있는 컴포넌트만 내보냅니다.