유튜브 썸네일을 반복해서 만든다면 제공된 템플릿과 AI 스킬을 활용해 제목과 배경을 바꾸고 이미지를 캡처하는 과정을 정리할 수 있습니다. 이 글은 영상에 나온 도구와 공개 저장소의 사용 안내를 바탕으로 합니다. 실행 시간이나 모든 외부 도구의 무료 사용을 보장하지는 않습니다.
준비물과 결과
- Node.js와 Git, 인터넷 연결
- 썸네일 템플릿을 내려받을 작업 폴더
- 제목과 사용할 권리가 있는 배경 이미지
- 선택 사항: 코드를 설명받고 수정할 AI 에이전트
저장소는 React와 Vite로 화면을 그리고 Puppeteer로 캡처해 PNG 파일을 만드는 구조를 설명합니다. AI 이미지 생성 도구나 외부 서비스는 별도의 이용 조건과 비용이 적용될 수 있습니다.
1. 저장소를 받고 의존성을 설치합니다
프로젝트를 저장할 위치에서 영상에 소개된 명령을 실행합니다.
git clone https://github.com/nam-ai-trend/2_thumbnail_skill.git
cd 2_thumbnail_skill
npm install
설치 전에 저장소 README를 열어 필요한 환경과 변경된 안내가 없는지 확인하세요. 네트워크나 브라우저 설치 오류가 발생하면 오류 메시지와 해당 프로젝트의 최신 안내를 먼저 확인합니다. 영상 원문에 있는 설치 스크립트 무시 옵션은 필요한 구성요소 설치까지 건너뛸 수 있으므로 만능 해결책으로 사용하지 않습니다.
2. 제목과 배경을 준비합니다
저장소의 현재 README는 사용할 배경 이미지를 public/ 폴더에 넣고 src/App.tsx에서 제목과 배경 경로를 설정하는 흐름을 설명합니다. 화면 디자인을 직접 바꾸기 어렵다면 사용하는 AI 에이전트에게 해당 파일의 구성과 수정할 위치를 설명해 달라고 요청할 수 있습니다.
이 프로젝트의 README와 src/App.tsx를 확인하고,
썸네일 제목을 [제목], 배경을 [파일 경로]로 바꾸려면
어디를 수정해야 하는지 설명해 주세요.
이 요청은 설명용 예시입니다. AI가 제안한 파일 변경은 적용하기 전에 살펴보세요.
3. 화면을 실행하고 PNG로 캡처합니다
현재 저장소 안내에 따라 프로젝트에서 개발 서버를 실행합니다.
npm run dev
서버가 실행 중인 상태에서 다른 터미널을 열고 캡처 스크립트의 출력 경로를 지정합니다.
node screenshot.js outputs/my-project/thumbnail.png
영상에서는 AI 에이전트에 /thumbnail script.md '썸네일 제목' 형태로 요청하는 방법도 소개합니다. 이 명령의 인식 여부는 사용하는 에이전트와 스킬 설정에 따라 다를 수 있습니다. 동작하지 않는다면 저장소의 현재 README와 .agents/skills/thumbnail/ 안내를 확인하세요.
4. 결과 이미지를 확인합니다
생성된 PNG를 열어 제목 오탈자와 이미지 사용 권한을 확인하세요. 유튜브 화면의 재생 시간 표시나 작은 목록 크기에서 중요한 문구가 가려지지 않는지도 살펴봅니다. 영상은 여러 레이아웃을 소개하지만 실제 생성 개수와 결과는 실행한 코드·설정에 따라 확인해야 합니다.
이 글은 영상과 저장소의 안내를 정리한 것이며 현재 환경에서 프로그램을 다시 실행한 결과는 아닙니다.
다음 한 걸음
내 환경에서 막힌 부분은 실행 단계와 함께 질문해 주세요. 바꿔 만든 결과도 함께 나눌 수 있습니다.