disaster-broadcast-studio 0.1.1 → 0.2.0

package/README.md

@@ -6,11 +6,11 @@ YAML/JSON 시나리오를 한국형 재난방송 호러 영상으로 만드는 C
 
 ## 할 수 있는 일
 
-- **방송 화면:** 최신순 재난문자·정정 이력, 독립 뉴스, 상태 박스, 장문 방송 안내.
+- **방송 화면:** 최신순 재난문자·정정 이력, 독립 뉴스, 상태 박스, 장문 방송 안내. 뉴스·문자·상태 변경을 알리는 기본 전환 효과.
 - **지도 연출:** 실제 시도·시군구 경계, 채우기·윤곽선 중첩, 범례·지점·영역·진행선, 카메라 이동·보조 지도.
 - **시간 연출:** 컷 안에서는 실시간으로, 컷 사이에서는 지정한 이야기 시각으로 전환. 임의 프레임에서도 같은 상태를 복원.
-- **음향·효과:** 공통 수신음, 로컬 음원, Tone.js 코드의 WAV 합성, 페이드·침묵·신호 간섭·송출 종료.
-- **텍스트 제작 흐름:** 검증, 렌더 없는 상태 조회, PNG 미리보기, 구간·전체 영상 출력, 게시용 출처 생성.
+- **음향·효과:** 상태·방송 안내·등급별 문자 기본음, 로컬 음원, Tone.js 코드의 WAV 합성, 페이드·침묵·신호 간섭·송출 종료.
+- **텍스트 제작 흐름:** 검증, 웹 실시간 미리보기, 렌더 없는 상태 조회, PNG 확인, 구간·전체 영상 출력, 게시용 출처 생성.
 
 실제 긴급 서비스에 연결하거나 문자를 발송하지 않습니다. 작품 제목과 필수 허구 고지는 영상 첫 5초에 표시합니다.
 
@@ -39,6 +39,9 @@ npx dbs init
 # 입력·참조·음원·시간 검증
 npx dbs validate scenario.yaml
 
+# 영상을 출력하지 않고 브라우저에서 재생·탐색
+npx dbs preview scenario.yaml
+
 # 8초 지점의 상태와 화면 확인
 npx dbs inspect scenario.yaml --frame 480
 npx dbs frame scenario.yaml --frame 480 --out preview.png
@@ -50,6 +53,8 @@ npx dbs render scenario.yaml --out film.mp4
 
 프레임은 **0부터 시작**하며 구간의 **끝 프레임도 포함**합니다. 300~599는 60fps에서 5초입니다. 컷 안의 시간은 실제 재생 시간과 같고, 컷 경계에서만 시간을 생략할 수 있습니다. 오프닝 이후에 중요한 사건을 배치하고, 읽기 시간 경고가 나오면 문자 사이 간격을 늘리세요.
 
+`preview`가 출력한 로컬 주소(기본 `http://127.0.0.1:3000`)를 브라우저에서 여세요. 화면·음향 재생, 탐색 막대, 프레임 단위 이동과 컷 선택을 제공합니다. 시나리오·사용자 지도·참조 음원을 저장하면 현재 위치에서 일시정지한 뒤 자동 반영합니다. 잘못된 입력은 마지막 정상 화면을 유지하면서 오류를 표시합니다. 포트는 `--port 3100`으로 바꾸고, 종료는 터미널에서 Ctrl+C를 누릅니다. MP4나 PNG를 생성하거나 Headless Chromium을 설치하지 않으며, 초기 웹 번들 준비 후 로컬 자산으로 재생합니다. 지도와 글꼴을 준비하는 동안은 재생을 기다리고, 실제 재생 성능은 브라우저·GPU에 따라 달라집니다.
+
 첫 렌더에서는 Remotion이 Chrome Headless Shell을 다운로드할 수 있습니다. `--browser /path/to/chromium`으로 설치된 브라우저를 지정할 수도 있습니다. 준비 후에는 로컬 지도·글꼴·음원으로 렌더합니다.
 
 Linux에서 소프트웨어 WebGL을 사용하려면 `frame`·`render` 명령에 **`--gl swangle`**을 추가합니다. 기본값은 `--gl angle`, 동시 렌더 수는 `--concurrency 2`입니다. 60fps는 결과 영상 규격이며 렌더 속도는 환경에 따라 달라집니다.
@@ -76,7 +81,7 @@ npx dbs regions --search 철원 --json
 npx dbs credits scenario.yaml --out description-credits.txt
 ```
 
-문자 수신음은 기본 제공하며 문자별로 끄거나 교체할 수 있습니다. 작품 고유 음향은 사용권이 있는 로컬 파일을 연결하거나, [Tone.js 음향 가이드](skills/scenario-writing/references/audio.md)에 따라 ES 모듈을 작성해 WAV로 합성합니다.
+상태 변경·방송 안내·등급별 재난문자 효과음을 기본 제공합니다. 뉴스는 기본 무음으로 화면 전환만 사용합니다. 안전안내는 휴대폰 진동형 수신음, 긴급·위급재난은 더 크고 긴 경보음으로 구분하며 이벤트별로 끄거나 교체할 수 있습니다. 작품 고유 음향은 사용권이 있는 로컬 파일을 연결하거나, [Tone.js 음향 가이드](skills/scenario-writing/references/audio.md)에 따라 ES 모듈을 작성해 WAV로 합성합니다.
 
 ```sh
 npx dbs audio audio-code/sound.mjs --duration 3 --seed 731 --out audio/sound.wav
@@ -107,4 +112,4 @@ npm pack
 
 ## 이용조건
 
-코드는 [MIT](LICENSE)입니다. 지도·글꼴·공통 수신음은 [자산 출처와 이용조건](assets/README.md)을 확인하세요. Remotion에는 [별도 라이선스 조건](https://www.remotion.dev/pricing)이 적용됩니다.
+코드는 [MIT](LICENSE)입니다. 지도·글꼴·기본 효과음은 [자산 출처와 이용조건](assets/README.md)을 확인하세요. Remotion에는 [별도 라이선스 조건](https://www.remotion.dev/pricing)이 적용됩니다.

package/assets/README.md

@@ -19,7 +19,7 @@ node scripts/build-map-assets.mjs /path/HangJeongDong_ver20260701.geojson /path/
 
 공공누리 1유형은 저작자·출처를 요구하지만 영상 내 고정 위치를 지정하지 않는다. [CC BY 4.0 제3조(a)(2)](https://creativecommons.org/licenses/by/4.0/legalcode)는 매체·상황에 합리적인 방식의 표시와 링크를 허용한다. [CC BY 3.0 IGO 제4조(b)](https://creativecommons.org/licenses/by/3.0/igo/legalcode)도 매체에 합리적인 저작자·출처·가공 표시를 요구하며, 공동 기여자 크레딧을 별도로 넣으면 그 안에서 동등한 비중으로 표시해야 한다. 이 배포물의 기본 지도에는 영상 위 고정 워터마크 의무가 확인되지 않아 공개 설명란 크레딧 방식을 사용한다. 기계 메타데이터만 남기고 게시 출처를 생략하지 않는다. Natural Earth는 public domain이며 OFL은 폰트 파일 재배포 조건이다. 사용자 경계 파일은 WGS84 Polygon/MultiPolygon FeatureCollection이며 `map.attribution`에 필요한 출처표시를 지정한다. 지도는 한반도와 주변 동아시아를 대상으로 한다.
 
-공통 문자 수신음은 직접 합성한 CC0 음원이며 [생성 코드·이용조건](audio/README.md)을 동봉한다. 실제 기관의 경보음을 모방하지 않는다. 작품 고유의 로컬 음원에는 각각 `source`, `license`를 기록한다. 기술 검증 스크립트의 사인파도 직접 생성한 CC0 음원이다.
+상태·방송 안내·등급별 재난문자 기본음과 선택용 뉴스 음원은 직접 합성한 CC0 음원이며 [생성 코드·이용조건](audio/README.md)을 동봉한다. 긴급·위급재난은 EAS풍 경보의 불협화음과 반복 패턴을 사용한다. 작품 고유의 로컬 음원에는 각각 `source`, `license`를 기록한다. 기술 검증 스크립트의 사인파도 직접 생성한 CC0 음원이다.
 
 Remotion은 [사용 주체별 라이선스 조건](https://www.remotion.dev/pricing)이 적용된다. MapLibre GL JS는 BSD-3-Clause, React는 MIT다.
 

package/assets/audio/README.md

@@ -1,9 +1,21 @@
-# 공통 수신음
+# 기본 효과음
 
-`notification.wav`는 이 프로젝트가 Tone.js로 직접 합성한 창작 알림음이다. 실제 재난 경보음을 재현하지 않는다. PCM16·48kHz·모노·0.55초. CC0-1.0.
+프로젝트에서 직접 합성한 CC0-1.0 음향이다. PCM16·48kHz·모노 WAV를 패키지에 포함하며 영상 출력 때는 파일을 재생한다. 긴급·위급재난은 EAS풍의 두 주파수 불협화음과 반복 패턴을 사용한다.
 
-소스는 `notification.mjs`다. 패키지 루트에서 재생성한다.
+| 파일 | 용도 | 길이 | 엔진 볼륨 |
+| --- | --- | --- | --- |
+| `notification.wav` | 안전안내, 휴대폰 진동형 짧은 떨림 2회 | 0.55초 | 0.65 |
+| `alert-urgent.wav` | 긴급재난, 경보 3회 | 2.4초 | 0.85 |
+| `alert-critical.wav` | 위급재난, 빠른 경보 3회와 지속음 | 4.2초 | 0.95 |
+| `status.wav` | 상태 등장·변경·해제, 같은 높이의 짧은 전자음 2회 | 0.3초 | 0.75 |
+| `news.wav` | 뉴스에서 명시적으로 켤 때만 쓰는 짧은 단음 1회 | 0.28초 | 0.65 |
+| `bulletin.wav` | 방송 안내 시작, 크고 묵직한 알림음 2회 | 1초 | 0.9 |
+
+같은 이름의 `.mjs`가 합성 소스이고 `tones.mjs`는 공통 파형·엔벌로프다. `.wav.json`에는 합성 조건·버전·음량 통계를 기록한다. 파일·길이·재생 볼륨의 기준은 `src/notifications.ts`다. 패키지 루트에서 전체를 재생성한다.
 
 ```sh
-node dist/cli.js audio assets/audio/notification.mjs --duration 0.55 --channels 1 --seed 731 --out assets/audio/notification.wav --overwrite
+npm run build
+node scripts/build-audio-assets.mjs
 ```
+
+뉴스는 기본 무음이다. `news.sound: default`를 명시하면 선택용 뉴스 음원을 재생한다. `alert`, `status`, `news`, `bulletin`의 `sound: false`로 끄거나 `{asset, duration, volume}`으로 교체한다. 같은 상태의 연속 표시는 재알림하지 않고, 교체 시 새 상태의 설정을 따른다. `silence`는 기본 효과음도 음소거한다.

package/assets/audio/alert-critical.mjs

@@ -0,0 +1,4 @@
+import { alarm } from './tones.mjs';
+export default function ({ Tone }) {
+  alarm(Tone, [[0, 0.42], [0.54, 0.42], [1.08, 0.42], [1.7, 2.35]], 0.38);
+}

package/assets/audio/alert-critical.wav.json

@@ -0,0 +1,15 @@
+{
+  "duration": 4.2,
+  "sampleRate": 48000,
+  "channels": 1,
+  "seed": 731,
+  "peak": 0.7694605588912964,
+  "clippedSamples": 0,
+  "rms": 0.34600100160898734,
+  "frames": 201600,
+  "browser": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/158.0.8127.2 Safari/537.36",
+  "program": "alert-critical.mjs",
+  "tone": "15.1.22",
+  "format": "PCM16LE",
+  "output": "alert-critical.wav"
+}

package/assets/audio/alert-urgent.mjs

@@ -0,0 +1,4 @@
+import { alarm } from './tones.mjs';
+export default function ({ Tone }) {
+  alarm(Tone, [[0, 0.65], [0.83, 0.65], [1.66, 0.65]], 0.30);
+}

package/assets/audio/alert-urgent.wav.json

@@ -0,0 +1,15 @@
+{
+  "duration": 2.4,
+  "sampleRate": 48000,
+  "channels": 1,
+  "seed": 731,
+  "peak": 0.6074642539024353,
+  "clippedSamples": 0,
+  "rms": 0.2632769684819564,
+  "frames": 115200,
+  "browser": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/158.0.8127.2 Safari/537.36",
+  "program": "alert-urgent.mjs",
+  "tone": "15.1.22",
+  "format": "PCM16LE",
+  "output": "alert-urgent.wav"
+}

package/assets/audio/bulletin.mjs

@@ -0,0 +1,9 @@
+import { tone } from './tones.mjs';
+export default function ({ Tone }) {
+  // Two firm attention calls, with a longer second call to hold attention.
+  for (const [start, length] of [[0, 0.3], [0.44, 0.46]]) {
+    tone(Tone, 540, start, length, 0.4);
+    tone(Tone, 270, start, length, 0.12);
+    tone(Tone, 1080, start, length, 0.06);
+  }
+}

package/assets/audio/bulletin.wav.json

@@ -0,0 +1,15 @@
+{
+  "duration": 1,
+  "sampleRate": 48000,
+  "channels": 1,
+  "seed": 731,
+  "peak": 0.4915826916694641,
+  "clippedSamples": 0,
+  "rms": 0.2467313742837686,
+  "frames": 48000,
+  "browser": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/158.0.8127.2 Safari/537.36",
+  "program": "bulletin.mjs",
+  "tone": "15.1.22",
+  "format": "PCM16LE",
+  "output": "bulletin.wav"
+}

package/assets/audio/news.mjs

@@ -0,0 +1,4 @@
+import { tone } from './tones.mjs';
+export default function ({ Tone }) {
+  tone(Tone, 520, 0, 0.22, 0.22);
+}

package/assets/audio/news.wav.json

@@ -0,0 +1,15 @@
+{
+  "duration": 0.28,
+  "sampleRate": 48000,
+  "channels": 1,
+  "seed": 731,
+  "peak": 0.2199999988079071,
+  "clippedSamples": 0,
+  "rms": 0.12542024316787065,
+  "frames": 13440,
+  "browser": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/158.0.8127.2 Safari/537.36",
+  "program": "news.mjs",
+  "tone": "15.1.22",
+  "format": "PCM16LE",
+  "output": "news.wav"
+}

package/assets/audio/notification.mjs

@@ -1,10 +1,25 @@
-// Original notification sound, CC0-1.0. Not a reproduction of an official alert.
-export default function ({Tone, duration}) {
-  const gain = new Tone.Gain(0).toDestination();
-  gain.gain.setValueAtTime(0, 0);
-  gain.gain.linearRampToValueAtTime(0.42, 0.025);
-  gain.gain.setValueAtTime(0.42, 0.34);
-  gain.gain.linearRampToValueAtTime(0, 0.42);
-  const osc = new Tone.Oscillator(680, 'sine').connect(gain).start(0).stop(duration);
-  osc.frequency.setValueAtTime(510, 0.16);
+// Original phone-like vibration, CC0-1.0: motor hum and a light contact rattle.
+export default function ({ Tone, context, duration, sampleRate, random }) {
+  const buffer = context.createBuffer(1, Math.round(duration * sampleRate), sampleRate);
+  const data = buffer.getChannelData(0);
+  for (const start of [0, 0.28]) {
+    let phase = 0, noise = 0;
+    const length = 0.22;
+    for (let i = 0; i < Math.round(length * sampleRate); i++) {
+      const at = Math.round(start * sampleRate) + i;
+      if (at >= data.length) break;
+      const t = i / sampleRate;
+      const attack = Math.min(1, t / 0.022);
+      const release = Math.min(1, (length - t) / 0.045);
+      const envelope = Math.sin(attack * Math.PI / 2) ** 2 * release ** 2;
+      const frequency = 125 + 25 * attack + 3 * Math.sin(2 * Math.PI * 32 * t);
+      phase += 2 * Math.PI * frequency / sampleRate;
+      noise = noise * 0.75 + (random() * 2 - 1) * 0.25;
+      const motor = 0.24 * Math.sin(phase) + 0.1 * Math.sin(2 * phase) +
+        0.045 * Math.sin(3 * phase) + 0.025 * Math.sin(6 * phase);
+      const flutter = 0.85 + 0.15 * Math.sin(2 * Math.PI * 36 * t);
+      data[at] = envelope * flutter * (motor + noise * 0.07);
+    }
+  }
+  new Tone.Player(buffer).toDestination().start(0);
 }

package/assets/audio/notification.wav.json

@@ -0,0 +1,15 @@
+{
+  "duration": 0.55,
+  "sampleRate": 48000,
+  "channels": 1,
+  "seed": 731,
+  "peak": 0.33578595519065857,
+  "clippedSamples": 0,
+  "rms": 0.1262915088128416,
+  "frames": 26400,
+  "browser": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/158.0.8127.2 Safari/537.36",
+  "program": "notification.mjs",
+  "tone": "15.1.22",
+  "format": "PCM16LE",
+  "output": "notification.wav"
+}

package/assets/audio/status.mjs

@@ -0,0 +1,5 @@
+import { tone } from './tones.mjs';
+export default function ({ Tone }) {
+  tone(Tone, 720, 0, 0.1, 0.24);
+  tone(Tone, 720, 0.14, 0.1, 0.24);
+}

package/assets/audio/status.wav.json

@@ -0,0 +1,15 @@
+{
+  "duration": 0.3,
+  "sampleRate": 48000,
+  "channels": 1,
+  "seed": 731,
+  "peak": 0.23999999463558197,
+  "clippedSamples": 0,
+  "rms": 0.10910543337277971,
+  "frames": 14400,
+  "browser": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/158.0.8127.2 Safari/537.36",
+  "program": "status.mjs",
+  "tone": "15.1.22",
+  "format": "PCM16LE",
+  "output": "status.wav"
+}

package/assets/audio/tones.mjs

@@ -0,0 +1,17 @@
+// Original synthesized effects, CC0-1.0. Shared envelopes avoid clicks.
+export function tone(Tone, frequency, start, length, level, type = 'sine') {
+  const gain = new Tone.Gain(0).toDestination();
+  gain.gain.setValueAtTime(0, start);
+  gain.gain.linearRampToValueAtTime(level, start + 0.012);
+  gain.gain.setValueAtTime(level, start + length - 0.045);
+  gain.gain.linearRampToValueAtTime(0, start + length);
+  new Tone.Oscillator(frequency, type).connect(gain).start(start).stop(start + length);
+}
+
+export function alarm(Tone, pulses, level) {
+  for (const [start, length] of pulses) {
+    tone(Tone, 850, start, length, level);
+    tone(Tone, 960, start, length, level);
+    tone(Tone, 1700, start, length, level * 0.12);
+  }
+}

package/assets/workspace/README.md

@@ -4,11 +4,14 @@
 
 ```sh
 npx dbs validate scenario.yaml
+npx dbs preview scenario.yaml
 npx dbs regions --search 철원
 npx dbs frame scenario.yaml --frame 600 --out preview.png
 npx dbs render scenario.yaml --out film.mp4
 ```
 
+`preview`의 로컬 주소를 브라우저에서 열면 영상 출력 없이 화면·음향을 재생하고 프레임·컷을 탐색할 수 있다. 시나리오·지도·음원 저장 시 현재 위치에서 일시정지해 반영하며, 오류가 있으면 마지막 정상 화면을 유지한다. 종료는 터미널에서 Ctrl+C다.
+
 문자 도착 시 엔진의 공통 수신음이 재생된다. `alert.sound: false`로 끄거나 사용자 음원으로 바꾼다. `audio/`는 작품 고유 음원, `audio-code/`는 필요한 합성 코드를 두는 폴더다. [음향 가이드](https://github.com/neuwcodebox/disaster-broadcast-studio/blob/main/skills/scenario-writing/references/audio.md)를 참고한다.
 
 지역·기관·시각·문안을 작품에 맞게 바꾼다. 컷 내부는 실시간이며 시간 도약은 새 컷으로 지정한다. 결과와 함께 생성한 `.credits.txt`를 영상 게시 설명에 포함한다. 초기화는 npm 설치나 영상 게시를 수행하지 않는다.

package/dist/cli.js

@@ -11,7 +11,7 @@ import { z } from 'zod';
 const program = new Command()
     .name('dbs')
     .description('Text-authored disaster broadcast fiction → 1080p60 video')
-    .version('0.1.1');
+    .version('0.2.0');
 program
     .command('init [directory]')
     .description('Create a scenario workspace with YAML and audio folders; never overwrite files')
@@ -81,6 +81,24 @@ program
         warnings,
     }, null, 2));
 });
+program
+    .command('preview <scenario>')
+    .description('Preview in a local browser with playback, seeking and automatic file updates')
+    .option('--port <number>', 'Local HTTP port; 0 selects an available port', '3000')
+    .action(async (file, opts) => {
+    const { startPreview } = await import('./preview/server.js');
+    console.error('Preparing browser preview…');
+    const preview = await startPreview(file, { port: Number(opts.port) });
+    console.log(`Preview: ${preview.url}\nOpen this URL in your browser. Press Ctrl+C to stop.`);
+    const stop = () => {
+        void preview.close().then(() => {
+            process.off('SIGINT', stop);
+            process.off('SIGTERM', stop);
+        }).catch(error => { console.error(error); process.exitCode = 1; });
+    };
+    process.on('SIGINT', stop);
+    process.on('SIGTERM', stop);
+});
 program
     .command('credits <scenario>')
     .description('Prepare source credits for the video description')

package/dist/credits.js

@@ -13,8 +13,8 @@ export function makeCredits(scenario, bundled) {
         sections.unshift(`사용자 지정 지도 경계\n${customMap}`);
     for (const [id, asset] of Object.entries(scenario.assets))
         sections.push(`음원 ${id}\n출처: ${asset.source}\n이용조건: ${asset.license}`);
-    if (scenario.events.some(e => e.type === 'alert' && e.sound === 'default'))
-        sections.push('공통 문자 수신음\n출처: 재난방송실에서 직접 합성한 창작 알림음. 실제 재난 경보음 아님.\n이용조건: CC0 1.0');
+    if (scenario.events.some(e => 'sound' in e && e.sound === 'default'))
+        sections.push('기본 알림·경보 효과음\n출처: 재난방송실에서 직접 합성한 창작 음향.\n이용조건: CC0 1.0');
     const text = `자료 출처\n\n${sections.join('\n\n')}\n\n원자료는 각 제공자의 조건에 따라 있는 그대로 제공됩니다. 제공기관은 이 창작물의 내용을 보증하거나 후원하지 않습니다.\n`;
     return { entries, customMap, text };
 }

package/dist/load.js

@@ -1,6 +1,6 @@
 import { readFile, stat } from 'node:fs/promises';
 import path from 'node:path';
-import { notificationAsset } from './notifications.js';
+import { defaultSounds, notificationSounds } from './notifications.js';
 import { readBundledJson, packageRoot } from './assets.js';
 import { parseDocument } from 'yaml';
 import { compile, scenarioSchema, alertText, pages, FPS } from './scenario.js';
@@ -70,8 +70,10 @@ export async function loadScenario(file) {
         const assetPaths = {};
         for (const [key, asset] of Object.entries(scenario.assets))
             assetPaths[key] = await localFile(root, asset.path, `assets.${key}.path`);
-        if (timeline.events.some((e) => e.type === 'alert' && e.sound === 'default'))
-            assetPaths[notificationAsset] = path.join(packageRoot, 'assets/audio/notification.wav');
+        const usedSounds = new Set(notificationSounds(timeline).map((sound) => sound.asset));
+        for (const sound of Object.values(defaultSounds))
+            if (usedSounds.has(sound.asset))
+                assetPaths[sound.asset] = path.join(packageRoot, 'assets/audio', sound.file);
         const warnings = [];
         const alerts = timeline.events.filter((e) => e.type === 'alert');
         for (let i = 0; i < alerts.length; i++) {

package/dist/notifications.d.ts

@@ -1,6 +1,43 @@
-import type { Timeline } from './scenario.js';
-export declare const notificationAsset = "__dbs_notification";
-export declare function notificationSounds(t: Timeline): {
+import { type Timeline } from './scenario.js';
+export declare const defaultSounds: {
+    readonly 안전안내: {
+        readonly asset: "__dbs_notification";
+        readonly file: "notification.wav";
+        readonly duration: 0.55;
+        readonly volume: 0.65;
+    };
+    readonly 긴급재난: {
+        readonly asset: "__dbs_alert_urgent";
+        readonly file: "alert-urgent.wav";
+        readonly duration: 2.4;
+        readonly volume: 0.85;
+    };
+    readonly 위급재난: {
+        readonly asset: "__dbs_alert_critical";
+        readonly file: "alert-critical.wav";
+        readonly duration: 4.2;
+        readonly volume: 0.95;
+    };
+    readonly status: {
+        readonly asset: "__dbs_status";
+        readonly file: "status.wav";
+        readonly duration: 0.3;
+        readonly volume: 0.75;
+    };
+    readonly news: {
+        readonly asset: "__dbs_news";
+        readonly file: "news.wav";
+        readonly duration: 0.28;
+        readonly volume: 0.65;
+    };
+    readonly bulletin: {
+        readonly asset: "__dbs_bulletin";
+        readonly file: "bulletin.wav";
+        readonly duration: 1;
+        readonly volume: 0.9;
+    };
+};
+export declare function notificationSounds(timeline: Timeline): {
     id: string;
     start: number;
     frames: number;

package/dist/notifications.js

@@ -1,8 +1,36 @@
 import { FPS } from './scenario.js';
-export const notificationAsset = '__dbs_notification';
-export function notificationSounds(t) {
-    return t.events.flatMap(e => e.type !== 'alert' || e.sound === false ? [] : [{
-            id: `sound-${e.id}`, start: e.start, frames: Math.min(t.durationInFrames - e.start, Math.round((e.sound === 'default' ? .55 : e.sound.duration) * FPS)),
-            asset: e.sound === 'default' ? notificationAsset : e.sound.asset, volume: e.sound === 'default' ? .65 : e.sound.volume,
-        }]);
+export const defaultSounds = {
+    '안전안내': { asset: '__dbs_notification', file: 'notification.wav', duration: 0.55, volume: 0.65 },
+    '긴급재난': { asset: '__dbs_alert_urgent', file: 'alert-urgent.wav', duration: 2.4, volume: 0.85 },
+    '위급재난': { asset: '__dbs_alert_critical', file: 'alert-critical.wav', duration: 4.2, volume: 0.95 },
+    status: { asset: '__dbs_status', file: 'status.wav', duration: 0.3, volume: 0.75 },
+    news: { asset: '__dbs_news', file: 'news.wav', duration: 0.28, volume: 0.65 },
+    bulletin: { asset: '__dbs_bulletin', file: 'bulletin.wav', duration: 1, volume: 0.9 },
+};
+export function notificationSounds(timeline) {
+    const statuses = timeline.events.filter((event) => event.type === 'status');
+    return timeline.events.flatMap((event) => {
+        if (!('sound' in event) || event.sound === false)
+            return [];
+        const sound = event.sound === 'default'
+            ? defaultSounds[event.type === 'alert' ? event.level : event.type]
+            : event.sound;
+        const cue = (start, suffix = '') => ({
+            id: `sound-${event.id}${suffix}`,
+            start,
+            frames: Math.min(timeline.durationInFrames - start, Math.max(1, Math.round(sound.duration * FPS))),
+            asset: sound.asset,
+            volume: sound.volume,
+        });
+        if (event.type !== 'status')
+            return [cue(event.start)];
+        const previous = statuses.find((other) => other.end === event.start);
+        const sameItems = JSON.stringify(previous?.items ?? []) === JSON.stringify(event.items);
+        const sounds = sameItems ? [] : [cue(event.start)];
+        // An adjacent status owns the change; emit only one cue at a replacement/clear.
+        if (event.items.length && event.end < timeline.durationInFrames &&
+            !statuses.some((other) => other.start === event.end))
+            sounds.push(cue(event.end, '/end'));
+        return sounds;
+    }).sort((a, b) => a.start - b.start);
 }

package/dist/preview/browser.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/preview/browser.js

@@ -0,0 +1,87 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Player } from '@remotion/player';
+import { Broadcast } from '../video/Broadcast.js';
+import { FPS } from '../scenario.js';
+import { notificationSounds } from '../notifications.js';
+async function readJson(url, signal) {
+    const response = await fetch(url, { signal });
+    if (!response.ok)
+        throw Error(`미리보기를 불러오지 못했습니다 (${response.status}).`);
+    return response.json();
+}
+function Preview() {
+    const player = useRef(null);
+    const revision = useRef(0);
+    const [snapshot, setSnapshot] = useState();
+    const [error, setError] = useState(null);
+    const [connected, setConnected] = useState(true);
+    const [initialFrame, setInitialFrame] = useState(0);
+    const [frame, setFrame] = useState(0);
+    const [target, setTarget] = useState('0');
+    const audioTags = useMemo(() => {
+        if (!snapshot)
+            return 5;
+        const timeline = snapshot.props.timeline;
+        const spans = [
+            ...notificationSounds(timeline).map(sound => ({ start: sound.start, end: sound.start + sound.frames })),
+            ...timeline.events.filter(event => event.type === 'audio'),
+        ];
+        const changes = spans.flatMap(span => [[span.start, 1], [span.end, -1]])
+            .sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+        let active = 0, maximum = 5;
+        for (const [, delta] of changes)
+            maximum = Math.max(maximum, active += delta);
+        return maximum;
+    }, [snapshot]);
+    useEffect(() => {
+        const controller = new AbortController();
+        let timer;
+        const poll = async () => {
+            try {
+                const status = await readJson('/api/status', controller.signal);
+                setError(status.error);
+                if (status.revision !== revision.current) {
+                    const next = await readJson('/api/scenario', controller.signal);
+                    const position = Math.min(player.current?.getCurrentFrame() ?? 0, next.props.timeline.durationInFrames - 1);
+                    player.current?.pause();
+                    setInitialFrame(position);
+                    setFrame(position);
+                    setTarget(String(position));
+                    revision.current = next.revision;
+                    setSnapshot(next);
+                }
+                setConnected(true);
+            }
+            catch (error) {
+                if (controller.signal.aborted)
+                    return;
+                setConnected(false);
+            }
+            if (!controller.signal.aborted)
+                timer = setTimeout(poll, 750);
+        };
+        void poll();
+        return () => { controller.abort(); clearTimeout(timer); };
+    }, []);
+    useEffect(() => {
+        const current = player.current;
+        if (!current)
+            return;
+        const update = ({ detail }) => setFrame(detail.frame);
+        current.addEventListener('frameupdate', update);
+        return () => current.removeEventListener('frameupdate', update);
+    }, [snapshot?.revision]);
+    const seek = (value) => {
+        if (!snapshot || !Number.isFinite(value))
+            return;
+        const position = Math.max(0, Math.min(Math.round(value), snapshot.props.timeline.durationInFrames - 1));
+        player.current?.pause();
+        player.current?.seekTo(position);
+        setFrame(position);
+        setTarget(String(position));
+    };
+    return _jsxs("main", { className: "preview", children: [_jsxs("header", { children: [_jsxs("h1", { children: [snapshot?.props.timeline.scenario.title ?? '재난방송실', " \u00B7 \uBBF8\uB9AC\uBCF4\uAE30"] }), _jsx("span", { role: "status", className: "status", children: !connected ? '서버 연결 끊김 · 재연결 대기 중' : error ? '수정 대기 중' : snapshot ? '저장하면 자동 반영' : '불러오는 중…' })] }), error && _jsx("p", { role: "alert", className: "error", children: `입력을 확인해 주세요. 마지막 정상 화면을 유지합니다.\n${error}` }), snapshot && _jsxs(_Fragment, { children: [_jsx("div", { className: "player", children: _jsx(Player, { ref: player, component: Broadcast, inputProps: snapshot.props, durationInFrames: snapshot.props.timeline.durationInFrames, compositionWidth: 1920, compositionHeight: 1080, fps: FPS, initialFrame: initialFrame, controls: true, clickToPlay: true, doubleClickToFullscreen: true, numberOfSharedAudioTags: audioTags, moveToBeginningWhenEnded: false, style: { width: '100%' }, errorFallback: ({ error }) => _jsx("div", { role: "alert", className: "error", children: `화면을 표시하지 못했습니다.\n${error.message}` }) }, snapshot.revision) }), _jsxs("div", { className: "tools", children: [_jsx("button", { onClick: () => seek(frame - 1), "aria-label": "\uC774\uC804 \uD504\uB808\uC784", children: "\u2190 1\uD504\uB808\uC784" }), _jsx("button", { onClick: () => seek(frame + 1), "aria-label": "\uB2E4\uC74C \uD504\uB808\uC784", children: "1\uD504\uB808\uC784 \u2192" }), _jsx("form", { onSubmit: event => { event.preventDefault(); seek(Number(target)); }, children: _jsxs("label", { children: ["\uD504\uB808\uC784 ", _jsx("input", { "aria-label": "\uC774\uB3D9\uD560 \uD504\uB808\uC784", type: "number", min: "0", max: snapshot.props.timeline.durationInFrames - 1, value: target, onChange: event => setTarget(event.target.value) }), _jsx("button", { type: "submit", children: "\uC774\uB3D9" })] }) }), _jsxs("label", { children: ["\uCEF7 ", _jsxs("select", { "aria-label": "\uCEF7\uC73C\uB85C \uC774\uB3D9", value: "", onChange: event => seek(Number(event.target.value)), children: [_jsx("option", { value: "", disabled: true, children: "\uCEF7 \uC120\uD0DD" }), snapshot.props.timeline.cuts.map(cut => _jsx("option", { value: cut.start, children: cut.id }, cut.id))] })] }), _jsxs("output", { "aria-label": "\uD604\uC7AC \uD504\uB808\uC784", children: [frame, " / ", snapshot.props.timeline.durationInFrames - 1, " \u00B7 ", (frame / FPS).toFixed(2), "\uCD08"] })] }), snapshot.warnings.length > 0 && _jsx("p", { className: "warnings", children: snapshot.warnings.join('\n') }), _jsx("p", { children: "\uC7AC\uC0DD \uBC84\uD2BC\uC73C\uB85C \uD654\uBA74\uACFC \uC74C\uD5A5\uC744 \uD655\uC778\uD558\uC138\uC694. \uC2DC\uB098\uB9AC\uC624\u00B7\uC9C0\uB3C4\u00B7\uC74C\uC6D0\uC744 \uC800\uC7A5\uD558\uBA74 \uD604\uC7AC \uC704\uCE58\uC5D0\uC11C \uC77C\uC2DC\uC815\uC9C0\uD55C \uB4A4 \uBC18\uC601\uD569\uB2C8\uB2E4. \uC885\uB8CC: \uD130\uBBF8\uB110\uC5D0\uC11C Ctrl+C" })] })] });
+}
+createRoot(document.getElementById('root')).render(_jsx(Preview, {}));

package/dist/preview/http.d.ts

@@ -0,0 +1,3 @@
+import { type IncomingMessage, type ServerResponse } from 'node:http';
+import type { PreviewProject } from './project.js';
+export declare function createPreviewServer(project: PreviewProject, publicDir: string, bundleDir: string): import("http").Server<typeof IncomingMessage, typeof ServerResponse>;