Elementor MCP: AI가 만든 HTML을 편집 가능한 Elementor 페이지로

이제 AI가 디자인한 HTML 페이지를 실제로 편집할 수 있는 Elementor 페이지로 바꾸는 공식 방법이 생겼습니다. Elementor 4.3과 함께 출시된 Elementor MCP입니다. 저희는 깨끗한 WordPress 사이트에 이를 설정하고, 열 개 섹션으로 된 랜딩 페이지를 다시 만들면서 걸려 넘어진 부분을 모두 기록했습니다. 이 글이 그 기록입니다. MCP가 무엇인지, 어떻게 연결하는지, 효과가 있었던 작업 순서, 그리고 시작하기 전에 알아 두면 좋은 작은 점들을 정리했습니다.

Elementor MCP란

MCP(Model Context Protocol)는 AI 도구가 다른 소프트웨어의 기능을 호출하는 표준 방식입니다. Elementor MCP는 Elementor의 페이지 제작 기능을 이미 쓰고 있는 AI 도구(Claude Code, Claude Desktop, Codex, Cursor 또는 다른 MCP 클라이언트)에 열어 줍니다. 그러면 어시스턴트가 페이지를 만들고, 요소를 추가해 스타일을 지정하고, 전역 클래스와 변수를 관리하고, 그 결과를 여러분의 사이트 안에 저장할 수 있습니다. 손으로 붙여넣거나 가져올 것이 없습니다. AI가 Elementor 안에서 직접 만들고, 만든 것은 모두 일반 요소이므로 나중에 패널에서 선택해 편집할 수 있습니다.

사용하는 것은 Elementor의 새로운 atomic 요소입니다. Flexbox, Div block, Grid 컨테이너와 Heading, Paragraph, Button, Image, SVG, Tabs, Accordion 등이며, 스타일은 위젯별 설정이 아니라 전역 클래스와 변수로 지정합니다. 시작하기 전에 가장 먼저 이해해야 할 점입니다. 필요한 조건과 작업 순서를 모두 좌우하기 때문입니다.

MCP가 만든 페이지를 연 Elementor 편집기. 왼쪽에는 Atomic Elements 패널이, 오른쪽 구조 패널에는 만들어진 섹션인 Nav, Hero, Logos, Features, Stats, Quote, Pricing, FAQ, CTA, Footer가 나열되어 있습니다. — MCP가 남기는 것은 일반적인 atomic 요소입니다. 섹션마다 이름 붙은 컨테이너가 하나씩 있고, 모두 패널에서 편집할 수 있습니다.

필요한 것

WordPress 6.8 이상과 Elementor 4.3 이상. 연결과 제작은 무료 플러그인만으로 충분합니다. Elementor Pro와 무료 Angie 플러그인을 더하면 폼, 테마 템플릿, 사용자 지정 위젯 같은 기능이 추가됩니다.
Atomic Editor 활성화. 처음부터 Elementor 4로 설치한 사이트는 대개 이미 켜져 있습니다. 이전 버전에서 4.3으로 업데이트한 사이트는 꺼진 상태로 시작하며, Elementor → Settings → Atomic Editor에서 켜기 전까지 MCP의 제작 도구는 잠겨 있습니다.
MCP를 지원하는 AI 도구. Elementor는 MCP에 비용을 받지 않습니다. 드는 비용은 그 작업에 대해 AI 도구가 청구하는 금액입니다.

연결은 1분 정도면 됩니다

WordPress에서 Elementor → Elementor MCP를 열고 Enable MCP access를 클릭합니다.
도구를 선택합니다: Claude Code, Claude Desktop, Codex, Cursor 또는 Other.
사이트에 애플리케이션 비밀번호가 만들어진다는 것을 확인하는 상자에 체크합니다.
Generate Prompt를 클릭해 프롬프트를 복사하고 AI 도구에 붙여넣습니다. 그러면 연결이 설정되며, 일부 도구는 그 뒤에 다시 시작해야 합니다.

WordPress의 Elementor MCP 화면. Claude Code, Claude Desktop, Codex, Cursor, Other 탭과 애플리케이션 비밀번호가 만들어진다는 것을 확인하는 체크 상자, Generate Prompt 버튼이 있습니다. — 테스트 사이트의 Elementor → Elementor MCP. 도구를 고르고, 상자에 체크하고, 프롬프트를 생성해 도구에 붙여넣으면 됩니다.

이 연결은 연결을 만든 WordPress 사용자의 권한으로 동작합니다. 따라서 편집자 계정은 편집자가 할 수 있는 일만 할 수 있습니다. 개별 연결은 사용자 → 프로필 → 애플리케이션 비밀번호에서 취소할 수 있고, 사이트 전체에서 MCP를 끄려면 같은 Elementor 화면에서 끌 수 있습니다.

효과가 있는 작업 순서

Elementor의 공식 시연과 저희 테스트는 같은 작업 순서를 가리킵니다. 핵심은 각 단계가 다음 단계에 확실한 기준을 넘겨준다는 점입니다. 그래야 AI가 결정을 지어내는 대신 이미 정한 것을 따라가게 됩니다. 처음부터 끝까지 보고 싶다면, 이 작업 방식을 다룬 Elementor 웨비나(약 45분, YouTube)에서 편집기 팀의 프로덕트 매니저가 이 방법으로 페이지 하나를 완성하는 과정을 볼 수 있습니다.

먼저 디자인을 확정합니다. 빠르게 만든 이미지로 방향을 잡은 다음, AI에게 페이지를 순수 HTML과 CSS로 작성하게 합니다. HTML은 고치는 비용이 적으니 레이아웃, 문구, 색상은 이 단계에서 반복해 다듬습니다.
이미지를 업로드합니다. 만들기 전에 페이지에 쓸 이미지를 미디어 라이브러리에 넣어 두면, AI가 대충 때우지 않고 실제 이미지를 참조할 수 있습니다.
디자인 시스템을 만듭니다. AI에게 HTML을 읽고 색상과 글꼴은 전역 변수로, 반복되는 스타일(버튼, 섹션 제목, 카드)은 전역 클래스로 만들게 합니다. 가볍게 유지하세요. Elementor의 시연에서도 첫 번째 결과는 클래스가 100개가 넘었고, 범용적인 약 60개로 줄였습니다.
섹션은 하나씩 만듭니다. “우리 클래스를 써서 HTML대로 가격 섹션을 만들어 줘” 같은 짧은 지시면 충분합니다. 작게 나눌수록 확인하기 쉽고 다시 만들 때도 비용이 적습니다.
섹션마다 확인합니다. 다음으로 넘어가기 전에 편집기와 모바일 너비에서 모두 봅니다. Elementor 팀도 결과물에는 사람의 마무리가 필요하다고 분명히 말합니다. 그들의 시연에서도 모바일에서 이미지 하나를 조정해야 했고, 탭으로 된 히어로도 미세 조정이 필요했습니다.

테스트에서 배운 일곱 가지

새로 설치한 WordPress에 Elementor 4.3.5를 쓰고 Pro나 Angie 없이, 히어로, 로고 띠, 기능 카드 여섯 장, 통계, 후기, 세 가지 요금제, FAQ, 행동 유도 띠, 푸터로 된 랜딩 페이지를 다시 만들었습니다. 결과는 원본과 매우 비슷했습니다. 시간이 들었던 세부 사항은 다음과 같습니다.

나란히 놓은 비교: 왼쪽은 원본 HTML 랜딩 페이지, 오른쪽은 Elementor MCP로 다시 만든 같은 페이지입니다. 거의 같지만, 오른쪽에서는 제목의 강조된 단어가 색을 잃었습니다. — 왼쪽은 원본 HTML, 오른쪽은 MCP가 만든 페이지입니다. 제목을 보세요. “whole team”의 색이 사라졌습니다. 경고 없이 버려진 스타일 중 하나입니다.

SVG 아이콘 업로드에는 설정이 하나 필요합니다. SVG 요소는 미디어 라이브러리에 있는 아이콘만 표시하는데, WordPress는 기본적으로 SVG 업로드를 거부합니다. Elementor의 Enable Unfiltered File Uploads 설정을 켜고 Elementor 미디어 선택 창에서 아이콘을 업로드하세요.
선 아이콘이 채워져 나올 수 있습니다. SVG 요소는 아이콘의 채우기를 현재 글자 색으로 설정하기 때문에, 선으로만 된 아이콘(AI가 만든 페이지 대부분이 쓰는 스타일)이 꽉 찬 도형으로 보입니다. SVG 요소의 글자 색을 투명하게 하니 선 모양이 돌아왔습니다.
클래스 순서가 곧 우선순위입니다. 두 전역 클래스가 같은 속성을 설정하면 목록에서 위에 있는 쪽이 이깁니다. 클래스는 만든 순서대로 나열되므로, 기본 버튼 클래스 다음에 만든 작은 버튼 클래스는 더 작은 여백이 적용되지 않습니다. 저희는 만들기 전에 변형(modifier) 클래스를 기본 클래스 위로 옮기도록 AI에게 요청했습니다.
조용히 버려지는 스타일을 조심하세요. 지원되지 않는 CSS 대부분은 도구의 응답에 경고로 보고됩니다. 변마다 다른 테두리 색, 크기를 지정한 방사형 그라디언트, 따로 지정한 행 간격 등입니다. 하지만 경고 없이 버려진 것도 있었습니다. 제목 안에서 강조한 단어가 색을 잃었고, 가격 안의 span을 꾸미는 중첩 규칙도 적용되지 않았습니다. 이런 것은 응답만이 아니라 페이지를 직접 봐야 찾을 수 있습니다.
텍스트 요소의 태그는 정해져 있습니다. Paragraph 요소는 p나 span만 받기 때문에, <blockquote>로 표시한 인용문은 일반 문단이 됩니다.
아코디언의 열림 표시는 미리 계획하세요. 저희 테스트에서는 아이콘 슬롯을 비워 두든 아예 빼든 FAQ의 열림·닫힘 표시가 나타나지 않았습니다. 도구 자체 설명에 따르면 이 슬롯에는 SVG 요소가 들어가므로, 업로드한 아이콘을 지정하거나 나중에 편집기에서 추가하세요.
미리보기 링크로 스스로 확인하세요. MCP는 현재 초안의 임시 미리보기 URL을 만들 수 있습니다. 섹션을 하나 만들 때마다 AI에게 그것을 확인하게 하는 것이 문제를 일찍 잡는 가장 저렴한 방법입니다.

같은 기능 카드를 두 번 보여 줍니다. 왼쪽에서는 차트 아이콘이 어두운 색으로 꽉 찬 도형으로, 오른쪽에서는 원래 의도한 가는 선으로 표시됩니다. — 왼쪽은 처음 만든 결과로, SVG 요소가 선 아이콘을 채워 버렸습니다. 오른쪽은 SVG 요소의 글자 색을 투명하게 한 뒤입니다.

규모를 가늠하자면, 페이지 전체에 도구 호출이 30번 정도 들었습니다. 그중 두 번은 저희 실수(중복된 요소 이름과 Paragraph 요소가 받지 않는 태그)로 실패해 다시 보내야 했습니다. 느린 로컬 테스트 서버에서 어시스턴트가 작업한 시간은 15분 정도였습니다. 또 새 세션은 매번 MCP가 제공하는 도구 목록을 읽는 것으로 시작하는데, 그 분량이 적지 않으므로 짧고 범위가 분명한 세션이 긴 세션 하나보다 경제적입니다.

더 간단한 방법이 맞는 경우

이미 AI 코딩 도구로 작업하고 있고 제대로 된 디자인 시스템 위에 페이지를 만들고 싶다면 MCP가 가장 강력한 선택입니다. 기존 페이지에 블록 하나만 붙여넣으면 되거나, AI 도구를 쓰지 않거나, 아직 클래식 편집기를 쓰는 사이트에서 결과를 써야 한다면 클래식 위젯을 출력하는 변환기가 더 간단한 길입니다. 이 사이트의 변환기가 바로 그 일을 하며, 브라우저 안에서만 동작합니다. 두 방법은 함께 쓰기에도 좋습니다. AI 도구로 완성한 HTML은 어느 쪽이든 같은 입력이 됩니다.

요약

HTML로 디자인하고, 자료를 업로드하고, 작은 디자인 시스템을 만든 다음, MCP가 섹션별로 만들게 하고 그때마다 확인하세요. Elementor MCP는 좋은 HTML 디자인을 네이티브로 편집 가능한 Elementor 구조로 바꿔 줍니다. 결과가 깔끔한지는 준비에 들인 시간에 달려 있습니다.

이 가이드는 독립적으로 작성했으며 Elementor와 관련이 없습니다. 2026년 10월에 Elementor 4.3.5로 테스트한 내용이며, 이후 버전에서는 세부 사항이 바뀔 수 있습니다.