# 유챗으로 무엇을 만들 수 있나

> 내 사이트에 붙인 유챗 채팅방에 기능을 더하는 세 가지 방법과, 어떤 일에 어떤 방법을 고르면 되는지 설명해요.

유챗 채팅방은 설치 코드 두 줄로 내 사이트에 붙고, 그 위에 페이지 스크립트·스킨 UI API·서버 API로 기능을 더할 수 있어요. 이 문서는 세 방법이 각각 무엇을 하는지와 언제 어느 것을 고르는지 정리해요.

## 출발점: 설치 코드 {#install}

모든 기능은 채팅방을 페이지에 붙이는 데서 시작해요. `uchat.js`를 한 번 불러오고 `<u-chat room="my-room">` 태그를 두면 그 자리에 채팅방이 열려요. → [5분 설치](/doc/1.2)

내 사이트 회원의 닉네임·권한을 채팅방에서 그대로 쓰려면 회원 연동을 더해요. → [회원 연동](/doc/2.1)

## 확장 방법 세 가지 {#three-ways}

| 방법 | 어디서 실행 | 하는 일 | 정본 |
| --- | --- | --- | --- |
| 페이지 스크립트 | 내 페이지의 자바스크립트 | `U.chat()`으로 채팅방 객체(`room`)를 받고 입장·메시지 같은 이벤트에 반응하거나, 메시지 보내기·명령 실행·안내 줄 띄우기를 해요 | [U.chat()과 room 객체](/doc/3.2), [이벤트](/doc/3.3) |
| 스킨 UI API | 내 페이지의 자바스크립트(기본 스킨 안에 그려짐) | 기본 스킨(`basic-v2`)에 메뉴 버튼, 닉네임 메뉴 항목, 대화상자, 대화 위·아래 영역, 겹치는 영역, 닉네임·메시지 꾸미기를 더해요 | [스킨 UI API](/doc/3.4) |
| 서버 API | 내 서버 | REST 요청으로 채팅방 접속자 통계를 읽거나, 채팅방 채널로 데이터를 보내요 | [서버 REST API](/doc/3.6) |

페이지 스크립트와 스킨 UI API는 같은 `room` 객체에서 시작해요. 스킨 UI API는 `room.skin`에 들어 있으므로, 페이지 스크립트를 쓸 줄 알면 바로 이어서 쓸 수 있어요.

## 채널: 실시간 데이터 {#channels}

채널은 같은 채팅방에 있는 사람들끼리, 또는 내 서버와 채팅방 사이에 채팅 메시지가 아닌 데이터를 주고받는 통로예요. 페이지 스크립트에서 `room.plugin.add('채널이름')`으로 열고, 서버에서는 서버 API로 같은 채널에 보내요.

- 사용자끼리: 함께 보기, 게임, 투표처럼 모두의 화면을 맞춰야 할 때 → [실시간 데이터 주고받기](/doc/2.4)
- 서버에서 채팅방으로: 결제·주문·방송 시작 같은 사이트의 일을 채팅방에 알릴 때 → [서버에서 채팅방으로 알림 보내기](/doc/2.5)

전송 한도와 저장 크기는 [채널 API와 한도](/doc/3.5)에 있어요.

## 무엇을 고를까 {#choose}

| 하고 싶은 일 | 고를 방법 | 시작 문서 |
| --- | --- | --- |
| 입장한 사람에게 인사, 특정 단어가 오면 페이지에서 반응 | 페이지 스크립트(이벤트) | [첫 스크립트](/doc/1.3) |
| 보내는 메시지를 고치거나 막기 | 페이지 스크립트(`before.` 이벤트) | [이벤트](/doc/3.3) |
| 한 페이지에 채팅방 여러 개, SPA에서 붙였다 떼기 | 페이지 스크립트 | [비동기 로딩과 여러 채팅방](/doc/2.2) |
| 채팅방 안에 버튼·입력 창·배너 넣기 | 스킨 UI API | [스킨 UI 확장하기](/doc/2.3) |
| 관리자 닉네임 강조, 특정 메시지 배경색 | 스킨 UI API(resolver) | [닉네임·메시지 꾸미기](/doc/4.3) |
| 접속자끼리 같은 영상·게임 상태 맞추기 | 채널 | [실시간 데이터 주고받기](/doc/2.4) |
| 사이트에서 일어난 일을 채팅방에 알리기 | 서버 API + 채널 | [서버에서 채팅방으로 알림 보내기](/doc/2.5) |
| 사이트에 지금 접속자 수 보여 주기 | 서버 API | [서버 REST API](/doc/3.6) |

여러 방법을 섞어 쓰는 경우가 많아요. 예를 들어 [결제 완료 알림](/doc/4.4)은 서버 API로 보내고, 페이지 스크립트의 채널로 받아 채팅방에 표시해요.

## 다음 단계 {#next}

1. [5분 설치](/doc/1.2)로 채팅방을 붙여요.
2. [첫 스크립트](/doc/1.3)로 이벤트를 받아 봐요.
3. 만들려는 기능에 맞는 가이드를 읽고, 세부 값은 레퍼런스에서 찾아요. 완성된 코드는 [예제](/doc/4.1)에 있어요.

공개 전에는 [보안 체크리스트](/doc/2.6)를 확인하세요.