releases/site/guide.html

<!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>