개발 스킬

Remotion 문서를 수정한 풀 리퀘스트에서 이번에 바꾼 AvailableFrom 값을 main의 다음 패치 버전으로 맞추고 커밋과 푸시까지 수행합니다.

• 다음 릴리스 전 버전 표기 갱신
• 변경한 표기를 main 버전 기준으로 통일
• 풀 리퀘스트에서 수정한 항목만 변경

Remotion의 FFmpeg 의존성을 지정한 커밋으로 업데이트합니다. Windows, macOS, Linux용 실행 파일을 다시 빌드하고 검증한 뒤 초안 PR을 만듭니다.

• 공개된 FFmpeg 의존성 업데이트를 반영합니다
• 모든 지원 환경의 바이너리를 다시 빌드합니다
• Windows의 의존 라이브러리를 검증합니다

Remotion Studio에서 현재 프레임을 읽는 위치와 컴포넌트 구조, React.memo 사용법을 검토해 매 프레임의 불필요한 재렌더링을 줄입니다.

• 매 프레임의 불필요한 재렌더링 줄이기
• 이벤트에 필요할 때만 현재 프레임 읽기
• 프레임에 따른 표시를 자식 컴포넌트로 분리

Remotion Studio의 CSS 초기화 범위에서 텍스트와 SVG에 원하는 스타일을 적용하도록 안내합니다. 부모의 상속에 기대지 않고 각 요소에 값을 지정합니다.

• 부모 스타일이 자식에 반영되지 않을 때
• SVG 요소의 스타일 조정
• Studio의 CSS 초기화 범위 확인

Remotion Element의 이미지와 동영상 미리보기를 remotion.media에 업로드합니다. 로컬 URL을 공개 URL로 바꾸고 소재 상태에 따라 정리합니다.

• 새로 생성한 Element 미리보기 공개
• 커밋된 제출 소재 업로드
• 이미지와 동영상의 로컬 URL 교체

Remotion 예제 Studio를 로컬에서 실행하고 Codex 내장 브라우저로 엽니다. 의존성 설치와 빌드 후 실행 결과에 표시된 URL에 접속합니다.

• Remotion 예제 Studio를 실행할 때
• Codex에서 로컬 Studio를 열 때
• 여러 작업 사본의 접속 주소를 확인할 때

Remotion의 Mediabunny와 관련 패키지를 최신 버전으로 맞추고, 템플릿의 버전 지정과 CLI·Studio의 패키지 정보, 문서의 호환성 표까지 갱신합니다.

• Mediabunny를 최신 버전으로 업데이트
• 여러 템플릿의 의존성 버전 통일
• CLI와 Studio의 패키지 정보 갱신

Remotion의 caniuse-lite 고정 버전을 npm 최신 버전으로 갱신합니다. 작업 상태 확인, 의존성 재설치, Git 커밋과 푸시까지 다룹니다.

• caniuse-lite를 최신 버전으로 갱신합니다
• package.json의 고정 버전을 수정합니다
• 갱신 후 의존성을 다시 설치합니다

Remotion 문서에 독자가 조작할 수 있는 애니메이션 데모를 추가합니다. React 컴포넌트 작성부터 재생 설정 등록, 입력 컨트롤 구성과 MDX 삽입까지 다룹니다.

• 설명 페이지에 움직이는 데모를 추가합니다
• 슬라이더로 데모 값을 변경합니다
• 데모의 재생 조건을 설정합니다

새 효과음을 @remotion/sfx에 추가하는 절차를 안내합니다. 음원 사전 등록부터 공개용 정의, 미리 듣기 문서, 목차와 파형 데이터 갱신, 빌드까지 다룹니다.

• @remotion/sfx에 효과음을 추가합니다
• 미리 듣기와 사용 예제 문서를 만듭니다
• 효과음 목차와 파형 데이터를 갱신합니다

브라우저 WebCodecs 문제의 URL에서 제목, 보고자, 수정 상태를 확인하고 Remotion의 Mediabunny 문서에 있는 기존 표에 추가합니다.

• Chromium 문제를 문서에 추가할 때
• WebKit이나 Firefox 문제를 기록할 때
• 추가 전에 보고자와 수정 상태를 확인할 때

계속 사용할 수 있는 Remotion 공개 API를 사용 중단 예정으로 표시할 때 TypeScript 주석과 문서를 일치시킵니다. 대체 API 안내와 변경 검토에 활용합니다.

• 기존 공개 API를 사용 중단 예정으로 표시합니다
• 대체 API로의 이전 안내를 추가합니다
• 사용 중단 예정 주석과 문서를 검토합니다

Remotion의 새 효과를 구현하고 패키지 등록부터 설명 페이지, 조작 가능한 데모, 미리보기 이미지까지 만듭니다. 테스트와 빌드 확인도 포함합니다.

• 새 효과를 구현합니다
• 가져오기 진입점과 설정값 타입을 등록합니다
• 설명 페이지와 조작 가능한 데모를 만듭니다

Remotion 풀 리퀘스트의 현재 제목과 변경 내용을 검토해 개발자가 이해할 제목으로 다듬습니다. 패키지나 변경 유형에 맞는 접두사도 선택합니다.

• Remotion 풀 리퀘스트 제목을 검토할 때
• 공개 API 변경을 명확히 전달할 때
• 문서나 테스트 변경의 접두사를 고를 때

Remotion Studio 설정을 시작 시 고정되거나 다시 불러올 수 있는 항목으로 분류하고, 미리보기와 렌더링 대기열 등에서 설정이 반영되는 시점을 맞춥니다.

• Studio 설정과 CLI 옵션 추가
• 설정 변경이 반영되는 시점 검토
• 미리보기와 렌더링의 설정 통일

Remotion 풀 리퀘스트의 검사 완료를 기다리고 충돌과 실패 원인을 해결해 병합까지 진행합니다. 지속적 통합 검사의 실제 결함과 일시적인 실패를 구분합니다.

• 필수 검사 통과 후 병합합니다
• 병합을 막는 충돌을 해결합니다
• 자동 검사 실패를 조사하고 수정합니다

`bun run stylecheck`로 Remotion의 서식과 스타일을 검사하고 종료 코드가 0이 될 때까지 진행합니다. `lambda-go` 오류는 완료를 막는 요인으로 취급하지 않습니다.

• Remotion의 서식 검사를 실행할 때
• 검사를 통과할 때까지 서식 문제를 고칠 때
• 서식 작업의 완료 여부를 다시 확인할 때

Remotion Studio의 버튼과 링크에 기본 커서, 호버 시 밝아지는 글자와 아이콘, 키보드 탐색용 포커스 표시를 적용해 상호작용 스타일을 통일합니다.

• Studio 버튼과 링크 구현
• 글자와 아이콘의 호버 색상 통일
• 키보드 포커스 표시 유지

Remotion 플레이어 예제를 로컬에서 실행하고 Codex 내장 브라우저로 엽니다. 의존성 설치와 빌드를 수행하고 접속 주소와 서버 실행 상태를 알려 줍니다.

• 플레이어 예제를 로컬에서 실행합니다
• Codex 내장 브라우저에서 확인합니다
• 개발 서버 주소와 실행 상태를 확인합니다

Remotion으로 영상을 생성하거나 편집하는 앱 개발을 돕습니다. 폼 입력을 영상 출력에 연결하고, 미리보기를 삽입하며, 영상 생성 방식을 선택하도록 안내합니다.

• 폼 입력으로 영상을 생성할 때
• 영상 편집 앱을 개발할 때
• React 앱에 미리보기를 삽입할 때

Remotion과 관련 패키지의 업데이트를 돕습니다. 프로젝트 구성을 확인해 버전을 통일하고 잠금 파일과 설치된 Remotion 스킬을 갱신합니다.

• Remotion을 최신 안정 버전으로 갱신합니다
• 관련 패키지 버전을 통일합니다
• 작업 공간 전체의 의존성을 갱신합니다

Remotion 버그를 영향받는 버전과 업그레이드 대상 버전 안내와 함께 bugs API에 추가합니다. 기존 형식에 맞춰 최신 정보를 배열 맨 앞에 등록합니다.

• 보고된 버그를 API에 추가할 때
• 버그의 영향을 받는 버전을 기록할 때
• 버그 설명에 업그레이드 버전을 안내할 때

Remotion 전문가 소개 페이지에 새 인물을 추가합니다. 지정된 위치에 얼굴 사진, 프로필, 연락처를 등록하고 소개 카드 이미지를 생성한 뒤 새로 렌더링되었는지 확인합니다.

• Remotion 전문가 페이지에 인물 추가
• 얼굴 사진, 전문 분야, 연락처 등록
• 전문가 소개 카드 이미지 생성

Remotion 변경 사항에 추가된 선택적 인수를 내부 API에서는 필수 nullable 타입으로 바꾸고, 호출부와 누락 값 검사도 수정하며 공개 API의 호환성을 유지합니다.

• PR에 추가된 선택적 인수 검토
• 내부 React 속성에 null 명시
• 공개 API의 호환성 유지