개발기 · 2편

어떻게 만들었나

대본 작업실 개발기 · 2026

바이브 코딩이라는 걸 처음 알게 된 건 가족 덕분이었어요. 친오빠랑 남편이 바이브 코딩을 배우면서 직접 만든 사이트를 보여줬어요. 그걸 보는데 드는 생각이 딱 하나였어요.

나도 할 수 있겠다.

이전에 SQL이랑 파이썬을 혼자 공부했던 경험이 있어서, 개발이 완전히 낯선 세계는 아니었어요. 그때는 혼자 감당할 수 있는 규모가 아니어서 포기했었는데, 이번엔 달랐어요. AI가 코드를 짜주는 시대가 되어있었으니까요.

그래서 만들기로 했어요. 지금 나한테 가장 필요한 것, 그리고 나 같은 어려움을 가진 사람들한테도 필요한 것. 바로 대본 편집기.

처음엔 무작정 시작했어요

초반에는 정말 무작정이었어요. "이런 사이트 만들어줘." 하고 요구했죠. 그런데 하면 할수록 욕심이 생겼어요. 이 기능도 추가하고, 저 기능도 추가하고. 점점 복잡해지면서 AI가 앞에서 한 말을 못 알아듣기 시작했어요. 토큰이 엄청나게 소비되는데 결과물은 뒤죽박죽이 되어갔어요.

그때부터 바이브 코딩을 제대로 공부했어요. 어떻게 하면 AI와 효율적으로 작업할 수 있는지, 어떻게 설계해야 나중에 무너지지 않는지. 설계를 처음부터 다시 했어요. 보안도 점검하고, 기능 단위로 쪼개서 하나씩 만들어 나갔어요.

가장 신경 쓴 기능 — 씬 번호 자동 연동

이 사이트를 만들기로 결심한 이유 중 가장 핵심이었던 기능이에요. 지문 안에 다른 씬을 참조하는 내용이 있을 때, 씬 순서가 바뀌면 그 참조 번호도 자동으로 바뀌는 것.

Final Draft도, Scrivener도 이걸 제대로 지원하지 않아요. 저한테는 이 기능이 "대본 작업실을 만들어야 하는 이유" 그 자체였어요. 지금 이 기능이 랜딩 페이지에서 가장 먼저 소개되는 기능이기도 해요.

그렇게 대본 작업실이 완성됐어요

React와 Vite로 만들었고, 데이터는 브라우저에 저장되어 로그인 없이도 자동저장이 돼요. Google 로그인을 하면 Google Drive에 백업되어서 어떤 기기에서도 이어서 작업할 수 있고요. PDF, DOCX, 그리고 한글 네이티브 파일인 HWPX로 내보내기도 지원해요.