Communitygithub.com

비디오 스킬: 영상 디자인 및 시각 규칙

프로그램 영상과 대중과학 영상의 시각적 요소(다이어그램, 연결선, 예시와 함께 쓰이는 용어, 슬라이드 유지 시간, 부드러운 전환, 카메라 인, 프레임 속 타이틀과 그림, 소련 대중과학/필름스트립 스타일의 팔레트·폰트·그레인·비네트)에 대한 규칙입니다. 프레임, 슬라이드, 다이어그램, 타이틀, 전환 또는 영상 스타일을 디자인·그리거나 편집할 때, 그리고 조립 전 프레임을 확인할 때 사용하세요.

비디오 스킬: 영상 디자인 및 시각 규칙란 무엇인가요?

이 스킬은 코드 작동 시연 영상, 대중과학 영상, 스타일화된 프레젠테이션 영상을 제작할 때 시각적 일관성과 명확성을 보장하기 위한 일련의 규칙을 제공합니다. 주요 규칙으로는 연결선이 블록이나 텍스트를 통과하지 않도록 곧게 배치하는 것, 모든 용어에 실제 적용 예시(참가자, 동작, 숫자가 포함된 장면)를 함께 제시하는 것, 슬라이드 유지 시간을 임의로 지정하지 않고 텍스트 양에 따라 계산하는 것, 전체 영상에 하나의 전환 효과(기본적으로 디졸브)를 사용하는 것, 인접 프레임의 공통 요소가 동일한 좌표와 크기를 유지하도록 하는 것, 그리고 팀이 검증한 내용만을 그림으로 표시하는 것이 포함됩니다. 또한 소련 대중과학과 1970년대 필름스트립 스타일의 절제된 팔레트, 시대적 디테일, 카메라 흔들림·깜빡임·스크래치가 없는 평면적인 이미지를 지향합니다. 이 규칙들은 시각적 요소(Visual), 비디오(Video), 대중과학(Popsci) 등 다양한 소스의 과거 영상 제작 교훈을 바탕으로 작성되었으며, 실제 프레임을 그리고 편집하고 조립 전 확인하는 과정에서 참조할 수 있습니다. Claude Code, Cursor, Codex 등 AI 어시스턴트와 함께 사용하여 영상 제작 워크플로우의 품질을 높일 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ascorblack/video-skills/tree/HEAD/skills/video-design

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

영상 디자인 및 시각 규칙

모든 규칙은 과거 영상 제작 교훈에서 가져왔으며, 출처는 대괄호 안에 표시합니다(범례는 하단 참조). 출처가 서로 다른 조언을 할 경우, 두 조언을 모두 제공하고 각각이 적용되는 경우를 함께 명시합니다.

간단 규칙

  1. 프레임의 최종 상태에서 선이 블록, 텍스트 또는 다른 선을 통과하지 않아야 합니다. [시각] 연결선은 직선으로 블록을 우회합니다. [비디오]
  2. 모든 용어에는 적용 예시(참가자, 동작, 숫자가 포함된 장면)가 함께 제공됩니다. 슬라이드당 하나의 아이디어만 담습니다. [시각]
  3. 슬라이드 표시 시간을 임의로 지정하지 말고 계산합니다. 텍스트를 먼저 확인하기 전에 영상 길이를 설정하지 마십시오. [시각] 출처에 따라 유지 시간 기준이 다릅니다. 자세한 내용은 pacing-and-transitions.md를 참조하세요.
  4. 전체 영상에 하나의 전환 효과를 사용합니다. 기본값은 디졸브입니다. 이음새에서 크기 조절(스케일링)을 사용하지 마십시오. [비디오] [시각] [대중과학]
  5. 인접한 프레임의 공통 요소는 동일한 좌표와 동일한 크기를 유지합니다. 다음 장면은 이전 장면의 최종 상태에서 시작됩니다. [시각]
  6. 캡션이 떨리거나 읽히기 전에 사라지지 않아야 합니다. [비디오]
  7. 프레임 속 그림은 팀이 검증한 내용만을, 실제로 검증된 표현 그대로 사용합니다. [시각]
  8. 화면상의 텍스트와 내레이터의 텍스트는 동일한 출처에서 가져옵니다. [비디오]
  9. 먼저 정적 프레임을 "전 → 동작 → 후" 순서로 만들고 독립적으로 확인한 후, 동일한 프레임으로 영상을 제작합니다. [시각]
  10. 실제 화면 캡처 대신 인터페이스 목업을 그리지 마십시오 [비디오] — 단, 스타일화된 대중과학 영상에서는 모든 프레임에서 인터페이스를 다시 그렸습니다 [대중과학]. 두 경우 모두 video-ui-capture 스킬에 설명되어 있습니다.
  11. 대중과학 스타일화: 절제된 팔레트, 시대적 디테일, 흔들림·깜빡임·스크래치가 없는 카메라. [대중과학]

세부 규칙

  • lines-and-layout.md — 다이어그램의 선, 타이틀, 그림, 캡션, 교차점 확인 방법.
  • explanations.md — 용어 + 적용 예시, 숫자, 번역.
  • pacing-and-transitions.md — 슬라이드 유지 시간, 전환, 이음새에서의 점프 원인, 카메라.
  • retro-style.md — 대중과학 및 필름스트립 스타일의 평면적인 그림, 필름 효과.
  • process.md — 작업 순서 및 납품 전 프레임 확인.

출처

  • [오디오] — 보관된 홍보 영상 및 프레젠테이션의 사운드 및 내레이션 강의.
  • [비디오] — 보관된 비디오 강의: 인터페이스 녹화, 속도, 전환.
  • [시각] — 보관된 스키마틱 프레임(HTML 프레임 → 프레임별 렌더)으로 구성된 홍보 영상 시각 강의.
  • [3D] — 브라우저 기반 3차원 1인칭 영상(three.js → 프레임별 렌더) 강의.
  • [대중과학] — 소련 대중과학 및 1970년대 초 필름스트립 스타일 영상 강의.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

ascorblack/video-skills

Правила 3D-анимации для роликов в браузере (three.js → покадровый рендер) и анимации фигур с предметами — руки и тело от первого лица, рукав и манжета, контакт кисти с предметами и поверхностями, смешивание поз и углов, расталкивание персонажей, ходьба без скольжения, свечение, контактные тени, процедурные материалы, детекторы пересечений и рывков. Используй, когда строишь, анимируешь или проверяешь 3D-сцену, персонажей, руки, предметы в руках или свет в ролике.

ascorblack/video-skills

Правила звука для роликов — фоновая музыка и звуковое оформление, совпадение звука с картинкой, сведение голоса и музыки (LUFS, истинный пик, приглушение), удлинение музыки без стыков, синтез дикторской озвучки (дословность, темп), архивный «эфирный» голос с помехами, сдача звука и работа с API-ключами. Используй, когда делаешь, сводишь, проверяешь или правишь музыку, звуковые эффекты, озвучку или микс ролика.

ascorblack/video-skills

Правила рендера и оптимизации роликов из HTML/браузерных кадров — грабли покадрового рендера с перемоткой (твины, CSS-анимации, transform, aspect-ratio, SVG use, тяжёлые слои), детерминизм и повторяемость, где уходит время рендера, кодирование на NVENC с битрейтом, воркеры, отвязанный от сессии рендер, вшивание звука без перерендера картинки, проверка готового файла (ffprobe) и хранение версий. Используй, когда рендеришь, ускоряешь, кодируешь, пересобираешь или сдаёшь готовое видео.

ascorblack/video-skills

Правила записи интерфейса программы для роликов, презентаций и gif — покадровая съёмка браузера в виртуальном времени (headless Chrome, beginFrame), демо-стенд с выдуманными данными, курсор, метки во время записи, запасы в начале и конце дубля, лист кадров, наезды и обрезка записи, экран программы в стилизованном кадре, версия на другом языке с теми же кликами и синхронизация рук в 3D-сцене с записью. Используй, когда снимаешь, режешь, ускоряешь или вставляешь в ролик запись экрана приложения.

관련 스킬