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

당겨서 새로고침Pull to Refresh

Pull to Refresh

당겨서 새로고침

다른 이름Also known as · Pull to refresh · 당겨 새로고침

347

렌더 추가 예정CLIP COMING당겨서 새로고침Pull to Refresh정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 347. 당겨서 새로고침 · Pull to Refresh · back.out(1.2)

리스트를 당길수록 저항이 커지고 임계점에서 로더가 뜬 뒤 원위치로 튕겨 돌아온다.A resistant pull reaches a refresh threshold, waits, and returns.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

사용자 조작과 대기, 갱신 완료를 보여준다.Connects the gesture to loading and completion.

언제 쓰나Use whenUSE WHEN

목록 갱신 제스처를 설명할 때
로딩과 완료 상태를 구분할 때

Explain a list refresh gesture.
Distinguish loading from completion.

과용 주의AvoidAVOID

임계점과 로딩 시작을 서로 다른 시간에 두지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

목록을 100px 당기면 로더가 나타나고 갱신 뒤 제자리로 돌아온다

과용 · 나쁜 사례OVERUSE

임계점 전에 로딩이 시작되어 당김과 실행의 관계가 흐려진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
당김	800ms	600~1200ms	비선형 저항
임계 거리	100px	80~140px	1920x1080 기준
로딩	800ms	600~1600ms	고정 시연 시간
복구	500ms	350~700ms	원위치 정착

GSAP

tl.to('.refresh-list',{y:100,duration:0.8,ease:'power2.out'},0);
tl.fromTo('.loader',{opacity:0},{opacity:1,duration:0.1},0.8);
tl.to('.loader',{rotation:360,duration:0.8,ease:'none'},0.8);
tl.to('.loader',{opacity:0,duration:0.1},1.6);
tl.to('.refresh-list',{y:0,duration:0.5,ease:'back.out(1.2)'},1.6);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 당겨서 새로고침을 적용한다. 800ms에 100px 임계점에 도착하고 로더를 800ms 회전시킨 다음 500ms에 목록을 복구한다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Pull to Refresh to <target> in <file>. Reach a 100px threshold in 800ms, rotate the loader for 800ms, then restore the list in 500ms. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 당겨서 새로고침 장면에 적용한다. 800ms에 100px 임계점에 도착하고 로더를 800ms 회전시킨 다음 500ms에 목록을 복구한다. 0.53초·1.37초·2.30초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Pull to Refresh in the scene for <target> in <file>. Reach a 100px threshold in 800ms, rotate the loader for 800ms, then restore the list in 500ms. Capture at 0.53s, 1.37s, 2.30s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.