단위 격자Unit Grid Fill

Unit Grid Fill

단위 격자

다른 이름Also known as · 와플 차트 채움 · Waffle chart fill · Hex tile map · 육각 타일 지도 · Sequential unit population · 단위 수량 순차 채우기 · Unit share recoloring · 단위 비율 색칠

245

도판Fig. 245. 단위 격자 · Unit Grid Fill · power2.out

재생 속도Speed

전체를 나타내는 격자에서 해당 개수만 순서대로 채우는 표현An animation that fills a specified number of cells in sequence within a grid representing the whole.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

전체 중 일부의 비율과 실제 개수Shows both the proportion and the actual count of a subset.

언제 쓰나Use whenUSE WHEN

전체 중 일부의 비율과 실제 개수를 보여줄 때
30칸 중 18칸을 채워 선택 비율 60%를 보여준다와 같은 장면을 만들 때

When showing the proportion and actual count of a subset
When filling 18 of 30 cells to show a selection rate of 60%

과용 주의AvoidAVOID

최종 상태를 0.5초 이상 유지한다
동일 화면에서 불필요한 주홍 강조를 추가하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

30칸 중 18칸을 채워 선택 비율 60%를 보여준다

과용 · 나쁜 사례OVERUSE

분모를 생략하고 채워진 칸만 보여 비율을 오해하게 한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전체 칸	30	10~100	전체 시행 횟수
채움 칸	18	0~30	해당 시행 횟수
스태거	0.06s	0.03~0.09s	왼쪽에서 오른쪽 순서
채움 지속	0.32s	0.2~0.5s	칸 내부 scaleY 사용

GSAP

tl.fromTo('.fill',{scaleY:0},{scaleY:1,duration:.32,stagger:.06,ease:'power2.out'},
  .3);
tl.to('.caption',{opacity:1,duration:.3},1.82);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 단위 격자 효과를 적용해. 30칸 중 18칸을 채워 선택 비율 60%를 보여준다. 전체 칸 30; 채움 칸 18; 스태거 0.06s; 채움 지속 0.32s로 만들고 이징은 power2.out를 써. GSAP 타임라인 하나로 제어하고 2.5초부터 3초까지 완성 상태를 유지해.

Apply Unit Grid Fill to <target>. Fill 18 of 30 cells to show a selection rate of 60%. Use these settings: total cells 30; filled cells 18; stagger 0.06s; fill duration 0.32s; ease power2.out. Control everything with a single GSAP timeline and hold the completed state from 2.5 to 3 seconds.

Codex

<파일>의 데이터 장면에 단위 격자 효과를 구현해. 전체 칸 30; 채움 칸 18; 스태거 0.06s; 채움 지속 0.32s를 적용하고 이징은 power2.out로 지정해. 0초, 0.75초, 1.75초, 2.9초를 캡처해서 시작 상태와 진행 변화, 최종 상태의 잘림과 겹침을 확인해. Math.random과 타이머 없이 타임라인으로 재생하고 마지막 0.5초 이상 정지해.

Implement Unit Grid Fill in the data scene in <file>. Use these settings: total cells 30; filled cells 18; stagger 0.06s; fill duration 0.32s; ease power2.out. Capture at 0, 0.75, 1.75, and 2.9 seconds to check the initial state, progression, and any clipping or overlap in the final state. Play using a timeline without Math.random or timers, and hold still for at least the final 0.5 seconds.