Amartileyton/autovideo

기사 하이라이트

remotion-best-practices, motion-graphics, cinematic-camera와 함께 사용하여 뉴스, 릴리스, 트렌드, 기사 증빙 자료(Proof) 상황에 활용하세요. 터미널이 어색하게 느껴질 때 적합합니다.

필수 입력

코딩을 시작하기 전에, 누락된 결정 사항을 반드시 물어보세요:

어떤 형식을 원하시나요: Instagram 4:3 하프 스크린 인서트 또는 9:16 풀 스크린? 그리고 어떤 배경을 원하시나요: 따뜻한 조명(warm light), 깔끔한 다크(clean dark), 라이트 그리드(light grid), 또는 다크 그리드(dark grid)?

• 4:3 인서트: 1440×1080, 9:16 프레임의 대략 절반 크기에서도 읽을 수 있도록 설계됨.
• 9:16 풀 스크린: 1080×1920, 캡션/인터페이스 영역을 존중함.
• 명시적으로 요청된 경우에만 16:9 사용.
• 사용자가 배경을 위임하면 따뜻한 조명(warm light) 사용.

기사 종이는 깔끔한 다크(clean-dark) 또는 다크 그리드(dark-grid) 장면에서 밝게 유지될 수 있습니다. 구성 전체를 조용히 어둡게 변경하지 마십시오.

절대적 시각 금지 사항

네온(neon) 효과, 글로우(glow), 발광(bloom), 빛나는 가장자리, 색상 그림자, 청록-보라색 그라데이션, 그라데이션 구체, 방사형 색상 워시, 글래스모피즘(glassmorphism), 사이버펑크 조명, 또는 분위기 코딩된 AI 장식은 전혀 허용되지 않습니다. 하이라이트는 물리적 마커/종이처럼 보여야 하며, 방출된 빛처럼 보여서는 안 됩니다.

금지된 처리 방식은 전달 전에 거부하십시오.

승인된 참조

assets/examples/article-highlight.mp4를 검사하고, 코딩 전에 참조 프레임을 확인/참조하십시오. 해당 편집 계층 구조, 넉넉한 종이 여백, 절제된 마커 처리, 느린 카메라 움직임, 가독성을 따르십시오. 로컬 자산을 사용할 수 없는 경우 공식 저장소 갤러리를 참조하십시오: https://github.com/Liamrjohnston/remotion-motion-graphics-skill.

사용 시기

다음 경우에 사용하십시오:

• 정보 제공/뉴스/릴리스/트렌드 비트.
• "무언가 변경되었거나 출시되었다"는 증거.
• 의미 있는 하이라이트 구절이 포함된 실제 기사 발췌문.
• 편집 자료가 요점을 명확히 설명하는 비터미널 증거.

CLI/설정/에이전트 실행 스토리에는 terminal-inserts를 사용하십시오. 제품 데모 비트에는 실제 제품 영상/UI를 사용하십시오.

핵심 아키텍처

마커 획이 텍스트 뒤에 위치해야 할 때 기사를 평면화(flatten)하지 마십시오. 계층적 Remotion DOM/SVG를 구축하십시오:

1. 선택한 장면 표면.
2. 넉넉한 안전 여백이 있는 편집 종이/카드.
3. 종이 위에 있는 Rough.js/SVG 마커 레이어.
4. 마커 위에 있는 DOM/SVG 텍스트.

마커는 텍스트 뒤, 종이 위에 명확히 위치해야 합니다.

소재 및 레이아웃

• 종이: 중성적인 테두리와 부드러운 중성 그림자가 있는 따뜻한 흰색/오프 화이트; 색상 글로우 사용 금지.
• 타이포그래피: 편집/뉴스 계층 구조—작은 섹션 레이블, 큰 세리프/편집 헤드라인, 흐릿한 바이라인/날짜, 최대 2~3줄의 짧은 본문.
• 하이라이트: 절제된 반투명 물리적 마커 색상(예: 음영 처리된 노란색); 형광색 사용 금지.
• 실제 기사/출처 아이덴티티와 제공된 사본을 사용하십시오. 출판물, 날짜, 주장, 인용구를 직접 만들어 내지 마십시오.
• 의도적으로 하드 랩(hard-wrap)하고 텍스트를 변환된 안전 여백 내에 유지하십시오.
• 제목 슬라이드처럼 중앙에 배치하지 마십시오. 실제 기사 발췌문처럼 느껴져야 합니다.
• 대상 크기에서 읽을 수 없는 경우, 필수적이지 않은 필/버튼/소스 클러터를 제거하십시오.

애니메이션

• 승인된 참조를 지원하는 경우에만 짧고 절제된 블러-투-포커스(blur-to-focus)로 시작하십시오. 블러는 광학적 초점이며 글로우가 아닙니다.
• 초기 포커스 단계에서는 마커가 보이지 않아야 합니다.
• 느리고 미묘한 카메라 푸시와 절제된 원근 회전을 사용하십시오.
• 포커스가 안정된 후에 마커 획을 시작하십시오.
• 마스크/와이프를 사용하여 각 하이라이트를 왼쪽에서 오른쪽으로 그리십시오.
• 하이라이트를 순차적으로 배치하십시오. 한 번에 모두 표시하지 마십시오.
• 모든 주요 구절을 읽을 수 있는 상태로 안정적으로 유지하여 끝냅니다.
• useCurrentFrame(), spring(), interpolate()를 사용하여 애니메이션을 구동하십시오. CSS 애니메이션 사용 금지.

하이라이터 규칙

• rough.js 또는 불규칙한 SVG 마커 모양을 사용하십시오.
• 마커는 텍스트 뒤에 유지됩니다.
• 약간의 불완전함은 좋습니다. 완벽한 그라데이션 사각형은 아닙니다.
• 전체 단락이 아닌 의미 있는 확인된 구절만 하이라이트하십시오.
• 마커 불투명도는 텍스트 대비를 유지해야 합니다.
• 형광 노란색, 빛 방출, 블러 헤일로, 빛나는 가장자리 사용 금지.

중복 내레이션 금지

기사/소스 텍스트는 실제 증거인 경우에만 나타날 수 있습니다. 말로 설명된 VO를 단순히 반복하는 별도의 헤드라인을 추가하지 마십시오. 실제 발췌문과 최소한의 구조적 메타데이터만 사용하십시오.

첫 번째 거부 게이트(First-pass rejection gate)

모든 답변에 "아니요"라고 대답할 때까지 전달하지 마십시오:

1. 형식 또는 배경이 확인되지 않았습니까?
2. 네온, 글로우, 발광 마커 처리, 색상 그림자, 그라데이션 워시, 또는 글래스모피즘이 있습니까?
3. 소스/기사 아이덴티티 또는 주장이 만들어낸 것입니까?
4. 카드가 편집 표면 대신 일반적인 중앙 정렬 제목 슬라이드입니까?
5. 선택한 Instagram 배치에서 주요 텍스트를 읽을 수 없습니까?
6. 마커가 텍스트 위에/가려서 있거나 너무 일찍 나타납니까?
7. 카메라가 종이를 자르거나 빈 공간을 이동합니까?
8. 결과물이 승인된 참조의 절제와 정교함을 놓치고 있습니까?

게이트를 통과할 때까지 비공개로 수정하십시오.

QA 및 전달

1. 타입 체크 또는 가장 작은 의미 있는 유효성 검사를 실행하십시오.
2. 하이라이트가 없는 초기 스틸, 중간 획 스틸, 최종 하이라이트 스틸, 종료 홀드 스틸을 렌더링하십시오.
3. 마커가 초기에 보이지 않고, 텍스트 뒤에 있으며, 마지막에 완료되었는지 확인하십시오.
4. 클리핑, 읽을 수 없는 사본, 만들어낸 소스 세부 정보, 네온/글로우, 약한 프레이밍이 있는지 검사하십시오.
5. 해상도, 지속 시간, 정확한 렌더 명령어, 에디터 배치 참고 사항과 함께 MP4를 전달하십시오.