How to Build a WordPress Website using Claude AI - FULL GUIDE

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude AI로 맞춤형 반응형 디자인을 만든 뒤 Elementor의 실제 편집 요소로 재구성하면, 코딩 없이 WordPress 웹사이트를 설계·게시·검증할 수 있다.

📌 핵심 요점

1. 구축 기반부터 올바르게 선택해야 한다. 호스팅·도메인·WordPress를 먼저 마련하고, Horizons가 아닌 WordPress와 Build from scratch를 선택한 뒤 Astra, Elementor 무료판, WPForms, Atomic Editor를 준비한다. 필수 비용은 Claude Pro와 지속적인 웹 호스팅이며 Artlist는 선택 사항이다.
2. 디자인 품질은 입력 자산과 프롬프트에서 결정된다. 로고와 실제 작업 사진을 첨부하고, 사업명·업종·지역·고객·차별점·서비스·필요 페이지·원하는 분위기를 구체화한다. 이전 프로젝트의 디자인 시스템은 None으로 바꾸고 WordPress 호환 규칙을 유지해야 한다.
3. Claude Design에서 만든 다섯 페이지는 데스크톱·태블릿·모바일 폭으로 검토한다. Canvas에서 페이지 간 일관성, 반복 이미지, 로고 크기, 강조색과 실제 콘텐츠의 적합성을 확인하며, AI 이미지는 실제 작업 실적을 오인시키는 증거로 사용하지 않는다.
4. 만족한 디자인은 Project HTML로 내보내고 Nova Mira와 Claude Code를 통해 WordPress에 연결한다. 먼저 홈페이지 한 페이지만 실제 Elementor 요소, 전역 색상·폰트, 로컬 미디어 자산과 반응형 제어로 재구성해 검증한 뒤 나머지 페이지로 확장한다.
5. 완성 기준은 시각적 유사성이 아니라 운영 가능성이다. Elementor에서 텍스트·버튼·레이아웃이 직접 편집되는지 확인하고, Astra 메뉴·헤더·푸터와 WPForms를 구성한 뒤 문의 제출·이메일 수신, 내부 링크, 모바일 화면, 정적 홈페이지 설정을 비공개 창에서 최종 점검한다.

🧩 배경과 문제 정의

• 범용 WordPress 템플릿은 사이트 간 차별화가 어렵고, 전문 디자이너나 개발자를 고용하면 비용과 제작 기간이 크게 늘어난다.
• Claude AI로 맞춤형 반응형 디자인을 만든 뒤 Elementor 블록으로 옮기면, 코드를 다루지 않아도 WordPress에서 모든 요소를 시각적으로 편집할 수 있다.
• 호스팅·도메인·WordPress 기반 설정부터 이미지 준비, AI 디자인 검토, Elementor 변환까지 여러 도구를 정확한 순서와 설정으로 연결해야 한다.
• 필수 유료 항목은 Claude Pro와 지속적인 웹 호스팅이며, AI 이미지 생성용 Artlist는 필요에 따라 추가할 수 있는 선택 사항이다.

🕒 시간순 섹션별 상세정리

1. 맞춤형 사이트 제작 방식과 전체 비용 구조

• Claude가 요구사항에 맞는 고유한 디자인을 만들고, WordPress로 옮긴 모든 요소는 Elementor의 드래그앤드롭 편집 대상으로 바뀐다. [00:32]
• 호스팅·도메인·WordPress를 먼저 준비한 뒤 데스크톱·태블릿·모바일 디자인을 만들고, Elementor 변환과 수정 과정을 거쳐 실제 도메인에 게시한다. [00:49]

2. Hostinger 플랜과 등록 기간 선택

• Hostinger 요금제에는 WordPress 간편 설치와 도메인·보안 인증서·도메인 이메일이 포함되므로, 사이트 운영에 필요한 항목을 별도로 구매할 필요가 없다. [02:22]
• Premium은 최대 3개 사이트를 지원하는 가장 저렴한 WordPress 플랜이고, Unlimited는 무제한 사이트와 일일 백업이 필요할 때 추가 비용의 가치가 생긴다. [03:14]

3. WordPress·도메인·빈 사이트 설치

• 새 사이트 생성 단계에서는 AI 앱 빌더인 Horizons가 아니라 WordPress를 선택해야 하며, Horizons를 고르면 이후 Elementor 변환 과정을 진행할 수 없다. [05:27]
• 새 도메인은 요금제 혜택으로 등록하고 기존 도메인은 같은 화면에서 연결할 수 있으며, 등록 정보를 확인한 뒤 고객과 가까운 데이터센터를 골라 로딩 지연을 줄인다. [06:51]

4. 라이브 사이트와 관리자 화면 접근

• 설치 직후 사이트가 비어 있고 기본 디자인만 보이는 상태는 정상이며, 이 빈 기반 위에 Claude의 디자인을 추가하게 된다. [08:03]
• 사용자 도메인 뒤에 /wp-admin을 붙이면 Hostinger를 거치지 않고 WordPress 관리자 로그인 화면으로 바로 들어갈 수 있다. [08:26]

5. Astra·Elementor·WPForms와 Atomic Editor 준비

• Astra는 Claude 디자인과 충돌할 장식이 적고 자체 헤더·푸터 편집기를 갖춰, 추가 플러그인 없이 사이트 공통 프레임을 구성할 수 있다. [09:24]
• Elementor 무료판은 Claude가 만든 영역을 코드 없이 편집하게 해주지만 내장 폼은 유료이므로, 무료 WPForms가 문의 양식 기능을 대신 맡는다. [11:20]

6. Claude Design 유료 계정과 데스크톱 앱

• Claude Design은 일반 채팅과 달리 문단보다 레이아웃·색상·타이포그래피를 중심으로 웹사이트와 앱 화면을 구성한다. [12:51]
• Design과 이후 사용할 Code 기능에는 월 20달러인 Pro 플랜이 필요하며, 한 달 동안 다섯 페이지를 제작한 뒤 더 필요하지 않으면 구독을 해지할 수 있다. [13:19]

7. 사이트 이미지 확보 전략

• 실제 사업체의 작업 사진은 현장성과 신뢰도를 담을 수 있어 가장 좋은 재료이며, 품질이 낮은 휴대전화 사진도 AI 보정용 원본으로 활용할 수 있다. [14:55]
• Unsplash·Pexels·Pixabay의 상업용 무료 스톡 사진을 실제 사진과 섞어 쓸 수 있고, 이후 WordPress 플러그인으로 해당 이미지를 바로 가져올 수도 있다. [15:14]

8. Artlist 이미지 생성 연결

• Artlist는 스톡·AI 미디어 라이브러리이자 Claude용 커넥터로, 연결 후에는 Design 화면을 벗어나지 않고 사이트 이미지를 생성할 수 있다. [15:53]
• Connect MCP를 누르면 Artlist URL이 들어간 사용자 정의 커넥터가 Claude에 추가되며, 이어서 Artlist 계정을 만들고 연결 권한을 부여한다. [16:19]

9. 커넥터 확인과 WordPress 호환 규칙

• Claude 데스크톱 앱의 Connectors 메뉴에 Artlist가 연결 상태로 보여야 하며, 보이지 않으면 앱을 완전히 종료했다가 다시 열어 연결 정보를 갱신한다. [17:41]
• 이전 프로젝트의 디자인 시스템이 켜져 있으면 새 사업의 브리프보다 과거 스타일이 우선할 수 있으므로, 디자인 시스템을 None으로 바꾼다. [18:19]

10. 자산 첨부와 사업 정보 프롬프트 작성

• 로고와 실제 사진을 먼저 첨부하고, 제공된 프롬프트 팩에서 두 페이지에 걸친 전체 디자인 프롬프트를 빠짐없이 복사한다. [19:38]
• 구분선 위의 WordPress 호환 규칙은 그대로 유지하고, 아래 영역에서 사업명·업종·지역·고객·차별점·서비스 정보를 실제 프로젝트에 맞게 바꾼다. [20:03]

11. 디자인 생성과 반응형 결과 확인

• 프롬프트를 전송하면 정보가 부족한 경우 추가 질문이 생기고, 조건이 충분하면 계획 수립과 디자인 생성에 약 10~30분이 걸린다. [21:58]
• 결과물에는 데스크톱·태블릿·모바일 폭으로 확인할 수 있는 다섯 페이지가 포함되며, 휴대전화 사진도 Artlist를 거쳐 조명과 품질을 개선한 전문 이미지로 바뀐다. [22:25]

12. 반복 이미지와 시각적 문제 수정

• 서비스·갤러리·소개 페이지에서 같은 사진이 반복되면 콘텐츠 다양성이 떨어지므로, 중복 이미지를 새 Artlist 이미지로 교체할 수정 항목이 생긴다. [23:19]
• 채팅에 로고 확대, 사진당 한 번만 사용, 밝고 따뜻한 강조색, 개별 페이지 미리보기를 함께 요청하면 여러 디자인 문제를 한 번에 다시 처리할 수 있다. [24:13]

13. 수정 결과 검토와 AI 이미지 사용 기준

• 수정 후 연두색 강조색이 노란색으로 바뀌어 대비가 커지고, 페이지 목록에서 개별 화면을 열어 채팅 패널을 숨기면 실제 브라우저처럼 스크롤하며 검수할 수 있다. [25:01]
• AI로 생성한 이미지를 실제로 수행하지 않은 작업의 증거처럼 사용하면 고객을 오도할 수 있으므로, 사업 실적을 나타내는 사진에는 실제 작업과의 대응 관계가 필요하다. [25:52]

14. 디자인 프로젝트 내보내기

• 디자인이 대체로 만족스러우면 Share 메뉴에서 오류 가능성이 있는 Claude Code 방식 대신 Project HTML을 골라 프로젝트 아카이브 ZIP으로 내보낸다. [26:43]
• 압축을 풀어 실제 파일이 들어 있는지 확인하며, .dc.html은 브라우저용 정적 사이트가 아니라 Claude가 WordPress 사이트를 재구축할 때 사용하는 디자인 컴포넌트 파일이다. [27:18]

15. Nova Mira 설치와 Claude Desktop 인증 준비

• Nova Mira는 Claude와 WordPress를 직접 연결하는 무료 플러그인이지만 공식 플러그인 검색에는 없으므로, 제작사 사이트에서 ZIP을 내려받아 관리자 화면에서 직접 업로드·설치·활성화한다. [28:24]
• Nova Mira 설정에서 사이트의 AI 기능을 켠 뒤 인증 방식 화면이 나타나야 하며, 화면이 없으면 임시 도메인 대신 실제 사용자 도메인의 /wp-admin으로 다시 로그인한다. [29:12]

16. Novameir MCP 연결과 권한 범위 설정

• 맞춤 커넥터에 Novameir 이름값과 WordPress 서버 URL을 입력하고 애플리케이션을 승인하면 Claude Code와 사이트가 연결 상태로 바뀐다. [30:08]
• always allow는 반복 승인 없이 신규 사이트 구축을 이어가지만, 이미 운영 중인 사이트는 변경 위험 때문에 needs approval로 두는 편이 안전하다. [31:10]

17. Claude Code 작업 공간과 실행 권한 준비

• Claude Code는 로컬 디자인 파일을 읽고 사이트를 수정·검증하며, 이미지 변환과 Elementor 데이터 재구성에 필요한 프로그램까지 실행한다. [31:45]
• 전용 프로젝트 폴더에 디자인 ZIP을 복사해 두면 빌드 맥락이 보존되어 이후 페이지도 한 번의 프롬프트로 추가할 수 있다. [32:55]

18. 커넥터·모델·WordPress 연결 사전 검증

• Novameir가 보이지 않거나 작동하지 않으면 앱 재시작, 커넥터 관리 화면의 재연결, 토글 활성화를 차례로 확인해야 결과가 WordPress에 반영된다. [33:47]
• 복잡한 초기 구축과 형식 변환에는 사용 가능한 최고 모델이 유리하며, 해당 환경에서는 Opus 5가 최고 옵션이다. [34:42]

19. 홈페이지 우선 구축을 위한 프롬프트 설계

• 프롬프트 팩의 4번과 디자인 ZIP을 함께 전달하되 홈페이지를 먼저 만든 뒤 멈추게 하면, 잘못된 구축 방식이 다섯 페이지에 복제되는 비용을 피할 수 있다. [36:24]
• 실제 Elementor 요소를 사용하고 헤더·푸터는 페이지에서 제외하며, 색상은 전역 변수로 만들고 모바일 레이아웃은 Elementor 자체 제어 기능으로 재구성한다. [36:54]

20. 홈페이지 생성 결과와 오류 수정

• 초기 변환에는 약 10~30분이 걸리며, 여러 디자인 파일을 읽고 각 스타일을 Elementor 저장 구조에 맞추는 과정이 작업 시간을 차지한다. [38:25]
• 생성 결과에는 Elementor 요소 87개, 전역 색상 23개, 전역 폰트 2개가 포함됐고, 원격 이미지는 변환 후 WordPress 미디어 라이브러리로 들어갔다. [38:58]

21. Elementor 편집 가능성 확인과 나머지 페이지 구축

• Elementor 편집기에서 텍스트·버튼·레이아웃을 직접 선택하고 이동하거나 링크를 바꿀 수 있어야 디자인이 실제 편집 가능한 요소로 변환된 것이다. [41:27]
• 홈페이지 검증 후 나머지 페이지를 만들면 기본 스타일 누출 없이 내부 링크를 연결할 수 있고, 원본 문구의 오탈자 같은 잔여 문제도 따로 수정할 수 있다. [41:55]

22. 전역 메뉴와 Astra 헤더·푸터 구성

• 헤더와 푸터는 모든 페이지가 공유하는 Astra 영역이므로, 먼저 기본 메뉴를 만들고 About·Gallery·Services·Contact 항목을 원하는 순서로 배치한다. [43:14]
• 프롬프트 팩의 7번은 기존 디자인과 새 메뉴를 바탕으로 Astra 헤더·푸터를 전 페이지에 구성하며, 홈페이지도 루트 도메인에 연결할 수 있다. [44:40]

23. Elementor 구조 패널을 이용한 수동 편집

• 사이트 수정은 Claude 요청과 직접 편집 중 선택할 수 있으며, 직접 편집 기능을 익히면 작은 변경마다 AI에 의존하지 않아도 된다. [46:31]
• 구조 패널은 페이지의 섹션·이미지·텍스트·버튼을 계층 목록으로 보여주므로, 화면에서 요소를 찾거나 순서를 옮길 때 가장 안정적이다. [47:11]

24. 이미지와 전역 디자인 시스템 편집

• 이미지 위젯에서는 새 파일이나 미디어 라이브러리 자산으로 교체할 수 있고, 자동으로 채워진 제목과 대체 텍스트는 검색 최적화와 접근성 누락을 줄인다. [48:52]
• 왼쪽 패널은 색상·간격·크기를 제어하고, 디자인 시스템의 색상·폰트 변수는 한 번의 변경을 다섯 페이지 전체에 반영해 반복 수정을 크게 줄인다. [49:57]

25. WPForms 문의 폼과 알림 설정

• 연락처 페이지의 폼 이미지는 문의를 전송하지 못하므로, 비어 있는 영역에 실제 작동하는 WPForms 폼을 넣어야 한다. [51:46]
• WordPress 관리자에서 새 폼을 만들고 무료 Simple Contact Form 템플릿을 선택하면 이름·이메일·메시지 필드를 처음부터 구성할 필요가 없다. [52:05]

26. 문의 폼 삽입과 사이트 스타일 적용

• 연락처 페이지를 Elementor로 열고 WPForms 위젯을 빈 영역에 끌어놓은 뒤 생성한 Contact Form을 선택하면 실제 입력 폼이 삽입된다. [53:41]
• 유료 테마 없이도 디자인 시스템에서 기존 버튼의 색상 코드를 복사해 폼 버튼에 적용하면 사이트의 색상 체계를 유지할 수 있다. [54:23]

27. 문의 제출과 이메일 전달 검증

• 미리보기 화면에서 이름·이메일·메시지를 직접 제출하고 확인 문구와 테스트 이메일을 모두 받아야 문의 폼이 실제 영업 채널로 작동한다. [55:45]
• 이메일이 오지 않으면 스팸함을 먼저 확인하고, WordPress 발신 주소가 사이트 도메인과 다르면 Hostinger에서 도메인 이메일을 만들어 WPForms 발신자로 설정한다. [56:17]

28. 기존 디자인을 재사용한 추가 페이지 준비

• Claude Code 프로젝트는 기존 페이지와 색상·폰트 설정을 계속 읽을 수 있어 디자인 도구와 내보내기 과정을 생략하고 새 페이지를 WordPress에 바로 만들 수 있다. [56:39]
• Instant Images 플러그인은 상업적으로 사용할 수 있는 무료 스톡 사진을 WordPress 미디어 라이브러리로 가져오며, 별도 계정이나 API 키가 필요하지 않다. [57:00]

29. 하드스케이핑 하위 페이지 자동 생성

• 프롬프트 팩의 8번에 페이지 목적, Services의 하위 페이지라는 관계, 기존 스타일 재사용, Instant Images 활용 조건을 채워 하드스케이핑 페이지를 요청한다. [57:48]
• 완성된 페이지는 Services 메뉴 아래 드롭다운으로 연결되고, 기존 사이트와 어울리는 스톡 사진과 레이아웃을 포함한다. [58:43]

30. AI 이미지 교체와 블로그 확장

• 프롬프트 팩의 9번에서 하드스케이핑 페이지를 지정하면 새 AI 이미지를 생성·교체할 수 있고, 페이지를 새로고침하면 변경된 자산을 확인할 수 있다. [59:39]
• WordPress의 CMS 기능과 기존 Claude 연결을 활용하면 같은 디자인 체계를 유지하면서 블로그까지 확장할 수 있다. [59:58]

31. 블로그 편집 체계와 모바일 화면 완성

• 프롬프트 10으로 생성한 블로그에는 사이트 디자인과 일치하는 스타일이 적용되며, 이후 글도 같은 미감을 유지한다. 새 글과 기존 글은 Gutenberg 편집기에서 문단·이미지·제목 등의 요소를 추가해 관리할 수 있다. [1:00:21]
• Elementor는 데스크톱·태블릿·모바일 화면을 따로 확인하고 수정할 수 있으며, 모바일 보기에서 바꾼 값은 모바일에만 적용되므로 데스크톱 레이아웃을 훼손할 위험이 줄어든다. [1:01:04]

32. 공개를 위한 워드프레스 설정과 방문자 관점 검수

• 새 워드프레스의 전면 페이지는 기본적으로 최신 글을 표시하므로, 읽기 설정에서 정적 페이지를 선택하고 실제 홈페이지와 블로그 페이지를 올바르게 연결해야 한다. [1:03:47]
• 사이트 제목과 태그라인은 브라우저 탭과 검색 결과에 노출되므로 기본값을 그대로 두지 말고 브랜드명으로 바꿔야 하며, 필요하면 사이트 아이콘도 함께 추가한다. [1:04:10]

33. 관리자·호스팅 접근과 공개 이후 운영

• 사이트 관리자는 도메인 뒤에 /wp-admin을 붙여 로그인할 수 있고, 호스팅 제어판은 워드프레스의 Hostinger 탭에서 H패널로 진입할 수 있다. [1:05:00]
• H패널에서는 이메일 인증과 도메인 설정을 마무리하고 무료 이메일을 개설할 수 있으며, 웹사이트 메뉴를 통해 다시 사이트 관리 화면으로 돌아갈 수 있다. [1:05:20]

🧾 결론

• 이 방식은 Claude Design의 시각 설계, Project HTML 내보내기, Claude Code의 데이터 재구성, Elementor의 수동 편집을 하나의 순차적 작업 흐름으로 결합한다.
• 홈페이지를 먼저 변환하고 멈추는 검증 지점이 중요하다. 잘못된 요소 구조나 스타일 방식이 다섯 페이지 전체에 복제되기 전에 수정할 수 있기 때문이다.
• 페이지 본문은 Elementor 전역 변수로, 공통 헤더·푸터는 Astra 영역으로 관리해야 수정 범위와 책임이 분리된다.
• 공개 완료는 모든 화면 크기의 페이지 순회, 실제 문의 전송과 이메일 수신, 방문자 관점의 링크·이미지 검수가 통과된 시점이다.

📈 투자·시사 포인트

• Claude Pro와 웹 호스팅을 중심으로 초기 제작비를 구성하면 전문 디자이너·개발자 고용보다 비용과 제작 기간을 줄일 여지가 있지만, 호스팅은 지속 비용이며 이미지 생성 서비스는 추가 비용이 될 수 있다.
• AI 웹 제작의 병목은 코딩 자체에서 도구 연결, 프롬프트 명세, 자산 준비, 변환 검증과 품질 보증으로 이동한다. 결과적으로 실행 순서와 검수 역량의 가치가 커진다.
• Hostinger의 통합 상품, WordPress 플러그인, Claude 커넥터와 Elementor 편집 체계가 함께 작동해야 하므로 단일 도구의 성능보다 상호운용성과 설정 안정성이 전체 생산성을 좌우한다.
• 실제 작업 사진과 작동하는 문의 폼은 단순한 장식이 아니라 신뢰와 영업 전환의 기반이다. AI 이미지가 늘어날수록 실적 증거와 자리표시자 이미지의 경계를 명확히 관리해야 한다.

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

• Hostinger의 실제 가격, 추천 링크 할인, 무료 도메인 조건과 월 환산 비용은 결제 시점과 국가별 화면을 기준으로 다시 확인해야 한다.
• 외부 등록기관의 도메인은 연결 전파에 며칠이 걸릴 수 있으며, Nova Mira 인증 화면이 임시 도메인에서는 나타나지 않고 실제 사용자 도메인에서만 확인될 수 있다.
• Artlist나 Novameir 커넥터가 보이지 않거나 작동하지 않을 수 있으므로 앱 재시작, 재연결과 토글 상태를 확인해야 한다. Atomic Editor와 Astra의 활성 상태도 변환 전에 검증해야 한다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 운영할 사이트 수와 일일 백업 필요 여부를 정한 뒤 Premium과 Unlimited의 실제 결제 조건을 비교한다.
• Horizons가 아닌 WordPress와 Build from scratch를 선택하고 Astra, Elementor, WPForms, Atomic Editor의 설치·활성 상태를 확인한다.
• Claude 데스크톱 앱에서 디자인 시스템을 None으로 설정하고 로고·실제 사진·사업 정보·WordPress 호환 규칙을 포함한 프롬프트를 준비한다.
• 반응형 다섯 페이지를 생성한 뒤 반복 이미지, 색상 대비, 로고 크기와 AI 이미지의 사실성을 페이지별로 검토한다.

❓ 열린 질문

• 운영 대상은 한 개 사이트인가, 여러 사이트인가? 사이트 수와 일일 백업 필요성이 Hostinger 플랜 선택을 바꿀 수 있다.
• 실제 작업 사진은 얼마나 확보되어 있으며, 스톡·AI 이미지를 자리표시자로만 사용할 영역은 어디인가?
• 완전히 새로운 사이트인가, 이미 운영 중인 사이트인가? 이에 따라 Novameir 권한을 always allow와 needs approval 중 다르게 설정해야 한다.