WordPress Studio Code 사용법: AI로 워드프레스 사이트를 만드는 방법

다만 아직은 ‘얼리 액세스(Early Access)’ 단계이므로, 향후 정식 버전이 출시될 때 세부 기능이나 과금 정책이 예고 없이 변경될 수 있다는 점은 꼭 염두에 두어야 합니다.

평소 워드프레스 사이트 구축을 밥 먹듯이 하거나, 툭하면 터지는 블록 호환성 오류와 지루한 사이트 배포 과정에 지쳐있던 작업자라면 무조건 찍어 먹어봐야 할 엄청난 업데이트입니다.

WordPress Studio Code는 무엇인가?

WordPress Studio Code의 진짜 정체는, 터미널 기반의 ‘WordPress Studio CLI’ 환경 안에서 동작하는 전용 AI 코딩 에이전트입니다.

이름만 들으면 유명한 ‘Visual Studio Code(VSCode)’의 확장 프로그램 같지만, 공식 문서에 따르면 이 툴은 Studio CLI 패키지 자체에 내장된 ‘터미널형 챗봇 도구’에 훨씬 가깝습니다.

사용자가 터미널 창에 자연어로 요청을 툭 던지면, AI 에이전트가 알아서 워드프레스 파일 구조를 파악하고, 테마를 깎아내며, 복잡한 WP-CLI 명령어를 대신 실행하고 뚝딱 프리뷰 사이트까지 만들어냅니다.

기존의 평범한 코딩 에이전트들과 가장 뼈저리게 차별화되는 지점은, 이 녀석이 철저하게 ‘워드프레스 전용 생태계’를 완벽히 이해하고 그 안에서만 움직인다는 것입니다.

단순히 코드만 짜주는 게 아닙니다. 생성된 블록이 실제 에디터에서 깨지지 않는지 자체 검증하고, 화면 캡처본을 스스로 분석해 레이아웃 오류를 잡으며, 심지어 스테이징(Staging)이나 실서비스(Production) 환경으로 다이렉트 동기화까지 지원하는 미친 작업 효율을 보여줍니다.

WordPress Studio Code 설치와 실행은 어떻게 하나?

이 강력한 도구는 독립된 형태의 ‘Studio CLI npm 패키지’ 안에 기본으로 포함되어 제공됩니다.

당장 찍먹해보고 싶다면 터미널에 npx wp-studio@latest code를 입력해 즉시 실행할 수 있으며, 아예 전역으로 설치해 두고 싶다면 npm i -g wp-studio@latest로 세팅한 뒤 studio code 명령어로 언제든 띄울 수 있습니다.

만약 이미 데스크톱용 WordPress Studio 앱을 애용 중이고 CLI 옵션까지 활성화해 둔 상태라면, 굳이 새로 설치할 필요 없이 터미널에서 studio code만 쳐도 곧바로 구동됩니다.

물론 최초 1회 실행 시에는 반드시 본인의 WordPress.com 계정 연동 과정을 거쳐야 합니다.

터미널 대화창에 /login 명령어를 치면 브라우저 창이 열리는데, 본인 계정으로 승인 과정을 마친 뒤 발급된 인증 토큰을 터미널에 복사해 붙여넣기만 하면 인증은 끝납니다.

기본적으로는 WordPress.com의 자체 인프라를 활용하여 AI 응답을 쾌적하게 생성하지만, 만약 본인만의 Anthropic API 키를 물려서 커스텀하게 쓰고 싶다면 /api-key 명령어로 손쉽게 전환할 수도 있습니다.

자연어로 어떤 작업을 맡길 수 있나?

WordPress Studio Code의 진짜 매력은, “분위기 있는 카페 소개 사이트 뼈대 좀 잡아줘”처럼 일상적인 대화체로 툭 던져도, 백그라운드에서 알아서 로컬 워드프레스 구축 작업을 시작한다는 점입니다.

공식 문서가 제시하는 미친 작업 흐름을 보면, 단순히 새 사이트를 올리는 것은 물론이고 기존 테마 디자인 수정, 랜딩페이지 섹션 끼워 넣기, 공유용 프리뷰 사이트 개설까지 전부 말 한마디로 처리가 가능합니다.

단순히 블로그 텍스트 초안만 잡아주는 흔한 챗봇이 아니라, 워드프레스 코어 파일들을 직접 건드리고 수정하는 ‘실무형 개발 파트너’에 훨씬 가깝습니다.

예를 들어, “홈페이지 메인 배너 문구를 좀 더 세련되게 바꿔봐”라고 시킨 뒤, 이어서 “상단에 회사 소개 메뉴도 하나 추가하고 CSS로 여백 좀 늘려줘”라는 식의 연속적인 피드백을 한 채팅창 안에서 매끄럽게 이어갈 수 있습니다.

물론 AI가 파일 구조를 직접 헤집고 다니는 만큼, 처음부터 실서비스 사이트에 물리기보다는 안전한 테스트용 샌드박스나 복사본 사이트에서 가벼운 요청부터 던져보며 감을 잡는 것을 추천합니다.

일반 AI 코딩 도구와 무엇이 다른가?

시중에 널려있는 수많은 코딩 AI와 이 툴을 구분 짓는 가장 큰 벽은, 바로 ‘워드프레스 고유의 코어 구조’와 ‘구텐베르크(Gutenberg) 블록 에디터’ 생태계를 완벽하게 전제로 돌아간다는 점입니다.

아무리 똑똑한 AI라도 PHP나 CSS 코드는 기가 막히게 짜줄 수 있지만, 그 코드를 워드프레스에 얹었을 때 블록 에디터가 “차단에 예기치 않은 콘텐츠가 있습니다(invalid content)”라며 토해내는 끔찍한 에러까지 막아주지는 못합니다.

하지만 이 Studio Code는 자기가 생성한 블록 마크업 코드를 실제 워드프레스 에디터 기준으로 꼼꼼하게 자체 검증하여, 화면이 깨지거나 블록이 에러를 뿜는 일이 없도록 철저히 보장합니다.

이러한 자체 검증 기능은 복잡한 블록 테마나 커스텀 패턴을 자주 다루고 배포해야 하는 전문 개발자들에게 그야말로 사막의 오아시스 같은 핵심 기능입니다.

터미널에서 짠 코드가 겉보기에 멀쩡해도 실제 편집 화면에서 에러가 나버리면 최종 운영자가 사이트를 수정할 수 없게 되는데, 이 툴은 바로 그 치명적인 대형 사고를 미연에 원천 차단해 주기 때문입니다.

미리보기와 배포는 어디까지 가능한가?

로컬에서 뚝딱거린 결과물을 터미널 명령어 한 줄로 WordPress.com 서버에 ‘프리뷰 사이트(Preview Site)’ 형태로 띄워 외부 사람들과 바로 공유할 수 있습니다.

개발자 문서에 따르면 이 프리뷰 환경은 내 로컬 작업물을 거울처럼 비춰주는 임시 공유 서버이므로, 작업 내역을 클라이언트나 팀장에게 컨펌받을 때 굳이 호스팅 세팅 없이도 URL 하나만 띡 던져주면 끝납니다.

작업 도중 언제라도 터미널에 /preview 명령어만 가볍게 치면, 현재 활성화된 로컬 사이트의 최신 상태가 즉각적으로 WordPress.com 프리뷰 링크로 갱신되어 푸시됩니다.

화면을 찍고 바로 수정 요청할 수 있나?

WordPress Studio Code는 답답하게 말로만 화면 디자인을 묘사하는 대신, 시각적인 요소로 아주 직관적인 피드백을 주고받는 기능도 야무지게 챙겼습니다.

마치 디자이너가 화면에 빨간펜을 긋듯, 터미널에 /annotate 명령어를 입력하면 시각적 검사 도구가 열려 특정 버튼이나 여백을 콕 집은 뒤 ‘이 부분 수정해 줘’라고 족집게 과외식 요청을 남길 수 있습니다.

긴 텍스트로 ‘세 번째 문단 아래에 있는 버튼의 좌측 여백을 10px 줄여줘’라고 구구절절 타자 칠 필요 없이, 그냥 마우스로 툭 클릭하고 원하는 변경 사항만 툭 던지면 끝난다는 뜻입니다.

심지어 /need-for-speed라는 무척 직관적이고 재밌는 이름의 명령어를 치면, 사이트 전반의 로딩 속도와 최적화 상태를 알아서 감사(Audit)해 주는 성능 점검 도구까지 튀어나옵니다.

이처럼 번거로운 화면 디자인 수정과 까다로운 성능 점검이라는 두 마리 토끼를 터미널 대화창 하나에서 전부 때려잡을 수 있다는 점은, 초반 사이트 구축에 들어가는 막대한 시간과 스트레스를 극적으로 증발시켜 줍니다.

누가 먼저 써보면 좋을까?

업무 특성상 워드프레스를 기반으로 사이트를 숨 쉬듯 찍어내거나 유지보수를 밥 먹듯이 하는 프리랜서 웹 개발자, 외주 에이전시, 대형 블로그 운영자에게 이 도구는 그야말로 하늘이 내린 축복입니다.

특히 클라이언트의 다급한 요청으로 ‘간단한 회사 소개용 랜딩페이지’를 뚝딱 만들어 로컬에서 확인하고, 곧바로 컨펌용 프리뷰 링크까지 따서 보내야 하는 빡센 실무 환경에서 업무 효율이 1000% 폭발합니다.

물론 일반인도 일상어로 명령을 내릴 수 있어 진입 장벽 자체는 낮지만, 결국 워드프레스 코어 파일 수정과 서버 배포 과정이 깊게 엮여 있으므로 기본적인 워드프레스 파일 구조를 아는 사람이 칼자루를 쥐었을 때 훨씬 더 치명적이고 든든한 무기가 됩니다.

반대로, 파일 수정 같은 무거운 기능은 부담스럽고 단지 워드프레스에서 글을 쓸 때 아이디어나 문맥만 살짝 교정받고 싶다면, 굳이 무거운 Studio Code를 켤 필요 없이 가벼운 ‘WordPress AI Assistant’를 활용하는 것이 훨씬 현명합니다.

사용 전 확인해야 할 점

다시 한번 강조하지만, 이 툴은 아직 ‘얼리 액세스’ 딱지가 큼지막하게 붙어있는 야생의 베타 버전이므로, 당장 돈을 벌고 있는 핵심 운영 사이트에 겁 없이 들이대기보다는 안전한 샌드박스나 테스트 서버에서 충분히 손을 풀어보는 것이 정신 건강에 좋습니다.

• WordPress.com 계정 로그인이 가능한지 확인하세요.
• 작업 대상이 올바른 로컬 Studio 사이트인지 확인하세요.
• production 배포 전에는 preview 또는 staging에서 화면을 먼저 확인하세요.
• AI가 수정한 파일 목록을 확인하고, 예상하지 못한 변경이 없는지 검토하세요.
• 플러그인 설치, 데이터베이스 변경, 사이트 삭제처럼 되돌리기 어려운 작업은 직접 승인한 뒤 실행하세요.
• 베타 무료 크레딧과 사용량 제한은 이후 바뀔 수 있으므로 공식 문서를 다시 확인하세요.

공식 문서 경고란을 보면, 이 에이전트는 파일 읽기/쓰기부터 명령어(WP-CLI) 실행, 스크린샷 캡처 및 사이트 외부 배포까지 사실상 사이트 전체를 쥐고 흔들 수 있는 ‘전권’을 부여받습니다.

이런 막강한 권한은 작업 속도를 미친 듯이 부스팅해주지만, 라이브 운영 서버와 다이렉트로 연결된 상태에서는 터미널에 잘못 친 엔터 한 번이 대형 재난으로 이어질 수 있으니, 항상 작업 범위를 보수적으로 제한해 두고 방어적으로 사용하는 습관을 길러야 합니다.

자주 묻는 질문

정리: 워드프레스 제작 반복 작업을 줄이는 도구

한 줄로 요약하자면, WordPress Studio Code는 사이트 제작 과정에서 피할 수 없는 지루한 반복 노가다(생성, 수정, 구텐베르크 검증, 컨펌용 링크 공유)를 터미널 대화창 하나로 우겨넣어 압살해 버리는 궁극의 효율 도구입니다.

물론 ‘웹사이트 전체를 AI가 알아서 다 만들어준다’는 마법 같은 환상보다는, 작업자인 내가 명확한 디렉팅 방향을 잡아주면 AI가 뒤에서 귀찮은 로컬 파일 수정과 에러 검증 실무를 빛의 속도로 대행해 주는 ‘초일류 부사수’를 두었다고 생각하는 편이 훨씬 현실적입니다.

현재 진행 중인 파격적인 무료 베타 기간은 이 강력한 부사수의 성능을 비용 부담 없이 뽑아먹기 최적의 타이밍이지만, 아직은 불안정한 얼리 액세스 도구인 만큼 중요한 사이트를 다룰 때는 ‘백업 생활화, 프리뷰 이중 확인, AI가 수정한 코드 훑어보기’라는 3대 방어 수칙을 절대 잊지 마세요.

출처와 확인 기준

• WordPress.com Developer Resources: Studio Code
• WordPress.com Blog: Studio Code beta announcement
• WordPress.com Changelog: AI for all paid plans, Studio Code
• WordPress.com Developer Resources: Studio CLI
• WordPress.com Developer Resources: Studio Assistant

요금과 기능, 지원 범위는 수시로 바뀔 수 있으니 최신 내용은 공식 페이지 기준으로 확인해 주세요.

더많은 AI 툴 정보는 ai모아에서 확인하세요