클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

Compose 그래픽스 (M3 Expressive · AGSL · Canvas)

Jetpack Compose에서 M3 Expressive 모션 물리, AGSL 셰이더, Canvas 제너러티브 드로잉을 올바른 API와 성능 규칙으로 구현하게 돕는 고급 스킬.

개발·코딩고급★ 395⑂ 29AI 점수 9/10마지막 업데이트: 2026. 9. 30.

무엇을 해주나

안드로이드 Jetpack Compose의 '화려한 시각 효과' 영역을 세 갈래로 나눠 정확한 API 선택과 구현 패턴을 제시합니다.

  • 의사결정 표: 바운스 스프링이 필요한가 → MotionScheme.expressive(), 픽셀 단위 효과 → RuntimeShader + graphicsLayer, 제너러티브 드로잉 → Canvas/DrawScope 로 바로 안내.
  • Material 3 Expressive: standard() vs expressive() 스프링 토큰(감쇠비/강성 수치까지), spatial과 effects 토큰의 차이, MaterialShapes + Morph 도형 모프 구현, 1.4.0 안정판과 1.5.0-alpha 실험 API 경계.
  • AGSL 셰이더: 터치 리플, 홀로그래픽 그라데이션, 리퀴드 글래스(크로매틱 애버레이션) 레시피와 Compose 바인딩 코드. Build.VERSION.SDK_INT >= 33 게이팅 및 하위 버전 폴백 필수 규칙 포함.
  • Canvas/DrawScope: 사인파 애니메이션, 파티클 50개 시스템, 플로우 필드, 그리고 Path 재사용·derivedStateOf 같은 성능 규칙.
  • 안티패턴 5종: Expressive 남용, SDK 게이트 누락, Canvas 상태 직접 읽기, 셰이더 4중 체이닝, DrawScope 안의 객체 할당.

이런 분께 추천

  • 안드로이드 앱에 브랜드성 강한 히어로 모션이나 셰이더 효과를 넣고 싶은 Compose 개발자
  • iOS의 글래스 효과를 안드로이드에서 재현해야 하는 UI 엔지니어
  • 커스텀 차트·파티클·제너러티브 아트를 Canvas로 그리면서 프레임 드롭을 잡아야 하는 분

활용 예시

  1. "상세 화면 카드 확장에 Expressive 스프링을 적용해줘" → slowSpatialSpec()으로 높이, defaultEffectsSpec()으로 알파를 애니메이트하는 코드 생성.
  2. "카드에 터치 리플 셰이더를 넣어줘" → AGSL 소스 + RenderEffect.createRuntimeShaderEffect 바인딩 + Android 12 이하 폴백까지 함께 작성.
  3. "배지 아이콘을 원형에서 쿠키 모양으로 모프하고 싶어" → Morph + 0..1 정규화 경로 스케일링을 처리한 커스텀 Shape 구현.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/AThevon/genjutsu/HEAD/skills/_jutsu/compose-graphics/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 AThevon/genjutsu 의 skills/_jutsu/compose-graphics 폴더를 내 ~/.claude/skills/compose-graphics/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/AThevon/genjutsu.git && mkdir -p ~/.claude/skills && cp -r genjutsu/skills/_jutsu/compose-graphics ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다.
  2. 저장소를 내려받습니다: git clone https://github.com/AThevon/genjutsu.git
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  4. 이 스킬을 복사합니다: cp -r genjutsu/skills/_jutsu/compose-graphics ~/.claude/skills/
  5. (권장) 본문이 참조하는 형제 스킬도 함께 복사합니다: cp -r genjutsu/skills/_jutsu/compose-motion genjutsu/skills/_jutsu/compose-multiplatform ~/.claude/skills/ — 또는 _jutsu 폴더 전체를 복사하면 references/ 링크가 모두 살아 있습니다.
  6. Claude Code를 재시작하고 /skills로 목록에 떴는지 확인합니다.
  7. "AGSL 셰이더로 리퀴드 글래스 효과 만들어줘"처럼 셰이더·Expressive·Canvas 키워드를 넣어 요청하면 스킬이 발동합니다.
  8. 문서 상단의 버전 검증 날짜가 오래됐다면, 실제 사용 중인 material3·graphics-shapes 버전을 먼저 확인하세요.
GitHub에서 원본 보기 ↗라이선스: NOASSERTION