액션
액션은 오버레이에 나타나는 HTML, CSS, JavaScript 조각입니다. 각각 따로 실행되며, 네트워크에도 비밀번호에도 접근할 수 없습니다. 밖에서 필요한 것은 Vovó에 요청합니다.
시작하기
"새 액션"은 빈 액션이나 예제로 만든 액션을 만듭니다. 알림과 채팅, 지금 재생 중, 카운트다운, 목표, 추첨, 데스 카운터 등이 있습니다. 예제는 내 복사본이 되므로 마음대로 바꿀 수 있습니다.
세 단계
HTML만: 이벤트가 일어나면 나타나는 <template>이며, 이벤트의 필드는 중괄호 안에 씁니다.
<template data-on="follow" data-seconds="5">
<div class="alert">{user} 님이 팔로우했어요!</div>
</template>
약간의 JavaScript: vovo.on("raid", (e) => { ... })와 vovo.show("name", e). 나머지는 API 전체로.
트리거
액션은 편집기의 트리거 목록에 있는 이벤트만 받습니다. 패드 버튼은 button 트리거입니다.
조건
트리거 옆의 슬라이더 아이콘을 누르면 조건이 열립니다. 트리거는 모든 조건이 맞을 때만 발동합니다. 50명 이상의 레이드, !참가로 시작하는 메시지, 특정 보상 등입니다.
타이머와 단축키
타이머 트리거는 일정한 간격으로 발동합니다. every 조건이 몇 초마다인지 정합니다(없으면 1분마다). 단축키 트리거는 키 조합, 즉 keys 조건으로 발동하며, 게임이 앞에 있어도 됩니다.
컨트롤
편집기의 컨트롤 카드에서 액션은 실행 중에 패드가 바꿀 수 있는 것을 선언합니다. 켜짐·꺼짐, 옵션 중 선택, 카운터(원하면 목표 포함), 텍스트입니다. 각각 대화 상자에 보이는 키로 vovo.state에 저장되고, 바뀔 때마다 트리거 없이 control 이벤트로 도착합니다. 알림과 채팅, 팔로워 목표, 데스 카운터 예제가 방법을 보여 줍니다.
vovo.on("control", () =>
{
document.getElementById("chat").hidden = !vovo.state.chat;
});
꾸미기
액션은 쓰는 사람이 코드를 열지 않고 바꿀 수 있게 할 수 있습니다. 색, 글자 크기, 글꼴, 화면의 어느 쪽, 내 이미지나 소리 등입니다. 패널 이름 옆이나 액션 목록의 그 줄에 있는 팔레트가 꾸미기를 엽니다. 설정마다 한 줄씩, 지금 값, 다를 때는 기본값, 그리고 기본값으로 돌아가는 방법이 있습니다. 바꾸면 액션을 다시 시작하지 않고도 그 액션을 보여 주는 장면에 바로 나타나며, 모든 변경은 작업 기록에서 되돌릴 수 있는 버전입니다. 이 컴퓨터에서만 고를 수 있고, 휴대폰이나 다른 Vovó에서는 보이지 않습니다. 액션 패키지에는 기본값만 들어가고 내 선택은 들어가지 않습니다. 액션을 대신하는 패키지는 아직 들어갈 자리가 있는 선택을 이어받습니다.
액션을 쓰는 사람은 편집기의 꾸미기 카드나 action.json의 settings에서 이것을 선언합니다. 각각 종류(색, 최솟값부터 최댓값까지의 숫자, 켜짐·꺼짐, 선택, 텍스트, 이미지, 소리나 동영상, 글꼴), 이름, 키, 기본값을 가집니다. 액션은 vovo.settings로 읽고, 하나가 바뀌면 settings 이벤트를 받습니다. CSS는 var(--vovo-키)(예: 32px처럼 단위가 붙은 숫자)로 읽고, 켜짐·꺼짐이나 선택은 선택자에 쓸 페이지 속성으로 읽습니다.
.chat
{
color: var(--vovo-color);
font-size: var(--vovo-size);
font-family: var(--vovo-font), sans-serif;
}
html[data-vovo-side="Right"] .chat
{
right: 40px;
}
설정은 카메라일 수도 있습니다. 액션을 쓰는 사람이 꾸미기에서 자기 컴퓨터의 카메라 하나를 고르고, 액션은 자기가 놓은 자리에 그것을 보여 줍니다(vovo.camera.place, camera.show 권한 필요). 액션에는 카메라가 들어 있지 않으며, 어떤 것을 골랐는지 알 수도 화면을 볼 수도 없습니다. vovo.settings는 골랐는지만 true 또는 false로 알려 줍니다. "카메라" 예시는 틀 안에 든 카메라입니다.
패널
버튼에 담기지 않는 것(추첨 참가자 이름, 숫자가 있는 목표, 두 번 물어야 하는 누르기)은 액션의 패널에 넣습니다. 매니페스트의 panel에 쓰고, 사이드바의 패널(어떤 액션에든 패널이 있는 동안 창 오른쪽 가장자리에 아이콘이 있습니다)에 보입니다. 패널은 Vovó가 그리는 부품 목록입니다. heading과 note, 키로 지정하는 control, button(confirm이 있으면 먼저 "정말요?"라고 묻습니다), 최대 4개 필드의 form, 그리고 vovo.state에서 읽는 list(그 key와 안의 path)이며, 줄마다 버튼을 최대 3개 둘 수 있습니다.
보여 줄 것이 많은 액션은 두 가지 방법으로 나눕니다. { "kind": "panel", "label": "추첨", "icon": "gift" }는 또 다른 패널을 시작합니다. 패널에 자기 항목이 생기고, 자기 이름과 아이콘(Vovó 아이콘 이름이나 이모지, 없으면 액션의 첫 번째 패드 버튼 아이콘)을 가집니다. 다음 패널까지의 부품은 이 패널의 것이고, 첫 패널보다 앞의 부품은 모든 패널 위쪽에 보입니다. 패널 안에서 tab은 섹션을 시작합니다(최대 12개). 다음 탭까지의 부품은 그 섹션을 골랐을 때만 보이고, 첫 탭보다 앞의 부품은 모든 섹션에 보입니다. 그래서 추첨은 긴 한 페이지가 아니라, 추첨, 참가자, 당첨자 섹션이 있는 하나의 패널이 됩니다. { "kind": "panel" }을 하나도 선언하지 않은 액션은 액션 이름의 패널을 하나 가집니다.
패널의 머리는 앞에 있는 패널의 이름을 보여 주고, 누르면 모든 패널 목록이 나옵니다. 각각 열린 장면이 보여 주고 있는지, 누구의 것인지 알려 주며, 8개가 넘으면 검색이 붙습니다. 섹션은 머리 아래에 탭으로 나오는데, 들어가는 만큼 보이고 나머지는 "더 보기"에 들어갑니다. 제목은 그룹을 엽니다. 그 뒤의 부품은 카드 하나를 함께 쓰고, 이어지는 버튼은 한 줄을 함께 쓰며, 목록은 개수가 붙은 자기 카드가 되고, 메모는 카드 사이에 놓입니다. 필드가 하나인 양식은 패널 안에서 바로 입력하고 Enter로 보내며, 텍스트 컨트롤도 같습니다. 필드가 더 많은 양식은 작은 창을 엽니다. 목표(max)가 있는 카운터는 얼마나 왔는지 보여 줍니다.
목록에는 수천 줄이 들어갈 수 있습니다. 8줄이 넘는 목록에는 자기 검색이 있고, 목록이 스크롤되는 동안에도 계속 보입니다. 섹션의 마지막 부품이면 전체가 보이고, 뒤에 다른 부품이 있으면 처음 8줄과 전체로 가는 길을 보여 줍니다. 그러니 긴 목록은 마지막에, 또는 자기 섹션에 두세요.
거기서 한 일은 트리거 없이 panel 이벤트로 도착합니다. name, 양식의 values, 줄의 item과 index가 담깁니다. 이름은 어느 패널이 보여 주든 액션의 것입니다. 액션은 열린 장면(OBS나 미리 보기 창)이 그 액션을 보여 주는 동안에만 패널을 듣습니다. 하나도 없으면 패널이 그렇다고 알리고, 버튼은 흐리게 기다리며, "미리 보기 열기"가 장면의 미리 보기를 엽니다. 컨트롤과 목록은 Vovó가 보관하므로 계속 보입니다. 방송을 운영하는 사람만, 여기서나 패널을 허용한 기기에서 쓸 수 있고, 패닉 중에는 액션에 아무것도 닿지 않습니다.
채팅에 쓰기
chat.send 권한이 있으면 vovo.chat.send("...")가 방송 채팅에 나로서 씁니다. Vovó는 속도(30초에 20줄)를 지키고, 액션을 보여 주는 두 페이지가 같은 것을 요청해도 한 번만 씁니다. 버튼을 두 번 누르면 두 줄입니다. 채팅 알림 예제가 방법을 보여 줍니다. { as: "persona" }를 붙이면 대신 페르소나 자신의 Twitch 계정(연동, Twitch 아래)으로 씁니다. 페르소나의 답이 아닌 말, 예를 들어 누군가 페르소나가 말하도록 입력한 한 줄입니다. 그 계정이 연결되어 있지 않은 동안에는 아무것도 쓰지 않고, 대신 당신으로 쓰지도 않습니다.
Vovó는 호출할 때 액션이 처리하던 이벤트로 어느 페이지의 호출인지 구별합니다. await 다음이나 타이머 안에서처럼 나중에 하는 호출은 { event: e }로 어떤 이벤트에 대한 응답인지 알립니다. e는 리스너가 받은 것입니다: vovo.chat.send("환영합니다!", { event: e }). vovo.emit, vovo.pad.play, vovo.webhook.send, vovo.draw, vovo.media.play, OBS 호출도 같습니다. 이게 없으면 두 페이지가 같은 줄을 두 번 쓰고, 매니저의 링크는 벨에서 기다리게 됩니다.
마이크, 화면, 그리고 내 움직임
액션은 마이크 음량(audio.level), 화면 색(screen.color), 게임에서의 움직임(input.move)을 따라갈 수 있습니다. 카메라가 얼마나 돌았는지, 어디로 걷는지, 점프하는지를 마우스, W·A·S·D나 화살표 키, 컨트롤러에서 읽어, 장면이 카메라와 함께 흔들리게 합니다. "화면 빛"과 "카메라 흔들림" 예제가 방법을 보여 줍니다. Vovó는 열린 오버레이가 그것을 기다리는 액션을 보여 주는 동안에만 각각을 읽고, 그동안 상태 표시줄 가운데에 아이콘을 보여 주며, 도움말 풍선에 액션 이름을 적습니다. 키보드는 이동 키만 방향으로 읽고, 어떤 키인지는 기록하지 않으며, Vovó 창이 앞에 있을 때는 읽지 않습니다. 거기서 입력하는 글자가 장면을 흔들 테니까요. 그래도 마우스와 컨트롤러는 그때도 움직이는데, "Vovó가 앞에 있을 때 움직임 멈추기"(설정 › 일반)를 켜면 멈춥니다. 소리는 컴퓨터 밖으로 나가지 않고, 나가는 것은 음량뿐입니다.
클립과 동영상
media.play 권한이 있으면 vovo.media.play(링크)가 Twitch 클립, Twitch 동영상, YouTube 동영상을 공식 플레이어로, vovo.media.place(요소)가 놓은 자리에 소리와 함께 보여 줍니다. 운영자만 실행하는 액션이면 바로 재생됩니다. 채팅의 누군가가 실행했을 수도 있는 다른 액션은 내가(또는 승인을 허용한 기기가) 통과시킬 때까지 벨에서 기다립니다. 플레이어는 클립이 언제 끝나는지 모르므로 { seconds: 60 }을 주거나 vovo.media.stop()을 부르세요. TV 속 클립 예제는 매니저가 보낸 !clip과 링크를 받습니다.
매니저는 내가 채팅을 맡긴 사람들입니다. 연동의 Twitch 아래 "매니저의 링크는 바로 재생"을 켜면, 매니저(또는 내)가 붙여 넣은 링크를 액션이 그 메시지 때문에 보여 줄 때 기다리지 않고 방송에 나갑니다. 켜기 전까지는 꺼져 있고, 다른 사람들의 링크는 여전히 기다립니다.
음성 통화
call 권한이 있으면 액션이 방송 중에 나를 AI 모델과 전화로 연결할 수 있습니다. 내가 마이크에 말하면 모델이 소리 내어 답하고, 방송은 둘 다 듣습니다. vovo.call.start({ instructions, voice })는 내 OpenAI 키(연동 › AI)로 통화를 엽니다. instructions는 모델이 누구이고 어떻게 말하는지입니다. 통화는 조용히 열리므로 액션이 먼저 전화벨을 울릴 수 있습니다. vovo.call.answer()는 마이크를 열고 모델이 먼저 말하게 하며, vovo.call.tell()은 통화 중에 무언가를 알려 주고, vovo.call.end()는 전화를 끊습니다. call.started, call.answered, call.text(말한 내용을 글로 적은 것), call.ended가 진행을 알려 줍니다.
모델이 하는 말은 아무도 먼저 읽지 않은 채 말하는 순간 들리므로, 통화는 내가 손으로 한 일에서만 시작됩니다. 패드 버튼, 단축키, 컨트롤, 액션의 패널입니다. 채팅, 보상, 웹훅으로는 시작되지 않습니다. OpenAI는 열린 순간부터 초 단위로 요금을 매기므로 통화마다 한도(최대 5분)가 있습니다. 통화 중에는 상태 표시줄에 빨간 전화가 보입니다. 그것이나 패닉을 누르면 바로 끊깁니다. 헤드폰을 쓰세요. 그렇지 않으면 모델이 스피커에서 자기 목소리를 듣습니다.
웹훅
webhook 권한이 있으면 vovo.webhook.send("이름", { ... })가 설정 › 웹훅에서 설정한 웹훅으로 JSON을 보내 달라고 Vovó에 요청합니다. Discord 채널, 자동화, 내 네트워크의 도구 등입니다. 주소는 이 컴퓨터의 보관함에 남고 백업과 패키지에 들어가지 않으며, 액션은 이름만 압니다. Discord에 알리기 예제가 방법을 보여 줍니다.
수신 웹훅
반대로 인터넷의 서비스가 Vovó에 알릴 수도 있습니다. 설정 › 웹훅에서 수신 웹훅을 만들고, 주소를 복사해 서비스(후원 페이지, 상점, 스크립트)에 붙여 넣으세요. 호출은 각각 webhook 이벤트로 액션에 도착하며, hook(이름)과 data(보낸 내용)를 담습니다. webhook 트리거에 hook이 그 이름이라는 조건을 붙여 쓰세요. 웹훅마다 주소가 따로 있으니, 부르는 서비스에만 주세요. 릴레이는 호출을 이 컴퓨터용으로 봉인해 최대 하루 동안 보관하므로, Vovó가 닫혀 있을 때 온 호출도 열면 도착합니다. 도착하는 것은 다른 사람의 텍스트이므로, 액션은 텍스트로만 보여 줍니다.
이 컴퓨터의 프로그램에서
이 컴퓨터의 프로그램은 아는 것을 액션에 알려 줄 수 있습니다. 게임 로그를 읽는 스크립트, 대회 점수를 기록하는 도구, 매크로 등입니다. 액션은 action.json의 트리거 사이에 자기 이름의 이벤트를 두고 기다립니다(vovo dev가 따라가는 폴더에서처럼).
"triggers": ["score"]
그리고 다른 이벤트처럼 받습니다.
vovo.on("score", (e) =>
{
document.getElementById("home").textContent = e.home;
document.getElementById("away").textContent = e.away;
});
프로그램은 vovo emit에 이름과 필드를 붙여 알립니다.
vovo emit score home=2 away=1
숫자, true, false는 그대로, 나머지는 텍스트로 도착합니다. 목록과 객체는 JSON으로 통째로 보내며, 프로그램에서는 이렇게 부릅니다.
import json, subprocess
subprocess.run(["vovo", "emit", "score", "--fields", json.dumps({"home": 2, "away": 1})])
어떤 액션이 받았는지 알려 주고, 아무도 받지 않으면 실패합니다(종료 코드 1, 이유 포함). 그 이름을 트리거로 가진 액션이 없거나, 조건이 맞지 않거나, 열린 페이지가 그것을 보여 주지 않을 때입니다. 액션 자신의 vovo.emit과 같은 곳으로 가며, 패닉 중에는 가지 않고, 10초에 30번까지이며, 작업 기록에는 명령줄이 실행했다고 남습니다. 운영자 전용 액션은 받지 않습니다. 프로그램이 보내는 것은 그 프로그램의 텍스트이므로 액션은 텍스트로만 보여 줍니다. 팔로우처럼 API의 이벤트가 일어난 척하려면 vovo simulate를 쓰세요.
미리 보기와 시뮬레이션
편집기는 입력하는 대로 액션을 실시간으로 보여 주고, 시뮬레이션 버튼은 진짜 이벤트를 기다리지 않고 트리거를 발동시키며 패드 버튼처럼 컨트롤을 움직입니다. 미리 보기의 어떤 것도 방송에 닿지 않습니다. 코드나 미리 보기 모서리의 아이콘은 창 전체를 차지하게 하고, 같은 아이콘이나 Esc로 원래 자리로 돌아갑니다.
화면 낭독기
화면 낭독기는 코드 편집기를 읽지 못합니다. 코드 위의 일반 텍스트 버튼은 그 자리에 텍스트 상자를 넣어, 내레이터, NVDA, JAWS가 줄·단어·글자 단위로 전부 읽을 수 있게 합니다. Windows가 화면 낭독기가 실행 중이라고 알리면 처음부터 켜져 있습니다. Tab은 다음으로 넘어가므로 들여쓰기는 공백으로 하세요.
파일
편집기의 파일 탭에서 이미지, 소리, 동영상, 글꼴을 추가합니다. 액션은 이름으로 씁니다: <img src="logo.png">. 자기 소리나 동영상을 Web Audio(컴프레서, 레벨 미터)에 통과시키려면, 이름을 주기 전에 crossOrigin = "anonymous"로 요청하세요. 액션은 모든 것과 떨어져 실행되어, 자기 파일조차 밖에서 온 것이 되므로, 그렇지 않으면 Web Audio에는 무음으로 들립니다.
권한
액션이 Vovó에 요청할 수 있는 것은 동작 아래에 있습니다. 채팅에 쓰기, 웹훅 부르기, 공유 화면 보여 주기, 카메라 보여 주기, OBS의 소스 보여 주기와 필터 켜기입니다. 꺼져 있으면 액션은 할 수 없습니다.
액션에서 OBS 다루기
obs.toggle 권한이 있으면 vovo.obs.source("장면", "소스", true)가 OBS 장면의 소스를 보여 주고(false면 숨기고, 생략하면 전환), vovo.obs.filter("소스", "필터", true)가 필터에 같은 일을 합니다. 이름은 OBS의 것이며 대소문자와 악센트는 가리지 않습니다. OBS에 없는 이름은 콘솔에 의도한 이름과 함께 표시됩니다. 액션이 OBS에서 할 수 있는 것은 이것뿐이며, 송출을 멈추거나 스트림 키를 읽을 수는 없습니다.
운영자 전용
동작의 "방송을 운영하는 사람만"을 켜면 액션은 패드, 단축키, 타이머, 자기 컨트롤로만 실행됩니다. 시청자, 채팅, 보상, 웹훅, 다른 액션의 이벤트로는 절대 실행되지 않습니다. 채팅 지우기나 장면 바꾸기처럼 보는 사람이 할 수 있어서는 안 되는 일에 쓰세요.
버전
저장할 때마다 버전이 남습니다. "기록"에서 어느 버전으로든 되돌릴 수 있습니다.
패키지
액션 목록의 내보내기 아이콘은 액션을 코드와 파일째 .zip으로 써서 누군가에게 줄 수 있게 합니다. 동작에 적은 작성자, 사이트, 하는 일 한 줄도 함께 들어가므로, 가져오는 사람이 그것이 무엇이고 어디서 왔는지 알 수 있습니다. "액션 가져오기"는 저장하기 전에 패키지에 무엇이 들었고 무엇을 요청하는지 보여 주고, 편집기에서 액션을 엽니다. 쓰기 전에 읽어 보세요. 가진 액션과 같은 이름의 패키지는 아마 그 액션의 새 버전일 테니, 대신하겠다고 제안합니다. 액션은 장면, 버튼, 상태를 그대로 두고, 이전 버전은 기록에 남습니다. 터미널에서는 vovo export와 vovo import가 같은 일을 하고, vovo import --replace는 같은 이름의 액션을 대신합니다. 다른 사람에게 줄 패키지는 동작에 ID를 적을 수 있습니다. 만든 사람의 이름과 액션의 이름을 점으로 이은 것입니다(example.raffle). 그러면 액션의 이름을 바꾼 뒤에도 다음 버전이 업데이트할 액션을 찾고, 만든 사람이 다른 같은 이름의 액션끼리 서로 자리를 대신하는 일도 없습니다. vovo import --replace도 이것을 따릅니다. ID가 있든 없든, 가져오기는 어느 버전이 어느 버전을 대신하는지 말해 주고, 파일이 같은 버전이거나 더 오래된 버전이면 그렇게 알려 줍니다. 꾸미기에서 고른 것은 새 버전에 그 설정이 남아 있는 한 그대로입니다. 패키지는 어떤 라이선스로 넘겨주는지 밝힐 수 있습니다. 동작에 라이선스 이름이나 직접 쓴 한 줄을 적고, 라이선스 전문은 거기서 파일로 고르거나 폴더의 action.json 옆에 LICENSE로 둡니다. 액션을 가져오는 사람은 그 한 줄을 보고, 액션이 들어오기 전에 가져오기 대화 상자에서 전문을 읽을 수 있습니다. Vovó는 적힌 내용을 알려 줄 뿐 누구에게도 강제하지 않습니다. 키도 계정도 구매도 확인하지 않으며, 액션 판매는 Vovó 밖에서 이루어집니다. 그 옆의 복사 아이콘은 액션을 복제하고 복사본을 편집기에서 엽니다. 작동하는 액션에서 변형을 시작하기 위해서입니다. 코드, 파일, 트리거는 함께 복사되지만 상태, 장면, 버튼은 복사되지 않고, 단축키 트리거는 키 조합 없이 복사됩니다. 키 하나가 둘 다 실행하지 않도록 하기 위해서입니다.
내 편집기에서
액션은 좋아하는 편집기로, 또는 내 빌드로 쓸 수 있습니다. 패키지와 같은 구성(action.json, index.html, style.css, script.js, files/)으로 폴더에 두고, 터미널에서 그 폴더로 vovo dev를 실행하세요. Vovó는 그 이름의 액션으로 편집기를 열고(프로필에 없으면 폴더에서 만듭니다), 폴더에 저장한 변경을 바로 미리 보기에 보여 줍니다. 시뮬레이션도 평소처럼 작동합니다. 여기서 입력한 변경과 마찬가지로, 저장해야 방송에 닿습니다. vovo dev stop이나 편집기 위쪽의 따라가기 중지로 폴더를 놓아 줍니다.
vovo new <폴더>는 그 폴더를 대신 만들어 줍니다. 빈 것으로, 또는 예시 중 하나로 만들 수 있습니다(vovo new --list가 목록을 보여 주고, --from goal로 하나를 고릅니다). vovo check <폴더>는 폴더나 패키지에서 잘못된 것을 한 번에 모두 알려 주며, 아무것도 만들거나 열지 않습니다. 문제마다 파일을 밝히고, Vovó가 받아들이되 건너뛸 것(쓰지 않는 키 등)도 알려 줍니다. 둘 다 Vovó가 닫혀 있어도 답합니다. vovo export <액션> <폴더>는 이미 있는 액션을 그런 폴더로 써 줍니다.
vovo dev는 폴더에 vovo.d.ts(이 Vovó의 API)도 쓰고, jsconfig.json이 없으면 그것도 씁니다. 그래서 VS Code 같은 편집기가 vovo., vovo.on("의 이벤트 이름, 각 이벤트의 필드를 자동 완성합니다. 둘 다 액션의 일부가 아니며 패키지에 들어가지 않습니다. 버전 관리에서는 남기든 무시하든 편한 대로 하세요. 잘못된 필드에 밑줄이 그어지게 하려면 jsconfig의 compilerOptions에 "checkJs": true를 넣으세요.
거기에 action.schema.json도 씁니다. 이것도 액션의 일부가 아닙니다. action.json 맨 위에 "$schema": "./action.schema.json"을 적으면 편집기가 키를 완성하고, 이벤트와 권한을 이름으로 제안하며, Vovó가 거부할 내용에 밑줄을 긋습니다.
미리 보기는 브라우저에서도 열립니다. vovo dev가 출력하는 주소나 미리 보기 모서리의 화살표로 엽니다. 방송과 같은 vovo가 실행하는 같은 초안이며, 바뀔 때마다 다시 불러오고, 시뮬레이션도 닿으며, 브라우저의 개발자 도구(콘솔, 중단점, 요소)도 쓸 수 있습니다.
방송에 보여 주려면
액션은 장면에 있어야 하고, 장면은 OBS에 있어야 합니다.