코드 변경 전개Code Diff Reveal

Code Diff Reveal

코드 변경 전개

다른 이름Also known as · Code diff · 코드 차이 전개 · Code edit insertion and removal · 코드 삽입과 삭제 · Code Token Replace and Reflow · 코드 토큰 교체와 재배치

372

렌더 추가 예정CLIP COMING코드 변경 전개Code Diff Reveal정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 372. 코드 변경 전개 · Code Diff Reveal · power2.out

삭제된 줄이 붉게 줄어 사라지고 추가된 줄이 초록색으로 펼쳐진다.Removed lines collapse and added lines expand with distinct markings.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

변경 전후의 추가와 삭제를 구별한다.Distinguishes what changed between code versions.

언제 쓰나Use whenUSE WHEN

삭제 줄에는 마이너스, 추가 줄에는 플러스 표식을 붙여 공개한다.
변경 전후의 추가와 삭제를 구별한다. 기준값과 대상을 함께 표시할 때.

Explain additions and deletions in code.
Keep the encoded values, labels, and visual state synchronized.

과용 주의AvoidAVOID

코드 읽기 시간을 최소 2초 확보한다.

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 제품 시연Product demo 스크롤덱Scroll deck 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

삭제 줄에는 마이너스, 추가 줄에는 플러스 표식을 붙여 공개한다.

과용 · 나쁜 사례OVERUSE

색만 바꾸고 삭제와 추가의 구분 표식을 생략한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
장면 지속	6000ms	4000~8000ms	읽기 정지 포함
줄 간격	100ms	60~180ms	줄 순서 유지
줄 교체	400ms	250~600ms	삭제 후 추가

GSAP

const tl=gsap.timeline({paused:true});
tl.to('.removed',{opacity:0,height:0,duration:0.4,stagger:0.1,ease:'power2.out'},1);
tl.fromTo('.added',{opacity:0,height:0},{opacity:1,height:32,duration:0.4,stagger:0.1,ease:'power2.out'},2);
tl.to({}, {duration:3},3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 코드 변경 전개을 적용해. 원본과 결과 줄을 비교한 고정 상태표로 줄 마스크와 위치를 보간한다. 장면 지속 6000ms; 줄 간격 100ms; 줄 교체 400ms을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Codex

<파일>의 설명 장면에서 <대상>에 코드 변경 전개을 적용해. 원본과 결과 줄을 비교한 고정 상태표로 줄 마스크와 위치를 보간한다. 장면 지속 6000ms; 줄 간격 100ms; 줄 교체 400ms을 적용한다. 0초, 3초, 6초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Code Diff Reveal on <target> in <file>. Use a 6000ms scene with 100ms line stagger and 400ms line replacements. Mark removals with minus signs and additions with plus signs and leave at least 2s to read. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 3s, and 6s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.