> ## Documentation Index
> Fetch the complete documentation index at: https://docs.viamoss.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK 개요

> Moss SDK의 작동 방식과 제공 기능

# SDK 개요

Moss SDK는 AI 기반 어시스턴트를 웹 애플리케이션에 임베드합니다. 페이지 컨텍스트를 캡처하고, Moss 백엔드와 통신하며, 인터랙티브한 어시스턴트 UI를 렌더링합니다 — 기존 스타일이나 레이아웃에 영향을 주지 않습니다.

## 작동 방식

사용자가 질문을 하면 SDK는 다음을 수행합니다:

1. **페이지 컨텍스트 캡처** — DOM 구조, 표시되는 텍스트, 선택적 스크린샷
2. **Moss 백엔드로 전송** — 사용자의 메시지 및 대화 기록과 함께
3. **AI 생성 안내 수신** — 텍스트 응답 또는 단계별 지침을 포함할 수 있음
4. **응답 렌더링** — 요소 하이라이팅 및 코치 마크가 포함된 채팅 모달에서

전체 UI는 [Shadow DOM](https://developer.mozilla.org/ko/docs/Web/API/Web_components/Using_shadow_DOM) 내부에 렌더링되므로 Moss 스타일이 애플리케이션의 CSS와 충돌하지 않습니다.

## 통합 방법

SDK는 두 가지 통합 방법을 지원합니다:

| 방법              | 적합한 경우       | 설치                              |
| --------------- | ------------ | ------------------------------- |
| **NPM 패키지**     | React 애플리케이션 | `npm install @viamoss/moss-sdk` |
| **CDN 스크립트 태그** | 모든 웹 애플리케이션  | `<script src="...">`            |

두 방법 모두 동일한 어시스턴트 UI와 기능을 제공합니다. 기술 스택에 따라 선택하세요.

## 캡처되는 정보

어시스턴트가 현재 페이지에 대한 컨텍스트가 필요할 때 SDK는 다음을 캡처합니다:

* **표시되는 텍스트 콘텐츠** (DOM에서)
* **인터랙티브 요소** (버튼, 링크, 폼 필드)와 레이블 및 상태
* **페이지 스크린샷** (설정 가능: 전체 페이지 또는 뷰포트만)
* **페이지 URL 및 메타데이터**

<Info>
  모든 데이터는 HTTPS를 통해 설정된 Moss 백엔드로 전송됩니다. WebSocket 연결은 사용하지 않습니다.
</Info>

### 브라우저에 저장되는 항목

SDK는 페이지 이동과 새로고침 후에도 대화가 이어지도록 자체 상태를 소량 브라우저 스토리지에 보관합니다. SDK가 기록하는 모든 항목은 `moss` 접두사가 붙은 키에 저장됩니다.

| 스토리지             | 저장 내용                                                                 | 유지 기간       |
| ---------------- | --------------------------------------------------------------------- | ----------- |
| `sessionStorage` | 현재 탭의 채팅 기록, 채팅 열림/닫힘 및 모달 위치 상태                                      | 탭을 닫으면 삭제   |
| `localStorage`   | 세션 연속성 상태(활성 세션 ID, 세션 메타데이터 및 최근 세션 목록, 가이드 재개 대기 마커)와 온보딩 플로우 완료 마커 | 삭제하기 전까지 유지 |

캡처된 페이지 컨텍스트와 스크린샷은 브라우저 스토리지에 기록되지 않습니다. 백엔드로 전송될 뿐 클라이언트에서는 메모리에만 존재합니다.

## 다음 단계

<CardGroup cols={2}>
  <Card title="설치" icon="download" href="/ko/sdk/installation">
    NPM 또는 CDN을 통해 SDK 설치
  </Card>

  <Card title="인증" icon="lock" href="/ko/sdk/authentication">
    JWT 인증 설정
  </Card>
</CardGroup>