메타 태그

<head> 태그 내부에서 <meta> 태그는 제목과 게시자 정보를 제공하며 사용자 입력을 받을 수 있게 합니다. 사용자가 커스터마이징할 수 있는 컨트롤은 여섯 가지입니다: 숫자 슬라이더, 색조 슬라이더, 불리언 스위치, 색상 선택기, 텍스트 필드, 콤보 박스. 각 컨트롤에는 네 가지 핵심 속성과 컨트롤별 속성이 필요합니다.

	핵심 속성	설명
	property	코드에서 사용할 변수 이름을 정의합니다.
	label	컨트롤 인터페이스에서 사용자에게 표시되는 텍스트 레이블
	type	데이터 유형 지정: number, hue, boolean, 또는 color
	default	컨트롤에서 사용하는 초기값 설정
	tooltip*	(*선택사항) 사용자가 컨트롤 위에 마우스를 올렸을 때 표시되는 짧은 설명

숫자 슬라이더

숫자 슬라이더는 사용자가 특정 범위 내에서 정수를 선택할 수 있게 합니다. 애니메이션 속도, 화면에 표시되는 도형 수, 효과가 트리거되는 빈도 등의 매개변수를 조정하는 데 일반적으로 사용됩니다.

<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">

실제로 사용하면 다음과 같이 표시됩니다:

숫자 슬라이더가 올바르게 작동하려면 두 가지 추가 속성이 필요합니다:

속성	설명
min	사용자가 선택할 수 있는 최솟값을 설정합니다.
max	사용자가 선택할 수 있는 최댓값을 설정합니다.

색조 슬라이더

색조 슬라이더는 사용자가 HSL(색조, 채도, 밝기) 색상 모델을 사용하여 색조를 선택할 수 있게 합니다. 일반적으로 기본 색상 조정이나 효과 및 요소의 기본 색상을 선택하는 데 사용됩니다.

<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">

시각적으로는 다음과 같이 표시됩니다:

색조 슬라이더가 올바르게 작동하려면 두 가지 추가 속성이 필요합니다:

속성	설명
min	사용자가 선택할 수 있는 최솟값을 정의합니다. 최솟값은 0입니다.
max	사용자가 선택할 수 있는 최댓값을 정의합니다. 최댓값은 360입니다.

불리언

불리언 스위치는 사용자가 “켜기”와 “끄기” 두 가지 상태 사이를 전환할 수 있게 합니다. 값은 0(꺼짐) 또는 1(켜짐)으로 제한됩니다. 다른 컨트롤과 달리 불리언은 기본 속성에만 의존하며 추가 구성이 필요하지 않습니다.

<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>

특정 기능을 활성화하거나 비활성화하거나, 모드 전환(수직/수평 등), 인터페이스에서 가시성과 동작 토글 제어, 또는 효과 재생 트리거 등에 일반적으로 사용됩니다.

표시되는 예시입니다:

색상 선택기

색상 선택기는 사용자가 표준 HSL 색상 모델 내에서 색조, 채도, 밝기 구성 요소를 조정하여 색상을 선택할 수 있게 합니다. 배경이나 화면 요소의 색상을 선택하는 데 가장 일반적이고 표준적인 도구입니다.

<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>

시각적으로는 다음과 같이 표시됩니다:

색상 선택기의 기본값은 16진수 형식으로 지정해야 합니다. 또한 두 가지 추가 속성이 필요합니다:

속성	설명
min	선택 가능한 최솟값, 최솟값은 0입니다.
max	선택 가능한 최댓값, 최댓값은 360입니다.

텍스트 필드

텍스트 필드(텍스트 입력 상자)는 사용자가 문자열을 입력할 수 있게 합니다. 필드에 문자가 추가되거나 제거될 때마다 입력값이 업데이트됩니다.

<meta property="myText" label="Text Field" type="textfield" default="yourText">

다음과 같이 표시됩니다:

속성	설명
default	문자가 없을 수 있습니다.

목록은 사용자가 미리 정의된 값 목록에서 하나의 옵션을 선택할 수 있게 합니다. 예를 들어, 사용자가 다른 캐릭터 선택지나 효과 중에서 선호하는 옵션을 선택할 수 있습니다.

<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3"
    default="Low Health"/>

실제로 사용하면 다음과 같이 표시됩니다:

values 속성은 사용 가능한 모든 선택지를 정의하고, default 속성은 처음에 선택된 옵션을 지정합니다.

속성	설명
values	가능한 문자열 옵션의 쉼표로 구분된 목록
default	기본 선택 옵션을 설정합니다. 이 값이 values 목록에 포함되어 있지 않으면 콤보 박스에 기본 선택이 표시되지 않아 문제가 발생할 수 있습니다.

애플리케이션에서 원시 데이터를 수집하는 방법에 대한 자세한 내용은 스마트 태그 페이지를 확인하십시오!