UTD Market

디지털 아이템 개발자 가이드

UTD Market 마켓플레이스의 모든 포맷을, 공식 재생 라이브러리와 Android, iOS, Web, Flutter용으로 바로 붙여 넣을 수 있는 스니펫과 함께.

포맷

지원 포맷 및 재생 라이브러리

각 포맷 아래에서 플랫폼을 선택하세요 — 라이브러리 이름은 공식 저장소로 연결됩니다.

SVGA

.svga

After Effects에서 바로 내보내는 소형 애니메이션 포맷으로, 라이브 스트리밍 선물에 널리 쓰입니다. SVGAPlayer 계열을 통해 하드웨어 가속으로 재생됩니다.

GiftView.kt
val parser = SVGAParser(context)
parser.decodeFromURL(URL(itemUrl)) { videoItem ->
    svgaImageView.setVideoItem(videoItem)
    svgaImageView.startAnimation()
}
GiftView.swift
let player = SVGAPlayer(frame: view.bounds)
SVGAParser().parse(with: URL(string: itemUrl)!) { entity in
    player.videoItem = entity
    player.startAnimation()
}
gift.js
import SVGA from "svgaplayerweb";

const player = new SVGA.Player("#canvas");
new SVGA.Parser().load(itemUrl, (videoItem) => {
  player.setVideoItem(videoItem);
  player.startAnimation();
});
gift_view.dart
SVGASimpleImage(resUrl: itemUrl);

WebP

.webp

완전한 알파 투명도를 갖춘 애니메이션 WebP 이미지를 하나의 작은 파일에 담습니다. 대부분의 플랫폼에서 기본 지원되어 추가 런타임이 거의 필요 없습니다.

AndroidGlide
GiftView.kt
// Animated WebP plays out of the box
Glide.with(context).load(itemUrl).into(imageView)
GiftView.swift
SDImageCodersManager.shared.addCoder(SDImageWebPCoder.shared)
imageView.sd_setImage(with: URL(string: itemUrl))
gift.html
<!-- Animated WebP is supported natively -->
<img src="item.webp" alt="" />
gift_view.dart
// Animated WebP is supported natively
Image.network(itemUrl);

VAP

.mp4

Tencent의 Video Animation Player 포맷: 컬러 트랙과 알파 트랙, vapc 설정 박스를 담은 MP4로, 화려한 선물 효과를 픽셀 단위로 정확하게 합성합니다.

GiftView.kt
// AnimView from the VAP SDK
animView.setLoop(1)
animView.startPlay(File(itemPath))
GiftView.m
// QGVAPWrapView from the VAP SDK
[wrapView playHWDMP4:itemPath repeatCount:0 delegate:self];
gift.js
import Vap from "video-animation-player";

new Vap({ container, src: itemUrl, config: vapcJson }).play();
gift_view.dart
VapView();
await VapController.playPath(itemPath);

MP4 Alpha

.mp4

프레임에 컬러 절반과 그레이스케일 알파 절반을 나란히 담은 일반 MP4입니다. 플레이어가 두 절반을 샘플링하여 완전히 투명한 애니메이션을 합성합니다.

GiftView.kt
// Side-by-side color/alpha video
alphaMovieView.setVideoFromUrl(itemUrl)
alphaMovieView.start()
GiftView.m
BDAlphaPlayerMetalConfiguration *config =
    [BDAlphaPlayerMetalConfiguration defaultConfiguration];
config.directory = itemDirectory;
[self.playerView playWithMetalConfiguration:config];
gift.js
// Upload each <video> frame as a texture, then in the
// fragment shader: rgb from the color half x alpha from
// the alpha half -> draw on a transparent canvas.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
  gl.UNSIGNED_BYTE, video);
gift_view.dart
// Play the mp4, sample color/alpha halves in a
// custom FragmentShader and paint the composited frame.
final controller = VideoPlayerController.networkUrl(Uri.parse(itemUrl));
await controller.initialize();
controller.play();

PAG

.pag

Tencent의 PAG(Portable Animated Graphics): After Effects 애니메이션을 아주 작은 바이너리 파일에 담아, 크로스 플랫폼 libpag 런타임(웹에서는 WASM)으로 렌더링합니다.

Androidlibpag
GiftView.kt
val pagView = PAGView(context)
pagView.composition = PAGFile.Load(itemPath)
pagView.setRepeatCount(0)
pagView.play()
GiftView.swift
let pagView = PAGView()
pagView.setComposition(PAGFile.load(itemPath))
pagView.setRepeatCount(0)
pagView.play()
gift.js
import { PAGInit } from "libpag";

const PAG = await PAGInit();
const file = await PAG.PAGFile.load(buffer);
const view = await PAG.PAGView.init(file, canvas);
view.setRepeatCount(0);
await view.play();
Flutterpag
gift_view.dart
PAGView.network(
  itemUrl,
  repeatCount: PAGView.REPEAT_COUNT_LOOP,
  autoPlay: true,
);

Lottie

.json / .lottie

Airbnb의 Lottie: After Effects 애니메이션을 JSON(또는 .lottie dotLottie 번들)으로 내보내 모든 플랫폼에서 네이티브로 렌더링합니다.

GiftView.kt
lottieView.setAnimationFromUrl(itemUrl)
lottieView.repeatCount = LottieDrawable.INFINITE
lottieView.playAnimation()
GiftView.swift
let view = LottieAnimationView(url: URL(string: itemUrl)!) { _ in }
view.loopMode = .loop
view.play()
gift.js
import lottie from "lottie-web";

lottie.loadAnimation({
  container,
  path: itemUrl,
  renderer: "svg",
  loop: true,
  autoplay: true,
});
Flutterlottie
gift_view.dart
Lottie.network(itemUrl);

APNG

.png

Animated PNG — 애니메이션 제어 청크를 갖춘 표준 PNG 포맷으로, 무손실 품질과 완전한 알파를 유지합니다. 정적 PNG 파일은 마켓플레이스에서 거부됩니다.

GiftView.kt
val drawable = APNGDrawable.fromFile(itemPath)
imageView.setImageDrawable(drawable)
GiftView.swift
// APNG plays out of the box
imageView.sd_setImage(with: URL(string: itemUrl))
gift.html
<!-- APNG is supported natively -->
<img src="item.png" alt="" />
gift_view.dart
// APNG is supported natively
Image.network(itemUrl);