メルカリエンジニアリングブログ

AI와 함께 만드는 LP 에디터 'EGP Code'를 지탱하는 4가지 기술

메르카리가 내재화한 AI 기반 LP 에디터 'EGP Code'의 에이전트 루프, Firestore 실시간 반영, 브라우저 테스트, 요소 매핑 기술을 설명한다.

섹션별 상세

에이전트는 '추론 → 도구 실행 → 결과 반영 → 재추론'의 재귀 루프를 통해 복잡한 편집 작업을 수행한다. 도구 실행 실패 시 에러를 피드백으로 전달해 스스로 수정하도록 유도하며, 필요 시 외부 문서를 검색해 API 호출 방식을 학습한다.

EGP Code를 지탱하는 4가지 핵심 기술 구조도 — Diagram에이전트, Firestore, 브라우저 프리뷰, 테스트 러너가 어떻게 연결되는지 전체적인 시스템 아키텍처를 보여준다.

에이전트의 재귀 루프와 도구 실행 흐름도 — Diagram시스템 프롬프트, 사용자 지시, 도구 목록을 결합하여 LLM이 도구를 선택하고 실행한 뒤 결과를 반영하는 루프 과정을 설명한다.

사용자가 처리 도중 새로운 지시를 내리면, 서버는 Firestore의 별도 컬렉션을 통해 이를 '인터럽트(割り込み)' 메시지로 수신한다. 에이전트는 실행 예정인 도구를 중단하거나 미발송된 응답을 폐기하고, 새로운 지시를 반영하여 계획을 재수립한다.

사용자 인터럽트 처리를 위한 Real-time steering 흐름도 — Diagram에이전트가 작업 중일 때 사용자가 추가 지시를 내리면 Firestore를 통해 이를 감지하고 작업을 중단하거나 재계획하는 과정을 보여준다.

서버와 브라우저는 Firestore를 통해 상태를 동기화하며, 서버가 작업을 완료하면 Firestore에 결과를 기록하고 브라우저가 이를 실시간으로 감지하여 프리뷰를 갱신한다. 이 방식은 WebSocket 없이도 상태 변경을 즉각 반영한다.

Firestore를 매개로 한 서버-브라우저 간 상태 동기화 흐름도 — Diagram서버가 PENDING 상태를 쓰고 브라우저가 이를 감지하여 반영한 뒤 COMPLETED로 상태를 변경하는 비동기 통신 구조를 설명한다.

브라우저 내 테스트 러너는 iframe을 생성하여 테스트용 HTML을 로드하고, window.fetch를 모킹하여 실제 API 호출 없이 동작을 검증한다. 테스트 결과는 에이전트에게 전달되어 코드 수정의 근거로 활용된다.

브라우저 내 테스트 러너의 시퀀스 다이어그램 — Diagram호스트 페이지와 테스트용 iframe 간의 postMessage 통신을 통해 테스트를 실행하고 결과를 수집하는 과정을 보여준다.

HTML 요소와 프리뷰를 연결하기 위해 파싱 단계에서 data-egp-src-id를 주입하고, 이를 키로 하는 매핑 테이블을 생성한다. 이를 통해 프리뷰 클릭 시 Monaco 에디터의 해당 행으로 점프하거나, AI에게 특정 요소의 위치 정보를 전달한다.

프리뷰 요소와 코드 에디터 간의 점프 기능 화면 — Screenshot프리뷰에서 특정 요소를 클릭하면 매핑 테이블을 통해 Monaco 에디터의 해당 HTML 코드로 즉시 이동하는 기능을 보여준다.

기술

Firestore
Monaco Editor
Testing Library
Vitest

활용 사례

AI 기반 LP 에디터
코드 자동 수정 시스템
브라우저 내 테스트 자동화

AI 분석 전체 내용 보기

AI 요약 · 북마크 · 개인 피드 설정 — 무료

출처 · 인용 안내

원문 발행 2026. 06. 10.수집 2026. 06. 10.출처 타입 RSS

인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.