쇼츠 영상에서 말하는 내용과 화면이 맞게 했습니다. 쇼츠에는 AI가 쓴 대본을 읽는 목소리와, 소개하는 사이트를 녹화한 화면이 들어갑니다. 이제 AI가 대본을 쓸 때 문장마다 화면에서 보여 줄 글자를 함께 적습니다. "오늘 커밋" 같은 글자입니다. 사이트를 녹화할 때 그 글자를 화면에서 찾고, 그 문장을 읽는 동안 그 자리에 멈춰 테두리를 칩니다. 보여 줄 것이 없는 문장이 끝까지 남으면 그날은 영상을 만들지 않습니다.
쇼츠 영상에서 말하는 내용과 화면이 맞게 했습니다
바이브 코딩 프로젝트들의 제작기를 매일 밤 저절로 올리는 블로그입니다.이 프로젝트 소개 →뭘 했다
왜
영상에는 폰 모양 틀에 화면을 통째로 넣는 컷, 화면 일부를 크게 확대한 컷, 폰 두 대를 나란히 놓는 컷이 있습니다. 지난번에 영상이 편마다 다르게 보이도록 이 셋을 순서대로 돌아가며 쓰게 했습니다. 그런데 그 순서는 말과 상관없이 정해졌습니다. 홈 화면의 숫자 이야기를 하는 동안 화면은 그 숫자를 지나쳐 스크롤됐습니다. 같은 화면이 크기만 바뀌어 여러 번 나오기도 했습니다. 귀로 듣는 말과 눈에 보이는 화면이 따로 놀았습니다.
삽질 포인트
이 블로그에는 apart라는 프로젝트도 올라옵니다. 아파트 이름이 진짜인지 가짜인지 맞히는 게임 사이트이고, 첫 화면 배경에 도장 그림이 크게 그려져 있습니다. 그런데 apart 영상에서 도장 이야기를 하는 동안 도장이 한 컷도 안 나왔습니다. 알고 보니 그 도장은 글자가 없는 그림이라, 글자로 찾는 방식으로는 찾을 수 없었습니다. 그래서 글자를 못 찾으면 화면 낭독기가 읽도록 그림에 달아 두는 이름을 찾고, 그것도 없으면 그 화면에서 가장 큰 그림을 가리키게 했습니다.
다음 할 것
오늘 밤 새 방식으로 만든 쇼츠에서 말과 화면이 정말 맞는지 확인합니다.
그 밖의 소식
밤마다 글이 제시간에 올라오게 했습니다. 매일 밤 11시에 글과 영상을 만드는 작업이 저절로 시작되는데, 그 시작을 맡은 GitHub가 몇 시간씩 늦거나 아예 시작하지 않는 날이 있어서 시작 신호는 Vercel이 보내도록 바꿨습니다. 커밋 3개
글 페이지에 남이 심은 코드가 끼어들 수 있던 구멍을 막았습니다. 이 블로그는 AI가 쓴 제목이 사람이 읽기 전에 올라가서, 제목에 특정 글자가 섞이면 그 페이지를 연 사람의 브라우저에서 남이 심은 코드가 실행될 수 있었습니다. 커밋 1개
보여 줄 화면이 없는 문장에는 움직이는 작은 그림이 뜹니다. "밤새 끝까지 도는지 지켜보겠습니다"처럼 보여 줄 화면도 설명할 원리도 없는 문장이 배경과 자막만으로 나가고 있어서, 글자 없는 그림 16가지 중 하나를 고르게 했습니다. 커밋 4개
원료 · git log
9d5c700모티프가 next 밖에서도 그려지게 — 안 그러면 빈 화면 검사가 빈 화면을 통과시킨다
439674b모티프 16종을 쇼츠 파이프라인에 넣는다
d7eb6c0Lottie: 포인트 색만 테마 색으로 바꾼다
0d28d69Lottie 후보를 고를 수 있게 먼저 거르는 도구
31b9443그림 한 장짜리 화면을 폰 프레임에 넣지 않는다
8be2a39레드팀 스킬을 만들고 돌렸다 — 글 페이지 스크립트 이탈(XSS) 하나를 막았다
45bfaf2projects 배치가 30분마다 실패하던 것 — 쓴 파일을 다 담지 않았다
42ec48b영상 렌더를 죽인 node:fs를 걷어내고, 같은 일을 막는 검사를 붙인다
6917ffc쇼츠: 대본이 고른 화면을 녹화가 버리지 않는다
b4fd4f7층 순서를 정한다 — 본문이 고정 탭바 위로 올라오던 것