무대 대본을 쓰기 위한 웹 서비스,
'ぎだい(戯台)'라는 것을 만들었습니다.
SNS에 게시한 결과, 970개의 좋아요를 받을 정도의 반향을 얻었습니다.
한마디로 말하자면, '무대를 위한 대본 OS' 같은 것입니다.
대본을 작성한다.
수정한다.
누군가에게 보여준다.
변경점을 확인한다.
배우나 연출과 공유한다.
무대도를 만든다.
연습에 사용한다.
마지막으로 PDF로 만든다.
이런 과정들을 가능한 한 하나의 장소에서 완결시키려고 하고 있습니다.
이번에는 서비스 소개뿐만 아니라,
- 왜 만들었는지
- 어떻게 만들고 있는지
- 내부적으로 무엇이 작동하고 있는지
- 매달 얼마나 비용이 드는 것인지
정도까지, 모처럼 모든 것을 적어보려 합니다.
사용해 주시는 분들께도, 개인 개발을 하시는 분들께도,
"와, 이런 식으로 돌아가는구나" 정도의 느낌으로 읽어주시면 좋겠습니다.
실제 화면
여기는 가장 먼저 작성하겠습니다.
ぎ다이는 현재 β판입니다.
일반적인 오류가 있습니다.
'이 부분이 좀 사용하기 불편하다'
같은 부분도 아직 있습니다.
완성했습니다!!!
라는 표정으로 내놓은 것은 아닙니다.
오히려 지금은 '실제로 사용해 보고, 발견된 문제를 고쳐나가는' 단계입니다.
그렇기 때문에 오류 보고나 개선 요청도 받고 있습니다.
게다가 받은 내용에 대해서는,
"지금 어디까지 대응하고 있는지"도 가능한 한 공개하려고 노력하고 있습니다.
"뭔가 이상하다"
"이 버튼은 이해하기 어렵다"
"이런 기능이 필요하다"
정도여도 전혀 괜찮습니다. β판이기 때문에, 그런 목소리가 정말 감사합니다.
【오류 보고 폼】
【대응 상황】
간단히 말해서, '대본을 작성하는 곳부터 무대에서 실제로 사용하는 곳까지 한 번에 관리하는 서비스'입니다.
예를 들어 현재는,
- Word 같은 느낌으로 대본을 작성하기
- 세로쓰기 / 가로쓰기를 전환하기
- 루비(ルビ), 곁점, 굵은 글씨 사용하기
- PDF에서 대본 읽어오기
- 대사, 장면, 무대 지시, 조명, 음향을 구분하기
- 코멘트 추가하기
- 수정안 제시하기
- 과거 버전 저장하기
- 어디가 바뀌었는지 차이점 보기
- 배우나 스태프와 공유하기
- 무대도 만들기
- 연습 일정을 관리하기
- PDF로 출력하기
같은 것들을 할 수 있습니다.
일반적인 문서 에디터와 조금 다른 점은, ぎだい 안에서는 대본을 '단순한 긴 글'로 가지고 있지 않다는 것입니다.
예를 들어,
"이것은 타무라의 대사"
"이것은 무대 지시"
"이것은 조명 지시"
"이것은 장면 전환"
같은 정보를 내부적으로 가지고 있습니다. 겉모습은 일반적인 대본이지만, 뒷면에서는 글을 의미 있는 단위로 관리하고 있습니다. 그래서,
"이 버전에서 어디가 바뀌었지?"
"이 변경과 관련된 사람은 누구야?"
"이 배우와 관련된 부분만 보고 싶어"
같은 것들을 장래에는 더 자연스럽게 다룰 수 있도록 하고 싶습니다.
세로쓰기일 경우
가로쓰기
과거 원고와의 차이점 표시 기능
낭독 시 유용한 자신의 역할만 하이라이트 표시
무대도도 만들 수 있고, 대본 위에 삽입할 수도 있어요.
배우에게 영향을 주는 변경 부분만 자동으로 이메일 알림도 할 수 있어요.
말로 일일이 전달할 필요가 없습니다!
대본을 쓰는 소프트웨어 자체는 많이 있습니다.
Word도 있고.
Google Docs도 있고.
공유하려면 Google Drive도 있고.
연락하려면 LINE이나 Discord도 있습니다.
일정 관리 서비스도 있습니다.
하지만 무대를 만들다 보면,
"결국 그거 전부 다 사용하잖아."가 됩니다.
대본은 여기.
연락은 저기.
무대도는 여기.
연습 일정은 따로.
그래서,
"최신 버전의 대본은 뭐지?"
○○ 씨에게 보낸 건 v3였나?
아니, v4였나?
이쪽 PDF가 최신 버전인가?
같은 상황입니다. 처음부터,
"무대를 만드는 것"을 전제로 한 장소가 있으면 좋지 않을까.
그렇게 생각하며 만들기 시작한 것이 ぎだい입니다.
그래서 개인적으로는, "고기능의 대본 에디터"라기보다는,
"대본을 중심으로 무대 제작 그 자체를 모으는 장소"
로 만들고 싶습니다.
아직 여정의 절반도 오지 않았지만요.
라고 할까요, β판이라서 아직 엄청나게 만들고 있습니다.
ぎ다이를 공개한 지 5일. 정말 감사하게도, 등록 사용자 수가 180명을 돌파했습니다.
더 나아가,
생성된 프로젝트 수도 100건을 돌파했습니다.
이것은 꽤 놀라웠습니다.
솔직히 처음에는 더 조용하게 시작할 거라고 생각했었습니다.
물론 등록자 수만으로 서비스의 좋고 나쁨이 결정되는 것은 아닙니다.
하지만, 등록하고 끝나는 것이 아니라,
실제로 100건 이상 프로젝트가 만들어지고 있습니다.
즉, 제대로 깊숙하게 사용해 주는 사람이 있다는 것입니다.
이것은 상당히 기뻤습니다.
정말로 감사합니다.
당연하지만,
사용하는 사람이 늘어나면,
'여기가 고장 났어요'
'스마트폰에서는 이상해요'
'이 기능이 필요해요' 같은 피드백도 늘어납니다.
하지만 이것은 오히려 감사한 일이라서,
지금은 그것들을 하나하나 고치면서 키우고 있습니다.
여기서 개발 이야기가 좀 나갑니다.
ぎだい(戯台)는 상당히 AI를 사용해서 만들었습니다.
대략적인 흐름은 이렇습니다.
ChatGPT로 화면/사양을 구상한다
↓
Codex로 구현한다
↓
타입 체크(Type Check), Lint, 회귀 테스트(Regression Test) 등을 실행한다
↓
실제 브라우저를 조작해서 확인한다
↓
문제가 있으면 수정한다
↓
Pull Request를 작성한다
↓
확인/승인한다
↓
Deploy 스크립트를 실행한다
↓
운영 환경에 반영된다
처음부터 Codex에게 '대본 관리 서비스를 만들어줘'라고 던진 것은 아닙니다.
먼저 ChatGPT로,
'이런 화면이면 사용하기 좋을 것 같지 않아?'
'스마트폰에서는 어떻게 할까?'
'이 기능은 어디에 둘까?'
'화면 전환은 어떻게 할까?' 같은 것을 상당히 깊게 논의합니다.
필요하다면 실제 화면 이미지도 만듭니다.
그렇게 어느 정도 **'이런 것을 만들고 싶다'**는 형태를 결정한 후에, Codex에게 구현을 맡깁니다.
사람이라 하더라도 사양이 모호한데
'일단 만들어줘'라고 하면 곤란하기 때문에,
거기는 AI도 마찬가지라고 생각합니다.
구현은 Codex(5.6 Luna Thinking level High)를 상당히 사용하고 있습니다.
태스크에 따라 추론량을 높게 설정하여,
단순히 '이 버튼 추가해줘'뿐만 아니라,
- 기존 기능에 미치는 영향
- 과거 테스트
관련된 처리까지 확인하게 합니다. 편리합니다.
정말로 편리합니다. AI가 없었다면,
지금의 개발 속도로는 절대 만들 수 없었을 겁니다.
이 부분은 상당히 중요하게 생각합니다.
Codex가
'구현 완료했습니다'라고 해도, 정말일까요? 라는 생각이 듭니다.
그래서 먼저,
- TypeScript 타입 체크(Type Check)
- Lint
- 회귀 테스트(Regression Test)
- Build
등을 실행합니다. 다만,
'테스트가 모두 통과했다 = 실제로 사용 가능하다'는 것은 아닙니다. 웹 서비스라는 것이 보통,
코드 상으로는 맞지만, 화면으로 보면 크게 망가져 있는
같은 경우가 있습니다.
그래서 그 다음에는 실제 브라우저를 만져봅니다.
ぎだい(戯台)에는 VISUAL_QA.md라는 파일이 있습니다.
이름 그대로, **'실제로 화면을 조작하여 확인한 내용'**을 계속 남겨두는 파일입니다.
실제 파일의 내용
예를 들어 개발 초기에는,
'세로쓰기 본문이 제대로 표시되지 않는다'
라든가,
'스마트폰에서 가로 스크롤이 생긴다' 같은 것이 보통 있었습니다.
그것을,
문제점
↓
수정
↓
다시 브라우저로 조작
↓
PASS / FAIL
같은 방식으로 남겨둡니다.
PC뿐만 아니라 스마트폰도 확인합니다.
PDF 읽기라면,
실제 84페이지짜리 대본 PDF를 넣어서,
제대로 페이지가 나오는지,
세로쓰기가 망가지지 않았는지,
글자가 읽히는지,
OCR이 이상하지 않은지 같은 곳까지 확인했습니다.
사소합니다. 하지만 이 사소한 것이 꽤 중요합니다.
기능을 늘려가다 보면 생기기 쉬운 것이,
'전에 고쳤던 부분이 다른 개정으로 또 망가지는' 경우입니다. 소위 **데그레(Degrade)**입니다.
그래서 새로운 기능을 만들 때도,
과거 테스트나 Visual QA를 보면서,
이전에 망가졌던 부분이 다시 망가지지 않았는지 확인합니다.
Codex에게 브라우저 조작을 시키는 경우도 있고,
마지막에는 직접 만져보는 경우도 있습니다.
**'AI가 전부 만들고, AI가 전부 확인한다'**가 아니라,
**AI를 엄청나게 사용하지만. 마지막은 사람도 평범하게 만진다.**라는 느낌입니다.
확인이 끝나면 GitHub에 push합니다.
거기서 main → production으로 Pull Request를 만듭니다.
PR에는,
- 무엇을 바꿨는지
- 어떤 테스트를 했는지
- PC에서 무엇을 확인했는지
- 스마트폰에서 무엇을 확인했는지
- 아직 확인할 수 없는 부분
- 영향 범위
- 문제가 생겼을 경우 되돌리는 방법
등을 남깁니다.
그것을 확인하고, 문제가 없으면 승인하여 production에 merge합니다.
그 후에 deploy 스크립트를 실행합니다.
그래서,
이 아닙니다. 아무래도 무섭습니다.
여기는 개발자들을 위한 것입니다. 대략적인 구성을 설명하자면,
사용자의 브라우저
↓
Cloudflare
↓
UFW(방화벽)
↓
Nginx
↓
Next.js
↓
PostgreSQL
이런 느낌입니다.
구성도
애플리케이션은 Next.js / React / TypeScript를 사용합니다.
DB는 PostgreSQL입니다.
메일 전송에는 Resend를 사용합니다.
PDF 관련 작업에서는 PDF.js나 Playwright를 사용합니다.
OCR(광학 문자 인식)에는 Poppler나 Tesseract를 사용합니다.
업로드된 파일에 대해서는
ClamAV로 검사하도록 하고 있습니다.
그 외에도, Prometheus로 서버 상태를 가져오거나,
Loki로 로그를 수집하거나, Grafana에서 확인하기도 합니다.
Nginx나 PostgreSQL, UFW, fail2ban 등의 로그도 모으고 있습니다.
Grafana 화면
Grafana 화면 2
개인 개발 프로젝트 치고는 좀 거창합니다.
사람의 대본을 맡아 처리하는 서비스이다 보니, 여기는 상당히 민감한 부분입니다.
현재는 PostgreSQL 데이터를 매일 한 번 백업하고 있습니다.
보관하는 것은 최근 30세대분입니다.
백업 내용 안에,
제대로 'ぎだい(기다이)'의 데이터가 들어있는지도 확인합니다.
실패할 경우에는 알림도 보냅니다.
그래서 예를 들면, '조작 실수로 데이터를 지워버렸다' 같은 케이스에는 어느 정도 대응할 수 있는 상태입니다.
하지만.
여기에 상당히 큰 문제가 하나 있습니다.
현재 백업은,
기본적으로 'ぎだい(기다이)'가 돌아가고 있는 서버 안에 있습니다.
이것은 데이터를 잘못 지웠을 때는 도움이 됩니다.
하지만, 서버 자체가 완전히 고장 나면 어떻게 하죠?
라는 문제가 있습니다. 비유하자면,
컴퓨터의 데이터를 외장 HDD에 백업했지만,
HDD도 같은 책상 위에 놓여 있는 경우입니다.
책상 통째로 날아가 버리면 끝입니다.
그래서 앞으로는, 백업을 다른 서버나 외부 스토리지에도 보내서,
'ぎだい(기다이)의 서버가 통째로 죽어도, 다른 장소에서 데이터를 복구할 수 있는'
상태로 만들고 싶습니다. 화려한 신규 기능은 아닙니다.
사용자 입장에서도 아마 아무 변화를 느끼지 못할 겁니다.
하지만 무언가 문제가 생겼을 때, 이런 부분이 가장 중요하게 작용하기 때문에,
여기는 상당히 우선순위를 높게 잡고 있습니다.
이왕 하는 김에, 이 부분도 공개하겠습니다.
현재 개발에 사용하고 있는 ChatGPT Plus입니다.
환율에 따라 조금씩 다르지만, 일본 엔화로 대략 월 3,100엔 전후입니다.
그리고 서버 비용입니다.
현재 사용하고 있는 서버는 VPS(가상 사설 서버), 고정 IPv4, 통신량 등을 포함하여,
세금 별도로 월 약 1,320엔 정도입니다.
대략 이런 내역으로 구성되어 있습니다.
그래서 지금 보이는 고정 비용만 단순 합산하면,
월 4,400엔 전후 + 세금이라는 느낌입니다. 물론 환율에 따라 달라집니다.
참고로 이 서버는 'ぎだい(기다이)'만을 위한 전용 서버가 아니라, 제가 운영하는 다른 서비스와 일부 공유하고 있습니다.
따라서 약 1,320엔 전부가 'ぎだい(기다이)만의 서버 비용'을 의미하지는 않습니다.
하지만 이용자가 늘어나면 메모리도 사용합니다. 저장 데이터도 늘어납니다.
PDF도 늘고, 백업도 늘어납니다.
그래서 이대로 영원히 지금 스펙으로 버틸 수 있다고 생각하지 않습니다.
지금 생각하고 있는 것은,
크게 세 가지입니다.
현재는 ChatGPT Plus를 사용하고 있지만, 앞으로 Pro로 변경하는 것도 검토하고 있습니다.
'ぎだい(기다이)'는 Codex를 상당히 많이 사용하기 때문에, 큰 수정이나 장시간 확인, 회귀 확인 등을 좀 더 여유 있게 돌릴 수 있도록 하고 싶습니다.
단순히 **'더 빠르고 기능을 늘리고 싶다'**라기보다는,
**확인이나 QA에도 AI를 더 쓸 수 있는 여유를 만들고 싶다.**는 것이 가깝습니다.
현재 서버는 아직 정상적으로 작동하고 있습니다.
하지만 확인했을 때 스토리지 사용률은 약 74%입니다.
남은 용량도 약 9GB 정도였습니다.
PDF나 백업을 다루는 서비스이다 보니,
여기는 좀 더 여유를 가지고 싶습니다.
특히 앞으로 메모리와 디스크 용량은 증설하고 싶습니다.
이것이 상당히 중요합니다.
지금도 매일 백업은 하고 있습니다. 다만, 본체와 백업이 같은 서버에 있다는 상태입니다.
따라서 앞으로는 다른 스토리지나 다른 서버로 백업을 자동으로 복사하도록 하고 싶습니다.
이렇게 해두면 만약 서버 자체에 무슨 일이 생겨도,
다른 곳에서 복구할 수 있습니다.
화려하진 않습니다. 아마,
구현해도 아무도 눈치채지 못할 겁니다.
하지만, 무언가 있을 때 가장 고마운 기능입니다.
공개된 지 아직 5일밖에 안 됐습니다.
등록 사용자 180명.
생성 프로젝트 100건.
아직 베타 버전이라서.
고칠 곳도 정말 많습니다.
하지만 생각했던 것보다 훨씬 많은 분들이 사용해 주셔서,
**'계속 이어가고 싶은 서비스'**가 되어 왔습니다.
그래서 기능뿐만 아니라,
어떻게 만들고 있는지.
어떻게 운영하고 있는지.
어떤 문제가 발생하고 있는지.
무엇에 돈이 쓰이고 있는지.
그 부분들도 최대한 오픈해 나가려고 생각하고 있습니다.
완성된 후에 보여주는 것이 아니라, 만드는 과정까지도 보여주고 싶습니다.
베타 버전인 지금이야말로 그것으로 괜찮을 거라고 생각합니다.
다음에 뭔가 크게 바뀌면 글을 쓰도록 하겠습니다.
