안녕하세요 준호입니다.
지난 콘텐츠와 이어지는 새로운 콘텐츠로 또 찾아왔습니다! 😆
지난 콘텐츠에서는 워드프레스와 ChatGPT를 이용해서 AI 웹 서비스를 만들어 보았는데요
오늘은 여기에 이어서 워드프레스 사이트를 일종의 SaaS 플랫폼으로 만드는 방법을 설명해드리려고 합니다!
유튜브 영상도 있으니 영상으로도 많은 시청 부탁 드리겠습니다! 🙏
구독과 좋아요는 콘텐츠 제작에 큰 힘이 됩니다 ❤️
시작하기 전에, SaaS란 무엇일까요? 🤔
Software as a Service 의 약자인데요, 인터넷을 통해 소프트웨어를 제공하는 서비스입니다
사용자는 프로그램을 컴퓨터에 직접 설치하지 않고 웹에서 바로 이용할 수 있는 거죠!
대신 서비스 제공자는 정기적인 구독이나 사용량에 따른 요금을 부여하는 방식을 통해 수익을 창출 하게 됩니다
개념 정리는 이 정도로 충분한 것 같아요
우리는 오늘 워드프레스에 크레딧 시스템을 구축하고 지난 콘텐츠에서 제작한 AI 웹 서비스를 이용 시, 이 크레딧이 차감 되도록 만들어 볼 겁니다!
지난 콘텐츠를 못 보셨다면 이 링크를 통해 반드시 보고 와주세요! 🥺
진짜로 시작해볼게요!!!
자 먼저 GenerateBlocks과 MyCred 라는 플러그인을 설치해줘야 하는데요
GenerateBlocks는 코딩 없이 사이트의 UI를 제작할 수 있도록 도와주는 플러그인 이고요
MyCred는 워드프레스 사이트에 크레딧 시스템을 구축해줄 천금같은 플러그인 입니다!
다음으로 크레딧 시스템을 구축해줄 이 MyCred 플러그인에 대해서 잠깐 살펴보고 갈게요
해당 플러그인을 활성화 하고 관리자 메뉴를 보시면 MyCred와 포인트가 생성된 걸 확인하실 수 있어요!
다양한 항목들이 있는데 이번 콘텐츠에서는 3개 정도만 살펴 볼 거에요!
포인트 메뉴에서 설정으로 들어가주고요
핵심 설정 부분을 보시면 포인트 이름을 바꿀 수 있는 기능이 있는 걸 확인할 수 있고요
이름은 원하시는 대로 설정해주셔도 되는데 저는 크레딧이라고 저장해 주겠습니다
그러면 메뉴 항목이 포인트에서 크레딧으로 변경된 걸 확인하실 수 있어요
다음으로는 다시 이 메뉴에서 로그 항목으로 들어가 볼게요
이 페이지에는 나중에 우리가 크레딧 시스템을 전부 구축하고 나서 사용자가 크레딧을 소모하거나 얻게 되는 경우 그런 로그들이 전부 기록되는 곳입니다!
마지막으로 다시 메뉴에서 후크 항목으로 들어가볼게요
사용자의 활동에 따라 크레딧을 주는 기능을 제작할 수 있는데요
여기서는 사이트에 가입을 하면 크레딧을 주는 기능도 있구요, 매일 접속 시 크레딧을 주는 기능 등 다양한 훅을 만들 수 있습니다!
우리는 사이트에 가입을 할 때 크레딧을 주는 훅을 한 번 만들어보겠습니다
가장 첫 번째 훅을 선택해주시면 아래 이미지 처럼 우측의 활동 훅에 활성화가 될거에요
여기서 크레딧 개수를 조정해서 사용자가 사이트에 가입할 때 몇 개의 크레딧을 기본적으로 제공할 지 설정할 수 있습니다
다음으로 관리자 권한으로 크레딧을 관리하는 방법을 알려드릴게요!
관리자 페이지 메뉴에서 사용자로 이동하면 아래 이미지처럼 각 사용자의 잔여 크레딧을 확인할 수 있습니다
지금은 크레딧이 당연히 없는 게 맞구요, 다음으로 사용자 이름을 클릭해주세요!
페이지를 조금 내리다 보면 아래 이미지처럼 잔액이라는 부분이 있을거에요
여기에서 사용자의 크레딧 개수를 관리자가 직접 조정해줄 수도 있어요
이따가 테스트를 해봐야 되니까 크레딧을 30개 정도로 세팅하고 저장해주겠습니다!
자 여기까지 크레딧 설정에 대한 부분을 설명 드렸습니다
다음으로 사용자의 잔여 크레딧을 사이트의 헤더 부분에 표시되도록 만들어볼건데요
이 부분은 글로 설명하기 어려우니 영상을 참고해주세요! (귀찮은거 아니에요 😂 진짜 글로 쓰다가 포기...)
완성된 헤더는 아래처럼 생겼어요!
마지막으로 우리가 이전에 제작한 AI 서비스를 이용할 때, 크레딧이 차감되도록 만들어봅시다
관리자 메뉴에서 코드 스니펫으로 이동해주고요 이전 콘텐츠를 통해 제작한 AI 서비스의 백엔드 코드로 들어가주세요!
여기에 3가지 기능을 더 추가해줄 건데요 우선 함수에 다음과 같은 코드를 추가해주세요
if (!is_user_logged_in()) {
return;
}자 세한 삽입 위치는 아래와 같아요!
function openai_generate_text() {
>>> 여기에 추가 <<<
$topic = isset($_POST['topic']) ? sanitize_text_field($_POST['topic']) : '';
$prompt = "As an expert in writing a short storyline, your primary task is to generate a short story for the following topic: " . $topic . " in Korean.";
...이건 워드프레스 사이트에 사용자가 로그인이 되었는지 확인하는 코드이구요
사용자가 로그인 되지 않았다면 백엔드가 작동하지 않도록 설정해준거에요!
다음으로 해당 코드 바로 아래에 아래와 같은 코드를 또 추가해주겠습니다
// 사용자 ID와 잔액을 사용자 로그인 상태일 때만 가져옴
$points_required = 5;
$user_id = get_current_user_id();
$balance = mycred_get_users_balance($user_id);
// 사용자의 잔액이 요구 조건을 충족하는지 확인
if ($balance < $points_required)
{
return;
}
이건 AI 서비스를 이용할 때 필요한 크레딧 개수를 설정해준거에요
$points_required = 5;이 부분을 조정해서 서비스 이용 시 필요한 크레딧 갯수를 설정해줄 수 있습니다!
그리고 만약 사용자의 현재 크레딧이 도구 사용에 필요한 크레딧 개수보다 모자라면 백엔드가 작동하지 않도록 해주는 역할을 하는 코드에요
자 그럼 마지막으로 코드 밑 부분으로 내려와서 다음 코드를 추가해주세요
mycred_subtract("AI 스토리 생성 도구", $user_id, $points_required, '도구 사용 크레딧 차감', time());결과가 출력되기 직전에 크레딧이 차감해주는 역할을 하는데요 자세한 코드의 삽입 위치는 아래를 참고해주세요
if (json_last_error() !== JSON_ERROR_NONE) {
wp_send_json_error('API 응답의 JSON이 유효하지 않습니다.');
} elseif (!isset($data['choices'])) {
wp_send_json_error('API 요청이 실패했습니다. 응답: ' . $body);
} else {
>>> 여기에 추가하시면 됩니다 보이시죠오오오? <<<
wp_send_json_success($data);
}
}
// AJAX 콘텐츠를 에코하는 함수에서는 항상 종료합니다.
wp_die();
}
add_action('wp_ajax_openai_generate_text', 'openai_generate_text');
add_action('wp_ajax_nopriv_openai_generate_text', 'openai_generate_text');자 여기까지 모든 구현이 완료되었습니다 짝짝짝 🎉
도구 페이지로 가서 한 번 사용해보고 페이지를 새로고침해 보세요!
우측 상단에 도구 사용으로 인해서 5개의 크레딧이 차감되었다고 팝업이 뜨고, 크레딧이 정상적으로 잘 차감된 모습을 확인하실 수 있을거에요!
그리고 관리자 페이지로 가서 크레딧 메뉴에 로그를 확인해보면
아래 이미지처럼 누가 언제 도구를 사용해서 얼만큼의 크레딧이 차감되었는지 로그가 잘 기록된걸 보실 수 있습니다!
그럼 만약 크레딧이 부족하면 어떻게 될까요!?
사용자가 크레딧이 부족한 상태에서 도구를 사용하려고 하면 아래 이미지 처럼 오류가 발생했다고 표시가 됩니다!
자!!! 오늘은 여기까지 해서 워드프레스 사이트에 크레딧 시스템을 구축해서 SaaS 플랫폼으로 만드는 방법에 대해 알아보았구요
궁금한 사항은 유튜브 댓글로 남겨서 채널 활성화에 큰 도움이 되어주세요 PLEASE!! 🙏
아래는 앞으로 제작 예정 중인 콘텐츠니까요 구독해서 정보 꼭 얻어가세요!!
감사합니다 🙇♂️
.
.
.
🧡 제작 예정 중인 콘텐츠 🧡
API 제작 및 배포
워드프레스에서 크레딧 시스템을 적용해 SaaS 플랫폼으로 제작 및 수익화하기AskUp(아숙업) 따라잡기! 카카오톡 x ChatGPT 챗봇 개발
워드프레스 블로그 자동포스팅 개발
AI 게임 엔진 개발
오픈소스 LLM 파인튜닝으로 나만의 LLM 모델 구축하기
※ 바뀔 수도 있어요 😏