효과Effects / UI 시연UI Demo / Nº 333

드로어 슬라이드Drawer Slide

Drawer Slide

드로어 슬라이드

다른 이름Also known as · Spring sheet · 스프링 바닥 시트 · Drawer and Sheet · 서랍 패널 등장

333

렌더 추가 예정CLIP COMING드로어 슬라이드Drawer Slide정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 333. 드로어 슬라이드 · Drawer Slide · back.out(1.4)

화면 가장자리에서 패널이 들어오고 뒤 화면이 어두워지거나 작아지며 보조 작업 영역이 열린다.An edge panel slides in while the underlying screen recedes.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

추가 행동 선택이 같은 화면 안에서 열림을 보여준다.Establishes a secondary workspace within the current screen.

언제 쓰나Use whenUSE WHEN

공유 옵션 패널을 열 때
보조 설정 영역을 소개할 때

Open sharing options.
Introduce a secondary settings area.

과용 주의AvoidAVOID

패널 내용을 화면 안전 영역 밖으로 밀지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

하단 패널이 높이 480px만큼 올라오며 배경이 0.96배로 줄어든다

과용 · 나쁜 사례OVERUSE

패널은 들어왔는데 배경 버튼도 같은 강조를 유지한다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
등장	450ms	300~650ms	패널 정착
패널 높이	480px	320~640px	진입 거리
배경 배율	0.96	0.94~1	깊이 구분
오버슛	8%	0~8%	필요 시 낮게 적용

GSAP

tl.fromTo('.drawer',{y:480},{y:0,duration:0.45,ease:'back.out(1.4)'},0);
tl.to('.screen',{scale:0.96,duration:0.45,ease:'power3.out'},0);
tl.fromTo('.backdrop',{opacity:0},{opacity:0.35,duration:0.25},0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 드로어 슬라이드을 적용한다. 480px 높이 패널을 450ms에 올리고 배경은 0.96배, 암전은 opacity 0.35로 맞춘다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Drawer Slide to <target> in <file>. Lift a 480px panel in 450ms, scale the background to 0.96, and fade the backdrop to 0.35 opacity. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 드로어 슬라이드 장면에 적용한다. 480px 높이 패널을 450ms에 올리고 배경은 0.96배, 암전은 opacity 0.35로 맞춘다. 0.11초·0.29초·0.65초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Drawer Slide in the scene for <target> in <file>. Lift a 480px panel in 450ms, scale the background to 0.96, and fade the backdrop to 0.35 opacity. Capture at 0.11s, 0.29s, 0.65s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

paused 타임라인에 드로어 슬라이드의 초기 상태와 종료 상태를 함께 기록하고 0.45초까지 seek로 재현한다.

ReelForgeBRIEF TO VIDEO

씬 워커 브리프에 드로어 슬라이드 대상 선택자와 등장 450ms, 패널 높이 480px, 배경 배율 0.96를 싣고 최종 상태 유지 시간을 지정한다.

Scrolline DeckSCROLL SCRUB

진행률 0~1을 0.45초 구간에 매핑하고 scrub에서는 스프링 대신 power3.out으로 위치를 계산한다.

잘 맞는 조합Pairs well with

Nº 346모달 등장Modal LiftModal Lift

Nº 365점진적 공개Progressive DisclosureProgressive Disclosure

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo