1<!DOCTYPE html> 2<html lang="ko-KR" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Klleon SDK</title> 7 <meta name="description" content="AI Avatar Chat SDK Documentation"> 8 <meta name="generator" content="VitePress v1.6.4"> 9 <link rel="preload stylesheet" href="/assets/style.QXCgbFxm.css" as="style"> 10 <link rel="preload stylesheet" href="/vp-icons.css" as="style"> 11 12
12<script type="module" src="/assets/app.rm2T2PfK.js"></script>
12 13 <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin=""> 14 <link rel="modulepreload" href="/assets/chunks/framework.B72_uj9U.js"> 15 <link rel="modulepreload" href="/assets/chunks/theme.CPSVtv6R.js"> 16 <link rel="modulepreload" href="/assets/chunks/katex.BkgLa5T_.js"> 17 <link rel="modulepreload" href="/assets/chunks/dagre-KLK3FWXG.Dxu857DN.js"> 18 <link rel="modulepreload" href="/assets/chunks/cose-bilkent-S5V4N54A.CGnpFBoQ.js"> 19 <link rel="modulepreload" href="/assets/chunks/c4Diagram-IC4MRINW.COMgmIre.js"> 20 <link rel="modulepreload" href="/assets/chunks/flowDiagram-PKNHOUZH.Dvxa5IzJ.js"> 21 <link rel="modulepreload" href="/assets/chunks/erDiagram-INFDFZHY.C_ahEiGi.js"> 22 <link rel="modulepreload" href="/assets/chunks/gitGraphDiagram-K3NZZRJ6.CF6O9gPR.js"> 23 <link rel="modulepreload" href="/assets/chunks/ganttDiagram-A5KZAMGK.C7W2GGH2.js"> 24 <link rel="modulepreload" href="/assets/chunks/infoDiagram-LFFYTUFH.LpHn6IY1.js"> 25 <link rel="modulepreload" href="/assets/chunks/pieDiagram-SKSYHLDU.DFUVr-Qh.js"> 26 <link rel="modulepreload" href="/assets/chunks/quadrantDiagram-337W2JSQ.D8CkEZRu.js"> 27 <link rel="modulepreload" href="/assets/chunks/xychartDiagram-JWTSCODW.CUg5opUY.js"> 28 <link rel="modulepreload" href="/assets/chunks/requirementDiagram-Z7DCOOCP.DzYxsb8R.js"> 29 <link rel="modulepreload" href="/assets/chunks/sequenceDiagram-2WXFIKYE.FkTjgHGa.js"> 30 <link rel="modulepreload" href="/assets/chunks/classDiagram-VBA2DB6C.B2KC-WpE.js"> 31 <link rel="modulepreload" href="/assets/chunks/classDiagram-v2-RAHNMMFH.B2KC-WpE.js"> 32 <link rel="modulepreload" href="/assets/chunks/stateDiagram-RAJIS63D.CaS2xWxM.js"> 33 <link rel="modulepreload" href="/assets/chunks/stateDiagram-v2-FVOUBMTO.C6ICvFac.js"> 34 <link rel="modulepreload" href="/assets/chunks/journeyDiagram-4ABVD52K.B09XTPhy.js"> 35 <link rel="modulepreload" href="/assets/chunks/timeline-definition-YZTLITO2.D0BEPVy0.js"> 36 <link rel="modulepreload" href="/assets/chunks/mindmap-definition-YRQLILUH.6SEiuWQ5.js"> 37 <link rel="modulepreload" href="/assets/chunks/kanban-definition-K7BYSVSG.BGts8rXj.js"> 38 <link rel="modulepreload" href="/assets/chunks/sankeyDiagram-WA2Y5GQK.DPrublFY.js"> 39 <link rel="modulepreload" href="/assets/chunks/diagram-P4PSJMXO.DAHl7wxx.js"> 40 <link rel="modulepreload" href="/assets/chunks/diagram-IFDJBPK2.D4Cr9zs1.js"> 41 <link rel="modulepreload" href="/assets/chunks/blockDiagram-WCTKOSBZ.DQDBNWbu.js"> 42 <link rel="modulepreload" href="/assets/chunks/architectureDiagram-2XIMDMQ5.Bt5O6urO.js"> 43 <link rel="modulepreload" href="/assets/chunks/ishikawaDiagram-PHBUUO56.CsDt5_kI.js"> 44 <link rel="modulepreload" href="/assets/chunks/vennDiagram-LZ73GAT5.hRaBCzXN.js"> 45 <link rel="modulepreload" href="/assets/chunks/diagram-E7M64L7V.BjqYeyM5.js"> 46 <link rel="modulepreload" href="/assets/chunks/virtual_mermaid-config.DDnGl6nM.js"> 47 <link rel="modulepreload" href="/assets/ko_index.md.CLtOqO_J.lean.js"> 48
48<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
48 49
49<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
49 50 </head> 51 <body> 52 <div id="app"><div class="Layout" data-v-a9a9e638><!--[--><!--]--><!--[--><span tabindex="-1" data-v-492508fc></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-492508fc>Skip to content</a><!--]--><!----><header class="VPNav" data-v-a9a9e638 data-v-f1e365da><div class="VPNavBar" data-v-f1e365da data-v-822684d1><div class="wrapper" data-v-822684d1><div class="container" data-v-822684d1><div class="title" data-v-822684d1><div class="VPNavBarTitle has-sidebar" data-v-822684d1 data-v-0f4f798b><a class="title" href="/ko/" data-v-0f4f798b><!--[--><!--]--><!----><span data-v-0f4f798b>Klleon SDK</span><!--[--><!--]--></a></div></div><div class="content" data-v-822684d1><div class="content-body" data-v-822684d1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-822684d1><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-822684d1 data-v-e6d46098><span id="main-nav-aria-label" class="visually-hidden" data-v-e6d46098> Main Navigation </span><!--[--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-e6d46098 data-v-04f5c5e9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-04f5c5e9><span class="text" data-v-04f5c5e9><!----><span data-v-04f5c5e9>v2.0.0</span><span class="vpi-chevron-down text-icon" data-v-04f5c5e9></span></span></button><div class="menu" data-v-04f5c5e9><div class="VPMenu" data-v-04f5c5e9 data-v-7dd3104a><div class="items" data-v-7dd3104a><!--[--><!--[--><div class="VPMenuLink" data-v-7dd3104a data-v-acbfed09><a class="VPLink link" href="/" data-v-acbfed09><!--[--><span data-v-acbfed09>v2.0.0 (latest)</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-822684d1 data-v-c80d9ad0 data-v-04f5c5e9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-04f5c5e9><span class="text" data-v-04f5c5e9><span class="vpi-languages option-icon" data-v-04f5c5e9></span><!----><span class="vpi-chevron-down text-icon" data-v-04f5c5e9></span></span></button><div class="menu" data-v-04f5c5e9><div class="VPMenu" data-v-04f5c5e9 data-v-7dd3104a><!----><!--[--><!--[--><div class="items" data-v-c80d9ad0><p class="title" data-v-c80d9ad0>íêµì´</p><!--[--><div class="VPMenuLink" data-v-c80d9ad0 data-v-acbfed09><a class="VPLink link" href="/en/" data-v-acbfed09><!--[--><span data-v-acbfed09>English</span><!--]--></a></div><div class="VPMenuLink" data-v-c80d9ad0 data-v-acbfed09><a class="VPLink link" href="/ja/" data-v-acbfed09><!--[--><span data-v-acbfed09>æ¥æ¬èª</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-822684d1 data-v-af096f4a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-af096f4a data-v-e40a8bb6 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-e40a8bb6></span><span class="vpi-moon moon" data-v-e40a8bb6></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-822684d1 data-v-925effce data-v-04f5c5e9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-04f5c5e9><span class="vpi-more-horizontal icon" data-v-04f5c5e9></span></button><div class="menu" data-v-04f5c5e9><div class="VPMenu" data-v-04f5c5e9 data-v-7dd3104a><!----><!--[--><!--[--><div class="group translations" data-v-925effce><p class="trans-title" data-v-925effce>íêµì´</p><!--[--><div class="VPMenuLink" data-v-925effce data-v-acbfed09><a class="VPLink link" href="/en/" data-v-acbfed09><!--[--><span data-v-acbfed09>English</span><!--]--></a></div><div class="VPMenuLink" data-v-925effce data-v-acbfed09><a class="VPLink link" href="/ja/" data-v-acbfed09><!--[--><span data-v-acbfed09>æ¥æ¬èª</span><!--]--></a></div><!--]--></div><div class="group" data-v-925effce><div class="item appearance" data-v-925effce><p class="label" data-v-925effce>í ë§</p><div class="appearance-action" data-v-925effce><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-925effce data-v-e40a8bb6 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-e40a8bb6></span><span class="vpi-moon moon" data-v-e40a8bb6></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-822684d1 data-v-5dea55bf><span class="container" data-v-5dea55bf><span class="top" data-v-5dea55bf></span><span class="middle" data-v-5dea55bf></span><span class="bottom" data-v-5dea55bf></span></span></button></div></div></div></div><div class="divider" data-v-822684d1><div class="divider-line" data-v-822684d1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-a9a9e638 data-v-070ab83d><div class="container" data-v-070ab83d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-070ab83d><span class="vpi-align-left menu-icon" data-v-070ab83d></span><span class="menu-text" data-v-070ab83d>ë©ë´</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-070ab83d data-v-168ddf5d><button data-v-168ddf5d>맨 ìë¡</button><!----></div></div></div><aside class="VPSidebar" data-v-a9a9e638 data-v-18756405><div class="curtain" data-v-18756405></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-18756405><span class="visually-hidden" id="sidebar-aria-label" data-v-18756405> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-9e426adc><section class="VPSidebarItem level-0 has-active" data-v-9e426adc data-v-a4b0d9bf><div class="item" role="button" tabindex="0" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><h2 class="text" data-v-a4b0d9bf>ììí기</h2><!----></div><div class="items" data-v-a4b0d9bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>ìê°</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/guide/getting-started.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>ì¤ì¹ ë° ì¤ì </p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-9e426adc><section class="VPSidebarItem level-0" data-v-9e426adc data-v-a4b0d9bf><div class="item" role="button" tabindex="0" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><h2 class="text" data-v-a4b0d9bf>API</h2><!----></div><div class="items" data-v-a4b0d9bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/api/init.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>init</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/api/lifecycle.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>ìëª ì£¼ê¸°</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/api/messaging.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>ë©ìì§</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/api/stt.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>ìì± (STT)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/api/avatar.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>ìë°í ì ì´</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/api/events.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>ì´ë²¤í¸</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-9e426adc><section class="VPSidebarItem level-0" data-v-9e426adc data-v-a4b0d9bf><div class="item" role="button" tabindex="0" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><h2 class="text" data-v-a4b0d9bf>ì»´í¬ëí¸</h2><!----></div><div class="items" data-v-a4b0d9bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div>
52<a class="VPLink link link" href="/ko/components/avatar-container.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>avatar-container</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/components/chat-container.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>chat-container</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-9e426adc><section class="VPSidebarItem level-0" data-v-9e426adc data-v-a4b0d9bf><div class="item" role="button" tabindex="0" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><h2 class="text" data-v-a4b0d9bf>ê°ì´ë</h2><!----></div><div class="items" data-v-a4b0d9bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/guides/error-handling.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>ìë¬ ì²ë¦¬</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/guides/typescript.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>TypeScript</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/guides/migration-v1.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>v1 ë§ì´ê·¸ë ì´ì
</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-9e426adc><section class="VPSidebarItem level-0" data-v-9e426adc data-v-a4b0d9bf><div class="item" role="button" tabindex="0" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><h2 class="text" data-v-a4b0d9bf>ìì </h2><!----></div><div class="items" data-v-a4b0d9bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/examples/vanilla-js.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Vanilla JS</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/examples/react.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>React</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-9e426adc><section class="VPSidebarItem level-0" data-v-9e426adc data-v-a4b0d9bf><div class="item" role="button" tabindex="0" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><h2 class="text" data-v-a4b0d9bf>íë«í¼ SDK (Experimental)</h2><!----></div><div class="items" data-v-a4b0d9bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/platforms/react-native.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>React Native</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/ko/platforms/electron.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Electron</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-a9a9e638 data-v-91765379><div class="VPDoc has-sidebar has-aside" data-v-91765379 data-v-83890dd9><!--[--><!--]--><div class="container" data-v-83890dd9><div class="aside" data-v-83890dd9><div class="aside-curtain" data-v-83890dd9></div><div class="aside-container" data-v-83890dd9><div class="aside-content" data-v-83890dd9><div class="VPDocAside" data-v-83890dd9 data-v-6d7b3c46><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-6d7b3c46 data-v-b38bf2ff><div class="content" data-v-b38bf2ff><div class="outline-marker" data-v-b38bf2ff></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-b38bf2ff>목차</div><ul class="VPDocOutlineItem root" data-v-b38bf2ff data-v-3f927ebe><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-6d7b3c46></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-83890dd9><div class="content-container" data-v-83890dd9><!--[--><!--]--><main class="main" data-v-83890dd9><div style="position:relative;" class="vp-doc _ko_" data-v-83890dd9><div>
52<h1 id="klleon-sdk" tabindex="-1">Klleon SDK <a class="header-anchor" href="#klleon-sdk" aria-label="Permalink to "Klleon SDK"">â</a></h1><p>Klleon SDKë ì¹ ì í리ì¼ì´ì ì í´ë ì¨ì ì¤ìê° ì¸í°ëí°ë¸ ìë°í를 íµí©íë JavaScript SDKì ëë¤. WebRTC ì°ê²°ê³¼ ìê·¸ëë§ì ì¶ìííì¬ API í¸ì¶ë§ì¼ë¡ ìë°í ëí를 구íí©ëë¤.</p><h2 id="áá ®áá -áá µáá ³á¼" tabindex="-1">주ì ê¸°ë¥ <a class="header-anchor" href="#áá ®áá -áá µáá ³á¼" aria-label="Permalink to "주ì 기ë¥"">â</a></h2><ul><li><code><script></code> íê·¸ë¡ ì¤ì¹, UMD ë²ë¤ ì ê³µ</li><li>í ì¤í¸/ìì± ìë°©í¥ íµì </li><li>기본 Web Component ì ê³µ ëë ì§ì UI 구ì±</li><li>ì½ë°± ê¸°ë° ì´ë²¤í¸ 구ë (ìí, ìê·¸ë, ìë¬)</li><li>TypeScript íì ì ì ì ê³µ</li></ul><h2 id="áá ¡áá ¥á«-áá ®á«áá µ-áá ¡áá ¡á¼" tabindex="-1">ì¬ì ì¤ë¹ ì¬í <a class="header-anchor" href="#áá ¡áá ¥á«-áá ®á«áá µ-áá ¡áá ¡á¼" aria-label="Permalink to "ì¬ì ì¤ë¹ ì¬í"">â</a></h2><p>SDK를 ì¬ì©í기 ì ì ë¤ì ì¤ë¹ê° íìí©ëë¤.</p><ol><li><strong>í´ë ì¨ ì¤íëì¤ ê³ì </strong> â <a href="https://www.studio.klleon.io/" target="_blank" rel="noreferrer">í´ë ì¨ ì¤íëì¤</a>ìì ê°ì </li><li><strong>ëë©ì¸ ë±ë¡</strong> â SDK를 ì¬ì©í ì¹ì¬ì´í¸ì <a href="https://www.studio.klleon.io/sdk" target="_blank" rel="noreferrer">ëë©ì¸ ë±ë¡</a> (SDK ê´ë¦¬ ë©ë´)</li><li><strong>SDK í¤ ë°ê¸</strong> â ëë©ì¸ ë±ë¡ í <code>sdk_key</code> ë°ê¸</li><li><strong>ìë°í ID íì¸</strong> â <a href="https://www.studio.klleon.io/avatar" target="_blank" rel="noreferrer">ìë°í 목ë¡</a>ìì <code>avatar_id</code> íì¸ (ID ë³µì¬ê° ê°ë¥í ìë°íë§ SDK ì°ë ê°ë¥)</li></ol><div class="tip custom-block"><p class="custom-block-title">문ì</p><p>ëë©ì¸ ë±ë¡ ëë SDK ì¬ì©ì ì´ë ¤ìì´ ìë¤ë©´ <code>[email protected]</code>ë¡ ë¬¸ìí´ ì£¼ì¸ì.</p></div><h2 id="áá ¡á á ³á«-áá µáá ¡á¨" tabindex="-1">ë¹ ë¥¸ ìì <a class="header-anchor" href="#áá ¡á á ³á«-áá µáá ¡á¨" aria-label="Permalink to "ë¹ ë¥¸ ìì"">â</a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-u1ugs" id="tab-BxIQW1T" checked><label data-title="JavaScript" for="tab-BxIQW1T">JavaScript</label><input type="radio" name="group-u1ugs" id="tab-37d9A9_"><label data-title="React" for="tab-37d9A9_">React</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SDK</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.KlleonSDK;</span></span> 53<span class="line"></span> 54<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ì´ë²¤í¸ ë±ë¡</span></span> 55<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onStatus</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(status));</span></span> 56<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onSignal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data.signal, data.payload));
56</span></span> 57<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(error.code));</span></span> 58<span class="line"></span> 59<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ì´ê¸°í</span></span> 60<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ sdk_key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'YOUR_SDK_KEY'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, avatar_id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'YOUR_AVATAR_ID'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> 61<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sendMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'ìë íì¸ì'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))</span></span> 62<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(e.message));</span></span></code></pre></div><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useEffect, useState } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'react'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 63<span class="line"></span> 64<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AvatarChat</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> 65<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setStatus</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'IDLE'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> 66<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">failed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setFailed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">
66false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> 67<span class="line"></span> 68<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useEffect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> 69<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SDK</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.KlleonSDK;</span></span> 70<span class="line"></span> 71<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onStatus</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setStatus</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(s));</span></span> 72<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onSignal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data.signal, data.payload));</span></span> 73<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(error.code));</span></span> 74<span class="line"></span> 75<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ sdk_key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'YOUR_SDK_KEY'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, avatar_id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'YOUR_AVATAR_ID'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> 76<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> 77<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setFailed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> 78<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'ì´ê¸°í ì¤í¨:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, e.message);</span></span> 79<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span> 80<span class="line"></span> 81<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> 82<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // destroy()ë 미ì´ê¸°í ìíììë ìì íë©°, ì§í ì¤ì¸ init ë¤ë¡ ìë ì§ë ¬íë©ëë¤</span></span> 83<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SDK</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span> 84<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span> 85<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, []);</span></span> 86<span class="line"></span> 87<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isReady</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> status </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'CONNECTED_FINISH'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 88<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> label</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> failed </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'ì°ê²° ì¤í¨'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> isReady </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'ëí ê°ë¥'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'ì°ê²° ì¤'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 89<span class="line"></span> 90<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span> 91<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <></span></span> 92<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">avatar-container</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{ width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }} /></span></span> 93<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>ìí: {label}</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 94<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span> 95<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.KlleonSDK.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sendMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'ìë íì¸ì'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)}</span></span> 96<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">isReady}</span></span> 97<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span> 98<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ì ì¡</span></span> 99<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 100<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </></span></span> 101<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span> 102<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div></div><h2 id="llm-áá ¡á·áá ©" tabindex="-1">LLM 참조 <a class="header-anchor" href="#llm-áá ¡á·áá ©" aria-label="Permalink to "LLM 참조"">â</a></h2><p>LLMìì ì´ ë¬¸ì를 참조íë ¤ë©´ íë ì¸ í ì¤í¸ ë²ì ì ì¬ì©íì¸ì.</p><ul><li><a href="/llms.txt"><code>/llms.txt</code></a> â ìì½ë³¸</li><li><a href="/llms-full.txt"><code>/llms-full.txt</code></a> â ì ì²´ 문ì</li></ul></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><!----></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/ko/guide/getting-started.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>ë¤ì</span><span class="title" data-v-4f9813fa>ì¤ì¹ ë° ì¤ì </span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div> 103
103<script>window.__VP_HASH_MAP__=JSON.parse("{\"en_api_avatar.md\":\"kHzI5Xyu\",\"en_api_events.md\":\"D2-3zRPo\",\"en_api_init.md\":\"CwuQBbKi\",\"en_api_lifecycle.md\":\"BP1VDdTn\",\"en_api_messaging.md\":\"N9HSy539\",\"en_api_stt.md\":\"CxEIZqZG\",\"en_components_avatar-container.md\":\"CUVPn81-\",\"en_components_chat-container.md\":\"DCxHCGUY\",\"en_examples_react.md\":\"OEpflYqZ\",\"en_examples_vanilla-js.md\":\"ejkcu5of\",\"en_guide_getting-started.md\":\"8uCGnjf_\",\"en_guides_error-handling.md\":\"D4eMk8xD\",\"en_guides_migration-v1.md\":\"C-5ZVIBf\",\"en_guides_typescript.md\":\"CS75uXwk\",\"en_index.md\":\"DLkzQuVM\",\"index.md\":\"BBweSlYS\",\"ja_api_avatar.md\":\"CVTspMv5\",\"ja_api_events.md\":\"BgqtyIsp\",\"ja_api_init.md\":\"BSqdg5n4\",\"ja_api_lifecycle.md\":\"Qo464XJV\",\"ja_api_messaging.md\":\"ViAPzi_a\",\"ja_api_stt.md\":\"CTj5RfkY\",\"ja_components_avatar-container.md\":\"8eUx15BW\",\"ja_components_chat-container.md\":\"BhgBL85X\",\"ja_examples_react.md\":\"Dw2cIwuk\",\"ja_examples_vanilla-js.md\":\"Dr42s5SU\",\"ja_guide_getting-started.md\":\"RfZiig-3\",\"ja_guides_error-handling.md\":\"Dv-R2Pom\",\"ja_guides_migration-v1.md\":\"D1eR9Uer\",\"ja_guides_typescript.md\":\"CZI9SgjR\",\"ja_index.md\":\"CZlMhpLj\",\"ko_api_avatar.md\":\"BD5JT5Hy\",\"ko_api_events.md\":\"Dv0DlE3R\",\"ko_api_init.md\":\"DjymXe6V\",\"ko_api_lifecycle.md\":\"Db6UwKO2\",\"ko_api_messaging.md\":\"BeQ756GR\",\"ko_api_stt.md\":\"0JZpBos9\",\"ko_components_avatar-container.md\":\"CBcTRRJK\",\"ko_components_chat-container.md\":\"CKr7OxL3\",\"ko_examples_react.md\":\"CtJ7FhGn\",\"ko_examples_vanilla-js.md\":\"dqPYk7tO\",\"ko_guide_getting-started.md\":\"OW9ibSRE\",\"ko_guides_error-handling.md\":\"C3ss1VgX\",\"ko_guides_migration-v1.md\":\"CBOmfN9r\",\"ko_guides_typescript.md\":\"2u_FxOQG\",\"ko_index.md\":\"CLtOqO_J\",\"ko_platforms_electron.md\":\"DVEwHBuF\",\"ko_platforms_react-native.md\":\"bCuWo2d6\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Klleon SDK\",\"description\":\"AI Avatar Chat SDK Documentation\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"}},\"locales\":{\"ko\":{\"label\":\"íêµì´\",\"lang\":\"ko-KR\",\"link\":\"/ko/\",\"themeConfig\":{\"nav\":[{\"text\":\"v2.0.0\",\"items\":[{\"text\":\"v2.0.0 (latest)\",\"link\":\"/\"}]}],\"sidebar\":{\"/ko/\":[{\"text\":\"ììí기\",\"items\":[{\"text\":\"ìê°\",\"link\":\"/ko/\"},{\"text\":\"ì¤ì¹ ë° ì¤ì \",\"link\":\"/ko/guide/getting-started\"}]},{\"text\":\"API\",\"items\":[{\"text\":\"init\",\"link\":\"/ko/api/init\"},{\"text\":\"ìëª
주기\",\"link\":\"/ko/api/lifecycle\"},{\"text\":\"ë©ìì§\",\"link\":\"/ko/api/messaging\"},{\"text\":\"ìì± (STT)\",\"link\":\"/ko/api/stt\"},{\"text\":\"ìë°í ì ì´\",\"link\":\"/ko/api/avatar\"},{\"text\":\"ì´ë²¤í¸\",\"link\":\"/ko/api/events\"}]},{\"text\":\"ì»´í¬ëí¸\",\"items\":[{\"text\":\"avatar-container\",\"link\":\"/ko/components/avatar-container\"},{\"text\":\"chat-container\",\"link\":\"/ko/components/chat-container\"}]},{\"text\":\"ê°ì´ë\",\"items\":[{\"text\":\"ìë¬ ì²ë¦¬\",\"link\":\"/ko/guides/error-handling\"},{\"text\":\"TypeScript\",\"link\":\"/ko/guides/typescript\"},{\"text\":\"v1 ë§ì´ê·¸ë ì´ì
\",\"link\":\"/ko/guides/migration-v1\"}]},{\"text\":\"ìì \",\"items\":[{\"text\":\"Vanilla JS\",\"link\":\"/ko/examples/vanilla-js\"},{\"text\":\"React\",\"link\":\"/ko/examples/react\"}]},{\"text\":\"íë«í¼ SDK (Experimental)\",\"items\":[{\"text\":\"React Native\",\"link\":\"/ko/platforms/react-native\"},{\"text\":\"Electron\",\"link\":\"/ko/platforms/electron\"}]}]},\"outline\":{\"level\":[2,3],\"label\":\"목차\"},\"lastUpdated\":{\"text\":\"ë§ì§ë§ ìì \"},\"docFooter\":{\"prev\":\"ì´ì \",\"next\":\"ë¤ì\"},\"darkModeSwitchLabel\":\"í
ë§\",\"sidebarMenuLabel\":\"ë©ë´\",\"returnToTopLabel\":\"맨 ìë¡\"}},\"en\":{\"label\":\"English\",\"lang\":\"en-US\",\"link\":\"/en/\",\"themeConfig\":{\"nav\":[{\"text\":\"v2.0.0\",\"items\":[{\"text\":\"v2.0.0 (latest)\",\"link\":\"/\"}]}],\"sidebar\":{\"/en/\":[{\"text\":\"Getting Started\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/en/\"},{\"text\":\"Installation\",\"link\":\"/en/guide/getting-started\"}]},{\"text\":\"API\",\"items\":[{\"text\":\"init\",\"link\":\"/en/api/init\"},{\"text\":\"Lifecycle\",\"link\":\"/en/api/lifecycle\"},{\"text\":\"Messaging\",\"link\":\"/en/api/messaging\"},{\"text\":\"Voice (STT)\",\"link\":\"/en/api/stt\"},{\"text\":\"Avatar Control\",\"link\":\"/en/api/avatar\"},{\"text\":\"Events\",\"link\":\"/en/api/events\"}]},{\"text\":\"Components\",\"items\":[{\"text\":\"avatar-container\",\"link\":\"/en/components/
103avatar-container\"},{\"text\":\"chat-container\",\"link\":\"/en/components/chat-container\"}]},{\"text\":\"Guides\",\"items\":[{\"text\":\"Error Handling\",\"link\":\"/en/guides/error-handling\"},{\"text\":\"TypeScript\",\"link\":\"/en/guides/typescript\"},{\"text\":\"Migration from v1\",\"link\":\"/en/guides/migration-v1\"}]},{\"text\":\"Examples\",\"items\":[{\"text\":\"Vanilla JS\",\"link\":\"/en/examples/vanilla-js\"},{\"text\":\"React\",\"link\":\"/en/examples/react\"}]}]},\"outline\":{\"level\":[2,3],\"label\":\"On this page\"},\"lastUpdated\":{\"text\":\"Last updated\"}}},\"ja\":{\"label\":\"æ¥æ¬èª\",\"lang\":\"ja-JP\",\"link\":\"/ja/\",\"themeConfig\":{\"nav\":[{\"text\":\"v2.0.0\",\"items\":[{\"text\":\"v2.0.0 (latest)\",\"link\":\"/\"}]}],\"sidebar\":{\"/ja/\":[{\"text\":\"ã¯ããã«\",\"items\":[{\"text\":\"ç´¹ä»\",\"link\":\"/ja/\"},{\"text\":\"ã¤ã³ã¹ãã¼ã«\",\"link\":\"/ja/guide/getting-started\"}]},{\"text\":\"API\",\"items\":[{\"text\":\"init\",\"link\":\"/ja/api/init\"},{\"text\":\"ã©ã¤ããµã¤ã¯ã«\",\"link\":\"/ja/api/lifecycle\"},{\"text\":\"ã¡ãã»ã¼ã¸\",\"link\":\"/ja/api/messaging\"},{\"text\":\"é³å£° (STT)\",\"link\":\"/ja/api/stt\"},{\"text\":\"ã¢ãã¿ã¼å¶å¾¡\",\"link\":\"/ja/api/avatar\"},{\"text\":\"ã¤ãã³ã\",\"link\":\"/ja/api/events\"}]},{\"text\":\"ã³ã³ãã¼ãã³ã\",\"items\":[{\"text\":\"avatar-container\",\"link\":\"/ja/components/avatar-container\"},{\"text\":\"chat-container\",\"link\":\"/ja/components/chat-container\"}]},{\"text\":\"ã¬ã¤ã\",\"items\":[{\"text\":\"ã¨ã©ã¼å¦ç\",\"link\":\"/ja/guides/error-handling\"},{\"text\":\"TypeScript\",\"link\":\"/ja/guides/typescript\"},{\"text\":\"v1 ãã¤ã°ã¬ã¼ã·ã§ã³\",\"link\":\"/ja/guides/migration-v1\"}]},{\"text\":\"ä¾\",\"items\":[{\"text\":\"Vanilla JS\",\"link\":\"/ja/examples/vanilla-js\"},{\"text\":\"React\",\"link\":\"/ja/examples/react\"}]}]},\"outline\":{\"level\":[2,3],\"label\":\"ç®æ¬¡\"},\"lastUpdated\":{\"text\":\"æçµæ´æ°\"},\"docFooter\":{\"prev\":\"åã¸\",\"next\":\"次ã¸\"}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
103 104 105 </body> 106</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.