본문 바로가기

다이내믹 팩 API

다이내믹 팩은 다이내믹 여러 개의 선언과 셰이더를 dynamic.json 하나에 담은 .sshowdynamic 파일입니다. 에디터는 선언으로 다이내믹 창의 칸을 만들고, 셰이더로 칠과 효과를 그립니다.

참조고급약 10분웹데스크톱

팩 파일

다이내믹 팩은 .sshowdynamic 파일 하나입니다. 이름만 바꾼 zip 파일이고, 맨 위에 매니페스트 dynamic.json을 둡니다. 아이콘은 넣어도 되고 빼도 됩니다.

셰이더는 따로 파일로 두지 않고 dynamic.json 안에 글자로 씁니다. 에디터는 dynamic.json과 아이콘만 꺼내 씁니다. 폴더째 압축하지 말고, 폴더 안의 파일을 골라 압축하세요.

팩 하나에 다이내믹을 32개까지 담습니다. 다이내믹마다 칠과 효과 가운데 하나로 정하고, 칠은 채우기 · 선에, 효과는 효과에 나옵니다. 기본 · 레트로 · 배경 팩도 같은 형식입니다. 쓰는 쪽에서 본 모습은 다이내믹에 있습니다.

매니페스트 (dynamic.json)

항목은 플러그인의 매니페스트와 거의 같습니다. main 대신 다이내믹을 담는 dynamics가 있습니다. 모르는 항목은 무시합니다.

dynamic.json의 항목과 규칙
항목필수규칙
id필수소문자 역도메인 형식입니다(com.example.waves). 규칙은 플러그인과 같고, 플러그인과 다이내믹 팩이 id를 함께 씁니다. 게시할 때는 100자까지이고, app.sshow.로 시작하는 id는 SSHOW가 씁니다.
name필수Studio 확장 화면에 보이는 팩 이름입니다. 다이내믹을 고르는 화면에서는 이 팩 묶음의 제목이 됩니다. 게시할 때는 100자까지입니다.
name_localized선택다른 언어로 쓴 이름입니다. 한국어는 { "ko": "…" }⁠로 쓰고, 에디터와 Studio가 그 언어일 때 보입니다.
version필수숫자 셋을 마침표로 이은 x.y.z입니다(1.0.0).
api필수다이내믹 팩 API 버전입니다. 지금은 1입니다.
dynamics필수다이내믹의 배열입니다. 1개부터 32개까지 씁니다. 다이내믹 항목
description선택Studio 확장 화면과 상세 창에 보이는 설명입니다. 게시할 때는 2000자까지입니다.
description_localized선택다른 언어로 쓴 설명입니다. name_localized와 같은 꼴로 씁니다.
author선택작성자입니다. 게시된 목록의 작성자는 이 값이 아니라 제출한 계정입니다.
icon선택패키지 안 아이콘 파일의 이름입니다. png · svg · jpg · jpeg · webp를 씁니다. 없으면 확장 화면에 바람 모양 아이콘이 보입니다.

다이내믹 항목

dynamics 배열의 항목 하나에 쓰는 것
항목필수규칙
name필수팩 안에서 다이내믹을 가리키는 이름이고, 문서는 이 이름으로 다이내믹을 기억합니다. 영문 소문자로 시작하는 낙타 표기(meshGradient)⁠로 32자까지 쓰고, 팩 안에서 겹치면 안 됩니다.
label필수고르는 화면과 다이내믹 창에 보이는 이름입니다. 48자까지입니다.
label_localized선택다른 언어로 쓴 label입니다. name_localized와 같은 꼴로 씁니다.
slot필수'paint'⁠는 채우기 · 선에 칠하는 무늬입니다. 'effect'⁠는 오브젝트의 픽셀을 바꾸는 효과로, 효과에 나옵니다.
animated선택시간에 따라 움직이면 true입니다. 빼면 false이고, 그때는 uTime을 받지 않습니다.
params필수매개변수의 배열입니다. 24개까지이고, 없으면 빈 배열을 씁니다. 매개변수
glsl필수함수 하나를 담은 GLSL 글자입니다. 셰이더
padding선택effect에만 씁니다. 효과가 오브젝트 밖으로 번지는 거리(px)⁠이고, { "plus": 4, "scale": { "size": 2 } }⁠처럼 씁니다. plus는 늘 더하는 거리, scale은 number 매개변수마다 그 값에 곱하는 수입니다. 모든 매개변수가 max일 때 256px까지입니다.

셰이더

glsl에는 함수 하나만 씁니다. 에디터가 uniform 선언과 main 함수를 붙이므로, main과 #version · #extension · #include는 쓰지 않습니다. 이 셋은 주석 안에 있어도 거절됩니다.

돌려주는 vec4는 알파를 미리 곱한 색입니다. effect가 받는 src도 같으니, 색을 바꿀 때는 알파로 나눴다가 다시 곱하세요.

칠은 가로 · 세로 1024px까지의 그림으로 그린 뒤 오브젝트 크기에 맞춰 늘립니다. 큰 오브젝트에서는 가는 선과 작은 점이 그만큼 굵어집니다.

셰이더는 팩을 넣을 때 그 기기의 GPU에서 컴파일됩니다. 컴파일되지 않는 다이내믹이 하나라도 있으면 팩 전체가 들어가지 않습니다.

셰이더에 쓰는 함수와 에디터가 넘기는 값
이름뜻
vec4 dynamicPaint(vec2 uv)slot이 'paint'⁠일 때 쓰는 함수입니다. uv는 칠하는 상자 안의 자리이고, 가로 · 세로 모두 0부터 1까지입니다.
vec4 dynamicEffect(vec2 uv, vec4 src)slot이 'effect'⁠일 때 쓰는 함수입니다. src는 그 자리의 원래 픽셀입니다. 다른 자리의 픽셀은 texture(uTexture, uv)⁠로 읽습니다.
uTimeanimated가 true일 때만 받는 시간(초)⁠입니다.
uInputSize입력 그림의 크기입니다. xy는 너비 · 높이(px)⁠이고, zw는 그 역수라 픽셀 하나만큼 옮길 때 씁니다.
uOutputFrame그리는 영역입니다. zw가 너비 · 높이(px)⁠이고, 칠의 px 자리는 uv * uOutputFrame.zw입니다.
uTextureeffect만 받습니다. 오브젝트를 그린 그림입니다.
uViewportScaleeffect만 받습니다. 지금 화면 배율입니다. 문서 px로 정한 값(점 크기 같은 것)⁠에 곱해 화면 px로 바꿉니다.
u + 매개변수 key매개변수 하나가 uniform 하나입니다. key의 첫 글자를 대문자로 바꿔 u를 붙입니다(size → uSize). number와 boolean은 float(꺼짐 0, 켜짐 1), color는 vec3입니다.

매개변수

매개변수는 다이내믹 창의 매개변수 아래에 칸으로 나옵니다. 사용자가 바꾼 값은 문서에 저장되고, 셰이더에는 uniform으로 들어옵니다.

불투명도는 에디터가 칠과 효과마다 따로 주므로, 매개변수로 두지 않습니다.

매개변수 하나에 쓰는 것
항목규칙
key영문 소문자로 시작하는 낙타 표기로 32자까지 쓰고, 한 다이내믹 안에서 겹치면 안 됩니다. time · texture · opacity · viewportScale · inputSize · inputPixel · inputClamp · outputFrame · globalFrame · outputTexture는 에디터가 쓰는 이름이라 쓸 수 없습니다.
label · label_localized칸 이름입니다. 48자까지입니다.
typenumber · color · boolean 가운데 하나입니다.
defaultnumber는 min과 max 사이의 수, color는 #rrggbb, boolean은 true나 false입니다.
min · max · stepnumber에는 꼭 있어야 합니다. step은 0보다 커야 합니다. 저장된 값은 셰이더에 넘기기 전에 이 범위 안으로 맞춰집니다.
unitnumber에 붙이는 단위입니다. 8자까지이고, 각도라면 °⁠를 씁니다.

써 보기

팩을 고친 뒤 에디터에서 확인하는 길은 둘입니다. 어디서나 파일을 끌어 놓을 수 있고, Windows 데스크톱 앱에서는 폴더를 지켜보게 할 수도 있습니다.

끌어 놓기

웹 · 데스크톱

.sshowdynamic 파일을 에디터 캔버스에 끌어다 놓으세요. 따로 알림은 없고, 채우기 · 선이나 효과에서 다이내믹을 고르면 팩 이름 아래에 다이내믹이 보입니다. 같은 id의 팩이 있으면 새 파일로 바꿔 끼웁니다. 끌어 놓은 팩은 지금 연 에디터에만 들어 있어, 새로 고치면 빠집니다.

끌어 놓기waves.sshowdynamic을 캔버스에 놓아도 알림은 없지만, 채우기의 + 버튼에서 다이내믹을 누르자 고르는 화면 맨 아래에 물결 팩이 새로 보이고, 잔물결 카드를 고르자 사각형에 잔물결이 퍼집니다. 영상: waves.sshowdynamic을 오른쪽에서 끌어 와 캔버스에 놓자 점선 테두리만 꺼지고 따로 알림은 없습니다. 사각형의 채우기 옆 + 버튼에서 다이내믹을 누르자 고르는 화면의 기본 · 배경 아래에 물결 팩 묶음이 새로 보이고, 잔물결 카드를 고르자 사각형에 잔물결이 퍼집니다.

폴더 지켜보기

데스크톱 앱 (Windows)

플러그인의 폴더 지켜보기와 같은 방법으로 settings.json을 여세요. "dynamics.devPath"의 값을 dynamic.json이 있는 폴더의 절대 경로로 바꿔 저장하고, 앱을 다시 실행하세요. 키가 없으면 더하세요. 그다음부터는 폴더의 파일을 저장할 때마다 열린 모든 에디터에 팩이 다시 들어갑니다. "plugins.devPath"와 함께 켤 수 있습니다.

거절된 팩은 아무 알림 없이 빠집니다

선언이 규칙에 맞지 않거나 셰이더가 컴파일되지 않으면, 팩은 알림 없이 들어가지 않습니다. 고르는 화면에 팩이 보이지 않으면 개발자 콘솔에서 그 파일을 골라 보세요. 규칙에 맞지 않는 곳을 알려 주고, 검토 요청을 누르기 전에는 보내지 않습니다. 셰이더 컴파일은 콘솔이 확인하지 못하니, 바꾼 곳을 조금씩 되돌려 보며 찾으세요.

게시하기

게시한 팩은 Studio 확장 화면의 다이내믹에 실려 누구나 설치할 수 있습니다. 게시하는 길과 규칙은 플러그인 게시와 같고, 모든 버전을 사람이 검토합니다.

  1. 패키지 고르기

    개발자 콘솔을 열고 '⁠검토 요청' 패널에서 파일 고르기를 누르세요. .sshowdynamic 파일을 고르면 콘솔이 바로 읽어 이름과 버전을 보여 줍니다. 규칙에 맞지 않으면 고칠 곳을 알려 줍니다.

  2. 검토 요청하기

    동의 칸을 켜고 검토 요청을 누르세요. '⁠내 확장' 목록에 '⁠다이내믹 팩' 표시와 함께 '⁠검토 중'⁠으로 나타납니다.

  3. 결과 확인하기

    검토자는 편집기에서 팩을 직접 써 보고, 새 버전이면 게시된 버전의 그림과 나란히 견줍니다. 결과는 알림과 이메일로 옵니다. 승인된 버전은 바로 게시됩니다.

새 버전 규칙

게시된 팩의 새 버전에서 바꿔도 되는 것과 안 되는 것
바꾸는 것받는 방식
다이내믹 빼기거절됩니다. 그 다이내믹을 쓴 문서가 깨지기 때문입니다.
다이내믹의 slot 바꾸기거절됩니다.
매개변수 빼기, type 바꾸기거절됩니다.
number 매개변수의 범위 좁히기거절됩니다. 저장된 값이 잘리기 때문입니다. min은 내리고 max는 올리기만 하세요.
새 다이내믹 · 새 매개변수 더하기됩니다.
default · label · 셰이더 바꾸기됩니다. 다만 이미 쓴 문서의 모양도 함께 바뀌므로, 모양이 달라지는 다이내믹은 새 name으로 더하세요.

잘 안 될 때

  • 끌어 놓은 팩이 고르는 화면에 보이지 않나요?

    규칙에 맞지 않거나 셰이더가 컴파일되지 않아 거절된 것입니다. 개발자 콘솔에서 그 파일을 골라 보면 규칙에 맞지 않는 곳을 알려 줍니다. 효과는 채우기가 아니라 효과에서 고릅니다.
  • 고친 팩을 다시 끌어 놓았는데 그대로인가요?

    같은 id의 팩이 이미 있으면, 새 파일도 새 버전 규칙을 지켜야 바꿔 끼웁니다. 다이내믹이나 매개변수를 빼거나 바꿨다면, 에디터를 새로 고친 뒤 다시 끌어 놓으세요.
  • '⁠패키지가 규칙에 맞지 않습니다. 아래 내용을 고쳐 주세요.'⁠가 나오나요?

    아래에 영어로 이유가 나옵니다. 매니페스트나 다이내믹 항목의 이름이 앞에 붙으니, 그 항목을 고쳐 다시 고르세요. 새 버전이면 새 버전 규칙에 걸렸는지도 보세요.
  • 다른 사람에게는 칠이 보이지 않나요?

    끌어 놓은 팩은 내 에디터에만 있습니다. 클라우드 프로젝트에 쓰면 다이내믹 창에 '⁠게시된 팩이 아니라서 다른 사람에게는 이 다이내믹이 보이지 않습니다'⁠가 나옵니다. 팩을 게시하면 다른 사람도 받아 봅니다. 게시하기 전에 보여 주려면 에디터 메뉴의 사본 저장으로 받은 .sshow 파일을 건네세요. 팩이 파일에 함께 담겨 그대로 그려집니다. Studio 카드의 .sshow 다운로드로 받은 파일에는 팩이 담기지 않습니다.
  • 셰이더 오류는 어디서 보나요?

    에디터는 셰이더 오류를 보여 주지 않습니다. 함수를 아주 작게 줄여 들어가는지 먼저 보고, 조금씩 늘려 가며 끌어 놓아 확인하세요.
이 페이지가 도움이 되었나요?

2026년 10월 30일에 고침 · 이 페이지의 영상은 현재 에디터로 녹화했습니다.

많이 찾는 것