<“아임웹”으로 구축한 자사 홈페이지 초기화면>
제가 운영하고 있는 회사 홈페이지(www.miraeedu.com)는 노코드로 홈페이지를 제작할 수 있는 아임웹(https://imweb.me/)으로 제작한 사이트로 고객 응대와 상담을 위한 생성형AI 챗봇을 연동시키키 위해 벨루가(https://veluga.app/)의 챗봇을 연동하여 테스트를 진행중이다.
벨루가 챗봇은 챗GPT의 유료버전에서 사용할 수 있는 GPTS로 만든 맞춤형 챗봇보다 몇 가지 장점을 가지고 있는 챗봇으로 챗봇의 링크 주소만 알고 있으면 누구나 회원가입이나 프로그램 설치없이 사용할 수 있다.
챗GPT API를 이용한 국내 토종 챗봇으로 특히, 검색증강생성(RAG) 기술을 접목하고 있으며 나만의 데이터나 웹 링크 입력만으로도 나만의 챗봇을 만들어 사용할 수 있는 플랫폼이다.
※ 검색증강생성(Retrieval-Augmented Generation)이란?
검색(retrieval)과 생성(generation). 쉽게 말해, RAG는 먼저 관련 정보를 찾아내고(검색), 그 정보를 기반으로 새로운 텍스트를 생성하는 방식으로 작동합니다.
예를 들어, "검색증강생성이 무엇인가요?"라는 질문이 주어졌을 때, RAG 시스템은 먼저 이 주제에 대한 정보가 담긴 문서나 데이터를 찾아냅니다. 그 다음, 찾아낸 정보를 분석하고 이해하여, 질문에 대한 명확하고 정확한 답변을 생성합니 다.
이 과정은 마치 사람이 정보를 찾기 위해 책이나 인터넷을 검색한 뒤, 그 정보를 바탕으로 질문에 답하는 것과 유사합니다. RAG 기술은 특히 정보가 방대하고 다양한 분야에서 유용하게 활용될 수 있으며, 사용자에게 더 정확하고 풍부한 정보를 제공하는 데 도움을 줍니다.
자세한 설명 : https://aws.amazon.com/ko/what-is/retrieval-augmented-generation/
<자사 홈페이지에 “벨루가 챗봇”을 연동한 모습>
하지만 상기 그림에서 보다시피 벨루가 챗봇은 벨루가에서 제공하는 채널 위젯 스크립트를 홈페이지에 적용하면 우측 하단에 작게 보이고 있어 가독성에서 아쉬움이 있었다.
가독성이 아쉬운 이유는 벨루가에서 제공하는 채널 위젯용 스크립트는 위치 이동과 크기 조절에 대한 가이드 없었기에 수 많은 시행착오와 주변의 도움을 받아 벨루가 챗봇에서 위치 이동과 크기 조절을 해주는 <BODY>영역의 스크립트를 아래와 같이 공유합니다.
====<위치 조정>====
<style> #veluga-plugin-container { bottom:64px !important; right:64px !important; } </style>
※ 설명
이 CSS 코드는 웹페이지에서 특정 요소의 위치를 정하는 방법을 설명하고 있습니다. 여기서 사용된 요소는 'veluga-plugin-container'라는 ID를 가진 요소입니다. 각 부분에 대해 쉽게 설명해 보겠습니다:
<style> 태그: 이 태그는 웹페이지에 스타일 정보를 추가할 때 사용됩니다. 이 안에 있는 내용은 웹페이지의 디자인을 결정하는 데 도움을 줍니다.
#veluga-plugin-container: 이것은 CSS 선택자입니다. 웹페이지에서 ID가 'veluga-plugin-container'인 요소를 찾아 스타일을 적용합니다. ID 선택자는 '#' 기호로 시작합니다.
{ bottom: 64px !important; right: 64px !important; }: 이 부분은 선택된 요소의 위치를 설정합니다.
bottom: 64px는 웹페이지의 아래쪽 가장자리로부터 64픽셀 위에 요소를 배치하라는 의미입니다.
right: 64px는 웹페이지의 오른쪽 가장자리로부터 64픽셀 왼쪽에 요소를 배치하라는 의미입니다.
!important는 이 위치 설정이 다른 어떤 스타일보다 우선적으로 적용되어야 함을 나타냅니다. 이는 다른 스타일 규칙이 있어도 이 규칙을 무시하고 이 위치 설정을 적용하라는 지시입니다.
결과적으로, 이 코드는 'veluga-plugin-container'라는 요소를 웹페이지의 오른쪽 아래 구석에서 각각 64픽셀 떨어진 위치에 정확하게 배치하도록 합니다. 이런 방식으로 특정 요소의 위치를 정확하게 조절할 수 있습니다.
====<크기 조정>====
<style>
#veluga-plugin-container > div > button { width:120px !important; height:120px !important; }
#veluga-plugin-container > div > button > img { width:120px !important; height:120px !important; }
</style>
※ 설명
위에 제시된 코드는 웹페이지의 특정 버튼과 그 안의 이미지에 대한 크기를 설정하는 CSS (Cascading Style Sheets) 스타일 코드입니다. 각 부분을 단계별로 쉽게 설명하겠습니다:
#veluga-plugin-container > div > button:
이 선택자는 'veluga-plugin-container'라는 ID를 가진 요소 안에 있는 첫 번째 'div' 요소, 그리고 그 안의 'button' 요소를 지정합니다.
여기서 '>' 기호는 "직접 자식"을 의미합니다. 즉, 'veluga-plugin-container' 바로 안에 있는 'div', 그리고 그 'div' 바로 안에 있는 'button'만 선택됩니다.
{ width:150px !important; height:150px !important; }:
이 부분은 선택된 'button'의 너비(width)와 높이(height)를 각각 150픽셀로 설정합니다.
!important는 이 스타일 규칙 이 다른 스타일보다 우선적으로 적용되어야 함을 나타내는 키워드입니다. 즉, 다른 어떤 스타일 규칙들이 있더라도 이 크기 설정이 가장 중요하게 적용됩니다.
#veluga-plugin-container > div > button > img:
이 선택자는 'veluga-plugin-container' 안의 'div', 그 안의 'button', 그리고 그 'button' 안의 'img'를 지정합니다.
여기서 'img'는 이미지 요소를 의미합니다.
{ width:150px !important; height:150px !important; }:
이 부분은 버튼 안에 있는 이미지의 너비와 높이를 150픽셀로 설정합니다. 이로써 이미지도 버튼과 동일한 크기를 갖게 됩니다.
결과적으로, 이 CSS 코드는 특정 버튼과 그 안의 이미지를 정사각형 모양으로, 크기를 너비와 높이가 모두 150픽셀이 되도록 균일하게 설정하는 데 사용됩니다. 이러한 스타일 설정은 웹페이지에서 버튼과 이미지가 눈에 잘 띄고 일관된 모양을 갖도록 도와줍니다.