코딩 없이 무료로 Chat GPT 웹앱 만들기 (2) – OpenAI API 발급 및 플러그인 설치&연동

지금까지 잘 따라오셨다면 전반적인 워드프레스 기본 세팅은 거의다 완료 하셨을 겁니다. 이번 포스팅에서는 본격적으로 Chat GPT를 세팅한 워드프레스 웹사이트에서 사용할 수 있도록 하는 작업을 진행해보겠습니다.

Admin 페이지의 왼쪽 메뉴에서 Plugin(플러그인) 안의 Add New(플러그인 추가) 버튼을 눌러서 플러그인 설치 페이지로 이동해주세요.

플러그인 검색창에 AI Engine:을 검색 하신 뒤, 위 사진의 플러그인을 Install Now(설치하기) 버튼을 눌러 위 사진의 플러그인을 설치해주세요.

플러그인 설치가 완료되면 ‘Activate(활성화)’ 버튼을 눌러 설치된 플러그인을 활성화 해주세요.

그 뒤 admin 페이지의 왼쪽 메뉴를 보면 ‘Meow Apps’라는 탭이 새로 생성된 걸 확인 하실 수 있습니다. 해당 탭의 AI Engine 버튼을 눌러 해당 페이지로 이동해주세요.

이동된 페이지는 해당 플러그인의 AI 엔진 세팅 페이지입니다. 해당 페이지의 우측에 보시면, Open AI의 API Key를 입력하는 부분이 있습니다.

이 페이지를 띄워 놓은 채로 새 탭에서 구글에 접속해주세요.

구글에서 ChatGPT API를 검색해줍니다. 그러면 위 사진처럼 openai.com의 API 페이지가 검색 결과에 나오는데, 클릭해서 들어가주세요.

접속된 페이지에서 스크롤 하여 페이지를 아래로 좀 내려보시면, 위 사진처럼 ‘Get started’라는 버튼이 보입니다. 해당 버튼을 눌러주세요.

그러면 회원가입을 하라는 페이지가 나오는데, 구글 로그인 또는 이메일로 회원 가입을 진행해주세요.

회원가입과 로그인이 완료되면 위 사진처럼 OpenAI의 welcome 페이지로 이동됩니다. 우측 상단의 프로필 아이콘을 클릭 하신 후, 드랍다운 되는 메뉴에서 ‘View API keys’라는 버튼을 클릭해주세요.

이제 거의 다 왔습니다. 위 사진처럼 API keys 페이지가 나오는데, +Create new secret key 버튼을 눌러주세요.

그러면 API secret key가 생성되는데, 이 생성된 키를 복사해줍니다.

복사한 키를 아까 띄워놓았던 AI engine settings 페이지의 API Key 부분에 붙여넣어줍니다.

그리고 상단의 TAB 메뉴에서 Chatbot 탭을 클릭 하신 뒤, Start Sentence를 원하시는 대로 입력해주세요. 여러분의 홈페이지에 생성될 챗봇의 첫 인사말 부분입니다. 입력이 끝나면 자동으로 저장됩니다.

작성이 끝나시면 아래쪽 4번 부분에 Shortcode(숏코드)가 생성됩니다. 해당 코드를 복사해줍니다.

그리고 다시 여러분의 홈페이지 메인 페이지로 넘어가줍시다.

메인 페이지로 돌아오셨으면 Edit with Elementor 버튼을 눌러 엘리멘터 페이지 편집창으로 이동해줍니다.

화면을 아래로 쭉 내리시다 보면, Section(섹션)을 새로 추가할 수 있는 도구가 있습니다. 위 사진처럼 원 안의 + 버튼을 눌러 섹션을 추가해줍니다.

그러면 Section(섹션) 안의 Column(컬럼) 개수를 몇 개로 설정할 것인지 묻는데, 저희는 위 사진처럼 1칸으로 설정하겠습니다.

그런 다음 좌측의 위젯 메뉴를 쭉 스크롤해서 내리다보면, Shortcode(숏코드) 위젯이 있습니다. 해당 위젯을 클릭하여 누르고 있는 채로 새로 생성한 컬럼의 정가운데에 Drag & Drop(드래그해서 떨어뜨리기) 해줍니다.

그렇게 생성된 Shortcode 위젯 안에 아까 복사해뒀던 Shortcode(숏코드)를 붙여넣어줍니다. 그 뒤에 왼쪽 편집 메뉴 하단의 ‘Update’ 또는 ‘저장’ 버튼을 눌러줍니다.

여러분의 웹사이트 메인 페이지에 다시 접속해보시면, 아래쪽에 여러분들이 새로 생성하신 섹션 위치에 ChatGPT가 설치되어 보이는 것을 확인 하실 수 있습니다.

테스트 해보시면 챗봇이 정상적으로 작동 하는 걸 확인 하실 수 있습니다. (답변에 평균적으로 약 30초 ~ 1분 이내의 시간이 소요됩니다.)