AI Visual Cue Studiov0.1
AI Visual Cue360 × 780 dpL1 / 3대기
① 비주얼 큐물성 · 모션
② 앱 적용실제 화면 위
0.00 / 0.00s

AI Visual Cue Studio

AI 에이전트가 깨어날 때 화면에 나타나는 비주얼 큐를 조절하고, 같은 값을 그대로 쓰는 Jetpack Compose 코드로 내보내는 도구입니다.

사용 방법

  1. Design 탭에서 컬러(그라데이션 스톱 최대 3개), 물성, 크기, 모션을 조절합니다. 프리뷰는 바로 바뀝니다.
  2. 프리뷰는 3개 뷰로 볼 수 있습니다. 좌우 화살표, 키보드 ←/→, 드래그로 넘깁니다. 스페이스바로 재생을 멈춥니다.
  3. 상단 "Set as default"를 누르면 지금 설정과 보고 있는 뷰가 이 브라우저에 기본값으로 저장됩니다. 다음에 열면 그 화면에서 시작하고, 모든 초기화 버튼도 그 값으로 돌아갑니다. 패널 맨 아래 "처음 기본값으로"를 누르면 저장한 기본값이 지워집니다.
  4. 각 슬라이더 옆 ↺ 버튼으로 그 값만, 섹션 제목 옆 "초기화"로 섹션 전체를, 맨 아래 "전체 초기화"로 모든 설정을 기본값으로 되돌립니다.
  5. 프리뷰 위 "내보내기"에서 루프 한 번을 MP4(720 × 1560, 30fps) 또는 GIF(360 × 780, 15fps, 무한 반복)로 저장합니다.
  6. Code 탭에서 Kotlin 파일 전체를 복사해 Android 프로젝트에 붙여넣고 AiVisualCueDemoLoop() 또는 AiVisualCue(level)을 호출합니다.

한 사이클

나타남화면 상단에 구가 페이드 인
L1 · 부유그림자를 드리운 채 천천히 위아래로 떠다님
L2 · 확산 · 끼어들기넓게 퍼지며 카드가 되어 앱 콘텐츠 사이에 끼어듦. 아래 콘텐츠는 밀려 내려가고, 카드 안에 리스트 3줄이 차례로 생성
L3 · 전체 화면 리스트화면 전체로 확산되어 가장자리 글로우가 되고, 리스트가 전체 화면 레이아웃(5줄)으로 재배치
사라짐제자리에서 페이드 아웃, 밀렸던 콘텐츠는 원래 위치로 돌아가며 무한 반복

출력 코드

언어Kotlin + Jetpack Compose, 단일 파일, 추가 라이브러리 없음
minSdk26
Android 13 (API 33) 이상AGSL RuntimeShader로 프리뷰와 같은 셰이더 사용
API 26 – 32그라데이션 Brush와 그림자로 근사하는 대체 경로
동기화 방식웹 프리뷰 셰이더와 AGSL은 같은 소스에서 만들어지고, 타이밍과 이징 값도 같은 숫자를 씁니다

기본 팔레트

레퍼런스 영상에서 추출한 3스톱 팔레트입니다.

v0.1 · 물성 9종(소프트 글로우, 오라, 워터, 가스, 네온, 프로스티드 글래스, 리퀴드 메탈, 펄, 매트 클레이). 프리뷰 화면 텍스트는 상단 EN / KO로 바꿉니다.