엘리멘터 MCP 출시 - AI에게 말로 시켜서 페이지를 만드는 시대

AI가 발전하면서 워드프레스 테마와 플러그인 개발업체들도 시대를 따라가기 위해 AI를 도입하고 있습니다. 아바다 테마와 비슷한 판매량을 기록하고 있는 인기 워드프레스 테마인 Divi는 Divi AI를 도입하여  Divi 빌더 내에서 텍스트나 이미지를 생성하거나 코딩도 할 수 있도록 지원하고 있습니다.

인기 워드프레스 페이지 빌더인 엘리멘터도 AI 기능을 적극 도입하고 있습니다. 엘리멘터로 페이지를 만들어 보신 분이라면 과정이 익숙하실 겁니다. 위젯을 끌어다 놓고, 글자 크기와 색을 바꾸고, 여백을 맞추고, 모바일 화면도 따로 손봐야 합니다. 요즘은 AI의 도움을 받기도 하지만, 보통은 AI가 써 준 글이나 코드를 내가 직접 복사해서 붙여넣는 방식이었습니다. 

하지만 이번에 엘리멘터가 Elementor MCP를 내놓으면서 페이지 디자인이 이전보다 훨씬 수월해졌습니다. AI에게 "이런 느낌의 랜딩 페이지를 만들어줘"라고 말하면, AI가 내 사이트에 연결되어 엘리멘터 페이지를 직접 만들어 줍니다. 앞으로는 위젯을 하나하나 추가하여 설정하는 것보다 원하는 디자인을 설명하고 결과를 다듬는 방식으로 바뀔 것 같습니다.

참고로 Divi 테마도 AI 에이전트 도입으로 자동화된 디자인 및 편집이 가능해졌습니다.

워드프레스 Divi 5.12 릴리스: 베타 종료와 혁신적인 'AI 에이전트' 도입 - 워드프레스 정보꾸러미

MCP란?

AI 챗봇은 원래 내가 준 글이나 파일만 읽고 답을 내놓는 존재였습니다. 워드프레스 사이트를 열어 보거나 페이지를 직접 만들어 줄 수는 없었습니다.

MCP(Model Context Protocol)는 AI가 외부 프로그램이나 서비스와 연결되어 직접 작업을 할 수 있도록 하는 공통 연결 규격입니다. 컴퓨터의 USB 포트를 떠올리시면 쉽습니다. USB 규격만 맞으면 어떤 기기든 꽂아서 쓸 수 있듯이, MCP를 지원하는 AI와 서비스는 서로 연결할 수 있습니다.

그러므로 Elementor MCP는 "내 엘리멘터 사이트에 AI를 꽂을 수 있는 포트" 정도로 이해할 수 있을 것 같습니다. 클로드(Claude), 코덱스(Codex), 커서(Cursor) 등과 같은 AI 툴을 연결할 수 있습니다.

Elementor MCP는 AI 에이전트 그 자체는 아니고, 클로드나 Codex 같은 AI 에이전트가 엘리멘터를 직접 다룰 수 있게 해 주는 다리 역할을 합니다.

AI가 만든 코드를 붙복하는 것과의 차이점

가장 큰 차이는 결과물의 형태입니다.

• 엘리멘터의 방식 그대로 만들어집니다. AI가 만든 것이 알아보기 힘든 코드 덩어리가 아니라, 엘리멘터 에디터에서 열어 바로 수정할 수 있는 진짜 엘리멘터 페이지입니다.
• 초안으로 저장됩니다. 바로 공개되지 않으니, 확인하고 고친 다음 직접 발행하면 됩니다.
• 충돌을 알려줍니다. 내가 에디터에서 편집하는 중에 AI도 같은 페이지를 수정하면, 엘리멘터가 이를 감지해 알려주고, 새로고침할지 변경을 취소할지 선택하게 해 줍니다.
• MCP 사용은 선택 사항. 기존 엘리멘터 에디터는 그대로이므로 사용하고 싶을 때만 쓰면 됩니다.

팀원이나 클라이언트에게 넘길 때도 이해하기 어려운 코드가 아니라 편집 가능한 엘리멘터 페이지를 전달할 수 있습니다.

어떤 작업을 시킬 수 있을까?

처음에는 아래 세 가지만 기억하셔도 충분할 것 같습니다.

1. 페이지 만들기: "병원 소개 페이지 만들어줘"와 같이 설명하면 구성과 스타일이 담긴 페이지 초안 생성
2. 기존 페이지 고치기: 이미 만든 페이지의 레이아웃을 다시 구성
3. 자료를 페이지로 옮기기: AI가 읽을 수 있는 Figma 시안, 구글 드라이브 문서, 노션 기획서 등을 참고해 페이지 제작

조금 더 익숙해지면 아래와 같은 작업도 시도해 볼 수 있습니다.

• 디자인 시스템 활용: 색상·글꼴 같은 디자인 규칙(클래스, 변수)을 만들고 적용, 반응형 설정 조정
• 헤더·푸터·팝업 제작: 표시 조건까지 포함해 사이트 공통 템플릿 생성
• 컴포넌트 작업: 재사용 가능한 요소를 배치하거나 새로 생성
• 동적 콘텐츠 연결: 글 정보, 커스텀 필드 등 워드프레스 데이터를 페이지에 연동

아래는 Angie라는 별도 도구를 설치해야 쓸 수 있는 기능입니다.

• 가격 계산기, 인터랙티브 폼, 3D 캐러셀 같은 커스텀 위젯 제작과 관리자 화면 꾸미기
• 수백 개의 게시글 및 상품 일괄 수정, 오류 디버깅, SEO 누락 항목 보완
• 우커머스(WooCommerce), Yoast, WPForms, 젯팩(Jetpack), ACF 등 다른 플러그인의 기능을 AI가 함께 활용

연결 방법

1. 워드프레스 관리자 화면의 Elementor 메뉴 아래 "Elementor MCP" 페이지로 이동합니다.
2. 사용할 AI 도구를 고릅니다. Claude Code, Claude Desktop, Codex, Cursor, 그 밖의 MCP 지원 도구(Other) 중에서 선택할 수 있습니다.
3. 설정 프롬프트를 생성해서 복사합니다. 연결에 필요한 애플리케이션 비밀번호는 엘리멘터가 자동으로 만들어 프롬프트에 넣어 줍니다. 직접 설정하는 수동 방식도 있습니다.
4. 복사한 프롬프트를 AI 도구에 붙여넣으면 연결이 끝납니다.

알림판 > Elementor > Elementor MCP

Enable MCP access 버튼을 클릭합니다.

I understand ... 체크란을 체크하고 Generate Prompt를 클릭합니다.

프롬프트를 복사합니다.

접근은 사이트 관리자만 가능하고, 연결은 사이트별로 이뤄집니다.

비용은 얼마나 드나요?

• MCP 연결 자체는 무료입니다.
• 사용하는 AI 툴(클로드, 코덱스 등)의 요금과 크레딧은 별도입니다.
• 엘리멘터의 기존 요금 구조를 따르므로, 기본 기능은 무료로 만들 수 있고 Pro 기능이 들어가는 결과물은 Pro 플랜이 필요합니다.

알아 두어야 할 사항

• 한 번에 완벽하지 않을 수 있습니다. AI가 주는 것은 완성품이 아니라 빠른 초안으로 생각하는 편이 좋습니다. 초안을 에디터에서 다듬는 과정은 여전히 필요합니다.
• 아토믹 구조 기준입니다. 편집 기능은 엘리멘터의 새 구조인 아토믹 페이지 중심이라, 예전 방식으로 만든 기존 사이트는 적용 범위를 먼저 확인해 보세요.
• 테스트 사이트에서 먼저 해 보세요. 운영 중인 사이트에 바로 적용하기보다 연습용 사이트에서 감을 익히는 것이 안전합니다. 대량 수정 전에는 반드시 백업도 하시기 바랍니다.

마치며

Elementor MCP의 핵심은 AI와 엘리멘터 사이에 있던 "복사해서 붙여넣는 단계"가 사라지고, 설명을 입력하면 초안이 만들어지는 방식으로 바뀐다는 점입니다. 아직 출시 초기이니 작은 페이지 하나부터 시켜 보면서 어디까지 맡길 수 있는지 감을 잡아 보면 좋을 듯합니다.

참고

https://avada.tistory.com/3697

엘리멘터로 만든 워드프레스 사이트를 WPML으로 다국어 사이트 변환 작업

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)