이 글은 이렇게 읽으세요

1. 먼저 ChatGPT(앱)와 OpenAI API의 차이를 확인합니다.
2. 다음으로 통합 경로를 선택합니다. 코딩이 낯설면 플러그인 방식으로 시작하고, 별도 권한 정책과 화면 구성이 필요하면 커스텀 방식을 검토합니다. 직접 개발했다고 더 안전한 것은 아닙니다. 반복 작업을 줄이고 싶다면 무코드 자동화를 고려합니다.
3. 배포 전에는 접근을 제한한 테스트 환경에서 응답·오류·비용·개인정보 처리를 확인합니다. 공개 임시 페이지만 만든 것으로 격리 테스트가 완료되지는 않습니다.

기초 개념 3분 요약

2026년 10월 13일 공식 문서 기준으로 확인했습니다. 새로 만드는 커스텀 통합에는 Responses API를 우선 검토하세요. Chat Completions도 지원되지만, 아래 코드는 기존 방식의 호환 예제이며 신규 프로젝트의 기본 설계안은 아닙니다.

예제의 gpt-4o-mini는 특정 모델을 사용한 예시이지 최신·최적 모델이라는 뜻이 아닙니다. 모델 문서와 프로젝트의 사용 가능 여부를 확인하세요. Chat Completions의 max_tokens는 폐기 예정 파라미터이며 현재 대체 항목은 max_completion_tokens입니다. Responses에서는 max_output_tokens를 사용합니다. 요청 본문과 응답을 읽는 방식도 다르므로 URL이나 파라미터 이름만 바꾸면 전환이 끝나는 것은 아닙니다. Chat Completions 레퍼런스를 함께 확인하세요.

• ChatGPT(앱)는 사용자가 웹이나 앱에서 직접 대화하는 서비스입니다. 반면 OpenAI API는 우리 사이트가 서버에서 모델과 통신하기 위한 인터페이스입니다.
• 생성형 AI는 학습 데이터의 패턴을 바탕으로 새로운 텍스트나 이미지를 생성합니다. 대표 기술은 Transformer 기반의 대규모 언어 모델입니다.
• 모델과 요청 옵션은 응답·지연·비용에 영향을 줍니다. temperature는 샘플링의 변동성을 조절하는 값이지 사실 정확성을 보장하는 값은 아닙니다. 출력 토큰 한도 이름과 지원 옵션은 모델·API에 따라 다르므로 예제의 max_tokens를 모든 모델에 그대로 적용하지 마세요.
• 쇼트코드는 워드프레스에서 대괄호 형태의 태그로 기능을 삽입하는 표준 방식입니다.
• REST 엔드포인트는 브라우저 요청을 서버 처리 코드로 연결하는 경로입니다. 서버 중계만으로 권한 검증이나 남용 방지까지 구현되는 것은 아닙니다.

시작 전 체크(필수)

• OpenAI API 프로젝트의 키와 결제·사용량을 확인합니다. ChatGPT 구독과 API 과금은 별개이며, 예산 알림을 애플리케이션의 강제 호출 중단 장치로 가정하지 마세요.
• 워드프레스 관리자 권한을 확인합니다.
• 테스트용 임시 페이지를 준비합니다.

🔑 OpenAI API Key 설정(완전 초보 가이드)

4.1 방법 1: OpenAI 콘솔에서 API 키를 발급합니다.

1. OpenAI Platform에 로그인한 뒤 상단의 Project를 선택하거나 새 프로젝트를 생성합니다.
2. Settings의 API keys 메뉴에서 새 비밀 키를 생성하고 표시되는 키를 복사하여 안전한 위치에 저장합니다.

curl https://api.openai.com/v1/chat/completions \
  -H "Authorization: Bearer YOUR_SECRET_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model":"gpt-4o-mini",
    "messages":[{"role":"user","content":"테스트"}],
    "max_tokens":30
  }'

4.2 방법 2: 키를 안전하게 보관하고 주기적으로 교체합니다.

• 키는 wp-config.php 같은 설정 파일, 서버 환경 변수나 비밀정보 저장소를 검토하고 각 저장 위치의 접근·백업 권한을 제한합니다.
• 프로젝트별 최소 권한 키를 사용하고 더 이상 필요하지 않은 키는 폐기합니다.
• 사용 내역을 점검하고 조직 정책에 따라 키를 교체합니다. 유출이 의심되면 폐기와 대체 키 반영을 별도 절차로 진행합니다.
• 로그 접근 권한은 최소화하여 유출 위험을 줄입니다.

4.3 방법 3: 워드프레스에 키를 저장합니다(플러그인 또는 커스텀).

• 플러그인을 사용하는 경우 플러그인 설정 화면의 API Keys 메뉴에 키를 입력하고 저장합니다.
• 커스텀 방식을 사용하는 경우 wp-config.php에 상수로 키를 저장하고 서버에서만 읽어 사용합니다.

/* DB 설정 라인 아래에 추가합니다. */
define('OPENAI_API_KEY','여기에_본인_API_키');

통합 경로 선택: 플러그인과 커스텀 그리고 자동화를 비교합니다.

플러그인으로 시작하기

현재 플러그인의 버전·요금제와 지원 API를 확인해야 합니다. AI Engine의 MCP를 통한 WordPress 관리 도구 접근은 방문자용 챗봇과 다른 용도이며, 필요한 권한만 허용해야 합니다. AI Puffer는 Cloud 연결과 자체 공급자 계정 연결을 구분합니다. OpenAI의 폐기 일정에는 Assistants API 종료일이 2026년 8월 26일로 명시되어 있습니다. 예전 기능 소개만 보고 Assistants 모드를 활성화하지 말고 플러그인의 대체 연결 방식을 확인하세요.

6.1 플러그인 선택 기준

• AI Engine은 챗봇, AI 폼, 콘텐츠 도구, 내부 API와 쇼트코드를 제공합니다.
• AI Power는 현재 AI Puffer라는 이름으로 안내됩니다. 챗봇·콘텐츠·이미지·자동화 기능과 제공 모델, 자체 키 또는 Cloud 연결 조건을 현재 문서에서 확인하세요.
• WPBot은 상담과 FAQ 중심 기능을 제공하고 메신저와 WhatsApp 애드온을 지원합니다.
• AiBud WP는 템플릿 기반 콘텐츠·이미지 생성과 챗봇 기능을 제공합니다.
• WPForms + OpenAI는 Uncanny Automator나 Zapier와 연결하여 폼 제출을 자동화합니다.

6.2 용도별 비교

6.3 플러그인 설정 흐름

6.3.1 AI Engine(Meow Apps) 설정 흐름

• 플러그인을 설치하고 활성화합니다.
• AI Engine의 현재 공급자·API 연결 설정에서 키를 등록합니다. 아래 메뉴·단축코드는 버전별 차이가 있는 예시입니다.
• Chatbots 탭에서 챗봇을 생성하고 단축코드를 복사하여 페이지에 삽입합니다.

[mwai_chatbot theme="bubble" window="embedded" max_messages="6" bot_name="도움이"]

6.3.2 AI Power(GPT AI Power) 설정 흐름

• 현재 AI Puffer의 연결 설정을 확인합니다. 이전 AI Power 화면 경로를 그대로 가정하지 말고 자체 API 키와 Cloud 방식의 인증·과금 조건을 구분하세요.
• Chat, Content Writer, Image, Agents 등 필요한 모듈만 활성화합니다.
• 제공되는 블록이나 단축코드 또는 위젯으로 페이지에 배치합니다.

6.3.3 WPBot 또는 ChatBot for WordPress(Social Intents) 설정 흐름

• WPBot: WPBot → Settings에서 키·언어·UI를 설정하고, 필요하면 OpenAI·메신저 애드온으로 확장합니다.
• Social Intents: 외부 대시보드에서 봇을 만들고 WP 플러그인으로 연결해 전 페이지 팝업 또는 버튼으로 노출합니다.

6.3.4 AiBud WP 설정 흐름

• AI Bud의 현재 공급자·키 설정을 확인합니다. 메뉴와 기능명은 설치 버전·라이선스에 따라 달라질 수 있습니다.
• Content Builder, Playground, ChatBot 중 필요한 모듈을 선택해 사용합니다.

6.3.5 WPForms + OpenAI 설정 흐름

• WPForms로 폼을 만들고 Uncanny Automator나 Zapier에서 제출을 트리거로 연결합니다.
• 전송 가능한 폼 필드만 AI 입력에 포함하고, 검토한 응답을 확인 메시지·이메일·CRM에 활용합니다. 개인정보·자동 발송 정책은 별도 확인 항목입니다.

커스텀: 서버 중계와 호출 권한 설계

브라우저는 워드프레스의 REST 엔드포인트만 호출하고, 워드프레스는 서버에서 OpenAI API를 호출합니다. 키를 브라우저에 전달하지 않는 구조지만, 그 자체로 공개 호출의 남용을 막지는 않습니다.
아래 REST 예제의 __return_true는 인증 제한을 구현하지 않습니다.
권한·입력 길이·호출량·비용 제한과 오류 정보 노출을 검토하기 전에는 운영에 배포하지 마세요.

7.1 wp-config.php에 키를 저장합니다.

define('OPENAI_API_KEY','여기에_자신의_API_키');

7.2 REST 엔드포인트를 만듭니다.

add_action('rest_api_init', function(){
  register_rest_route('ai/v1','/chat',[
    'methods'=>'POST',
    'callback'=>'my_ai_chat_handler',
    'permission_callback'=>'__return_true' // 운영 시 권한 강화를 권장합니다.
  ]);
});

function my_ai_chat_handler( WP_REST_Request $req ){
  $msg = wp_strip_all_tags( $req->get_param('message') );
  if(!$msg) return new WP_Error('bad_request','message 필요',['status'=>400]);

  $payload = [
    "model"=>"gpt-4o-mini",
    "messages"=>[
      ["role"=>"system","content"=>"You are a helpful WordPress assistant who answers in Korean."],
      ["role"=>"user","content"=>$msg]
    ],
    "max_tokens"=>500,"temperature"=>0.6
  ];

  $res = wp_remote_post('https://api.openai.com/v1/chat/completions',[
    'headers'=>[
      'Authorization'=>'Bearer '.OPENAI_API_KEY,
      'Content-Type'=>'application/json; charset=utf-8'
    ],
    'timeout'=>45,
    'body'=>wp_json_encode($payload)
  ]);
  if(is_wp_error($res)) return new WP_Error('api_error',$res->get_error_message(),['status'=>500]);

  $code = wp_remote_retrieve_response_code($res);
  $body = json_decode( wp_remote_retrieve_body($res), true );
  if($code<200||$code>=300) return new WP_Error('api_error','OpenAI 오류',['status'=>$code,'detail'=>$body]);

  return ['reply'=>$body['choices'][0]['message']['content'] ?? '(응답 없음)'];
}

7.3 쇼트코드와 프런트 UI를 구성합니다.

이 코드가 실제로 만드는 것은 입력창과 전송 버튼입니다. 그림처럼 작동하려면 브라우저의 요청 처리, 서버의 접근·남용 통제, 안전한 답변 표시와 전송 중·실패 상태를 추가해야 합니다. 쇼트코드만 복사해 넣어서는 작동하는 챗봇이 완성되지 않습니다.

add_shortcode('my_chatgpt', function(){
  ob_start(); ?>
<div id="my-chat" style="border:1px solid #e6eef6;border-radius:12px;padding:16px;background:#fff">
  <div style="font-weight:700;margin-bottom:8px">💬 ChatGPT 상담원</div>
  <div id="my-chat-log" style="min-height:120px;padding:10px;border:1px solid #e6eef6;border-radius:8px;overflow:auto"></div>
  <div style="display:flex;gap:8px;margin-top:10px">
    <input id="my-chat-input" type="text" placeholder="질문을 입력하세요" style="flex:1;padding:10px;border-radius:8px;border:1px solid #d9e3ee" />
    <button id="my-chat-send" type="button" style="padding:10px 14px;border-radius:8px;background:#667eea;color:#fff;border:none;cursor:pointer">전송</button>
  </div>
</div>
<script>
(function(){
  const log=document.getElementById('my-chat-log');
  const input=document.getElementById('my-chat-input');
  const btn=document.getElementById('my-chat-send');
  function bubble(text,who){
    const w=document.createElement('div'); w.style.margin='8px 0';
    const bg= who==='me' ? '#e0f2fe' : '#eef2ff', fg= who==='me' ? '#0c4a6e' : '#1e293b';
    w.innerHTML='<div style="background:'+bg+';color:'+fg+';display:inline-block;padding:8px 10px;border-radius:10px;max-width:90%">'+
      text.replace(/</g,'&lt;').replace(/>/g,'&gt;')+'</div>';
    log.appendChild(w); log.scrollTop=log.scrollHeight;
  }
  async function send(){
    const msg=input.value.trim(); if(!msg) return; bubble(msg,'me'); input.value=''; bubble('답변 작성 중...','bot');
    try{
      const res=await fetch('<?php echo esc_url( rest_url('ai/v1/chat') ); ?>',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:msg})});
      const data=await res.json();
      log.lastChild.innerHTML='<div style="background:#eef2ff;color:#1e293b;display:inline-block;padding:8px 10px;border-radius:10px;max-width:90%">'+
        (data.reply||'응답 없음').replace(/</g,'&lt;').replace(/>/g,'&gt;')+'</div>';
    }catch(e){
      log.lastChild.innerHTML='<div style="background:#fee2e2;color:#7f1d1d;display:inline-block;padding:8px 10px;border-radius:10px;max-width:90%">오류: '+(e.message||e)+'</div>';
    }
  }
  btn.addEventListener('click',send); input.addEventListener('keydown',e=>{ if(e.key==='Enter') send(); });
})();
</script>
<?php return ob_get_clean();
});

7.4 Nonce·Rate limit·캐시의 적용 조건을 확인합니다.

• 로그인 기반 REST 요청은 nonce와 실제 권한 검사를 함께 설계합니다. nonce는 인증·권한 검사의 대체물이 아니며 공개 방문자 호출 정책은 별도입니다.
• IP 또는 세션 기준으로 분당 호출 수를 제한합니다.
• 캐시를 사용할 때는 사용자별 데이터와 권한을 구분합니다. 개인화 응답을 공용 캐시에 섞지 말고 비용 효과는 측정하세요.
• 민감 정보의 수집·외부 전송을 입력 단계에서 통제합니다. 프롬프트 지시나 금칙어 필터만으로 개인정보 보호가 보장되지는 않습니다.

자동화(무코드): Uncanny Automator 또는 Zapier를 사용합니다.

8.1 새 글을 발행하면 요약을 만들고 SNS에 게시합니다.

1. 트리거를 포스트 발행으로 설정합니다.
2. OpenAI로 요약을 생성합니다.
3. 생성한 캡션을 검토한 뒤 승인된 SNS 연결로 게시합니다. 자동 게시를 사용한다면 중단·오류 처리 조건을 정합니다.

8.2 폼 제출 시 맞춤 응답 메일을 전송합니다.

CRM 필드나 분류 결과에는 지원되는 경우 스키마에 맞춘 출력을 사용하고 서버에서 다시 검증하세요. 거절·불완전한 응답·요청 실패를 처리한 뒤 메일 발송이나 기록 저장으로 넘겨야 합니다. 형식이 맞는다고 내용의 사실성이 보장되지는 않습니다.

1. 트리거를 WPForms 제출로 설정합니다.
2. 외부 전송이 허용된 필드만 프롬프트에 넣고 OpenAI 응답을 생성합니다.
3. 내용과 수신 대상을 확인한 뒤 안내 메일을 보내고 필요한 항목만 CRM에 기록합니다.

8.3 WooCommerce 이벤트를 자동화합니다.

1. 신규 주문, 반품 또는 문의를 트리거로 설정합니다.
2. 주문 요약, FAQ와 가이드를 생성합니다.
3. 관리자 알림, 시트 기록 또는 티켓 생성을 실행합니다.

운영 가이드

9.1 시스템 프롬프트 예시

당신은 한국어로 답하는 워드프레스 도우미입니다.
- 답변은 5문장 이내로 간결하게 작성합니다.
- 코드가 필요하면 코드블록을 포함합니다.
- 개인정보나 민감정보는 수집하지 않습니다. 모호하면 재질문합니다.

9.2 비용 관리 체크리스트를 따릅니다.

사용 금액 알림은 통지만 보내며 API 호출을 중단시키지 않습니다. 활성화된 조직·프로젝트의 하드 지출 한도는 해당 요청을 429 오류로 거절할 수 있지만, 반영이 즉각적이지 않아 기록된 금액이 한도를 조금 넘을 수 있습니다. 지출 한도 설정과 함께 앱의 호출 횟수 제한·사용량 감시·오류 안내를 준비하세요. 이 문서 검토로 독자의 실제 계정 설정이나 유료 API 호출까지 확인한 것은 아닙니다.

• 경량 모델부터 시작합니다.
• max_tokens와 대화 길이의 상한만으로 입력 토큰·반복 호출·추가 기능 비용까지 제한되지는 않습니다.
• 반복 질의를 캐시하고 프롬프트를 재사용합니다.

9.3 개인정보·보안·성능 점검

• 불필요한 민감정보를 입력받지 않고 AI 사용·외부 전송·보관 방침을 안내합니다. API 학습 사용 여부와 로그 보관 여부는 다른 항목이며, 프롬프트만으로 수집·보관을 통제할 수는 없습니다.
• 챗봇 스크립트는 지연 로드하거나 필요한 페이지만 로드합니다.
• Core Web Vitals와 캐시 예외 설정을 확인합니다.
• 서버와 애플리케이션 로그를 주기적으로 점검합니다.

테스트와 문제 해결(빠른 점검)

10.1 기본 점검 순서를 따릅니다.

1. API 키, 결제 활성 상태, 예산과 한도를 확인합니다.
2. 호스팅 방화벽에서 https://api.openai.com 주소를 허용합니다.
3. SSL 설정과 서버 시간 동기화를 확인합니다.
4. wp_remote_post()의 timeout 값과 실제 지연·상위 프록시 제한을 비교합니다. 45초는 예제 값이며 무조건 늘리지 마세요.
5. 플러그인과 테마의 충돌을 점검합니다.

10.2 커스텀 REST 응답을 디버깅합니다.

• 브라우저의 Network 탭에서 /wp-json/ai/v1/chat 요청 상태와 응답 본문을 확인합니다.
• 상태 코드 400은 message 등의 입력 문제를 조사할 단서입니다. 401/403은 인증·권한 또는 다른 차단 계층을 확인해야 합니다. 500은 서버 오류 범주입니다.
  상태 코드만으로 원인을 확정하지 말고 요청·응답·서버 로그를 대조하세요.

10.3 Elementor 삽입 상태를 확인합니다.

• Elementor에서는 실행 준비된 쇼트코드를 Shortcode 위젯으로 넣습니다. PHP 예제를 HTML 위젯에 붙여넣어 실행하려 하지 마세요. PHP 코드는 검토된 서버 확장 위치에서 별도로 관리합니다.
• 원본 저장 결과와 캐시 전달 상태를 구분한 뒤 필요한 페이지의 기존 캐시 갱신 절차를 사용합니다.
• 최적화가 원인인지 제한된 테스트에서 비교합니다. 확인 없이 광범위한 예외를 추가하지 마세요.

자주 묻는 질문(FAQ)

부록(Reference)

12.1 플러그인 기능 비교표(확대판)

12.2 코드 스니펫 모음을 제공합니다.

[mwai_chatbot theme="bubble" window="embedded" max_messages="6" bot_name="도움이"]

[my_chatgpt]

12.3 용어집

• API는 애플리케이션 간 통신 인터페이스입니다.
• 쇼트코드는 워드프레스에서 기능 삽입용 단축 태그입니다.
• REST는 표준 HTTP로 요청과 응답을 주고받는 방식입니다.
• Temperature는 지원 모델의 샘플링 변동성을 조절하는 값입니다. 사실 정확성의 보장값은 아닙니다.
• Token은 모델이 입력과 출력을 처리하는 단위입니다. 단어 수·글자 수와 일대일로 대응하지 않습니다.

정리를 통해 다음 단계를 안내합니다.

접근을 제한한 테스트 환경에서 응답·오류·비용·지연·로그를 확인합니다. 코드의 운영 적용 조건과 중단·복원 절차를 검토한 뒤에만 배포하세요.