MEDIABROWSER 배포 사이트 + 공개 릴리스 저장소 전환 (DEPLOYMENT_PLAN §5-ter, BACKLOG 12차) — site/: 프로모션(라이트 글래스모피즘, CSS scroll-driven 패럴랙스+IO 등장, 모션·투명도 축소 존중, no-JS 백지 방지 html.js 게이트)·릴리스(플랫폼 그룹, OS 자동 감지 권장, 이전 버전 접힘, 빈 상태)·사용 안내(설치→첫 다운로드→관리→휴대폰 연결→FAQ) 3페이지. 히어로/가이드 이미지는 VD_DATA_DIR 격리 프로필로 띄운 실제 앱 다운로드 패널 캡처(밝기 보정). 릴리스 데이터는 CORS 회피를 위해 배포 시 fetch-releases.mjs 가 releases.json 으로 정적 생성(git 무시). 공개 저장소 Video-Downloader/releases 신설(비공개 소스 저장소는 자산 익명 다운로드 불가) — CI 업로드를 env RELEASE_REPO 로 전환, draft 익명 비노출이라 QA 후 Publish 흐름 유지. build/deploy-site.ps1(wrangler pages deploy) 추가, 라이브: https://mediabrowser-7r4.pages.dev — Playwright 로 3페이지 전수 스크린샷 검증(빈 상태+샘플 데이터 렌더 포함)

site/guide.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>사용 안내 - MEDIABROWSER</title>
+<meta name="description" content="MEDIABROWSER 설치부터 첫 다운로드, 다운로드 관리, 휴대폰 연결까지의 사용 안내.">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='24' fill='%232050f0'/><path d='M50 22v36M36 44l14 14 14-14M28 74h44' stroke='white' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+<nav class="nav glass" aria-label="주 메뉴">
+  <a class="nav__brand" href="index.html">
+    <span class="nav__mark"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg></span>
+    MEDIABROWSER
+  </a>
+  <div class="nav__links">
+    <a href="index.html#features">기능</a>
+    <a href="index.html#mobile">모바일</a>
+    <a href="guide.html" aria-current="page">사용 안내</a>
+  </div>
+  <a class="btn btn--primary btn--sm" href="releases.html">다운로드</a>
+</nav>
+
+<header class="pagehead">
+  <div class="orbs" aria-hidden="true">
+    <div class="orb orb--a"></div>
+    <div class="orb orb--b"></div>
+  </div>
+  <div class="wrap">
+    <h1>사용 안내</h1>
+    <p class="sub">설치부터 첫 다운로드, 휴대폰 연결까지. 처음이라면 위에서부터 순서대로 따라오세요.</p>
+  </div>
+</header>
+
+<div class="wrap guide-layout">
+  <aside class="guide-toc glass" aria-label="목차">
+    <a href="#install">1. 설치</a>
+    <a href="#first">2. 첫 다운로드</a>
+    <a href="#manage">3. 다운로드 관리</a>
+    <a href="#phone">4. 휴대폰 연결</a>
+    <a href="#faq">자주 묻는 질문</a>
+  </aside>
+
+  <main>
+    <section class="guide-step" id="install">
+      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#rocket-launch"/></svg></span>설치</h2>
+      <p><a href="releases.html" style="color:var(--accent);font-weight:700;text-decoration:none">다운로드 페이지</a>에서 플랫폼에 맞는 빌드를 받으세요.</p>
+      <ul>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>
+          <span><b>Windows</b>: 설치자(exe)를 실행하고 안내를 따르면 끝입니다. x64 와 arm64 를 제공합니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#apple-logo"/></svg>
+          <span><b>macOS 프리뷰</b>: tar.gz 를 풀고 앱을 실행합니다. 아직 서명이 없어 처음 실행 시 보안 확인이 필요할 수 있습니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#linux-logo"/></svg>
+          <span><b>Linux 프리뷰</b>: tar.gz 를 풀고 실행 파일을 실행합니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>
+          <span><b>Android</b>: APK 를 설치합니다. 데스크톱 앱과 페어링해 쓰는 컴패니언입니다.</span></li>
+      </ul>
+      <p>다운로드에 필요한 도구(yt-dlp, ffmpeg, deno)는 앱이 필요할 때 자동으로 설치합니다. 따로 준비할 것은 없습니다.</p>
+    </section>
+
+    <section class="guide-step" id="first">
+      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#cursor-click"/></svg></span>첫 다운로드</h2>
+      <p>MEDIABROWSER 는 브라우저입니다. 평소처럼 사이트에 들어가 영상을 재생하면 나머지는 앱이 합니다.</p>
+      <ul>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#globe-hemisphere-west"/></svg>
+          <span>주소창에 사이트를 입력해 이동하고, 원하는 영상을 <b>재생</b>합니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#waveform"/></svg>
+          <span>재생이 시작되면 스트림(HLS, DASH, MP4)이 감지되어 오른쪽 <b>다운로드 패널</b>에 나타납니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
+          <span>목록에서 <b>다운로드</b>를 누르면 로그인 상태 그대로 내려받기가 시작됩니다.</span></li>
+      </ul>
+      <figure class="guide-media glass">
+        <img src="assets/panel-downloads.png" alt="다운로드 패널의 빈 상태 화면. 영상을 재생하면 여기에 나타납니다 라는 안내 문구가 표시되어 있다." width="426" height="330">
+        <figcaption>감지 전의 다운로드 패널. 재생을 시작하면 이 목록이 채워집니다.</figcaption>
+      </figure>
+    </section>
+
+    <section class="guide-step" id="manage">
+      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#stack"/></svg></span>다운로드 관리</h2>
+      <p>패널의 탭으로 전체, 진행, 완료, 실패를 나눠 보고, 항목마다 속도와 남은 시간, 세그먼트 진행을 확인합니다.</p>
+      <ul>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg>
+          <span><b>모두 일시정지 / 모두 재개</b>로 한 번에 멈추고 다시 시작합니다. 항목별 일시정지도 됩니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg>
+          <span><b>예약</b>을 걸면 지정한 시간부터 내려받습니다. 이미 받은 영상은 중복 확인으로 알려줍니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#folders"/></svg>
+          <span>받은 영상은 <b>라이브러리</b>에서 모아 보고, 재생목록과 즐겨찾기, 아카이브로 정리합니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg>
+          <span>목록은 <b>CSV</b> 로 내보내 기록으로 남길 수 있습니다.</span></li>
+      </ul>
+    </section>
+
+    <section class="guide-step" id="phone">
+      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#device-mobile"/></svg></span>휴대폰 연결</h2>
+      <p>데스크톱 앱에 내장된 서버가 휴대폰과 라이브러리를 이어줍니다. 같은 네트워크에서 페어링 한 번이면 됩니다.</p>
+      <ul>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#qr-code"/></svg>
+          <span>휴대폰에서 컴패니언 앱을 열고, 데스크톱 앱이 보여주는 <b>QR 코드</b>를 스캔합니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#play-circle"/></svg>
+          <span>페어링이 끝나면 라이브러리의 영상을 휴대폰에서 <b>바로 재생</b>하거나 <b>파일로 전송</b>받습니다.</span></li>
+        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#shield-check"/></svg>
+          <span>연결은 내 네트워크 안에서만 이루어집니다. 외부 서버를 거치지 않습니다.</span></li>
+      </ul>
+    </section>
+
+    <section class="guide-step" id="faq">
+      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#gear"/></svg></span>자주 묻는 질문</h2>
+      <div class="guide-faq">
+        <details>
+          <summary>ffmpeg 나 yt-dlp 를 따로 설치해야 하나요?</summary>
+          <p>아니요. 필요한 시점에 앱이 자동으로 내려받아 관리합니다. 설정에서 직접 지정한 경로가 있으면 그걸 우선합니다.</p>
+        </details>
+        <details>
+          <summary>받은 파일은 어디에 저장되나요?</summary>
+          <p>기본 저장 폴더에 저장되며, 설정에서 폴더를 바꿀 수 있습니다. 완료 목록에서 파일 위치를 바로 열 수 있습니다.</p>
+        </details>
+        <details>
+          <summary>다운로드가 중간에 끊기면 처음부터 다시 받나요?</summary>
+          <p>아니요. 세그먼트 단위로 이어받기를 지원해서 받다 만 지점부터 다시 진행합니다.</p>
+        </details>
+        <details>
+          <summary>업데이트는 어떻게 하나요?</summary>
+          <p>설정의 앱 업데이트 항목에서 새 버전을 확인할 수 있고, 다운로드 페이지에서 새 설치자를 받아 덮어 설치하면 됩니다.</p>
+        </details>
+        <details>
+          <summary>어떤 사이트를 지원하나요?</summary>
+          <p>표준 스트리밍 형식(HLS, DASH, MP4)을 쓰는 사이트에서 동작합니다. 콘텐츠의 이용 약관과 저작권을 지키는 범위에서 사용해 주세요.</p>
+        </details>
+      </div>
+    </section>
+  </main>
+</div>
+
+<footer>
+  <div class="wrap footer__row">
+    <span class="footer__brand">MEDIABROWSER</span>
+    <a href="releases.html">다운로드</a>
+    <a href="guide.html">사용 안내</a>
+    <a href="https://git.chanpaca.net/Video-Downloader/releases" rel="noopener">릴리스 저장소</a>
+    <span class="footer__copy">© 2026 MEDIABROWSER</span>
+  </div>
+</footer>
+
+<script src="site.js" defer></script>
+</body>
+</html>