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

AI와 함께 만드는 HTML 기반 LP 에디터 'EGP Code' 내재화 이유

Mercari가 AI 에이전트의 편집 효율을 높이기 위해 기존 노코드 에디터를 HTML 기반의 'EGP Code'로 재설계한 사례.

섹션별 상세

기존 EGP Pages는 드래그 앤 드롭 방식의 노코드 에디터였으나, AI가 편집하기에는 데이터 구조가 복잡하고 토큰 소비가 많았다.

EGP Code는 HTML 기반으로 전환하여 AI가 별도의 복잡한 JSON 문법을 학습하지 않아도 되도록 개선했다.

동적 동작은 Web Components로 캡슐화하고 스타일링은 Tailwind CSS를 채택하여 AI와 사람이 모두 이해하기 쉬운 구조를 구현했다.

사내 API 연동을 위해 API별 Markdown 문서를 참조하는 방식을 도입하여, AI가 필요할 때만 관련 문서를 읽고 코드를 생성하도록 최적화했다.

AI 에이전트가 질문에 대해 후보 사내 API를用途와 함께 제시하는 모습. — ScreenshotAI가 사내 API를 학습하지 않았더라도, 문서 참조를 통해 적절한 API를 추천할 수 있음을 보여준다. API 명칭은 모자이크 처리되어 있다.

AI 에이전트가 사내 API를 처리하는 3단계 흐름도. — Diagram요청 수신, 관련 API 탐색, 사용법 이해 및 구현이라는 에이전트의 동작 프로세스를 시각화한다.

에디터 내부에 Spec 탭과 Jest 기반 테스트 환경을 구축하여, AI가 생성한 코드의 품질을 즉시 검증하고 수정할 수 있도록 했다.

에디터 내에서 테스트를 실행한 결과 화면. — Screenshot왼쪽에는 테스트 결과, 오른쪽에는 LP 미리보기가 표시되어 개발과 검증이 한 화면에서 이루어짐을 보여준다.

Spec 탭에 자연어로 작성된 LP 사양서. — Screenshot테스트 코드를 직접 작성하는 대신 자연어로 사양을 기술하여 AI가 테스트를 생성하도록 유도하는 방식을 보여준다.

기술

HTML
Tailwind CSS
Web Components
Jest

활용 사례

사내 랜딩 페이지(LP) 제작
AI 에이전트 기반 개발 환경 구축
API 연동 및 테스트 자동화

AI 분석 전체 내용 보기

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

출처 · 인용 안내

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

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