DeepDive

휴대폰 브라우저에서 대본을 보며 내레이션을 녹음하는 웹 툴을 만들어줘. 구성: server.py(파이썬 표준 라이브러리만) + index.html(바닐라 JS, 빌드 없음) + script.json. [대본] - script.json = {"title": "...", "cuts": [{"n": 1, "line": "문장", "sec": 5.4}, ...]} - 컷을 카드로 세로 나열. 현재 컷은 크게 강조하고 화면 가운데로 자동 스크롤, 지난 컷은 흐리게. - 텔레프롬프터: 녹음 중 현재 컷의 목표 시간(sec)이 지나면 자동으로 다음 컷으로 넘어감. 카드 오른쪽 위에 "남은 3.2초"처럼 카운트다운 표시. 먼저 끝나면 "다음 컷" 버튼으로 바로 넘김. [녹음] - 버튼: 녹음 / 일시정지 / 정지 / 듣기 / 다음 컷 / 저장해서 보내기. 엄지로 누르기 좋게 크게. - getUserMedia(echoCancellation 끄기, noiseSuppression·autoGainControl 켜기) → AudioContext로 PCM(Float32)을 직접 버퍼에 쌓기. MediaRecorder는 쓰지 말 것(덮어쓰기 녹음이 안 됨). - 파형 타임라인을 캔버스에 그리고, 컷이 넘어간 지점을 세로선과 컷 번호로 표시. - 타임라인을 터치·드래그해서 재생 위치를 옮길 수 있음. 그 위치에서 녹음을 누르면 그 뒤 녹음과 컷 표시를 지우고 거기서부터 이어서 녹음(펀치인). 컷 카운트다운도 그 컷 시작점부터 다시 셈. - "듣기"는 현재 위치부터 재생하고, 재생 위치에 맞춰 컷 강조가 따라감. - 상태 문구를 한 줄로 안내(예: "12.4초부터 다시 녹음합니다. 뒷부분은 지워졌어요."). [저장] - "저장해서 보내기" = 16-bit mono WAV를 POST /save로 전송. 헤더 X-Meta에 {sr, seconds, cut_starts:[0, ...]}를 JSON으로. - 서버는 takes/take_MMDD_HHMMSS.wav와 같은 이름의 .json을 저장하고, GET으로 index.html과 script.json을 서빙. - 포트는 인자로(기본 4610), 0.0.0.0에 바인드. [배포] - 마이크는 HTTPS에서만 동작하므로 Tailscale로 노출: tailscale serve --bg --https=4610 http://127.0.0.1:4610 → https://<기기명>.<tailnet>.ts.net:4610/ 를 휴대폰에서 연다(휴대폰도 Tailscale 연결 필요). [디자인] - 어두운 배경, 큰 한글 글자(현재 컷 28px 이상), 강조색 하나(라임), 휴대폰 세로 화면 기준. - 완료 확인: PC에서 열어 5초 녹음 → 중간으로 되감아 재녹음 → 저장 → takes/에 wav·json이 생기고 cut_starts가 맞는지 확인. *참고로 녹음기능때문에 테일스케일이 필요한데 간단하니까 안내해주는 대로 설치해서 쓰세요*