TL;DR
프로젝트 주요 버그를 픽스하고, 프로덕션 검증까지 완료했어요. 특히 DB에 TTS 오디오를 영구 저장하는 방식으로 해결했죠. 클립 드래그 중 Undo 히스토리 오염 문제도 깔끔하게 잡았습니다.
오늘 뭘 만들었나
이번에 다뤘던 프로젝트는 숏츠 영상 자동 생성 SaaS입니다. 주요 기능 중 하나가 AI 기반 TTS로 내레이션을 자동 생성하는 거죠. 근데 이 부분에서 몇 가지 버그가 발견돼서 오늘 작업을 시작했습니다.
TTS 오디오 영구 저장
가장 큰 이슈는 TTS 생성 후 오디오가 DB에 제대로 저장되지 않아서, 새로고침하면 오디오가 소실된다는 거였죠. 말 그대로 '일회용' 오디오라니... 이건 절대 용납할 수 없었습니다.
그래서 Prisma 스키마에 `NarrationAudio` 모델을 만들어서, 생성된 오디오 데이터를 바이너리로 영구 저장하도록 했습니다. 에디터에서는 이 영구 URL을 이용해서 오디오를 불러오게 했죠. (처음엔 이거 말고 다른 방법도 고민했는데, 결국 이게 가장 깔끔했어요.)
음... 그리고 이 과정에서 Prisma 마이그레이션을 처음 해봐서 삽질도 좀 했네요. 타입 오류도 겪고, Turbopack 캐시 정리하느라 서버가 먹통되기도 했죠. (근데 말이야, 내 손만 빠르다고 해야 했다는 교훈도 있었어요.)
// 핵심 코드: Prisma 스키마 변경 + 오디오 업로드/서빙 API
model NarrationAudio {
id String @id @default(cuid())
projectId String
audioData Bytes?
}
// /api/projects/[id]/audio
async function handleAudioUpload(req, res) {
const { projectId } = req.query
const audioData = await req.body.arrayBuffer()
await prisma.narrationAudio.create({
data: { projectId, audioData }
})
res.status(200).json({ success: true })
}
Undo 히스토리 오염 해결
다른 하나는 타임라인에서 클립을 드래그할 때마다 Undo 히스토리가 계속 쌓여서, Ctrl+Z를 누르면 예상치 못한 동작이 일어났던 거였죠. 이거 진짜 짜증났었는데, 중간에 Undo를 누르면 1px씩 움직이더라고요. (내가 이걸 발견한 순간 진짜 폭소했다 진짜.)
해결책은 간단했습니다. 드래그 시작 시에만 히스토리를 푸시하고, 드래그 중에는 스킵하도록 `skipHistory` 옵션을 추가했죠. 그러니까 드래그를 하다가 취소해도 Undo 히스토리가 오염되지 않더라고요. (이래서 개발이란 게 재밌는 거 같아요. 작은 문제라도 깔끔하게 해결하면 뿌듯하지 않나요?)
// 핵심 코드: 드래그 중 히스토리 스킵
function updateImageClip(id, data, skipHistory = false) {
if (!skipHistory) {
pushHistory(/* ... */)
}
// 실제 업데이트 로직
}
// timeline-editor.tsx
<TimelinePanel
onMove={(id, data) => updateImageClip(id, data, true)}
onResize={(id, data) => updateImageClip(id, data, true)}
/>
삽질 & 교훈
아, 그리고 프로덕션 검증할 때 한 번 삽질했던 적이 있었네요. 로컬에서 테스트할 때는 잘 됐는데, 막상 배포하고 보니 런타임 에러가 나더라고요. 시스템 리소스 부족 에러였는데, Turbopack 캐시를 정리하니까 해결됐어요. (이런 일이 생겨도 당황하지 말고 침착하게 문제를 찾아나가는 게 중요하다는 걸 배웠습니다.)
그리고 다른 교훈은, 개발 중간에 프로덕션 검증을 게을리하면 안 된다는 거죠. 로컬에서만 테스트하다 보면 놓치는 게 있을 수 있거든요. 앞으로는 작업 때마다 프로덕션에 반영하고 직접 확인하는 습관을 들여야겠습니다.
결과물
결과적으로 두 가지 주요 버그를 모두 수정했고, 프로덕션 환경에서도 제대로 동작하는 것을 확인했습니다. 이제 숏츠 자동 생성 기능이 더욱 안정적으로 동작할 것 같아요. 특히 TTS 오디오 소실 문제를 해결했으니, 사용자들이 편하게 숏츠를 만들 수 있게 됐죠.
이번에 새로 도입한 Prisma 도 잘 녹아들어가는 것 같아서 만족스러워요. 향후 데이터 모델 변경이 필요할 때마다 안전하게 대응할 수 있을 것 같습니다.
앞으로도 이런 식으로 기술 블로그를 꾸준히 써나가면서, 개발자 친구들과 정보를 공유하고 피드백도 받아보려고 합니다. 혹시 궁금한 점이나 개선 아이디어 있으시면 언제든 연락 주세요!