Build the PERFECT WordPress Website with AI (Full Guide)

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

AI로 WordPress 사이트를 만드는 핵심은 Claude로 디자인을 먼저 검토하고, Elementor에서 직접 편집 가능한 페이지를 구현한 뒤 검증을 거쳐 공개하는 것이다.

📌 핵심 요점

1. 방문자의 핵심 행동부터 정한다. 예시 피자 트럭은 ‘오늘 영업하는 위치 찾기’를 중심으로 페이지를 구성하며, 실제 사업의 가격·후기는 임의로 만들지 않고 빈자리로 남긴다.
2. 호스팅 결제 전에 디자인을 확인한다. 사업 정보·사진·분위기를 담은 브리프를 승인하고, 디자인 후보를 조합해 데스크톱과 모바일 화면을 검토한다.
3. Claude와 무료 스킬이 제작을 돕지만 서비스 비용은 별도다. Claude 유료 플랜이 필요하고, 이미지 서비스는 선택에 따라 추가 비용이 발생하며, 호스팅은 선결제 총액과 갱신 가격을 함께 확인해야 한다.
4. WordPress에 Astra·Elementor·WPForms를 설치하고 Elementor MCP로 Claude를 연결한다. 페이지는 편집 가능한 Elementor 요소로 만들지만, 테마 색상·글꼴·헤더와 문의 양식 연결에는 사용자 작업도 필요하다.
5. 초안 검토와 공개 후 검증까지 마쳐야 제작이 끝난다. 모바일 화면과 개인정보처리방침을 확인하고, 비공개 브라우저에서 버튼과 문의 수신을 검사하며, Claude 사용을 중단하면 전용 접근 키를 폐기한다.

🧩 배경과 문제 정의

• 코딩 경험이 없는 소상공인도 AI로 맞춤형 WordPress 사이트를 만들고, 이후 직접 수정할 수 있는 제작 방식이 필요하다.
• 호스팅을 결제하기 전에 디자인을 확인하고, 사업 정보·사진·방문자의 핵심 행동을 반영해 사이트 구성을 확정한다.
• Claude와 무료 스킬로 설계와 페이지 제작을 진행하고, WordPress·Elementor로 편집 가능한 결과물을 만든다. Claude 구독을 중단해도 사이트는 계속 작동하는 구성을 목표로 한다.

🕒 시간순 섹션별 상세정리

1. Claude 선택과 유료 이용 조건

• Claude는 컴퓨터의 파일을 다루고 WordPress에 직접 연결할 수 있다. 이 스킬은 Claude에서 제작·검증됐으며, Codex에서도 비슷한 작업은 가능하지만 사용 경험은 달라질 수 있다 [01:17]
• Mac·Windows용 Claude 데스크톱 앱과 유료 플랜이 필요하다. Pro는 월 약 20달러, 연간 결제 시 월 환산 약 17달러이며 국가별 가격은 다를 수 있다. 사이트 제작 후 구독을 취소해도 사이트는 유지된다 [02:19]

2. 무료 스킬 설치와 작업 폴더 준비

• 무료 스킬은 WordPress와 Elementor 작업 순서를 담은 텍스트 파일 묶음이다. 내용을 열어 확인할 수 있으며 WordPress나 호스팅 로그인 비밀번호를 요구하지 않는다 [03:19]
• GitHub 페이지의 다운로드 링크로 ZIP 파일을 받고, 압축을 풀지 않은 상태로 Claude의 스킬 업로드 기능에 등록한다. 업로드 과정에서 보안 검사가 실행되며 설치 후 스킬 활성화 여부를 확인한다 [03:43]

3. 사업 정보와 방문자의 핵심 행동으로 사이트 범위 결정

• 질문에 답하면 사업에 맞춰 이름과 사이트 구성이 구체화된다. 예시는 오스틴의 가상 장작 화덕 피자 트럭이며, 사업명은 Old Flame Pizza Company로 정한다 [05:28]
• 실제 사업을 선택하면 가격이나 후기 같은 사실을 임의로 만들지 않고 입력할 빈자리를 표시한다. 가상 피자 트럭은 연습용으로 설정하며, 방문자의 핵심 행동은 오늘 영업하는 위치를 찾는 것으로 정한다 [06:13]

4. 보유 자료와 브리프로 디자인 기준 확정

• 사진·로고·메뉴가 있으면 작업 폴더 안에 생성된 사진 폴더로 복사한다. Claude는 각 사진을 확인하고 칠판 메뉴 사진의 음식 이름도 읽어 메뉴 페이지에 활용한다 [07:24]
• 푸터 연락처와 참고할 웹사이트까지 정하면 사업명·페이지·사진·원하는 분위기를 묶은 브리프가 만들어진다. 전체 디자인의 기준이므로 내용을 확인한 뒤 승인한다 [07:57]

5. 디자인 후보 조합과 로컬 미리보기 수정

• 세 가지 디자인 후보는 각각 글꼴·색상·장식 요소를 갖는다. 예시에서는 손으로 그린 간판 스타일과 다른 후보의 전구 장식을 조합하며, 전체 페이지 디자인에는 약 10분이 걸린다 [08:19]
• 완성된 디자인은 사용자 브라우저에서 확인한다. 내부 소형 브라우저에서는 스타일이 빠진 일반 텍스트처럼 보일 수 있으며, 실제 검토 대상은 별도로 열린 디자인이다. 모바일 구성은 브라우저 폭을 줄여 확인하고, 이 단계의 사이트는 아직 온라인에 공개되지 않는다 [08:43]

6. 사진 제작 방식과 Higsfield 연결

• 사진은 AI로 새로 만들거나 기존 휴대폰 사진을 개선하는 방식으로 채운다. Claude는 무료 선택지를 먼저 권하며, 예시에서는 실제 제품을 활용하기 위해 Higsfield로 새 이미지와 기존 사진 세 장의 개선본을 요청한다 [11:01]
• Higsfield 무료 이미지에는 워터마크가 있어 유료 플랜을 사용한다. 미국 기준 Starter는 월 19달러이며 최저 플랜으로 100장 이상을 만들 수 있다고 안내하지만, 할인 조건은 수시로 달라진다 [11:39]

7. 이미지 비용 확인과 실제 제품 보존 검토

• 무료 플랜에는 10크레딧만 있어 예시에서는 월간 Starter로 업그레이드한다. Claude가 구매를 대신하지 않으며, 결제 후 플랜과 사진 업로드 적합성을 확인하고 사용 비용을 먼저 알린다 [13:45]
• 예상 비용은 사진당 약 2크레딧, 사이트 전체 약 16~20크레딧이다. 실제 작업은 약 7분이 걸렸고 사진 8장에 16크레딧을 사용했으며, 재작업이 필요한 사진도 표시한다 [14:38]

8. 호스팅 구매와 첫해 혜택·갱신 조건

• 호스팅은 사이트를 계속 온라인으로 제공하는 서버 서비스이고 도메인은 사이트 주소다. 기존 호스팅도 사용할 수 있으며, 예시에서는 스킬을 검증한 Hostinger를 새로 이용한다 [15:35]
• 영상의 링크는 기존 할인에 추가 10% 할인을 제공한다고 안내한다. 12개월 이상 플랜에는 첫해 무료 도메인과 이메일이 포함되며, 당시 무료 도메인을 포함한 가장 저렴한 선택지는 Premium이다 [16:19]

9. Hostinger에서 WordPress 설치 방식 선택

• WordPress는 코딩 없이 편집할 수 있는 무료 사이트 운영 소프트웨어다. Claude는 호스팅 업체를 확인한 뒤 로그인 생성, 도메인·서버 선택, 이메일 인증 등의 설정 절차를 안내한다 [17:36]
• Hostinger의 초기 AI 채팅 대신 수동 설정과 새 사이트 생성을 선택한다. 자체 AI 웹사이트 빌더는 WordPress와 별도 제품이어서 이 과정에서 사용할 무료 도구를 적용할 수 없으므로 WordPress를 선택한다 [18:13]

10. 도메인 등록과 서버·관리자 계정 설정

• 첫해 무료 도메인을 검색해 등록하고, 원하는 .com이 사용 중이면 이름을 조금 바꾼다. 예시에서는 truck을 추가하며, 서버는 고객과 가장 가까운 위치를 선택한다 [19:00]
• WordPress 로그인은 Hostinger 계정과 별개다. 강력한 비밀번호를 비밀번호 관리자에 저장하고 Claude에 전달하지 않으며, 사이트 생성 방식은 처음부터 만들기를 선택한다. 관리자 화면은 도메인 뒤에 /wp-admin을 붙여 접속한다 [19:42]

11. Astra·Elementor·WPForms 설치

• 사이트에는 테마, 페이지 빌더 Elementor, 연락 양식 플러그인 세 가지를 무료로 추가한다. 테마는 헤더·푸터 같은 틀을 담당하고, Elementor는 페이지를 코드 없이 수정할 수 있게 한다 [20:48]
• 테마는 Elementor와 잘 작동하는 Astra를 설치·활성화한다. 추가 템플릿을 설치하는 시작 배너는 사용할 필요가 없으며, 별도 호스팅 에이전트 패널의 사용자 지정 코드 제작 대신 기존 제작 방식을 이어간다 [21:25]

12. Elementor MCP와 전용 접근 키로 Claude 연결

• Elementor 내장 MCP는 Claude가 Elementor의 제작 도구를 사용할 수 있게 한다. MCP 접근을 켜고 연결 대상으로 Claude Code를 선택한다. 데스크톱 앱 안에서도 Code 탭은 Claude Code에 해당한다 [22:40]
• 생성되는 설정 프롬프트에는 Claude 전용 애플리케이션 비밀번호가 포함된다. 일반 로그인 비밀번호는 바뀌지 않으며 이 키는 언제든 삭제할 수 있지만, 프롬프트 자체는 다른 사람에게 공유하면 안 된다 [23:10]

13. 새 세션에서 연결을 확인하고 초안 제작 시작

• 페이지는 방문자에게 보이지 않는 초안으로 제작한다. 연결은 새 세션에서 로드되며, 같은 폴더에 저장된 메모를 통해 이전 작업을 이어간다 [24:00]
• 작업 폴더·Auto 모드·모델을 확인한 뒤 continue my website를 입력한다. 연결이 확인되면 사이트 페이지와 Elementor 도구에 접근할 수 있으며, 제작 중에는 열려 있는 Elementor 편집기 탭을 닫는다 [24:23]

14. Elementor 요소로 페이지를 만들고 디자인과 대조

• 홈 제작에는 약 10분이 걸린다. 사진 업로드 후 공통 색상과 글꼴을 변수로 저장하고 Elementor 요소로 페이지를 구성한다. 실패한 작업은 다른 방식으로 재시도하며, 사용량 한도에 도달하면 한도 초기화 후 자동 재개하거나 나중에 continue로 이어갈 수 있다 [25:00]
• 완성 후 데스크톱·모바일 폭을 점검하고 WordPress의 초안 미리보기에서 승인한 디자인과 비교한다. 사진·색상·글꼴은 거의 일치하며 각 요소를 나중에 직접 수정할 수 있지만, 헤더와 맨 아래 테마 영역은 기본 모습이 남아 있다 [25:33]

15. 테마의 공통 색상과 글꼴을 수동 적용

• 푸터는 각 페이지에 만들어졌지만 헤더는 테마에서 관리하므로 한 번 설정하면 전체 페이지에 적용된다. Claude는 테마 설정을 직접 변경할 수 없어 사용자가 색상·글꼴 등의 단계별 지침을 적용하고 검사를 받는다 [26:56]
• WordPress의 외모 → 사용자 정의 → 전역 설정에서 Claude가 제공한 색상 코드를 입력하고, 타이포그래피에서 제목용·본문용 글꼴을 지정한 뒤 게시한다 [27:42]

16. 헤더의 로고·사이트명·행동 버튼 구성

• 헤더 빌더에서 원래 디자인에 없는 소셜 아이콘과 임시 요소를 제거한다. 로고가 있으면 업로드하고, 예시처럼 로고가 없으면 Astra 기본 로고를 제거한 뒤 사이트명을 데스크톱·태블릿·휴대폰에 표시한다 [28:54]
• 메뉴 옆 빈 공간에 버튼을 추가하고 버튼 문구와 연결할 페이지 주소를 입력한다 [29:26]

17. 헤더와 푸터의 색상·문구 통일

• 사용자 정의 화면의 디자인 탭에서 Claude가 제공한 색상 코드로 헤더 배경, 사이트 제목, 메뉴, 버튼 색상을 설정하고 게시한다. 완료를 알리면 Claude가 헤더를 확인하고 Astra가 추가한 샘플 메뉴를 수정한다. [30:22]
• 푸터 빌더의 저작권 요소를 선택해 기존 문구를 Claude가 제공한 저작권 문구로 바꾸고 색상도 맞춘다. 게시 후 완료를 알리면 Claude가 헤더와 푸터 작업 결과를 확인한다. [30:59]

18. 무료 문의 양식 연결과 편집 충돌 방지

• WPForms에서 사업에 맞는 양식 이름을 정하고 ‘Simple Contact Form’ 템플릿을 선택해 저장한다. 예시 사이트는 케이터링 견적 문의용 이름을 사용한다. [31:42]
• 양식을 넣을 페이지를 Elementor로 연다. 열린 편집기에서 저장하면 Claude의 수정 내용을 되돌릴 수 있으므로 AI에게 페이지 변경을 요청하기 전에 편집기를 닫고, ‘Page updated by AI’가 보이면 새로고침한다. [32:12]

19. 최종 검토로 모바일 화면과 개인정보 안내 보완

• Claude는 공개 전에 전문 디자이너가 살펴보는 여덟 가지 항목으로 사이트를 평가하고 낮은 항목의 개선을 제안한다. 점수는 사이트마다 다르며, 예시에서는 모바일 레이아웃과 신뢰 항목이 가장 낮아 자동으로 가능한 수정을 적용한다. [33:31]
• 문의 양식이 개인정보를 수집하므로 Claude가 개인정보처리방침 페이지도 추가한다. 예시 사업은 가상이어서 검색 노출을 막지만, 고객 유입이 필요한 실제 사업 사이트는 이 작업을 건너뛴다. [33:44]

20. 사이트 공개 후 방문자 검증과 접근 권한 관리

• 공개를 승인하면 Claude가 페이지를 게시하고 홈페이지를 첫 화면으로 지정한다. 푸터에 개인정보처리방침 링크도 추가하며, Claude는 로그아웃 상태에서 각 페이지를 확인한다. [34:53]
• 비공개 브라우저 창에서 도메인에 접속해 모든 페이지의 문구·사진과 버튼 목적지를 확인한다. 문의 양식으로 테스트 메시지를 보내 실제 수신 여부를 검사하고, 받은편지함에 없으면 스팸함도 확인한다. [35:19]

🧾 결론

• 결과물은 WordPress와 Elementor에서 직접 수정할 수 있어 Claude 구독을 취소한 뒤에도 사이트를 유지할 수 있다.
• AI가 만든 디자인과 페이지를 사용자가 단계별로 승인하고, 테마 설정과 양식 연결을 보완하는 협업 방식이다.
• 완성 여부는 화면의 인상뿐 아니라 방문자 행동, 모바일 사용성, 문의 전달, 공개 상태를 확인해 판단해야 한다.

📈 투자·시사 포인트

• 소상공인은 호스팅을 구매하기 전에 디자인을 검토할 수 있다. 먼저 사업 정보와 필요한 페이지를 확정하는 것이 지출 판단의 출발점이다.
• 비용은 AI 구독료·선택적 이미지 제작비·호스팅 및 도메인 비용으로 나눠 살펴봐야 한다. 첫해 할인과 무료 제공 항목만으로 장기 운영비를 판단해서는 안 된다.
• 제작 도구 선택은 이후 수정 방식에도 영향을 준다. 이 가이드는 Elementor 요소로 페이지를 구성해 사용자가 작은 변경을 직접 처리하도록 한다.
• AI 사용을 중단해도 사이트는 남지만, 호스팅·도메인 유지와 문의 양식 작동 확인은 별도로 관리해야 한다.

⚠️ 불확실하거나 확인이 필요한 부분

• Claude·이미지 서비스의 가격, 크레딧, 할인과 호스팅 혜택은 영상 당시 조건이다. 국가별 가격과 실제 결제·갱신 조건을 다시 확인해야 한다.
• 이 스킬은 Claude에서 제작·검증됐다고 설명한다. 다른 도구에서의 동일한 사용 경험은 보장되지 않으며, 앱 화면과 버튼 이름도 달라질 수 있다.
• 디자인과 페이지 제작 시간은 예시 작업의 기록이다. 사용량 한도, 재시도, 사진 재작업이 발생할 수 있어 전체 제작 시간으로 일반화하기 어렵다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 방문자의 핵심 행동을 하나 정하고 사업 정보·사진·연락처를 모아 브리프를 검토한다. 확인되지 않은 가격과 후기는 채워 넣지 않는다.
• 호스팅 결제 전에 디자인을 승인하고, 데스크톱·모바일 화면과 실제 제품 사진의 보존 여부를 확인한다.
• Claude와 선택적 이미지 서비스 비용, 호스팅 선결제 총액·갱신 가격·환불 제외 항목을 확인한다.
• 일반 로그인 비밀번호는 전달하지 않고, MCP 연결에 쓰는 전용 애플리케이션 비밀번호가 포함된 프롬프트를 공유하지 않는다.

❓ 열린 질문

• 내 사업에서 방문자가 가장 먼저 해야 할 행동은 무엇이며, 현재 페이지와 버튼이 그 행동으로 연결되는가?
• 첫해 혜택이 끝난 뒤에도 호스팅·도메인 비용과 필요한 서비스 비용을 감당할 수 있는가?
• 작은 수정은 직접 처리하고 큰 변경은 AI에게 요청하는 운영 방식이 실제 관리 역량에 맞는가?