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

가림 영역 추적Tracked Redaction

Tracked Redaction

가림 영역 추적

다른 이름Also known as · Sensitive-region animated blur · 화면 가림 영역 추적

356

렌더 추가 예정CLIP COMING가림 영역 추적Tracked Redaction정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 356. 가림 영역 추적 · Tracked Redaction · none

민감한 필드를 덮는 가림 레이어가 대상의 이동과 크기 변화를 함께 따른다.A redaction layer follows the position and size of a sensitive field.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

시연의 맥락을 유지하면서 공개할 수 없는 정보를 가린다.Preserves the context of a demo while hiding information that cannot be shared.

언제 쓰나Use whenUSE WHEN

계정 정보가 포함된 제품 화면을 이동하며 시연할 때
민감한 입력 필드가 확대되거나 스크롤될 때

Demonstrating moving product screens that contain account details.
Zooming or scrolling a sensitive input field.

과용 주의AvoidAVOID

민감한 원문을 DOM이나 녹화 소스에 남기지 않는다.
실제 비밀 정보에는 블러 대신 불투명 가림을 쓴다.

분류TagsTAGS

UI 시연UI Demo 설명Explain 피드백Feedback 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

이메일 필드와 단색 가림을 같은 부모에 넣어 1초 동안 위로 240px 이동해도 내용이 드러나지 않는다.

과용 · 나쁜 사례OVERUSE

가림을 0.1초 늦게 따라오게 해 이동 중 이메일 일부가 노출된다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
추적 지연	0ms	0ms	대상과 같은 부모에서 즉시 함께 이동한다.
블러 반경	12px	8~24px	비민감한 예시 데이터의 흐림 연출에만 쓴다.
가림 불투명도	1	1	단색 가림은 완전히 불투명하게 유지한다.
여유 폭	8px	4~16px	1920x1080 기준으로 필드 가장자리까지 덮는다.

GSAP

.field { position: relative; }
.field .redaction {
  position: absolute; inset: -8px;
  background: #20242c; opacity: 1;
  pointer-events: none; z-index: 2;
}
.field .redaction.blur { background: transparent; backdrop-filter: blur(12px); }

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>의 민감한 필드를 대체 문자열로 바꾸고 같은 부모 안에 단색 가림을 추가해. 가림은 inset -8px, opacity 1, 추적 지연 0ms로 두고 부모의 이동과 크기 변화를 함께 따르게 해. 블러 변형은 예시 데이터에만 12px로 적용해.

In <file>, replace sensitive content in <target> with placeholder text and add an opaque redaction layer inside the same parent. Use inset -8px, opacity 1, and zero tracking delay so the layer follows all parent movement and resizing. Apply the 12px blur variant only to sample data.

Codex

<파일>의 <대상> 필드에 position relative와 자식 가림 레이어를 적용해. inset -8px, opacity 1, 지연 0ms로 설정하고 부모를 1초 동안 위로 240px 이동시켜. 0초, 0.5초, 1초 캡처에서 필드 가장자리가 모두 덮이고 원문이 노출되지 않는지 확인해.

In <file>, give the field in <target> relative positioning and add a child redaction layer. Set inset -8px, opacity 1, and zero delay, then move the parent upward by 240px over 1 second. Capture at 0, 0.5, and 1 second to verify full edge coverage and no exposed source text.