Bookmarklet 설정하여, 글쓰기 테스트

개요

오늘은 Claude AI(MCP)와 WordPress REST API를 연동하여 브라우저 콘솔 및 Bookmarklet으로 블로그 글을 자동 포스팅하는 방법을 실제로 구현하고 정리하였습니다. 별도의 플러그인 설치나 비밀번호 공유 없이, 이미 로그인된 WordPress 세션을 그대로 활용하는 것이 핵심입니다.

배경

Claude AI에는 MCP(Model Context Protocol)라는 기능이 있어 외부 서비스와 연동이 가능합니다. WordPress에 MCP 서버를 붙이는 방법도 있지만, 호스팅 서버(Linux)에 별도 설치가 필요합니다. 이보다 훨씬 간단한 방법이 있었으니, 바로 WordPress REST API + 브라우저 로그인 세션을 활용하는 방식입니다.

인증 방식 비교

처음에는 Application Password를 사용하려 했으나, 비밀번호를 Claude에게 직접 전달해야 하는 보안 문제가 있었습니다. 검토한 인증 방식은 다음과 같습니다:

Application Password: 간단하지만 비밀번호를 직접 공유해야 함 → 보안상 부적합
OAuth 2.0: 가장 안전하나 별도 플러그인 설치 필요
JWT Authentication: 토큰 기반으로 안전하나 설치 필요
브라우저 세션 활용 (채택): 이미 로그인된 세션의 Nonce를 사용 → 비밀번호 공유 불필요, 즉시 사용 가능

작동 원리

WordPress 관리자 페이지에 로그인하면 브라우저에 wpApiSettings.nonce 값이 자동으로 주입됩니다. 이 Nonce 값을 REST API 요청 헤더에 포함시키면 별도 인증 없이 API를 호출할 수 있습니다.

fetch('/wp-json/wp/v2/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-WP-Nonce': wpApiSettings.nonce
  },
  body: JSON.stringify({
    title: '글 제목',
    content: '&lt;p&gt;본문 내용&lt;/p&gt;',
    status: 'publish'
  })
})
.then(r =&gt; r.json())
.then(d =&gt; console.log('완료! URL:', d.link));

실제 수행 과정

1단계: Claude in Chrome MCP 시도

처음에는 Claude in Chrome MCP로 브라우저를 직접 제어하려 했습니다. 그러나 MCP 탭 그룹과 실제 WordPress 탭이 서로 다른 탭 그룹에 있어 직접 제어가 불가능했습니다. 이는 Claude in Chrome 확장 프로그램의 구조적 특성으로, MCP가 생성하는 탭 그룹은 별도로 관리됩니다.

2단계: WordPress REST API로 우회 (콘솔)

WordPress 관리자 페이지(wp-admin)가 열린 탭에서 F12 개발자 도구를 열고, Console 탭에서 직접 JavaScript fetch() 코드를 실행하였습니다. wpApiSettings.nonce가 이미 페이지에 로드되어 있어 추가 인증 없이 API 호출에 성공했습니다. Draft 저장 → 글 ID 확인 → Publish 발행의 2단계로 진행했으며, 결과적으로 글 ID 10번으로 정상 발행되었습니다.

3단계: Bookmarklet으로 완성

매번 F12 콘솔을 여는 불편함을 없애기 위해 Bookmarklet을 설정했습니다. Bookmarklet이란 브라우저 북마크에 JavaScript 코드를 저장해두고 클릭 한 번으로 실행하는 방법입니다. 아래 코드를 북마크 URL로 저장하면 됩니다:

javascript:(function(){
  var title = prompt('글 제목:');
  if(!title) return;
  var content = prompt('본문 (HTML 가능):');
  if(!content) return;
  fetch('/wp-json/wp/v2/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-WP-Nonce': wpApiSettings.nonce
    },
    body: JSON.stringify({title:title, content:content, status:'draft'})
  })
  .then(r =&gt; r.json())
  .then(d =&gt; {
    if(!d.id){ alert('오류: ' + JSON.stringify(d)); return; }
    var go = confirm('Draft 저장 완료! (ID:' + d.id + ')\n바로 발행할까요?');
    if(!go) return;
    fetch('/wp-json/wp/v2/posts/' + d.id, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-WP-Nonce': wpApiSettings.nonce
      },
      body: JSON.stringify({status:'publish'})
    })
    .then(r =&gt; r.json())
    .then(d =&gt; alert('발행 완료!\n' + d.link));
  });
})();

Bookmarklet 등록 방법:

Chrome 북마크 바에서 우클릭 → 페이지 추가
이름: 📝 WP 글쓰기
URL: 위 javascript: 코드 전체 붙여넣기
저장 후 wp-admin 페이지에서 클릭하면 바로 실행

최종 워크플로우

Claude AI를 통해 WordPress에 글을 올리는 표준 워크플로우는 다음과 같이 확립되었습니다:

Claude에게 주제를 전달하여 HTML 본문 생성 요청
브라우저에서 speech.pe.kr/wp-admin/ 로그인 상태 확인
북마크 바에서 📝 WP 글쓰기 Bookmarklet 클릭
제목 입력 → Claude가 생성한 HTML 본문 붙여넣기
Draft 확인 후 발행 여부 선택
발행된 URL에서 최종 확인

향후 개선 계획

팝업 UI Bookmarklet: prompt() 대신 textarea가 있는 전용 팝업으로 편의성 향상 (긴 HTML 본문 입력에 유리)
WordPress MCP 서버: 호스팅 서버(Linux)에 Node.js 기반 MCP 서버를 설치하여 Claude가 콘솔 없이 직접 발행 가능한 환경 구축

마치며

복잡한 플러그인이나 별도 인증 설정 없이, 브라우저 로그인 세션 + WordPress REST API + Bookmarklet의 조합으로 Claude AI와의 연동에 성공했습니다. 가장 단순한 방법이 종종 가장 효과적이라는 것을 다시 한번 확인할 수 있었습니다. 앞으로 팝업 UI Bookmarklet과 MCP 서버를 통해 더욱 자동화된 블로깅 환경을 구축해 나갈 예정입니다.

이 글은 Claude AI가 WordPress REST API와 Bookmarklet을 통해 작성 및 발행하였습니다. (2026년 4월 13일)

개요

배경