취업 포트폴리오, AI 웹 서비스로 만들기(3)
PPT, PDF 그만! AI 웹 서비스 형태로 만드는 포트폴리오 제작기
본 글은 "취업 포트폴리오, AI 웹 서비스로 만들기(2)"에서 이어지는 글입니다.
3단계. "나"를 이식한 상담봇 심기
이전 글에서 작성한 "제가 oopy를 사용하는 이유 3가지"를 다시 보여드리면 다음과 같습니다.
- 세팅이 쉽고 간단한데, 국내 서비스라 한글, 원화결제 등의 메리트가 크다.
- 공식 웹에서 도메인 연결부터 스타일 설정, 꿀팁까지 모두 차근차근 쉽게 알려준다.
- HTML 편집이 가능하다!!!! (매우중요 ⭐️⭐️⭐️⭐️⭐️)
이 중에서 특히 3번째 이유가 중요하다고 했는데, 그 이유는 바로 "상담봇" 심기가 가능하기 때문입니다.
노션과 우피로 열심히 웹 페이지를 만들었는데, 사실 여기서 제공하는 기능 외에도 더 많은 기능을 원할 수 있습니다. 가령 예를 들면 우피가 기본 제공하는 디자인보다 조금 더 다른 디자인으로 스타일을 꾸미고 싶다던지, 혹은 노션과 우피로 만들 수 없는 외부 서비스를 넣는다던지(임베드 제외), 또는 내가 만든 웹 페이지에 접속자 통계를 보고 싶다던지, 검색이 잘 되게 세팅한다던지 등등..
그리고 oopy는, 그런 편집을 지원하죠. (!!)
oopy의 편집 화면. 여담으로 11~13번 줄 코드가 상담봇 코드인데, 사실 body에 들어가야 한다.한편, 저는 원래 제 웹페이지에 "전화번호 공개"와 "카톡 링크를 연결"해서, 혹시라도 내가 만든 웹페이지를 볼 채용 담당자나 관계자로부터 연락이 되게끔 유도하려고 했습니다.
근데 이게 참 악용이 되더라구요. 개인정보 유출도 심각하고, 보이스피싱이나 스팸에 정말정말 취약했습니다. 물론 제 포트폴리오이기 때문에 개인정보는 어느정도 감안해야 하지만, 제 연락처를 떡하니 넣어둬서 그런지 장난문자나 장난카톡이 많이 왔습니다. 그러다보니 연락 관리가 생각보다 어려웠다는 걸 느꼈습니다.
그러다 문득, 이런 생각이 들었습니다.
아, 누가 나 대신 연락 관리해주고 질문에 답변해주면 좋겠다..
그리고 마침 AI 기업을 다니는 제게 한 가지 아이디어가 떠올랐죠. 그게 바로 AI 상담봇이었습니다.
은행같은 대기업들도 AI가 상담해주고 하는데, 개인의 정보를 학습시켜서 AI가 상담해주면 어떨까? 라는 생각에 그런 서비스를 지원하는 SaaS 툴을 찾기 시작했고, 그렇게 찾은 서비스가 "Chatbase"입니다.
참고! 사진에서 말하는 RAG(Retrieval-Augmented Generation)에 대해 쉽게 말하면,
ChatGPT와 같은 기존의 LLM 모델에 특정 정보를 학습시켜 그 정보들에 대해 답변하도록 돕는 기술입니다.
Chatbase는 개인으로도 약 2~30분이면 그럴싸한 AI 챗봇 하나를 무료로 만들 수 있고, 나름 최신 LLM 모델로 학습도 가능하며, 무엇보다 노션 웹사이트 지원과 한글 지원도 됩니다. 물론 용량은 작지만, 월 몇만 명이 들어오는 유명한 웹페이지가 아니기 때문에 적은 메시지 한도로도 충분하다고 판단했습니다.
이제, Chatbase를 사용하는 방법을 알려드리겠습니다. (파란색 글자 주목!)
1. 우선, 아래 공식 웹사이트로 가서 "Try for Free"를 눌러 간단히 회원가입을 합니다.
2. 가입절차가 끝나면 나오는 첫 화면에서, 가운데 "New AI Agent"를 누릅니다.
Usage는 사용량을 볼 수 있고, Setting에선 프로필과 결제정보를 설정할 수 있음3. 이후 나오는 "Create New Agent" 화면에서 내가 담을 "지식"을 넣으면 되는데요.
Files에 pdf나 관련 파일을 넣을 수도 있고, Text에서 직접 정보를 입력해도 됩니다.
Website에 외부 사이트를 넣을 수도 있고, Q&A에 직접 질의응답 시나리오를 넣어도 됩니다.
이 때 Notion의 경우에는 Import from Notion 버튼을 눌러 내 노션 워크스페이스를 연결한 뒤, "내 포트폴리오를 담은 페이지"를 연결하면 됩니다.
본인은 이력서 pdf, 만든 notion 페이지, 브런치 글들, Q&A까지 총 10개를 등록했고, size는 충분했음4. 지식을 다 담고 우측 SOURCES 박스에"Train Agent"를 누르면 Playground 화면으로 이동합니다.
여기서 우리가 앞으로 자주 사용하게 될 상단 메뉴는 다음과 같습니다.
"Playground", "Activity", "Sources", "Connect", "Settings" (나머지는 유료입니다.)
5. 일단 Settings에 들어가서, 아래와 같이 챗봇 세팅을 해줍니다.
5-1. AI (필수)
원하는 모델 선택하고, Instructions을 입력합니다. 기본으로 제공해주는 Instructions가 있지만, 좀 더 개인화해서 쓰고 싶다면 Gemini와 같은 아무 LLM 모델에게 물어보면 됩니다. Temperature은 포트폴리오 상담챗봇이라는 가정 하에, 건드리지 않아도 됩니다.
* Instructions : 쉽게 말해, 나만의 비서에게 "정체성"을 심어주는 명령어라고 생각하시면 됩니다.
* Temperature : "AI가 얼마나 답변을 창의적으로 할거냐"이고, 숫자가 낮을수록 주어진 정보 그대로 응답한다는 의미입니다.
5-2. Chat Interface (필수)
채팅 디자인을 조절하는 탭입니다. 오른쪽에 미리보기가 제공되니, 여러 기능을 몇 번 만져보시면 어떻게 꾸밀지 감이 오실 겁니다.
5-3. Security (Visibility만 필수)
Visibility는 공개 여부인데, 무조건 public으로 선택해야 합니다. (그래야 내 웹페이지에 가져올 수 있어요.) Rate limiting은 x초동안 y개 메시지만 보낼 수 있는지 설정할 수 있고, 그 밑에는 Rate limit을 초과했을 때 어떤 메시지를 띄울지를 설정할 수 있습니다.
5-4. Leads (선택)
누군가 챗봇을 눌러 첫 번째 질의응답이 끝나면, 그들에게 "연락처"를 요구할 수 있습니다. 사진처럼 정의하실 수 있어요.
6. 상단 "Connect" 메뉴, Embed 탭에서 "Embed a chat bubble"을 선택하고, Configuration의 "www.chatbase.co" 아래에 있는 코드를 Copy해주세요.
7. oopy 관리자 화면으로 돌아와서, HTML 편집 탭에서 <body>에 복사한 코드를 붙여넣으세요.
► 버튼을 누르면 미리보기를 할 수 있고, 저장을 누르면 최종 완료됩니다.
이제 내 웹사이트에 나만을 소개하는 상담봇이 짜잔! 나타납니다.
그런데, 저는 여기서 조금 더 욕심을 부렸죠.
여기에 더 추가할만한 AI 서비스가 있을까?
그 마지막 제작기, 다음 글에서 이어서 설명하겠습니다.
그래서, 마지막 페이지로.
