효과Effects / 데이터Data / Nº 270

간트 시간 진행Gantt Progress

Gantt Progress

간트 시간 진행

270

렌더 추가 예정CLIP COMING간트 시간 진행Gantt Progress정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 270. 간트 시간 진행 · Gantt Progress · none

시간선이 작업 막대를 지나가고 해당 작업의 채워진 부분이 늘어난다.A time cursor crosses task bars while their completed portions grow.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

작업의 기간과 동시 진행 관계를 읽는다.Makes task durations and overlapping schedules readable.

언제 쓰나Use whenUSE WHEN

프로젝트 작업의 동시 진행을 설명할 때
계획 일정에 실제 진행 상황을 겹쳐 볼 때

Explain overlapping tasks in a project schedule.
Replay actual completion against planned dates.

과용 주의AvoidAVOID

완료 비율과 경과 시간 비율을 혼동하지 않는다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

여섯 작업의 시작과 종료를 고정하고 5초 동안 시간선과 작업별 채움을 함께 갱신한다.

과용 · 나쁜 사례OVERUSE

각 막대를 같은 속도로 채워 서로 다른 작업 기간이 같아 보인다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
작업 수	6개	3~10개	행별 시작과 종료를 기록한다.
재생 시간	5000ms	3000~8000ms	전체 시간축을 통과하는 시간이다.
시간축 폭	1200px	800~1500px	1920px 화면에서 라벨 공간을 남긴다.
이징	none	none \| power2.out \| power2.inOut	데이터의 시간 진행은 none을 유지한다.

GSAP

const tl=gsap.timeline({paused:true}), state={p:0};
const tasks=[{start:0,end:0.5},{start:0.2,end:0.8},{start:0.6,end:1},{start:0.1,end:0.4},{start:0.35,end:0.7},{start:0.7,end:0.95}];
tl.to(state,{p:1,duration:5,ease:'none',onUpdate:()=>{
  gsap.set('.time-cursor',{x:state.p*1200});
  tasks.forEach((t,i)=>gsap.set('.fill-'+i,{scaleX:Math.max(0,Math.min(1,(state.p-t.start)/(t.end-t.start))),transformOrigin:'left center'}));
}});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 간트 시간 진행를 구현해. 시간선이 작업 막대를 지나가고 해당 작업의 채워진 부분이 늘어난다. 작업 수 6개, 재생 시간 5000ms, 시간축 폭 1200px, 이징 none를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 완료 비율과 경과 시간 비율을 혼동하지 않는다.

Implement Gantt Progress for <target> in <file>. A time cursor crosses task bars while their completed portions grow. Use task count: 6; playback duration: 5000ms; time-axis width: 1200px; easing: none in a single paused GSAP core timeline that supports seeking. Distinguish elapsed schedule time from actual completion.

Codex

<파일>의 <대상> 장면에 간트 시간 진행를 적용해. 작업 수 6개, 재생 시간 5000ms, 시간축 폭 1200px, 이징 none를 사용하고 다음 동작을 구현해: SVG 시간축 위치를 공통 진행값으로 두고 작업별 채움 clip을 계산한다. 플러그인과 Math.random 없이 작성하고 1.25초·3.0초·5초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 여섯 작업의 시작과 종료를 고정하고 5초 동안 시간선과 작업별 채움을 함께 갱신한다.

Apply Gantt Progress to the <target> scene in <file> using task count: 6; playback duration: 5000ms; time-axis width: 1200px; easing: none. A time cursor crosses task bars while their completed portions grow. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 1.25, 3.0, 5 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Distinguish elapsed schedule time from actual completion.