타입스크립트로 스트림독(스트림덱) 플러그인 개발하기

> node -v
v25.5.0

> npm install -g @elgato/cli

changed 75 packages in 8s

13 packages are looking for funding
  run `npm fund` for details

> streamdeck create
 ___ _                        ___         _   
/ __| |_ _ _ ___ __ _ _ __   |   \ ___ __| |__
\__ \  _| '_/ -_) _` | '  \  | |) / -_) _| / /
|___/\__|_| \___\__,_|_|_|_| |___/\___\__|_\_\

Welcome to the Stream Deck Plugin creation wizard.

This utility will guide you through creating a local development environment for a plugin.
For more information on building plugins see https://docs.elgato.com.

Press ^C at any time to quit.

? Author:                                                                                                                                                                       
> Please enter the author.

✔ Author: DevAny
✔ Plugin Name: MyPlugin
✔ Plugin UUID: kr.devany.myplugin
✔ Description: 테스트 플러그인

✔ Create Stream Deck plugin from information above? Yes

Creating MyPlugin...
✔ Enabling developer mode
✔ Generating plugin
✔ Installing dependencies
✔ Building plugin
✔ Finalizing setup

Successfully created plugin!

? Would you like to open the plugin in VS Code? (Y/n)

>npm run watch

rollup v4.57.1
bundles src/plugin.ts → kr.devany.myplugin.sdPlugin/bin/plugin.js...
created kr.devany.myplugin.sdPlugin/bin/plugin.js in 911ms
watch.onEnd $ streamdeck restart kr.devany.myplugin
ℹ Stream Deck is not running. Starting Stream Deck.

[2026-02-03 17:05:10] waiting for changes...

const sdPlugin = path.join(process.env.APPDATA, "Elgato/StreamDeck/Plugins/kr.devany.myplugin.sdPlugin");

const isWatching = !!process.env.ROLLUP_WATCH;

> npm run watch

rollup v4.57.1
bundles src/plugin.ts → kr.devany.myplugin.sdPlugin/bin/plugin.js...
created kr.devany.myplugin.sdPlugin/bin/plugin.js in 1s
watch.onEnd $ streamdeck restart kr.devany.myplugin
✔ Restarted kr.devany.myplugin

[2026-02-03 23:30:32] waiting for changes...

{
    "Name": "MyPlugin",
    "Version": "0.1.0.0",
    "Author": "DevAny",
    "Actions": [
        {
            "Name": "Counter",
            "UUID": "kr.devany.myplugin.increment",
            "Icon": "imgs/actions/counter/icon",
            "Tooltip": "Displays a count, which increments by one on press.",
            "PropertyInspectorPath": "ui/increment-counter.html",
            "Controllers": [
                "Keypad"
            ],
            "States": [
                {
                    "Image": "imgs/actions/counter/key",
                    "TitleAlignment": "middle"
                }
            ]
        }
    ],
    "Category": "MyPlugin",
    "CategoryIcon": "imgs/plugin/category-icon",
    "CodePath": "bin/plugin.js",
    "Description": "테스트 플러그인",
    "Icon": "imgs/plugin/marketplace",
    "SDKVersion": 2,
    "Software": {
        "MinimumVersion": "6.4"
    },
    "OS": [
        {
            "Platform": "mac",
            "MinimumVersion": "12"
        },
        {
            "Platform": "windows",
            "MinimumVersion": "10"
        }
    ],
    "Nodejs": {
        "Version": "20"
    },
    "UUID": "kr.devany.myplugin"
}

import streamDeck from '@elgato/streamdeck';

import { IncrementCounter } from './actions/increment-counter';

streamDeck.logger.setLevel('trace');

streamDeck.actions.registerAction(new IncrementCounter());

streamDeck.connect();

import { action, KeyDownEvent, SingletonAction, WillAppearEvent } from '@elgato/streamdeck';

@action({ UUID: 'kr.devany.myplugin.increment' })
export class IncrementCounter extends SingletonAction<CounterSettings> {
    override onWillAppear(ev: WillAppearEvent<CounterSettings>): void | Promise<void> {
        return ev.action.setTitle(`${ev.payload.settings.count ?? 0}`);
    }

    override async onKeyDown(ev: KeyDownEvent<CounterSettings>): Promise<void> {
        // Update the count from the settings.
        const { settings } = ev.payload;
        settings.incrementBy ??= 1;
        settings.count = (settings.count ?? 0) + settings.incrementBy;

        // Update the current count in the action's settings, and change the title.
        await ev.action.setSettings(settings);
        await ev.action.setTitle(`${settings.count}`);
    }
}

type CounterSettings = {
    count?: number;
    incrementBy?: number;
};

import * as StreamDeck from '@elgato/streamdeck';