<![CDATA[데브스타의 블로그]]>https://weppykr.hashnode.devRSS for NodeThu, 18 Jun 2026 19:38:13 GMT60<![CDATA[지식 기반 Ai 챗봇을 이용한 게임 가이드 구현]]>https://weppykr.hashnode.dev/aihttps://weppykr.hashnode.dev/aiSat, 27 Jul 2024 15:00:00 GMT게임 시스템은 매우 복잡하기 때문에, 게이머의 편의를 위해 각종 튜토리얼과 가이드를 제공하는 것이 중요합니다. 그러나 튜토리얼 작업에는 많은 시간이 소요되고, 시스템이 변경될 때마다 이를 수정해야 하는 어려움이 있습니다.

지식 기반 AI 챗봇을 이용하여 게이머가 개발사의 공식 정보를 쉽게 확인할 수 있도록 하고, 개발사는 튜토리얼 개발에 소요되는 리소스를 줄일 수 있는 방법을 Unity WebView 와 Sendbird AI chatbot을 이용하여 구현해 보았습니다.

챗봇에게 적절한 정보를 제공하면, 다음과 같은 질문에 대한 답변도 가능합니다

  • 전설 아이템 제작 하는 방법 알려줄 수 있어?

  • 레벨 10에 적당한 사냥터는 어디일까?

  • 공격력이 가장 높은 검은 어떤 거야? 어디서 획득할 수 있어?

  • 10번 스테이지 보스 공략법 알려줄 수 있어?

이처럼 AI 챗봇을 통해 게이머는 언제든지 필요한 정보를 손쉽게 얻을 수 있으며, 이는 게임 플레이의 몰입도를 높이는 데 큰 도움이 될 것입니다.

준비 사항

전체 과정

  1. Unity 프로젝트

    1. Chatbot을 연결할 HTML 파일 추가

    2. HTML 파일 오픈을 위한 WebView 패키지 추가

    3. WebView 오픈을 위한 MonoBehaviour 스크립트 추가

  2. Sendbird 대시보드

    1. 대시보드에 접속하여 계정을 만들고 새로운 Application을 생성합니다.

    2. AI chatbot 을 생성하고 게임 정보를 작성한 PDF 파일을 등록합니다

    3. 대시보드에서 Application ID 와 Bot ID 를 복사하여 HTML 파일에 적용합니다

  3. 유니티 에디터에서 Play or Build 하여 확인합니다.

구현

  1. Unity 프로젝트에 HTML 파일 추가

    1. Assets/StreamingAssets 폴더에 Chatbot.html 파일을 추가하고 다음과 같이 작성합니다.

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Chatbot</title>
     <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
     <script>process = { env: { NODE_ENV: '' } }</script>
     <script crossorigin src="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/index.umd.js"></script>
     <link href="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/style.css" rel="stylesheet" />
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <style>
         html,body { height:100% }
         #aichatbot-widget-close-icon { display: none }
         #scale-container {
             transform: scale(1);
             transform-origin: bottom right;
             height: 100%;
             zoom: 3;
         }
     </style>
 </head>
 <body>
 <div id="root"></div>

 <script type="text/babel">
     const { ChatWindow } = window.ChatAiWidget
     const App = () => {
         <!-- Replace YOUR_APPLICATION_ID and YOUR_BOT_ID with the actual application ID and bot ID you intend to use. -->
         return (
             <div id="scale-container">
                 <ChatWindow
                     applicationId="YOUR_APPLICATION_ID"
                     botId="YOUR_BOT_ID"
                 />
             </div>
         )
     }
     ReactDOM.createRoot(document.querySelector('#root')).render(<App/>);
 </script>
 </body>
 </html>

  2. Unity WebView 패키지 추가

    1. Package Manager의 왼쪽 상단 메뉴에서 Install package from git URL…을 클릭합니다.

    2. https://github.com/gree/unity-webview.git?path=/dist/package를 입력하고 Install 버튼을 클릭하여 설치합니다.

  3. 웹뷰를 오픈하기 위한 MonoBehaviour 스크립트 작성

    1. Assets/Scripts 폴더에 ChatbotWebView.cs 파일을 추가하고 버튼 클릭 시 HTML 파일을 로드하는 스크립트를 다음과 같이 작성합니다.

       public class ChatbotWebView : UnityEngine.MonoBehaviour
 {
     private UnityEngine.UI.Button _openButton;
     private WebViewObject _webViewObject;
     private void Start()
     {
         _openButton = base.transform.GetComponent<UnityEngine.UI.Button>();
         _openButton.onClick.AddListener(OnOpenChatbot);
     }
     private void OnOpenChatbot()
     {
         string strUrl = $"file://{UnityEngine.Application.streamingAssetsPath}/Chatbot.html";
         _webViewObject = new UnityEngine.GameObject("ChatbotWebViewObject").AddComponent<WebViewObject>();
         _webViewObject.Init();
         _webViewObject.LoadURL(strUrl);
         _webViewObject.SetVisibility(true);
         _webViewObject.SetMargins(200, 400, 50, 400);
     }
 }

  4. Button UI 생성 및 ChatbotWebView 스크립트 추가

    1. Button UI 를 생성합니다.

    2. 생성된 Button 에 ChatbotWebView 컴포넌트를 추가합니다

  5. Sendbird App 과 Ai chatbot(30일 무료)을 생성합니다

    1. https://dashboard.sendbird.com 에 접속합니다

    2. Application 을 생성합니다

    3. 왼쪽 탭에서 AI chatbot을 클릭-> Get started 버튼을 클릭하여 생성합니다

    4. 필요할 경우 설정값을 변경하고 Next 버튼을 클릭합니다

    5. 게임 정보가 있는 PDF 파일을 등록합니다(PDF 예시)

       게임제목 : 원소의 왕국: 심연과 승천 던전 정보
 던전 1: 불의 동굴
 난이도: 쉬움
 • 몬스터 종류:
 • 화염 슬라임
 • HP: 100, MP: 50, 공격력: 30, 방어력: 10
 던전 2: 얼음의 성채
 난이도: 중간
 • 몬스터 종류:
 • 얼음 골렘
 • HP: 300, MP: 100, 공격력: 50, 방어력: 40
 얼음검 (Ice Sword)
 • 재료:
 • 얼음 조각 x3 (획득처: 얼음 골렘, 빙하 늑대)
 • 빙하의 핵 x2 (획득처: 얼음 정령, 서리 마녀)
 • 강철 조각 x1 (획득처: 던전 상점)
 • 조합 방법: 얼음 조각과 빙하의 핵을 강철 조각에 주입하여 냉각 후 단련합니다.

    6. 생성이 완료 되었습니다

6. Application ID 와 Bot ID를 복사하여 HTML 에 적용합니다

  1. Application ID를 복사하여StreamingAssets/Chatbot.html 파일의 YOUR_APPLICATION_ID 와 교체합니다

  2. Bot ID를 복사하여StreamingAssets/Chatbot.html 파일의 YOUR_BOT_ID 와 교체합니다

7. 유니티 에디터에서 Play or Build 하여 확인합니다.

]]><![CDATA[Unity 에서 원격으로 사용가능한 Console 패키지]]>https://weppykr.hashnode.dev/unity-consolehttps://weppykr.hashnode.dev/unity-consoleFri, 22 Dec 2023 15:00:00 GMTUnity로 개발하는 동안 유용하게 사용하던 콘솔 에디터를 오픈 소스로 공개했습니다.

네트워크 연결을 통해 앱에서 생성된 로그를 에디터에서 원격으로 확인할 수 있고, 사용자 정의 명령어를 실행할 수 있어 다양한 테스트와 디버깅에 유용합니다.

Unity 패키지 매니저를 사용하여 쉽게 설치하고 사용할 수 있습니다.

Introduction

RemoteConsole 은 원격으로 전송 되는 로그를 통해 디버깅을 하고, 사용자 정의 명령어를 이용하여 개발 편의성을 높이는 강력한 툴입니다.

  • 유니티 기본 콘솔의 모든 기능을 지원합니다

  • 빌드 된 앱과 원격 으로 연결되어 사용자 정의 명령어 를 실행합니다

  • 빌드 된 앱과 원격 으로 연결되어 로그 를 확인할 수 있습니다

  • 원격 으로 연결 된 앱에 Pause, Step 기능을 이용하여, 프레임 단위 실행이 가능합니다

  • 로그 발생 시점의 시간, 프레임 카운트, 오브젝트 를 쉽게 확인 가능합니다

  • 편리한 로그 필터 기능을 제공합니다

  • 연결된 앱의 시스템 정보 및 간단한 프로파일(FPS, UsedHeap) 정보를 확인 가능합니다

  • 로그 발생 게임오브젝트와 소스코드 를 편리하게 확인할수 있습니다.

Features

사용자 정의 명령어

플레이 중 각종 값을 변경 가능하며 테스트나 디버깅에 유용합니다

  1. 스크립트에서 SPlugin.SCommand.Register 함수를 이용하여 사용자 정의 명령어를 등록합니다

  2. SConsole 에디터의 CommandView 에서 등록된 사용자 정의 명령어를 확인 가능합니다

  3. 사용자 정의 명령어의 값을 변경합니다

로그

  • UnityEngine.Debug 이용

    1. 스크립트에서 UnityEngine.Debug.Log 함수를 이용하여 로그를 작성합니다

    2. SConsole 에디터의 Preferences 에서 Show UnityDebugLog 를 활성화 합니다

    3. SConsole 에디터의 LogView에서 로그 확인이 가능합니다

  • SPlugin.SDebug 이용

    1. 스크립트에서 SPlugin.SDebug.Log 함수를 이용하여 로그를 작성합니다

    2. SConsole 에디터의 LogView에서 로그 확인이 가능합니다

편리한 필터 기능

  • Search 를 이용하여 로그 찾기

  • Exclude 를 이용하여 로그 제외하기

  • QuickSearch 를 이용하여 로그 찾기

quick_search.gif

Pause, Step

원격으로 연결된 앱에서 프레임 단위 플레이가 가능하여 디버깅에 도움이 됩니다

원격 접속

  • 로컬 네트워크에서 접속 가능한 앱을 찾아 연결

    1. SConsole 에디터의 ApplicationView 에서 접속이 가능한 앱을 찾습니다

    2. 연결 가능한 앱이 있을 경우 리스트에 등록 됩니다

    3. 앱을 선택 합니다

  • 로컬 네트워크의 사설 IP 또는 공인 IP 를 이용하여 앱 연결

    1. SConsole 에디터의 ApplicationView 에서 로컬 네트워크의 사설 IP 또는 공인 IP를 입력합니다

    2. Connect 버튼을 눌러 연결 합니다

connect_to_remote_app.gif

시스템 및 프로파일 정보

  1. SConsole 에디터의 ApplicationView 에서 앱 리스트를 확인합니다

  2. ShowInfo 버튼을 눌러 시스템 및 프로파일 정보를 확인합니다

systeminfo.png

Getting started

  1. SRemoteConsole 설치

    1. 유니티 에디터에서 Window/Package Manager 를 클릭 합니다

      select_package_manager.png

    2. Package Manager 의 왼쪽 상단 + 버튼을 클릭하고 Add package from git URL... 을 선택합니다

      select_add_menu_with_git.png

    3. SRemoteConsole 패키지의 git 주소를 입력 합니다

      https://github.com/hope1026/unity_s_remote_console_package.git

    4. Add 버튼을 클릭하면 패키지가 설치 됩니다

      add_git_url.png

  2. SRemoteConsole 실행

    1. 유니티 에디터에서 Window/SPlugin/SConsole 를 클릭 합니다

      select_remote_console.png

    2. 스크립트에 로그를 작성합니다

      • SPlugin.SDebug.Log("log");

    3. SConsole 에디터에서 로그를 확인 합니다

Disable SRemoteConsole

  • Project Settings -> Player -> Scripting Define Symbols 에 DISABLE_SREMOTE_CONSOLE 를 추가하여 비활성화 할수 있습니다

    • 에디터에서 SRemoteConsole은 실행되지만 Runtime에 동작하지 않아 릴리즈 배포시 유용하게 사용할수 있습니다

disable_sremote_console_define.png

더 자세한 정보 보기

]]>