클로드+엘레멘토: 워드프레스도 AI 바이브코딩? ⏱️ 시간 낭비 끝, 초간단 웹사이트 완성!

AI로 워드프레스 디자인, 더 쉽게 하자!

요즘 AI로 웹사이트 만드는 거 진짜 쉬워졌지? 랜딩 페이지 같은 건 AI한테 몇 마디만 해도 꽤 괜찮게 만들어줘.

근데 블로그나 회원 관리 같은 기능이 필요하면 얘기가 달라져. 워드프레스에서는 플러그인 하나면 끝났던 건데, AI로 하려면 백엔드까지 직접 만들어야 하거든.

그렇다고 워드프레스로 돌아가자니 디자인을 직접 해야 하는 게 또 문제야. 마음에 드는 템플릿 찾고, 에디터로 하나하나 만지는 게 귀찮잖아.

이제 걱정 끝!

클로드로 디자인 뽑고, 그걸 워드프레스에 그대로 올리면 돼! 완성된 페이지는 에디터에서 수정하거나 클로드한테 다시 수정해달라고 할 수도 있어. AI의 속도와 워드프레스의 편리함, 둘 다 잡는 거지!

1단계: 클로드로 웹사이트 디자인 만들기

먼저 클로드를 이용해서 실습할 웹사이트 디자인을 만들어 볼 거야.

준비물: 클로드 프로 이상 구독

1. 클로드 웹 접속: 왼쪽 메뉴에서 '디자인'으로 들어가.
2. 디자인 시스템 설정: '디자인 시스템'에서 '크리에이트' 버튼을 눌러.
   • '니더 노츠'에 원하는 디자인 가이드라인을 입력해.
   • 팁: '레페로 스타일' 같은 사이트에서 디자인 레퍼런스를 찾아서 복사해 붙여 넣으면 좋아. (링크는 영상 설명란에 있어!)
   • '컴퍼니 네임'은 레퍼런스 이름과 똑같이 입력해.
   • '컨뉴투 제너레이션' 누르고 '제너레이트' 클릭! 5분 정도 기다리면 디자인 시스템이 완성돼.
3. 새 디자인 프로젝트 만들기: '뉴 디자인' 버튼을 눌러.
   • '뉴 프로토타입'에서 방금 만든 디자인 시스템을 선택해.
   • '프로젝트 네임'은 '워드프레스 실습용'이라고 입력해.
   • '하이델리티'를 선택하고 '크리에이트' 클릭!
4. 디자인 생성: 프롬프트에 "소프트웨어 서비스 랜딩 페이지 구성"이라고 간단히 입력하고, 디자인 시스템을 따르고 HTML/CSS만 사용하도록 지시해. 섹션 구성은 원하는 대로 요청해도 돼. (프롬프트는 영상 설명란에 공유해줄게!)
   • 잠시 기다리면 깔끔한 웹사이트 디자인이 완성돼. 그대로 써도 되고, 수정 요청해도 돼.
5. 파일 다운로드: '디자인 파일'에서 HTML 파일 하나와 CSS 파일 두 개를 다운로드해. (CSS 파일은 하나만 생성될 수도 있어!)

2단계: 클로드 디자인을 워드프레스에 적용하기 (2가지 방법)

이제 클로드로 만든 디자인을 워드프레스에 적용해 볼 거야. 총 두 가지 방법이 있어.

워드프레스 설정:

• 활성화된 워드프레스 사이트 필요
• 엘리멘터 플러그인 설치 (무료 버전도 OK)
• 얼티밋 애드온스 4 엘리멘터 플러그인 설치 (헤더/푸터 설정용)
• 헬로 엘리멘터 테마 사용 (자동 설정 안 되면 직접 설치/활성화)

방법 1: 엘리멘터 기본 기능 활용

1. 클로드에서 변환: 클로드 새 채팅에 다운받은 HTML/CSS 파일을 붙여 넣고, "HTML 파일을 엘리멘터 제이슨 템플릿 형식으로 변환해줘. 엘리멘터 프로 위젯은 사용하지 않고, 헤더/푸터는 얼티밋 애드온스 플러그인으로 설정할 수 있게 해줘. 마지막으로 전역 CSS 코드도 정리해줘."라고 요청해.
   • 결과물: 엘리멘터 페이지용 제이슨 파일, 헤더/푸터용 제이슨 파일, 전역 CSS 코드
2. 워드프레스에 템플릿 가져오기:
   • 워드프레스 관리자 > 엘리멘터 > 편집기 > 템플릿 > 템플릿 가져오기
   • 클로드에서 받은 페이지, 헤더, 푸터 제이슨 파일을 순서대로 가져와. (오류 나면 클로드한테 파일 수정 요청!)
3. 헤더/푸터 설정:
   • UAE 헤더 앤 푸터 > 애드 뉴
   • 제목 입력, 템플릿 타입 '헤더' 또는 '푸터' 선택, '디스플레이 온'은 '인타이어 웹사이트'로 설정.
   • 엘리멘터로 편집 버튼 클릭 > 라이브러리 > 템플릿 > 가져온 헤더/푸터 삽입 > 저장.
4. 페이지 만들기:
   • 페이지 > 페이지 추가 > 제목 입력 > 발행.
   • 엘리멘터로 편집 > 라이브러리 > 템플릿 > 가져온 페이지 템플릿 삽입 > 저장.
5. 전역 CSS 적용:
   • 모양 > 사용자 정의 > 추가 CSS > 클로드에서 받은 CSS 코드 전체 붙여넣기 > 공개.
6. 홈페이지 설정:
   • 설정 > 읽기 > 홈페이지 표시 > 정적 페이지 선택 > 방금 만든 페이지 선택 > 변경 사항 저장.
7. 레이아웃 수정:
   • 만든 페이지 엘리멘터로 편집 > 페이지 설정 > 페이지 레이아웃 > 엘리멘터 전체 너비 선택 > 저장.

이제 클로드로 만든 디자인이 워드프레스에 적용된 걸 볼 수 있을 거야! 수정하고 싶은 부분은 엘리멘터 에디터에서 바로 하면 돼.

방법 2: 엘리멘터 MCP 활용 (더 간편!)

이 방법은 클로드가 워드프레스에 직접 접근해서 페이지를 만들어줘. 수정도 클로드한테 바로 요청하면 돼.

추가 플러그인 설치:

• 워드프레스 공식 MCP 어댑터
• 엘리멘터 MCP
  • (링크는 영상 설명란에 있어!)
  • 다운받은 GZ 파일 업로드해서 설치/활성화.

연결 설정:

1. 애플리케이션 비밀번호 생성:
   • 워드프레스 관리자 > 사용자 > 애플리케이션 비밀번호 > 새 이름 입력 > 비밀번호 추가 > 복사.
2. MCP 연결 설정:
   • EMCP 툴스 > 커넥션 > 애플리케이션 패스워드에 복사한 비밀번호 붙여넣기 > 제너레이트 컨피스 클릭.
   • 아래 생성된 제이슨 스크립트에서 '스텝 3 다이렉트 HTTP 컨픽스'의 '클로드 코드' 복사.
3. VS 코드 설정:
   • VS 코드에 클로드 연결 (영상 설명란 링크 참고).
   • 작업 폴더 열기 > 새 파일 만들기 > 파일명 .mcp.json > 복사한 제이슨 스크립트 붙여넣고 저장.
4. 연결 확인: 새 클로드 창 열고 /mcp 입력 > 'MCP 서버스' 선택 > '커넥티드'로 표시되면 성공!

디자인 적용:

1. 파일 넣기: 작업 폴더에 클로드에서 다운받은 HTML/CSS 파일 넣기.
2. 클로드에 프롬프트 입력: "이 프로젝트에 있는 HTML/CSS 파일을 사용해서 엘리멘터 페이지를 만들어줘." (권한 요청하면 '예스' 클릭!)
   • 잠시 기다리면 작업 완료.
3. 워드프레스에서 확인 및 설정:
   • 사이트 주소 접속해서 랜딩 페이지 확인 (안 되면 수동 설정 필요).
   • 홈페이지 설정: 설정 > 읽기 > 정적 페이지 설정.
   • 헤더/푸터 설정: 방법 1과 동일하게 UAE 헤더 앤 푸터 플러그인으로 설정.
   • 전역 CSS 적용: 모양 > 사용자 정의 > 추가 CSS > 클로드에서 새로 정리된 CSS 코드 붙여넣기 > 공개.
4. 레이아웃 수정:
   • 만든 페이지 엘리멘터로 편집 > 페이지 설정 > 엘리멘터 전체 너비로 변경.
   • 디자인이 이상하면 화면 캡처해서 클로드한테 수정 요청! (버튼 모양, 간격 등)
   • 이런 식으로 에디터에서 직접 수정하는 대신 클로드한테 요청해서 페이지를 완성할 수 있어.

MCP 플러그인 팁:

• MCP 툴스 > 프롬프트 메뉴에 유용한 디자인 예시들이 많으니 참고해봐.
• 클로드가 비효율적으로 코드를 만들 때 (HTML 코드를 통째로 넣는 등) 이걸 방지하려면 클로드 스킬을 사용하면 좋아.
  • 프로젝트 폴더 안에 .clode 폴더 > skills 폴더 > elementor_mcp 폴더 > skill.md 파일 만들기.
  • 이 파일에 엘리멘터 MCP 사용할 때 클로드가 따라야 할 지침을 정리해두면 돼. 처음엔 클로드한테 초안을 만들어달라고 하는 걸 추천해!

결론적으로, AI와 워드프레스를 함께 사용하면 디자인부터 기능까지 훨씬 빠르고 효율적으로 웹사이트를 만들 수 있어. 기존 지식에 새로운 기술을 더하면 더 강력한 무기가 될 거야!

구독과 좋아요 잊지 말고, 다음 영상에서 또 만나자!