Video-Downloader/releases
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions
releases/site/guide.html

327 lines
17 KiB
HTML
Raw Blame History

<!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 설치부터 첫 스트림 감지, 세그먼트 이어받기, 모바일 컴패니언 QR 연결까지 단계별 안내.">
<meta property="og:type" content="website">
<meta property="og:title" content="사용 안내 - MEDIABROWSER">
<meta property="og:description" content="설치, 첫 영상 감지, 다운로드 관리, 휴대폰 QR 연결, 단축키까지 단계별로 안내합니다.">
<meta property="og:url" content="https://mediabrowser.chanpaca.net/guide.html">
<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='%233b82f6'/><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>
<div class="ambient-lighting" aria-hidden="true">
<div class="ambient-spotlight"></div>
<div class="ambient-grid"></div>
</div>
<!-- Fluid Island Navigation -->
<div class="nav-wrapper">
<nav class="nav glass" aria-label="주 메뉴">
<a class="nav__brand" href="index.html">
<span class="nav__logo-badge">
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
</span>
<span>MEDIABROWSER</span>
</a>
<div class="nav__links">
<a class="nav__link" href="index.html#how-it-works">작동 방식</a>
<a class="nav__link" href="index.html#compare">비교</a>
<a class="nav__link" href="index.html#features">핵심 기능</a>
<a class="nav__link" href="index.html#mobile">모바일 연결</a>
<a class="nav__link" href="guide.html" aria-current="page">사용 안내</a>
</div>
<div class="nav__actions">
<a class="btn btn--primary btn--sm" href="releases.html">
<span>다운로드</span>
<span class="btn__icon-badge"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#arrow-up-right"/></svg></span>
</a>
<button class="nav__hamburger" id="nav-toggle" aria-label="메뉴 열기" aria-expanded="false">
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#list"/></svg>
</button>
</div>
</nav>
</div>
<!-- Mobile Navigation Drawer -->
<div class="mobile-menu-overlay" id="mobile-menu" aria-hidden="true">
<div class="mobile-menu-links">
<a class="mobile-menu-link" href="index.html#how-it-works">작동 방식</a>
<a class="mobile-menu-link" href="index.html#compare">비교</a>
<a class="mobile-menu-link" href="index.html#features">핵심 기능</a>
<a class="mobile-menu-link" href="index.html#mobile">모바일 연결</a>
<a class="mobile-menu-link" href="guide.html" aria-current="page">사용 안내</a>
<a class="mobile-menu-link" href="releases.html" style="color:var(--accent)">다운로드 ↗</a>
</div>
</div>
<!-- Page Header -->
<header style="padding:calc(var(--nav-h) + 72px) 0 48px">
<div class="wrap">
<div class="reveal">
<h1 style="font-size:clamp(2.4rem,4.2vw,3.5rem)">사용 안내</h1>
<p class="sub" style="margin-top:14px">설치부터 첫 영상 다운로드, 라이브러리 정리, 휴대폰 무선 연결까지 단계별로 안내합니다.</p>
</div>
</div>
</header>
<div class="wrap guide-layout">
<!-- Sticky TOC -->
<aside class="guide-toc bezel-shell" aria-label="목차">
<div class="guide-toc-title">목차 바로가기</div>
<a class="guide-toc-link is-active" href="#install">1. 설치 및 시작하기</a>
<a class="guide-toc-link" href="#first">2. 첫 영상 자동 감지</a>
<a class="guide-toc-link" href="#manage">3. 다운로드 및 라이브러리</a>
<a class="guide-toc-link" href="#phone">4. 휴대폰 QR 연결</a>
<a class="guide-toc-link" href="#shortcuts">5. 단축키 안내</a>
<a class="guide-toc-link" href="#faq">6. 자주 묻는 질문</a>
</aside>
<!-- Main Content -->
<main>
<!-- Step 1: Install -->
<section class="bezel-shell spotlight-card guide-step-card reveal" id="install">
<div class="guide-step-head">
<div class="guide-step-num">1</div>
<h2>설치 및 환경 구성</h2>
</div>
<p><a href="releases.html" style="color:var(--accent);font-weight:700">다운로드 페이지</a>에서 사용하시는 운영체제에 맞는 패키지를 내려받습니다.</p>
<ul class="guide-list">
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>
<div><strong>Windows</strong>: 설치자(exe)를 실행하면 바로 설치가 완료됩니다. x64 및 ARM64 환경을 완벽하게 지원합니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#apple-logo"/></svg>
<div><strong>macOS 프리뷰</strong>: 압축(tar.gz)을 풀고 실행합니다. Apple Silicon(M시리즈) 및 Intel Mac 을 지원합니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#linux-logo"/></svg>
<div><strong>Linux 프리뷰</strong>: 압축(tar.gz)을 해제한 후 실행 파일을 구동합니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>
<div><strong>Android</strong>: 모바일 컴패니언 APK 를 휴대폰에 설치합니다. 데스크톱 앱과 페어링하여 스트리밍을 즐길 수 있습니다.</div>
</li>
</ul>
<div class="guide-tip-box">
<strong>💡 자동 의존성 관리</strong>: 다운로드 및 무손실 리먹싱에 필요한 핵심 도구(ffmpeg, yt-dlp 등)는 앱이 필요할 때 자동으로 내려받아 격리된 경로에서 관리합니다. 사용자가 직접 환경 변수(PATH)를 설정할 필요가 없습니다.
</div>
</section>
<!-- Step 2: First Download -->
<section class="bezel-shell spotlight-card guide-step-card reveal" id="first">
<div class="guide-step-head">
<div class="guide-step-num">2</div>
<h2>첫 영상 자동 감지 &amp; 다운로드</h2>
</div>
<p>MEDIABROWSER 는 자체 내장 브라우저를 기반으로 작동합니다. 복잡한 주소 복사나 개발자 도구 분석 없이 평소처럼 웹 서핑을 즐기세요.</p>
<ul class="guide-list">
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#cursor-click"/></svg>
<div><strong>웹사이트 접속 및 재생</strong>: 주소창에 원하는 사이트 URL 을 입력하고 영상을 재생합니다. 로그인 계정 상태가 브라우저 탭에 그대로 유지됩니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#waveform"/></svg>
<div><strong>실시간 스트림 스니핑</strong>: 비디오가 재생되는 즉시 우측 다운로드 패널에 HLS(.m3u8), DASH(.mpd), MP4 스트림 정보와 해상도가 감지되어 나타납니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
<div><strong>다운로드 시작</strong>: 감지된 목록에서 <strong>다운로드</strong> 버튼을 누르면 로그인 세션과 인증 쿠키를 물려받아 즉시 고속 다운로드가 시작됩니다.</div>
</li>
</ul>
<div class="guide-tip-box">
<strong>🔒 보안 스트림 대응</strong>: 회원 전용 영상이나 Referer 검증이 걸려 있는 스트림도 브라우저 탭의 세션 헤더를 그대로 승계하므로 에러 없이 원본 그대로 수신됩니다.
</div>
</section>
<!-- Step 3: Download Management -->
<section class="bezel-shell spotlight-card guide-step-card reveal" id="manage">
<div class="guide-step-head">
<div class="guide-step-num">3</div>
<h2>다운로드 관리 및 라이브러리 아카이빙</h2>
</div>
<p>패널의 상태 탭을 통해 진행 중인 작업과 완료된 아카이브를 직관적으로 관리할 수 있습니다.</p>
<ul class="guide-list">
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#stack"/></svg>
<div><strong>실시간 세그먼트 맵</strong>: 수백 개의 비디오/오디오 청크 수신 상황과 실시간 전송 속도, 남은 시간을 한눈에 확인합니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#play-circle"/></svg>
<div><strong>일괄 일시정지 &amp; 재개</strong>: 네트워크 대역폭 조절이 필요할 때 모든 다운로드를 한 번에 멈추거나 다시 시작할 수 있습니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg>
<div><strong>중복 방지 &amp; 스케줄링</strong>: 이미 보관 중인 영상을 다시 다운로드할 때 중복 여부를 안내하며, 심야 시간대 예약 다운로드가 가능합니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#folders"/></svg>
<div><strong>라이브러리 정리 및 CSV 내보내기</strong>: 완료된 영상의 재생목록 분류 및 메타데이터 기록을 CSV 로 저장할 수 있습니다.</div>
</li>
</ul>
</section>
<!-- Step 4: Phone Companion -->
<section class="bezel-shell spotlight-card guide-step-card reveal" id="phone">
<div class="guide-step-head">
<div class="guide-step-num">4</div>
<h2>휴대폰 무선 연결 및 로컬 스트리밍</h2>
</div>
<p>데스크톱 앱에 내장된 로컬 웹 서버가 스마트폰과 PC 의 라이브러리를 하나로 연결해 줍니다.</p>
<ul class="guide-list">
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#qr-code"/></svg>
<div><strong>QR 코드 1초 스캔</strong>: 스마트폰에서 컴패니언 앱을 실행하고 데스크톱 앱 화면의 QR 코드를 스캔합니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#device-mobile"/></svg>
<div><strong>무손실 즉시 스트리밍</strong>: 동일한 홈 Wi-Fi 네트워크에서 PC 에 저장된 고화질 비디오를 인코딩 대기 없이 바로 감상합니다.</div>
</li>
<li>
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
<div><strong>모바일 파일 전송</strong>: 외출 전 필요한 영상을 휴대폰 로컬 스토리지로 초고속 전송하여 오프라인에서 시청하세요.</div>
</li>
</ul>
<div class="guide-tip-box">
<strong>🛡️ 로컬 프라이버시</strong>: 모든 통신은 공유기 내부 로컬 네트워크(LAN)에서 암호화되어 직접 전송됩니다. 외부 클라우드나 사설 서버를 일절 거치지 않아 안전합니다.
</div>
</section>
<!-- Step 5: Shortcuts Table -->
<section class="bezel-shell spotlight-card guide-step-card reveal" id="shortcuts">
<div class="guide-step-head">
<div class="guide-step-num">5</div>
<h2>주요 키보드 단축키</h2>
</div>
<p>키보드만으로 빠르고 편리하게 브라우징과 다운로드를 제어할 수 있습니다.</p>
<table class="shortcut-table">
<thead>
<tr>
<th>단축키</th>
<th>동작 설명</th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>D</kbd></td>
<td>우측 다운로드 패널 열기 / 닫기</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>J</kbd></td>
<td>다운로드 완료 라이브러리 아카이브 열기</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>T</kbd></td>
<td>새 브라우징 탭 열기</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></td>
<td>전체 다운로드 일괄 일시정지 / 일괄 재개 토글</td>
</tr>
<tr>
<td><kbd>F5</kbd> 또는 <kbd>Ctrl</kbd> + <kbd>R</kbd></td>
<td>현재 브라우징 탭 새로고침</td>
</tr>
</tbody>
</table>
</section>
<!-- Step 6: FAQ -->
<section class="bezel-shell spotlight-card guide-step-card reveal" id="faq">
<div class="guide-step-head">
<div class="guide-step-num">6</div>
<h2>자주 묻는 질문 (FAQ)</h2>
</div>
<div class="faq-stack">
<details class="faq-item">
<summary>
<span>ffmpeg 나 yt-dlp 를 따로 설치해야 하나요?</span>
<svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
</summary>
<div class="faq-content">
아니요. 앱 최초 실행 시 또는 다운로드가 필요한 시점에 내장 모듈이 안전한 최신 바이너리를 자동으로 내려받아 관리합니다. 사용자가 직접 환경 변수나 폴더를 설정할 필요가 없습니다.
</div>
</details>
<details class="faq-item">
<summary>
<span>받은 영상은 어디에 저장되며 변경할 수 있나요?</span>
<svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
</summary>
<div class="faq-content">
기본적으로 시스템의 '동영상' 폴더 내 MEDIABROWSER 디렉터리에 저장됩니다. 앱 설정 메뉴에서 외장 하드 드라이브나 원하는 사용자 정의 폴더로 언제든지 변경할 수 있습니다.
</div>
</details>
<details class="faq-item">
<summary>
<span>다운로드 중 연결이 끊기면 처음부터 다시 받나요?</span>
<svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
</summary>
<div class="faq-content">
아니요. MEDIABROWSER 는 청크 및 세그먼트 단위로 다운로드 진척도를 영구 기록합니다. 인터넷이 끊기거나 앱을 재실행해도 이미 수신된 데이터는 보존되며 멈춘 지점부터 즉시 이어받습니다.
</div>
</details>
<details class="faq-item">
<summary>
<span>모바일 스트리밍 시 스마트폰 데이터가 소모되나요?</span>
<svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
</summary>
<div class="faq-content">
아니요. PC 와 스마트폰이 동일한 Wi-Fi 공유기 네트워크에 연결되어 있는 경우, 로컬 기기간 직접 전송(LAN)으로 동작하므로 통신사 LTE/5G 모바일 데이터는 전혀 소모되지 않습니다.
</div>
</details>
<details class="faq-item">
<summary>
<span>어떤 사이트와 스트리밍 포맷을 지원하나요?</span>
<svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
</summary>
<div class="faq-content">
표준 웹 비디오 포맷인 HLS(.m3u8), DASH(.mpd), MP4 프로토콜을 사용하는 대다수의 웹사이트에서 완벽하게 동작합니다. 단, DRM(디지털 저작권 관리 기술)으로 하드웨어 암호화된 유료 OTT 스트리밍 서비스는 기술적/법적 보호를 위해 다운로드가 제한될 수 있습니다.
</div>
</details>
</div>
</section>
</main>
</div>
<!-- Footer -->
<footer>
<div class="wrap footer__row">
<div class="footer__brand">
<span class="nav__logo-badge" style="width:26px;height:26px;border-radius:7px">
<svg class="icon" style="width:14px;height:14px" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
</span>
<span>MEDIABROWSER</span>
</div>
<div class="footer__links">
<a href="releases.html">다운로드</a>
<a href="guide.html">사용 안내</a>
<a href="https://git.chanpaca.net/Video-Downloader/releases" target="_blank" rel="noopener">릴리스 저장소</a>
</div>
<div class="footer__copy">
&copy; 2026 MEDIABROWSER. All rights reserved.
</div>
</div>
</footer>
<script src="site.js" defer></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink