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

변경점 공개Diff Reveal

Diff Reveal

변경점 공개

다른 이름Also known as · Semantic diff paint · 추가와 삭제 코드 색 공개

358

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

도판Fig. 358. 변경점 공개 · Diff Reveal · power2.out

추가된 줄과 삭제된 줄이 다른 색으로 나타나고 변경 표시가 함께 생기는 공개Added and removed lines appear in different colors with change markers.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

무엇이 더해지고 무엇이 빠졌는지 방향으로 바로 구분한다The direction of a change is clear at a glance.

언제 쓰나Use whenUSE WHEN

코드 리뷰·PR 변경을 설명할 때
문서 두 버전의 차이를 보여 줄 때

When explaining code review or PR changes
When showing the difference between two document versions

과용 주의AvoidAVOID

+/- 기호를 색과 함께 둔다
한 화면 변경 줄 8개 이하
삭제를 먼저, 추가를 나중에

분류TagsTAGS

UI 시연UI Demo 설명Explain 비교Compare 설명 영상Explainer video 제품 시연Product demo 발표Presentation 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

삭제 줄은 적색 배경으로 0.25초에 나타나고 취소선이 그어진 뒤, 추가 줄이 녹색 배경으로 0.25초 뒤에 나타난다

과용 · 나쁜 사례OVERUSE

색만 다르고 +/- 표시가 없거나, 변경 줄이 너무 많아 읽을 수 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
줄 등장	0.25s	0.2~0.4s	각 줄 fade
삭제와 추가 간격	0.25s	0.15~0.4s	삭제 먼저
추가 색	#1f9d55 배경 알파 0.18	알파 0.12~0.25	녹색
삭제 색	#d64545 배경 알파 0.18	알파 0.12~0.25	적색

GSAP

tl.from('.del', { opacity: 0, duration: 0.25, ease: 'power2.out' }, 0.3)
  .fromTo('.del-line', { scaleX: 0 }, { scaleX: 1, transformOrigin: '0 50%', duration: 0.25 }, 0.55)
  .from('.add', { opacity: 0, x: -12, duration: 0.25, ease: 'power2.out' }, 0.8);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 코드 변경을 공개해줘. .del 줄은 0.3초에 opacity 0에서 0.25초로 나타나 0.55초에 취소선을 0.25초 그리고, .add 줄은 0.8초에 x -12px, opacity 0에서 0.25초 power2.out으로 나타나. 삭제는 적색 알파 0.18, 추가는 녹색 알파 0.18에 +/- 기호를 함께 표시해.

Reveal the code change in <target> with GSAP. The .del line fades in at 0.3s over 0.25s and gets a strikethrough drawn at 0.55s over 0.25s, then the .add line enters at 0.8s from x -12px, opacity 0 over 0.25s with power2.out. Deleted is red at alpha 0.18, added is green at alpha 0.18, and show +/- signs too.

Codex

<파일>의 <대상> diff에 diff-reveal을 적용해. .del from opacity 0(0.25s, position 0.3), .del-line scaleX 0→1(0.25s, 0.55), .add from {opacity 0, x -12}(0.25s, 0.8). 0.4초·0.7초·1.2초를 캡처해 삭제가 먼저이고 +/- 기호가 보이는지, 색 대비가 3:1 이상인지 확인해.

Apply diff-reveal to the <target> diff in <file>. .del from opacity 0 (0.25s, position 0.3), .del-line scaleX 0 to 1 (0.25s, 0.55), .add from {opacity 0, x -12} (0.25s, 0.8). Capture at 0.4s, 0.7s and 1.2s to check deletions come first, +/- signs are visible and contrast is at least 3:1.