Claude Code로 워드프레스 홈페이지 만들기: 비개발자 기준 1시간 제작 흐름
워드프레스와 AI 연결 구조
워드프레스가 진화했습니다.
(진화라고 해서 이런 진화가 아니고 ;;
기능적으로 진화가 많이 됐다는 말인데요…ㅋㅋ)
이번에 워드프레스가 7.0으로 업그레이드 되면서
가장 큰 변화가 있습니다.
그건 바로 Ai와 연동이 된다는 점 입니다.
위와 같이 클로드, 제미나이, 챗지피티와
연동이 되는데, 각 LLM ai마다 맡은 역활이
조금 다릅니다.
1) Anthropic (=Claude 클로드)
Claude로 텍스트 생성하기.
2) Google (=gemini 제미나이)
Text and image generation with
Gemini and Imagen.
(Gemini와 Imagen을 활용한
텍스트 및 이미지 생성.)
3) OpenAl (=chatgpt 챗지피티)
Text and image generation with
GPT and Dall-E.
(GPT와 Dall-E를 활용한
텍스트 및 이미지 생성.)
여기서 제가 이번에 시도해본
LLM AI는 Anthropic (=Claude 클로드)
인데요.
WordPress(워드프레스) x Claude(클로드)로
과연 홈페이지를 어디까지 완성할 수
있는지 그 과정을 낱낱이 공개하겠습니다.
Claude API 붙이기 첫 단계
우선 맨처음 할 것은 워드프레스(WordPress)에
클로드(Claude) Api 붙이는 일인데
처음에 클로드(Claude)에 api만 넣으면
제대로 연결이 되지 않습니다.
왜 안되는지는 저도 잘 모르겠지만
아무튼 저 같은 경우에는 클로드(Claude)에
페르소나를 부여해서 하나하나 풀어가면서
해결했습니다.
클로드에 페르소나 부여 프롬프트
자 이제 넌 워드프레스 홈페이지 제작 전문가야. 10년차고 이쪽에 굉장히 전문가고 베테랑이지. 내가 묻는 말에 최대한 논리적이고, 세세하고, 팩트 기반에서 환각없이 진실로만 답해줘.
그리고 api를 연결하는 방법을
클로드(Claude)에 물어보니
아래와 같이 해결책을 주었습니다.
플러그인 수동 업로드 방법
해결책: 수동으로 플러그인 3개를 업로드하기
3개의 공식 플러그인을 직접 다운받아서 호스팅에 업로드하면 됩니다. 워드프레스 코어 팀이 만든 공식 플러그인입니다.
다운로드 (zip 파일):
Anthropic (Claude) → https://wordpress.org/plugins/ai-provider-for-anthropic/
OpenAI (ChatGPT) → https://wordpress.org/plugins/ai-provider-for-openai/
Google (Gemini) → https://wordpress.org/plugins/ai-provider-for-google/
각 페이지 오른쪽에 “Download” 버튼이 있어요.
클릭하면 ai-provider-for-anthropic.zip 같은
파일이 받아집니다.
설치 방법 (2가지 중 하나 선택)
방법 A. Cafe24 파일관리자로 업로드
(FTP 없어도 됨)
이게 제일 쉽습니다. 비개발자 기준으로 추천드려요.
Cafe24 호스팅 관리 페이지 로그인
나의 서비스 관리 → 웹FTP (또는 파일관리자) 진입
경로 이동: /www/wp-content/plugins/ (워드프레스 설치 위치에 따라 /html/wp-content/plugins/일 수도 있음)
zip 파일을 업로드한 뒤, 파일관리자
안에서 압축 해제
압축 해제 후 zip 파일은 삭제
워드프레스 관리자 → 플러그인 메뉴 가면 “AI Provider for Anthropic” 같은 게 보임
→ 활성화 클릭
세 개 다 같은 방식으로 반복합니다.
방법 B. FTP 클라이언트로 업로드 (FileZilla 등)
FTP를 이미 쓰고 계시면 이게 더 빠릅니다.
zip 파일을 PC에서 먼저 압축 해제 (폴더가 됨)
FileZilla로 호스팅 접속
/wp-content/plugins/ 폴더로 이동
압축 푼 폴더 통째로 업로드
워드프레스 관리자 → 플러그인 → 활성화
활성화 후
세 플러그인 모두 활성화하면, 설정 → 커넥터 화면에서 각 항목 옆 “설정” 버튼이 정상 작동합니다. 거기서 API 키를 넣으면 됩니다.
API 키 발급처 (참고):
Anthropic: https://console.anthropic.com/
OpenAI: https://platform.openai.com/api-keys
Google AI Studio: https://aistudio.google.com/apikey
위 해결책으로 수동으로 모두 설치를 완료하면 아래와 같이
워드프레스(WordPress)에
클로드(Claude)가 연결 됩니다.
Claude Code로 홈페이지를 완성하는 흐름
사실 클로드만 워드프레스 연결하면
이후 모든 업무는 클로드 코드(Claude Code)로
하시면 됩니다.
전 첫 프롬프트를 아래와 같이
입력했습니다.
자 내가 최근에 도메인 ‘aisolutions.kr’을
구매해서 워드프레스에 해당 도메인을 걸고,
호스팅서버관리 플랫폼은 벌쳐로 세팅을
완료했어.
근데 이번에 워드프레스 7.0이 나와서
mcp인지 api인지 엔트로픽 클로드를
연결해놨거든.
로컬에는 Visual Studio Code – 07.홈페이지
– 01.aisolutions.kr 폴더를 만들 딱딱 만들어놨어.
해당폴더에서 작업하면 되고, 자 지금부터 너가
어디까지 워드프레스를 만들 수 있는지 보여줘.
그러면 아래와 같이
클로드 코드(Claude Code)가 알잘딱깔센으로
워드프레스(WordPress)를 움직여 홈페이지를
완성시켜 줍니다.
비개발자도 가능하다고 느낀 지점
정말 쉬운게 클로드 코드를 틀어놓고
대화를 나누며 홈페이지를 완성해가면 되는데
저는 개발자도 아니고, 코딩을 아는 사람도
전혀 아닌데도 불구하고 그냥 대화만으로
모든것이 구현되어서 정말 놀랐습니다.
물론 다 만들어놓고 벌쳐 서버 날라가서
만들어 놓은 홈페이이지 내용 다 날아가긴
했지만 가능성을 봤네요.
홈페이지 통째로 날아간 이야기는
아래에서 더 자세히 알 수 있으메..ㅠ
https://blog.naver.com/rascalhoon/224315057148
3주 동안 만든 워드프레스 홈페이지가 통째로 날아갔다
– 벌쳐 Vultr 정지 사태 전말
혹시나 ‘아 나도 홈페이지 만들고 싶다..’
or ‘아.. 구글 seo, ai geo에 모두 노출되는
홈페이지 만들고 싶다..’ 생각하시는 분은
꼭 이번 워드프레스 7.0 x ai 연결기능을
활용해보시길 적극 추천합니다!!
지금까지 여러분의 AI파트너
최gpt(최성훈) 이었습니다 🙂
위 내용에 대해 궁금하신 내용이나
잘 이해가 안 되거나 질문이 있으시면
언제든지 편하게 카카오 채널
‘자본주의생존법’ 을 추가하시고
연락 주세요.
친절히 답변드리겠습니다.
감사합니다.
