효과Effects / 도형·패스Shape & Path / Nº 409

격자 그리기Grid Draw

Grid Draw

격자 그리기

다른 이름Also known as · Grid Build · 격자 생성 · Grid effect

409

렌더 추가 예정CLIP COMING격자 그리기Grid Draw정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 409. 격자 그리기 · Grid Draw · power2.out

가로·세로 선이 차례로 그려져 화면에 격자가 생긴다.Horizontal and vertical lines draw in sequence to build a grid.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

좌표와 모듈 구성의 기준을 알려준다.Establishes a coordinate system or modular layout reference.

언제 쓰나Use whenUSE WHEN

데이터를 표시하기 전에 좌표 기준을 소개할 때
디자인 시스템의 모듈 간격을 보여줄 때

Introduce coordinates before plotting data.
Reveal the module spacing of a design system.

과용 주의AvoidAVOID

격자 대비가 데이터 표시보다 높아지지 않게 한다.

분류TagsTAGS

도형·패스Shape & Path 설명Explain 순서·흐름Sequence 설명 영상Explainer video 스크롤덱Scroll deck 웹 UIWeb UI 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

48px 간격의 격자선을 0.03초씩 늦춰 각각 0.8초 동안 그린다.

과용 · 나쁜 사례OVERUSE

배경 격자를 본문보다 진하게 그려 정보보다 선이 먼저 읽힌다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
선 그리기	800ms	500~1200ms	각 선의 길이를 공개한다.
셀 간격	48px	32~96px	가로와 세로 간격을 맞춘다.
선 지연	30ms	15~60ms	선별 시작 시각의 차이다.
선 두께	1px	1~2px	기준선으로 읽히게 둔다.
이징	power2.out	none \| power2.out \| power2.inOut	끝점을 넘지 않는 이징을 쓴다.

GSAP

const tl=gsap.timeline({paused:true});
document.querySelectorAll('.grid-line').forEach((line,i)=>{
  const length=line.getTotalLength();
  tl.fromTo(line,{strokeDasharray:length,strokeDashoffset:length},{strokeDashoffset:0,duration:0.8,ease:'power2.out'},i*0.03);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 격자 그리기를 구현해. 가로·세로 선이 차례로 그려져 화면에 격자가 생긴다. 선 그리기 800ms, 셀 간격 48px, 선 지연 30ms, 선 두께 1px, 이징 power2.out를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 격자 대비가 데이터 표시보다 높아지지 않게 한다.

Implement Grid Draw for <target> in <file>. Horizontal and vertical lines draw in sequence to build a grid. Use line duration: 800ms; cell spacing: 48px; line stagger: 30ms; stroke width: 1px; easing: power2.out in a single paused GSAP core timeline that supports seeking. Keep grid contrast lower than the plotted data.

Codex

<파일>의 <대상> 장면에 격자 그리기를 적용해. 선 그리기 800ms, 셀 간격 48px, 선 지연 30ms, 선 두께 1px, 이징 power2.out를 사용하고 다음 동작을 구현해: SVG 격자 선의 길이와 알파를 순차 보간한다. 플러그인과 Math.random 없이 작성하고 0.5초·1.2초·2초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 48px 간격의 격자선을 0.03초씩 늦춰 각각 0.8초 동안 그린다.

Apply Grid Draw to the <target> scene in <file> using line duration: 800ms; cell spacing: 48px; line stagger: 30ms; stroke width: 1px; easing: power2.out. Horizontal and vertical lines draw in sequence to build a grid. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 0.5, 1.2, 2 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Keep grid contrast lower than the plotted data.