AI·바이브코딩 프로그램
제가 회사 업무에 직접 쓰려고 만드는 프로그램이 딸깍이에요. 업무 안내 글과 짧은 영상을 매번 따로 만드는 일이 번거로워서 시작했어요. 이번에는 워크퍼밋 안내 영상을 만들면서 사용한 도구와 작업 순서, 다시 고친 부분을 기록해 뒀어요.
제가 작업하는 딸깍 화면
작업 화면에서는 글과 영상을 함께 만들기, 블로그 글만 만들기, 모션그래픽만 만들기를 구분해 뒀어요. 필요한 결과물에 맞춰 왼쪽에서 작업을 고르고, 오른쪽에서 진행 상황을 확인하는 구조예요. 아래에는 실제 화면에서 세 가지 옵션을 선택한 모습을 남겼어요.
이번 촬영에서는 제작 옵션만 선택했어요. 이미 진행 중이던 작업은 그대로 두었고, 새 AI 작업이나 발행을 실행한 시연은 아니에요.
제 업무에 쓰려고 만들기 시작했어요
매번 업무 안내 글과 영상을 따로 만드는 일이 번거로워서, Claude Code와 함께 ‘딸깍’을 만들고 있어요. 이번 영상도 이 프로그램으로 작업했어요. 회사 자료를 바탕으로 대본을 만들고, 목소리와 자막을 붙여 모션그래픽으로 만드는 도구예요.
이번 작업에는 워크퍼밋 안내 자료를 넣었어요. 그 자료로 영상을 만들면서 화면을 구성하고 수정한 과정을 남겼어요.
자료를 넣고 영상으로 만든 순서
영상 도입부에는 비자와 취업 허용의 차이를 다루는 문장을 넣었어요. 짧은 영상에서 다룰 내용을 먼저 보여주고, 뒤에서 준비 항목과 진행 순서로 이어지도록 구성했어요.
전체 대본은 장면별로 나눴어요. 전체 대본은 21개 장면으로 나뉘어 있어요. 질문과 핵심 문장, 준비 항목 체크리스트, 진행 순서, 마지막 안내처럼 장면마다 역할을 정해두었어요.
장면에 들어갈 자료도 따로 골랐어요. 이번 작업에서는 직접 넣은 자료 6개를 먼저 사용했어요. 여기서 ‘직접 넣은 자료’가 모두 실제 촬영 사진이라는 뜻은 아니에요. 영상에는 설명용 이미지와 견본도 들어가 있어요.
제가 사용한 AI와 각각 맡긴 작업
프로그램은 Claude Code와 함께 만들고, 대본은 ChatGPT로 다듬었어요. 이번 작업의 대본 다듬기 항목에는 OpenAI가 기록돼 있어요. 프로그램 개발과 콘텐츠 대본 작성에 각각 다른 역할로 사용했어요.
화면 스킨은 rm_official_navy를 썼어요. 영상에서 보이는 짙은 남색 바탕과 주황색 강조가 이 사례의 특징이에요. 단순히 색만 고르는 게 아니라 핵심 문장, 체크리스트, 사진, 검색 안내, 브랜드 마무리처럼 장면 종류도 나눠서 구성했어요.
모션그래픽은 Remotion으로 만들었어요. 글자와 사진을 정해진 시간에 보여주고, 강조 표시와 진행 막대, 전환 효과를 붙여 영상으로 출력하는 부분이에요. 이번 영상의 기록에도 ‘Remotion 시네마틱 렌더’가 남아 있어요.
목소리를 만든 다음 자막과 맞췄어요. 자료를 정리할 당시 딸깍의 음성 엔진은 ElevenLabs로 설정돼 있었어요. 이 영상에서는 장면 7개의 말 빠르기를 고르게 맞추고, 60초에 맞추려고 속도를 1.08배로 조정한 기록이 있어요.
이번에 사용한 기능은 대본 다듬기 → 장면 스킨 → 음성 생성 → 자막 확인 → Remotion 출력 순서였어요. 별도의 Claude Code 스킬 이름은 작업 기록에 남아 있지 않아서, 여기에는 확인한 기능과 스킨 이름만 적어 뒀어요.
제가 업무에 사용하는 흐름
저는 업무 카테고리에 맞는 자료와 주제를 먼저 준비해요. 그 자료로 대본과 장면을 구성하고, 목소리와 자막을 붙인 뒤 결과물을 확인하는 흐름으로 사용하고 있어요.
결과물을 볼 때는 도입부의 내용이 바로 전달되는지, 체크리스트 속도가 적당한지, 사진과 설명이 맞는지를 확인해요. 이번 작업에서도 이 세 부분을 기준으로 다시 손볼 곳을 정리했어요.
직접 써보면서 고친 부분과 남은 일
이름은 ‘딸깍’이지만, 한 번 누르고 끝난 영상은 아니에요. 작업 기록에는 자막 끊김을 고치고, 장면에 맞지 않는 사진을 바꾸고, 체크리스트 소개와 제목을 수정해서 다시 출력한 과정이 남아 있어요.
목소리를 다시 받아써서 대본과 비교하는 검사도 했어요. 기록에는 99% 일치라고 나오지만, 이 숫자가 영상의 완성도가 99%라는 뜻은 아니에요. 실제로 듣기 편한지, 설명이 자연스러운지는 따로 봐야 해요.
지금 이 글에 넣은 것은 전체 영상의 도입부 12초를 잘라 만든 무음 GIF 미리보기예요. 소리 있는 전체 영상은 유튜브 등 플랫폼에 올린 뒤, 이 글 안에서 재생할 수 있도록 연결할 예정이에요.
딸깍은 기존 워드프레스 사이트와 연결했고, 지금은 새 일단빌드 사이트에 맞게 업로드 경로와 카테고리를 옮기는 중이에요. 앞으로는 영상과 제작 기록을 한 작업에 묶어서, 이렇게 읽기 편한 글까지 이어서 올릴 수 있게 만들려고 해요. 제가 다시 사용할 때 참고할 수 있도록 결과와 수정 과정을 함께 남겨두려고 해요.