[작성자:] 컴맹 집사

작성자: 컴맹 집사

번외 편

대표 이미지: 직접 만든 쇼츠 두 편의 한 장면 (왼쪽 자격루, 오른쪽 생일 역설)

지난 번외 편에서는 웹툰으로 쇼츠를 자동으로 만드는 이야기를 했습니다. 이번에는 웹툰이 아니라 과학과 수학입니다. 11월 1일 저녁에 “코드로 그린 그림만으로 쇼츠를 만들 수 있을까?”라는 질문으로 시작해, 새벽까지 AI(Claude)와 함께 영상 두 편과 작업 설명서 두 개를 만들었습니다. 그 하룻밤의 기록입니다.

실사 대신 ‘도면’을 고른 이유

처음 질문은 단순했습니다. 코드로 그리는 방식으로 어떤 쇼츠를 만들 수 있을까. 답을 들어 보니 강점과 약점이 분명했습니다. 원리, 구조, 변화, 숫자 비교처럼 ‘움직임으로 설명되는 것’은 잘 그리고, 실제 사람이나 풍경처럼 ‘사실감’이 필요한 것은 약했습니다.

그래서 약점을 메우려 하지 않고 아예 채널의 개성으로 삼기로 했습니다. 짙은 남색 바탕에 한지색 선으로 단면도를 그리고, 지금 움직이는 부품만 주홍색으로 칠하는 ‘먹선 설계도’ 스타일입니다. 그림은 Manim이라는 무료 도구로 그렸습니다. 유명한 수학 유튜브 채널 3Blue1Brown을 만든 사람이 자기 영상용으로 만들어 공개한 도구입니다(Manim 공식 저장소). 채널 이름도 이 방향에 맞춰 ‘이게 왜 돼?’로 정했습니다.

조회수 1,000만 회 넘은 쇼츠를 먼저 뜯어봤다

바로 만들지 않고, 크게 성공한 쇼츠부터 살펴봤습니다. Claude가 제 크롬 브라우저로 유튜브를 열어 조회수, 댓글, 그 채널의 다른 영상 조회수까지 모아 정리했습니다. 처음에는 100만 회 이상으로 찾다가, 기준을 1,000만 회 이상으로 올렸습니다.

영상 주제	조회수(분석 당시)	길이	끝까지 보게 만든 장치
답이 갈리는 수학 문제	약 2,195만	68초	“나는 이게 답” 논쟁
건강 제품이 진짜인지 따져 보기	약 1,908만	32초	유사과학 확인
중력을 1분 만에 납득시키기	약 1,705만	42초	고무막 비유
뇌의 착각이 만든 사건	약 1,460만	49초	충격 + “마음먹기 나름” 공감
계산 꿀팁 “이거 나만 몰랐나”	약 1,152만	11초	바로 따라 해 보기

공통점은 세 가지였습니다. 누구나 아는 것을 다루고, 보는 사람이 속으로 답을 찍거나 직접 해 보게 만들고, 마지막에 공감이나 반전이 있었습니다. 반대로 댓글에서 공격받은 지점도 비슷했습니다. 숫자가 부정확하거나, 출처를 찾을 수 없거나, 남의 영상을 가져다 쓴 경우였습니다. 저는 같은 궁금증 공식을 쓰되, 확인한 사실과 직접 그린 그림으로 가기로 했습니다.

그걸 ‘AI 작업 설명서’로 묶었다

Claude에는 스킬이라는 기능이 있습니다. 스킬은 AI에게 주는 작업 설명서입니다. 한 번 저장해 두면 다음부터 “이거 해 줘” 한마디에 같은 순서와 기준으로 일합니다. 이날 두 개를 만들었습니다.

• 쇼츠 분석 스킬: 유튜브 링크를 주면 조회수, 댓글, 채널 평균 대비 몇 배 터졌는지를 같은 형식으로 정리합니다.
• 쇼츠 대본 스킬: 위 분석에서 뽑은 제목 공식, 처음 3초 규칙, 비유 쓰는 법, 자막 길이 규칙, 그리고 “확인한 사실만 쓴다”는 원칙을 담았습니다.

첫 두 편: 자격루와 생일 역설

첫 편은 장영실의 자격루입니다. 물이 흘러 살대가 떠오르고, 구슬이 굴러 인형이 종을 치는 순서를 도면으로 움직였습니다. 구조는 백과사전 기록대로 따랐습니다(한국민족문화대백과사전, 자격루). 원래 장치는 남아 있지 않아서, 화면 아래에 “작동부는 원리를 보여 주는 단순화 도식”이라고 적었습니다.

1차본을 보고 제가 처음 한 말은 “장영실이 만들었다는 얘기도 안 해 주나?”였습니다. 정말 장영실 이름이 마지막 질문에만 나왔습니다. 고친 3차본에서는 첫 화면을 “600년 전 조선에 자동 알람시계가 있었다”로 바꾸고, “물이 시곗바늘, 구슬이 알람 버튼” 같은 비유를 앞에 세웠습니다. 길이는 56초에서 46초로 줄였습니다.

두 번째는 수학입니다. “한 반 30명 중 생일이 같은 사람이 있을 확률은?” 정답은 약 70.6%입니다. 서른 명이 서로 한 번씩 악수하면 435번이라, 생일을 비교할 기회가 생각보다 훨씬 많기 때문입니다. 숫자는 지어내지 않고, 30명짜리 반을 컴퓨터로 1만 개 만들어 직접 확인했습니다. 1만 반 중 7,054반에서 생일이 겹쳤습니다.

막힌 곳 세 가지

첫째, 말이 겹쳤습니다. 영상에는 자막만 넣고 목소리는 캡컷 자동 음성으로 입히려 했는데, 음성이 자막보다 길어 앞뒤 문장이 포개지는 곳이 생겼습니다. 영상을 먼저 만들고 음성을 나중에 맞춘 순서가 문제였습니다.

둘째, 숫자를 이상하게 읽었습니다. 435번을 “네백삼십오 번”으로 읽었습니다. 음성용 문장은 “사백삼십오 번”처럼 한글로 풀어 쓰니 해결됐습니다. 화면 글자와 음성용 글자를 따로 두면 됩니다.

셋째, 작업 공간이 바뀌어 있었습니다. 2026년 10월 6일부터 Pro·Max 등 개인 유료 요금제에서 새로 시작하는 작업은 내 컴퓨터가 아니라 클라우드에서 실행됩니다(Claude 도움말). 클라우드에서는 구글 음성 서버에 접속이 막혀 있어서, 예전에 웹툰 쇼츠용으로 만들어 둔 구글 음성 기능을 쓸 수 없었습니다. 도움말 안내대로, 내 컴퓨터에서만 돌리는 작업은 데스크톱 앱의 Claude Code로 옮기기로 했습니다.

다음 단계

순서를 뒤집습니다. 음성을 먼저 만들고, 문장마다 실제 음성 길이를 재서 그 길이만큼 화면을 그린 뒤 합칩니다. 이렇게 하면 말이 겹칠 수가 없습니다. 음성은 웹툰 쇼츠 때 쓰던 구글 음성을 그대로 씁니다(요금 이야기는 무료 AI 목소리 편에 정리해 두었습니다). 이 작업은 내 컴퓨터의 Claude Code에서 이어 가고, 음성까지 들어간 완성본이 나오면 다시 기록하겠습니다.

내 일에 가져갈 한 가지

만들기 전에 잘된 것부터 뜯어보는 순서는 쇼츠가 아니어도 그대로 쓸 수 있습니다. 혼자 하기 어렵다면 AI에게 이렇게 맡겨 보세요.

내 분야에서 조회수가 크게 나온 쇼츠 다섯 편을 찾아서, 채널 평균보다 몇 배 나왔는지, 처음 3초에 무엇을 보여 주는지, 댓글 반응은 어떤지 표로 정리해 줘. 그리고 공통점을 내가 바로 쓸 수 있는 대본 규칙 다섯 줄로 만들어 줘. 숫자는 확인한 것만 쓰고, 확인 못 한 건 확인 못 했다고 적어 줘.

함께 읽으면 좋은 글: 영상 자동 제작 프로그램, 무료로 풀면 쓸모 있을까?

---

이전 글: 쇼츠 한 편을 만드는 데 17분, 새벽 작업 기록으로 본 흐름

작성자: 컴맹 집사

번외 편 · 「멍냥뉴스 동네방네」 홈페이지 제작 기록

대표 이미지: 멍냥뉴스 동네방네 홈 첫 화면 (2026년 10월 27일, 직접 캡처)

요즘 “바이브코딩”이라는 말을 자주 듣습니다. 코드를 직접 쓰는 대신, 원하는 모습을 말로 설명하고 AI가 만들게 하는 방식입니다. 이 블로그의 연재도 결국 그 기록입니다.

이번 번외편에서는 앱이 아니라 블로그 첫 화면 이야기를 합니다. 반려동물 공공소식을 풀어 쓰는 멍냥뉴스 동네방네의 홈입니다. 신문처럼 보이는 이 화면이 속에서 어떻게 움직이는지, 그리고 비슷하게 만들고 싶을 때 AI에게 뭐라고 말하면 되는지 쉽게 풀어 보겠습니다. 내용은 2026년 10월 27일 관리자 화면에서 확인한 구조를 기준으로 했습니다.

첫 화면은 두 종류의 칸으로 되어 있다

위 사진의 첫 화면을 신문 1면이라고 생각해 보세요. 1면에는 두 종류의 자리가 있습니다.

• 알아서 채워지는 칸: 새 기사가 들어오면 저절로 바뀌는 자리입니다. 최신 소식 목록이 여기에 해당합니다.
• 사람이 직접 쓰는 칸: 편집자가 손으로 써 넣는 자리입니다. 가이드북 배너, 마감 임박 카드, 안내 상자가 여기에 해당합니다.

워드프레스에는 이 두 가지에 딱 맞는 기본 블록이 있습니다. 알아서 채워지는 칸은 “쿼리 루프” 블록이고, 사람이 직접 쓰는 칸은 “사용자 정의 HTML” 블록입니다. 멍냥뉴스 홈은 쿼리 루프 3개와 HTML 블록 5개가 거의 전부입니다. 따로 비싼 플러그인을 쓰지 않았습니다.

이름이 어렵게 들리지만 걱정하지 않아도 됩니다. 바이브코딩에서 중요한 건 블록 이름을 외우는 게 아니라, “이 자리는 자동인가, 수동인가”를 내가 정하는 일입니다. 그걸 정해 주면 나머지는 AI가 알려 줍니다.

큰 기사 1개, 작은 목록 10개

홈 위쪽에는 사진이 큰 기사 1개가 있고, 그 아래로 작은 소식 목록이 이어집니다. 둘 다 알아서 채워지는 칸입니다.

여기에는 작은 요령이 하나 들어 있습니다. 그냥 두면 가장 최신 글이 큰 칸에도 나오고 목록 맨 위에도 또 나옵니다. 그래서 목록 칸에는 “맨 앞 1개는 건너뛰기”를 설정했습니다. 큰 칸이 1등 기사를 가져가면, 목록은 2등부터 보여 주는 식입니다.

또 하나, 이 칸들은 소식 분야 다섯 곳(지원금·혜택, 법·제도, 안전·경보, 우리 동네, 행사·축제)의 글만 가져옵니다. 그래서 예전에 쓴 생활 정보 글은 홈 소식 목록에 섞이지 않습니다.

AI에게는 이렇게 말하면 됩니다. “홈에 최신 글 1개를 크게 보여 주고, 그 아래에 다음 글 10개를 목록으로 보여 줘. 같은 글이 두 번 나오지 않게 해 줘.”

마감 임박 D-day, 날짜는 작은 비서가 센다

사진 가운데쯤 “마감 임박” 줄에 D-4, D-34 같은 카드가 보입니다. 지원금 신청이나 행사 접수처럼 마감일이 있는 소식입니다.

이 카드는 사람이 직접 쓰는 칸입니다. 소식 제목과 마감일만 적어 두면, 화면이 열릴 때마다 짧은 프로그램(스크립트)이 작은 비서처럼 일을 합니다.

• 오늘 날짜를 보고 마감까지 며칠 남았는지 세어 “D-4″처럼 바꿔 적습니다. 당일이면 “오늘 마감”이라고 씁니다.
• 마감이 가까운 순서로 카드를 다시 줄 세웁니다.
• 마감이 지난 카드는 화면에서 숨깁니다.
• 남은 카드가 하나도 없으면 마감 임박 줄 전체를 숨깁니다.

날짜 세기를 사람이 매일 하면 언젠가 틀립니다. 그래서 틀리기 쉬운 일만 비서에게 맡긴 겁니다. 다만 새 마감 소식을 넣는 일은 여전히 사람 몫입니다. 지난 카드도 화면에서만 숨겨질 뿐 원본에는 남아 있어서, 가끔 직접 정리해야 합니다.

AI에게는 이렇게 말하면 됩니다. “마감일을 적어 두면 D-day를 자동으로 계산해서 보여 주고, 마감이 지나면 숨기는 카드 줄을 만들어 줘.”

분야 버튼은 책상 위 정리다

소식 목록 위에는 전체, 지원금·혜택, 법·제도 같은 버튼이 있습니다. 누르면 페이지가 바뀌지 않고 그 자리에서 목록이 걸러집니다.

이건 서랍을 새로 여는 게 아니라, 이미 책상 위에 꺼내 둔 10개를 분야별로 골라 보여 주는 방식입니다. 그래서 빠르지만, 10개 안에 없는 오래된 글은 안 보입니다. 이 한계를 메우려고 목록 아래 “전체 보기” 링크가 누른 버튼에 맞춰 그 분야의 모든 글 페이지로 바뀌게 했습니다. 해당 분야 글이 하나도 없으면 “이 분야의 새 소식은 곧 올라옵니다”라는 안내가 뜹니다.

지역별 소식, 서랍과 스티커

공공소식은 “무슨 소식인지”와 “어느 동네 소식인지”를 함께 봐야 합니다. 그래서 두 가지 정리 도구를 나눠 썼습니다.

• 서랍(카테고리): 지원금, 법·제도처럼 글의 주제를 나눕니다.
• 스티커(태그): 서울, 경기, 김포, 인천, 충청, 경상, 전라, 강원, 제주, 전국 이렇게 10개 지역을 붙입니다.

스티커의 좋은 점은 한 글에 여러 장 붙일 수 있다는 겁니다. 서울과 대전 소식을 한 글에 담았다면 서울 스티커와 충청 스티커를 둘 다 붙이면 됩니다. 실제로 가을 광견병 접종 지원 글은 지역별 소식 페이지의 서울 칸과 충청 칸에 함께 나옵니다.

지역별 소식 페이지는 알아서 채워지는 칸 10개를 위아래로 쌓아 만들었습니다. 칸마다 지역 스티커 하나씩을 맡아 최근 글 6개를 보여 줍니다. 맨 위 지역 버튼을 누르면 그 지역 칸으로 바로 내려갑니다.

예전 글은 버리지 않고 자료실로

이 블로그는 원래 강아지 생활 정보를 쓰던 곳이었습니다. 소식 중심으로 바꾸면서도 예전 글 42편은 지우지 않았고, 주소도 그대로 두었습니다. 주소가 바뀌면 검색이나 다른 곳에 걸어 둔 링크가 깨지기 때문입니다.

대신 자료실 페이지를 만들어 도서관 서가처럼 정리했습니다. 입양·첫 준비, 훈련·행동, 건강 같은 서가마다 최신 글 목록을 두고, 맨 위에 검색 칸을 달았습니다. 홈의 주인공 자리만 소식에 넘겨주고, 예전 글은 서가로 옮긴 셈입니다.

직접 만든 꾸밈에는 이름표를 붙였다

배너나 안내 상자처럼 기본 블록으로는 모양을 내기 어려운 부분은 HTML 블록 안에 직접 꾸밈 규칙(CSS)을 넣었습니다. 이때 꾸밈마다 붙는 이름을 전부 “mn-“으로 시작하게 했습니다. mn-due, mn-tabs, mn-gift 같은 식입니다.

어린이집 가방에 이름을 써 두는 것과 같습니다. 테마에 원래 있던 꾸밈과 이름이 겹치면 엉뚱한 곳 모양까지 바뀔 수 있는데, 앞머리를 정해 두면 그런 일이 줄어듭니다. 나중에 AI에게 고쳐 달라고 할 때도 “mn-으로 시작하는 부분만 손대 줘”라고 범위를 딱 정해 말할 수 있어 편합니다.

휴대폰 화면도 챙겼습니다. 마감 카드와 분야 버튼은 화면을 넘치면 아래로 쌓이지 않고 옆으로 밀어서 보게 했습니다. 버튼은 손가락으로 누르기 쉽게 크게 잡았습니다. 휴대폰에서 제목이 단어 중간에서 끊기던 문제는 사이트 추가 CSS에 한 줄(word-break: keep-all)을 넣어 해결했습니다. 한국어 제목을 단어 단위로 줄바꿈하게 해 주는 설정입니다.

앱으로 가는 링크에는 송장을 붙였다

홈 중간에는 반려견 동반 여행지를 찾는 앱 기능으로 가는 배너가 있습니다. 이 링크 주소 끝에는 “utm_source=dogdo209” 같은 꼬리표를 붙였습니다. 택배 송장처럼 “블로그 홈 배너에서 출발한 방문자”라는 표시입니다. 화면에는 아무 변화가 없고, 통계에서 손님이 어디서 왔는지 가려낼 때만 쓰입니다.

이 앱을 만든 과정은 이 블로그 연재에 있습니다. 앱 첫 화면을 처음 꾸미던 이야기는 3초 안에 마음을 잡아라! 앱 첫 화면 만드는 법에서 볼 수 있습니다.

마치며, 자동과 수동부터 나누자

정리하면 이 홈의 비결은 한 가지입니다. 새 글이 올라오면 알아서 바뀌는 칸과, 사람이 직접 관리하는 칸을 나눈 것입니다. 소식 목록과 지역별 소식은 자동으로 채워지고, 마감 카드와 배너는 사람이 관리합니다. 그중 날짜 세기처럼 틀리기 쉬운 일만 작은 프로그램에 맡겼습니다.

코딩을 몰라도 이 구분은 할 수 있습니다. 그리고 이 구분만 정해 주면, 바이브코딩으로 AI에게 일을 맡길 때 훨씬 정확하게 말할 수 있습니다.

AI에게 그대로 복사해 보낼 문장

“워드프레스로 블로그 홈을 뉴스 사이트처럼 바꾸고 싶어. 나는 코딩을 몰라. 먼저 홈을 ‘새 글이 올라오면 알아서 바뀌는 칸’과 ‘내가 직접 관리하는 칸’으로 나눠서 표로 정리해 줘. 그다음 각 칸을 워드프레스 기본 블록으로 만드는 방법을 한 단계씩 알려 줘.”