mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-12 20:47:39 +00:00
KoalaDev
1246 lines
101 KiB
HTML
1246 lines
101 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko" class="lang-ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KoalaSync | Netflix, YouTube 및 모든 비디오를 친구와 실시간 동기화 시청</title>
|
|
<meta name="description" content="Netflix, YouTube, Twitch 및 모든 HTML5 비디오를 친구들과 완벽하게 동기화하여 시청하세요. Chrome 및 Firefox용 무료 오픈 소스 브라우저 확장 프로그램. 가입 필요 없음.">
|
|
|
|
<link rel="preload" href="../style.b511a1d2.min.css" as="style">
|
|
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
|
|
<link rel="stylesheet" href="../style.b511a1d2.min.css">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
|
|
<link rel="canonical" href="https://sync.koalastuff.net/ko/">
|
|
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
|
|
<link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/">
|
|
<link rel="alternate" hreflang="fr" href="https://sync.koalastuff.net/fr/">
|
|
<link rel="alternate" hreflang="es" href="https://sync.koalastuff.net/es/">
|
|
<link rel="alternate" hreflang="pt-br" href="https://sync.koalastuff.net/pt-BR/">
|
|
<link rel="alternate" hreflang="ru" href="https://sync.koalastuff.net/ru/">
|
|
<link rel="alternate" hreflang="it" href="https://sync.koalastuff.net/it/">
|
|
<link rel="alternate" hreflang="pl" href="https://sync.koalastuff.net/pl/">
|
|
<link rel="alternate" hreflang="tr" href="https://sync.koalastuff.net/tr/">
|
|
<link rel="alternate" hreflang="nl" href="https://sync.koalastuff.net/nl/">
|
|
<link rel="alternate" hreflang="ja" href="https://sync.koalastuff.net/ja/">
|
|
<link rel="alternate" hreflang="ko" href="https://sync.koalastuff.net/ko/">
|
|
<link rel="alternate" hreflang="pt" href="https://sync.koalastuff.net/pt/">
|
|
<link rel="alternate" hreflang="x-default" href="https://sync.koalastuff.net/">
|
|
<meta name="robots" content="index, follow">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://sync.koalastuff.net/ko/">
|
|
<meta property="og:title" content="KoalaSync | Netflix, Emby, Jellyfin 및 거의 모든 비디오를 친구와 동기화 시청">
|
|
<meta property="og:description" content="Netflix, Emby, Jellyfin, YouTube, Twitch 및 거의 모든 HTML5 비디오를 완벽하게 동기화하여 시청하세요. Chrome 및 Firefox용 개인정보 보호 중심 오픈 소스 브라우저 확장 프로그램.">
|
|
<meta property="og:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
|
|
<meta property="og:locale" content="ko_KR">
|
|
<meta property="og:locale:alternate" content="en_US">
|
|
<meta property="og:locale:alternate" content="de_DE">
|
|
<meta property="og:locale:alternate" content="fr_FR">
|
|
<meta property="og:locale:alternate" content="es_ES">
|
|
<meta property="og:locale:alternate" content="pt_BR">
|
|
<meta property="og:locale:alternate" content="ru_RU">
|
|
<meta property="og:locale:alternate" content="it_IT">
|
|
<meta property="og:locale:alternate" content="pl_PL">
|
|
<meta property="og:locale:alternate" content="tr_TR">
|
|
<meta property="og:locale:alternate" content="nl_NL">
|
|
<meta property="og:locale:alternate" content="ja_JP">
|
|
<meta property="og:locale:alternate" content="ko_KR">
|
|
<meta property="og:locale:alternate" content="pt_PT">
|
|
<meta property="og:site_name" content="KoalaSync">
|
|
|
|
<!-- Twitter / X -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="KoalaSync | Netflix, Emby, Jellyfin 및 거의 모든 비디오를 친구와 동기화 시청 – 브라우저 확장 프로그램">
|
|
<meta name="twitter:description" content="Netflix, Emby, Jellyfin, YouTube, Twitch 및 거의 모든 HTML5 비디오를 친구들과 완벽하게 동기화하여 시청하세요. Chrome 및 Firefox용 개인정보 보호 중심 오픈 소스 브라우저 확장 프로그램.">
|
|
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
|
|
|
|
<!-- Mobile Browser Theme Styling -->
|
|
<meta name="theme-color" content="#0f172a">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<link rel="manifest" href="../site.webmanifest">
|
|
|
|
<script src="../lang-init.1b13bbf2.min.js"></script>
|
|
|
|
<!-- Structured Data (Schema.org) for Rich Snippets -->
|
|
<script type="application/ld+json" id="schema-org">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "KoalaSync",
|
|
"url": "https://sync.koalastuff.net/",
|
|
"logo": "https://sync.koalastuff.net/assets/NewLogoIcon_128.webp",
|
|
"sameAs": [
|
|
"https://github.com/Shik3i/KoalaSync",
|
|
"https://mastodon.social/@koalastuff"
|
|
]
|
|
}
|
|
</script>
|
|
<script type="application/ld+json" id="schema-website">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebSite",
|
|
"name": "KoalaSync",
|
|
"url": "https://sync.koalastuff.net/",
|
|
"inLanguage": ["en", "de", "fr", "es", "pt-BR", "ru"]
|
|
}
|
|
</script>
|
|
<script type="application/ld+json" id="schema-software">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "KoalaSync",
|
|
"operatingSystem": "Windows, macOS, Linux, ChromeOS",
|
|
"applicationCategory": "BrowserApplication",
|
|
"browserRequirements": "Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "EUR"
|
|
},
|
|
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
|
|
"softwareVersion": "1.9.3",
|
|
"license": "https://opensource.org/licenses/MIT",
|
|
"sameAs": "https://github.com/Shik3i/KoalaSync",
|
|
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
|
|
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
|
|
}
|
|
</script>
|
|
<script type="application/ld+json" id="schema-howto">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "HowTo",
|
|
"name": "KoalaSync를 사용하여 친구들과 비디오를 동기화하는 방법",
|
|
"description": "YouTube, Netflix, Twitch 등에서 친구들과 완벽하게 동기화하여 비디오를 시청하세요. 가입 없음, 추적 없음.",
|
|
"step": [
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 1,
|
|
"name": "브라우저 확장 프로그램 설치",
|
|
"text": "Chrome 웹 스토어 또는 Firefox 부가 기능에서 KoalaSync를 브라우저에 추가하세요. 비디오 요소가 있는 모든 웹사이트에서 작동합니다.",
|
|
"url": "https://sync.koalastuff.net/#how-it-works"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 2,
|
|
"name": "방 만들기",
|
|
"text": "확장 프로그램 팝업을 열고 '새 방 만들기'를 클릭하세요. 초대 링크가 클립보드에 자동으로 복사됩니다.",
|
|
"url": "https://sync.koalastuff.net/#how-it-works"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 3,
|
|
"name": "공유 및 동기화",
|
|
"text": "친구들에게 초대 링크를 보내세요. 비디오 탭을 선택하고 실시간으로 동기화된 재생을 즐기세요.",
|
|
"url": "https://sync.koalastuff.net/#how-it-works"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
<script type="application/ld+json" id="schema-faq">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "FAQPage",
|
|
"mainEntity": [
|
|
{
|
|
"@type": "Question",
|
|
"name": "친구들과 Netflix, Emby 또는 Jellyfin을 함께 동기화하여 시청할 수 있나요?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "네! KoalaSync는 Netflix, YouTube, Twitch 및 HTML5 비디오 플레이어가 있는 모든 웹사이트(Emby, Jellyfin 및 자체 호스팅 미디어 서버 포함)에서 작동합니다. 확장 프로그램을 설치하고 방을 만든 후 초대 링크를 공유하면 모두가 완벽하게 동기화되어 시청할 수 있습니다." }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "KoalaSync는 Teleparty의 무료 대체 서비스인가요?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "MIT 라이선스에 따라 100% 무료이며 오픈 소스입니다. 프리미ウム 등급도, 제한된 기능도, 광고도 없습니다. 모든 것이 포함되어 있습니다. Teleparty와 달리 KoalaSync의 릴레이 서버는 가입이나 개인정보 수집 없이 RAM에서만 실행됩니다." }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "KoalaSync는 Emby, Jellyfin 및 자체 호스팅 미디어 서버에서 작동하나요?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "네. KoalaSync는 표준 HTML5 비디오 요소를 감지하므로 Emby, Jellyfin, Plex 및 모든 사용자 정의 자체 호스팅 스트리밍 설정에서 완벽하게 작동합니다. 데이터 주권을 완전히 유지하기 위해 Docker를 통해 KoalaSync 릴레이 서버를 직접 호스팅할 수도 있습니다." }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "어떤 브라우저와 플랫폼이 KoalaSync를 지원하나요?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave 및 모든 Chromium 기반 브라우저를 지원합니다. Chrome 웹 스토어 또는 Firefox 부가 기능에서 직접 설치하세요. 수동 설정이 필요 없습니다." }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "친구들 모두 확장 프로그램을 설치해야 하나요?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "네, 각 참여자 모두 KoalaSync를 설치해야 합니다. 단, 가입이나 계정 생성은 필요하지 않습니다. 초대 링크를 클릭하고, 아직 설치하지 않았다면 확장 프로그램을 설치하면 몇 초 만에 자동으로 방에 참여하게 됩니다." }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "제 데이터는 안전한가요? 공식 서버를 믿지 못하겠다면 어떻게 하나요?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "완전히 안전합니다. KoalaSync의 릴레이 서버는 RAM 전용으로 작동하여, 방을 나가는 즉시 모든 세션 데이터가 영구적으로 삭제됩니다. 데이터베이스도, 로그도, 분석도, 계정도 없습니다. 완전한 제어를 원하신다면 Docker를 통해 몇 분 만에 나만의 개인 릴레이 서버를 직접 호스팅할 수 있습니다. 전체 소스 코드는 오픈 소스이며 GitHub에서 확인할 수 있습니다." }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "브라우저에서 비디오를 시청할 때 조용한 대화와 큰 폭발음을 개선할 수 있나요?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "네. KoalaSync 2.2.0에는 비디오의 조용한 부분과 시끄러운 부분 간의 차이를 줄이는 내장 오디오 압축기가 포함되어 있습니다. Web Audio API를 통해 로컬에서 실행되므로 오디오 데이터가 컴퓨터를 떠나지 않습니다. 팝업을 열고, 방을 만들고, 설정 → Audio Processing으로 이동하여 압축기를 켜고 프리셋을 선택하세요. Netflix, Prime Video, Disney+, YouTube 및 모든 HTML5 비디오 사이트에서 작동합니다." }
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<a class="skip-link" href="#main-content">Skip to main content</a>
|
|
|
|
<div class="bg-blobs">
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></div>
|
|
</div>
|
|
|
|
<nav>
|
|
<div class="container nav-content">
|
|
<div class="logo-area">
|
|
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 256w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
|
<span>KoalaSync</span>
|
|
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
|
|
<span>Installed</span>
|
|
</div>
|
|
</div>
|
|
<div class="nav-links" id="primary-nav" role="navigation" aria-label="Primary">
|
|
<a href="#features"><span>특징</span></a>
|
|
<a href="#how-it-works"><span>작동 방식</span></a>
|
|
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" rel="noopener" style="display: inline-flex; align-items: center; gap: 6px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12"/></svg>
|
|
GitHub
|
|
</a>
|
|
<nav class="sr-only" aria-label="Language alternatives">
|
|
<a href="https://sync.koalastuff.net/" hreflang="en">English</a>
|
|
<a href="https://sync.koalastuff.net/de/" hreflang="de">Deutsch</a>
|
|
<a href="https://sync.koalastuff.net/fr/" hreflang="fr">Français</a>
|
|
<a href="https://sync.koalastuff.net/es/" hreflang="es">Español</a>
|
|
<a href="https://sync.koalastuff.net/pt-BR/" hreflang="pt-br">Português (Brasil)</a>
|
|
<a href="https://sync.koalastuff.net/ru/" hreflang="ru">Русский</a>
|
|
<a href="https://sync.koalastuff.net/it/" hreflang="it">Italiano</a>
|
|
<a href="https://sync.koalastuff.net/pl/" hreflang="pl">Polski</a>
|
|
<a href="https://sync.koalastuff.net/tr/" hreflang="tr">Türkçe</a>
|
|
<a href="https://sync.koalastuff.net/nl/" hreflang="nl">Nederlands</a>
|
|
<a href="https://sync.koalastuff.net/ja/" hreflang="ja">日本語</a>
|
|
<a href="https://sync.koalastuff.net/ko/" hreflang="ko">한국어</a>
|
|
<a href="https://sync.koalastuff.net/pt/" hreflang="pt">Português (Portugal)</a>
|
|
</nav>
|
|
</div>
|
|
<div class="nav-right">
|
|
<div class="lang-select-container">
|
|
<select class="lang-dropdown" aria-label="Select Language">
|
|
<option value="en" >🇬🇧 English</option>
|
|
<option value="de" >🇩🇪 Deutsch</option>
|
|
<option value="fr" >🇫🇷 Français</option>
|
|
<option value="es" >🇪🇸 Español</option>
|
|
<option value="pt-BR" >🇧🇷 Português (Brasil)</option>
|
|
<option value="ru" >🇷🇺 Русский</option>
|
|
<option value="it" >🇮🇹 Italiano</option>
|
|
<option value="pl" >🇵🇱 Polski</option>
|
|
<option value="tr" >🇹🇷 Türkçe</option>
|
|
<option value="nl" >🇳🇱 Nederlands</option>
|
|
<option value="ja" >🇯🇵 日本語</option>
|
|
<option value="ko" selected>🇰🇷 한국어</option>
|
|
<option value="pt" >🇵🇹 Português (Portugal)</option>
|
|
</select>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="chevron-icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
|
|
</div>
|
|
<button class="hamburger" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="primary-nav">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero" id="main-content">
|
|
<div class="container hero-grid">
|
|
<div class="hero-text">
|
|
<a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" rel="noopener" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
|
|
<span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
|
|
<span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
|
|
</a>
|
|
<h1 data-reveal>함께 시청하세요.<br>완벽하게 동기화됩니다.</h1>
|
|
<p class="hero-subtitle" data-reveal>지연 없는 원격 영화의 밤. 회원가입도, 데이터 수집도 없습니다. 링크를 공유하고 함께 시청하세요.</p>
|
|
<div class="hero-mascot-container" data-reveal>
|
|
<picture><source srcset="../assets/LookDownKoala-1x.avif 90w, ../assets/LookDownKoala.avif 205w" type="image/avif"><img src="../assets/LookDownKoala-1x.webp" srcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" sizes="90px" alt="다운로드 버튼을 내려다보고 서 있는 귀여운 코알라" class="hero-lookdown-mascot" width="90" height="132" loading="eager" fetchpriority="high" decoding="async"></picture>
|
|
</div>
|
|
<div class="cta-group" data-reveal>
|
|
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
|
|
<img src="../assets/chrome.svg" alt="Chrome" width="20" height="20">
|
|
<span>Chrome에 추가</span>
|
|
</a>
|
|
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
|
|
<img src="../assets/firefox.svg" alt="Firefox" width="20" height="20">
|
|
<span>Firefox에 추가</span>
|
|
</a>
|
|
<a href="https://github.com/Shik3i/KoalaSync/releases" target="_blank" rel="noopener" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12"/></svg>
|
|
GitHub Releases
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interactive CSS Extension Mockup -->
|
|
<div class="hero-mockup-wrapper" data-reveal>
|
|
<div class="extension-mockup">
|
|
<div class="mock-header-row">
|
|
<div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
|
|
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" rel="noopener" class="mock-version-link" title="Visit GitHub Repository">
|
|
<svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
|
|
<span class="mockup-version">2.2.1</span>
|
|
</a>
|
|
</div>
|
|
<div class="mock-tabs">
|
|
<button class="mock-tab active" data-target="mock-room" title="Room settings and connection">Room</button>
|
|
<button class="mock-tab" data-target="mock-sync" title="Video sync controls and remote actions">Sync</button>
|
|
<button class="mock-tab" data-target="mock-settings" title="Extension preferences">Settings</button>
|
|
<button class="mock-tab" data-target="mock-dev" title="Advanced Diagnostics & Logs">Status</button>
|
|
</div>
|
|
<div class="mock-body">
|
|
<!-- ROOM TAB -->
|
|
<div id="mock-room" class="mock-screen active">
|
|
<div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
|
|
<div style="display: flex; flex-direction: column;">
|
|
<span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;">활성 방</span>
|
|
<span class="mock-room-name" style="font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.5px; margin-top: 2px;">brave-eagle-80</span>
|
|
</div>
|
|
<span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);">공식 서버</span>
|
|
</div>
|
|
<div class="mock-card">
|
|
<div class="mock-label" title="Share this link with friends so they can join">초대 링크</div>
|
|
<div class="mock-invite-box">
|
|
<input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
|
|
<button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
|
|
</div>
|
|
</div>
|
|
<div class="mock-card" style="margin-bottom: 12px;">
|
|
<div class="mock-label" title="Other users currently connected to this room">방의 참여자</div>
|
|
<div class="mock-peer-list">
|
|
<div class="mock-peer-item">
|
|
<div class="mock-peer-header">
|
|
<span class="mock-peer-name">CoolUsername</span>
|
|
<span class="mock-peer-meta">YOU</span>
|
|
</div>
|
|
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
|
|
</div>
|
|
<div class="mock-peer-item">
|
|
<div class="mock-peer-header">
|
|
<span class="mock-peer-name">KoalaPC</span>
|
|
<span class="mock-peer-meta">Peer</span>
|
|
</div>
|
|
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">방 나가기</button>
|
|
</div>
|
|
|
|
<!-- SYNC TAB -->
|
|
<div id="mock-sync" class="mock-screen">
|
|
<div class="mock-form-group" style="margin-bottom: 12px;">
|
|
<label class="mock-section-label" title="Choose the browser tab containing the video to sync">
|
|
비디오 선택
|
|
</label>
|
|
<select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
|
|
<option><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
|
|
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
|
|
원격 제어
|
|
</label>
|
|
<button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
|
|
초대 링크
|
|
</button>
|
|
</div>
|
|
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
|
|
<button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Play</button>
|
|
<button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</button>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
|
|
<button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC
|
|
</button>
|
|
<div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
|
|
<span>
|
|
다른 사람에게 이동
|
|
</span>
|
|
<span style="font-size: 0.5rem; opacity: 0.6;">▼</span>
|
|
</div>
|
|
</div>
|
|
|
|
<label class="mock-section-label" title="Shows the most recent play, pause, or seek command">
|
|
최근 활동 상태
|
|
</label>
|
|
<div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: baseline;">
|
|
<span style="font-weight: 700; color: #ef4444; font-size: 11px;">PAUSE</span>
|
|
<span style="font-size: 9px; color: var(--text-muted);">CoolUsername @ 12:44:32</span>
|
|
</div>
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; margin-top: 4px;">
|
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
<div style="width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: white; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; margin-bottom: 1px;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></div>
|
|
<span style="font-size: 7px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36px;">🐨 KoalaPC</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Episode Auto-Sync Lobby Status Mockup -->
|
|
<div class="mock-card" style="margin-bottom: 15px; border-left: 4px solid #fbbf24; background: var(--card); padding: 8px 10px; border-radius: 8px;">
|
|
<div style="display:flex; align-items:center; gap: 6px; margin-bottom: 4px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" style="display:block;flex-shrink:0" viewBox="0 0 24 24"><path d="M5 22h14M5 2h14m-2 20v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"/></svg>
|
|
<span style="font-weight: 700; color: #fbbf24; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;">Episode Lobby</span>
|
|
</div>
|
|
<div style="font-size: 0.7rem; color: white; margin-bottom: 4px; font-weight: 600;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E2
|
|
</div>
|
|
<div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
|
|
참여자 1명 (KoalaPC) 대기 중...
|
|
</div>
|
|
<button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
|
|
건너뛰고 재생
|
|
</button>
|
|
</div>
|
|
|
|
<label class="mock-section-label" title="Other users currently connected to this room">
|
|
방의 참여자
|
|
</label>
|
|
<div class="mock-card" style="margin-bottom: 12px;">
|
|
<div class="mock-peer-list">
|
|
<div class="mock-peer-item">
|
|
<div class="mock-peer-header">
|
|
<span class="mock-peer-name">CoolUsername</span>
|
|
<span class="mock-peer-meta">YOU</span>
|
|
</div>
|
|
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
|
|
</div>
|
|
<div class="mock-peer-item">
|
|
<div class="mock-peer-header">
|
|
<span class="mock-peer-name">KoalaPC</span>
|
|
<span class="mock-peer-meta">Peer</span>
|
|
</div>
|
|
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SETTINGS TAB -->
|
|
<div id="mock-settings" class="mock-screen">
|
|
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
|
|
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
|
|
사용자 이름
|
|
</label>
|
|
<input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
|
|
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
|
|
복잡한 탭 숨기기
|
|
</label>
|
|
<label class="mock-toggle-switch">
|
|
<input type="checkbox" checked>
|
|
<span class="mock-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
|
|
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
|
|
다음 에피소드 자동 동기화
|
|
</label>
|
|
<label class="mock-toggle-switch">
|
|
<input type="checkbox" checked>
|
|
<span class="mock-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
|
|
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
|
|
초대 링크 자동 복사
|
|
</label>
|
|
<label class="mock-toggle-switch">
|
|
<input type="checkbox" checked>
|
|
<span class="mock-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
|
|
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
|
|
브라우저 알림
|
|
</label>
|
|
<label class="mock-toggle-switch">
|
|
<input type="checkbox">
|
|
<span class="mock-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
|
|
<label class="mock-section-label" title="Tools for fixing connection issues">
|
|
문제 해결
|
|
</label>
|
|
<button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
|
|
피어 ID 재생성
|
|
</button>
|
|
<p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
|
|
"중복된 ID" 오류가 발생할 경우에 사용하세요.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DEV TAB -->
|
|
<div id="mock-dev" class="mock-screen">
|
|
<label class="mock-section-label" title="Current WebSocket connection state">
|
|
연결 상태
|
|
</label>
|
|
<div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
|
|
<span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
|
|
<span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
|
|
Connected
|
|
</span>
|
|
<button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
|
|
로그 복사
|
|
</button>
|
|
</div>
|
|
|
|
<label class="mock-section-label" title="Technical details about the currently selected video element">
|
|
비디오 디버그 정보
|
|
</label>
|
|
<div class="mock-card" style="font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
|
|
<div>readyState: HAVE_ENOUGH_DATA</div>
|
|
<div>seekDelta: 0.05s</div>
|
|
<div>buffered: 300.2s</div>
|
|
<div>engineState: <span style="color:#22c55e; font-weight:700;">SYNCED</span></div>
|
|
</div>
|
|
|
|
<label class="mock-section-label" title="Chronological log of all sync commands in the room">
|
|
전체 작업 내역
|
|
</label>
|
|
<div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
|
|
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
|
|
<span>CoolUsername: PAUSE</span>
|
|
<span style="opacity: 0.5;">0:55</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; padding-top: 2px;">
|
|
<span>KoalaPC: PLAY</span>
|
|
<span style="opacity: 0.5;">0:00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
|
|
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
|
|
로그 (최근 50개)
|
|
</label>
|
|
<button class="mock-btn" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:default; padding: 0; font-weight: 700;" title="Clear log output">
|
|
지우기
|
|
</button>
|
|
</div>
|
|
<div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">
|
|
<div style="color:#22c55e;">[18:37:32] EVENT: PLAY -> ACK</div>
|
|
<div>[18:37:32] FORCE_SYNC -> 0.05s diff</div>
|
|
<div>[18:37:38] EVENT: PAUSE -> BROADCAST</div>
|
|
<div style="color:var(--text-muted);">[18:37:42] content_heartbeat: active</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
|
|
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" rel="noopener" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
|
|
<div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="compat-section">
|
|
<div class="container">
|
|
<picture><source srcset="../assets/PlatformJuggler_New-1x.avif 368w, ../assets/PlatformJuggler_New.avif 643w" type="image/avif"><img src="../assets/PlatformJuggler_New-1x.webp" srcset="../assets/PlatformJuggler_New-1x.webp 368w, ../assets/PlatformJuggler_New.webp 643w" sizes="(max-width: 768px) calc(100vw - 2rem), 368px" alt="A cute koala juggling multiple browser tabs showing streaming platforms" class="compat-mascot" width="300" height="233" loading="lazy" fetchpriority="low" data-reveal></picture>
|
|
<p class="compat-heading" data-reveal>
|
|
<span>가장 좋아하는 플랫폼에서 작동합니다</span>
|
|
</p>
|
|
<div class="compat-row" data-reveal>
|
|
<div class="compat-logo">
|
|
<img src="../assets/netflix.svg" alt="Netflix" width="24" height="24">
|
|
<span>Netflix</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="../assets/youtube.svg" alt="YouTube" width="24" height="24">
|
|
<span>YouTube</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="../assets/twitch.svg" alt="Twitch" width="24" height="24">
|
|
<span>Twitch</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="../assets/primevideo.svg" alt="Prime Video" width="24" height="24">
|
|
<span>Prime Video</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="../assets/jellyfin.svg" alt="Jellyfin" width="24" height="24">
|
|
<span>Jellyfin</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="../assets/emby.svg" alt="Emby" width="24" height="24">
|
|
<span>Emby</span>
|
|
</div>
|
|
<div class="compat-logo compat-more">
|
|
<span class="compat-more-icon">+</span>
|
|
<span>그리고 더 많은 플랫폼</span>
|
|
<div class="compat-tooltip">
|
|
<span>비디오 요소가 있는 거의 모든 사이트에서 작동합니다</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="use-cases" class="use-cases-section">
|
|
<div class="container">
|
|
<h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
|
|
<span>어떤 상황에도 완벽합니다</span>
|
|
</h2>
|
|
<p class="section-subtitle" data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 3.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
<span>가깝든 멀든, KoalaSync는 사람들이 좋아하는 비디오를 함께 즐길 수 있도록 연결해 줍니다.</span>
|
|
</p>
|
|
<div class="use-cases-grid">
|
|
<div class="use-case-card" data-reveal>
|
|
<picture><source srcset="../assets/PopcornFriends-1x.avif 272w, ../assets/PopcornFriends.avif 543w" type="image/avif"><img src="../assets/PopcornFriends-1x.webp" srcset="../assets/PopcornFriends-1x.webp 272w, ../assets/PopcornFriends.webp 543w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="함께 앉아 팝콘을 나눠 먹는 두 마리의 귀여운 코알라" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low"></picture>
|
|
<h3>
|
|
<span>친구들과의 영화의 밤</span>
|
|
</h3>
|
|
<p>비디오를 실시간으로 동기화하고 Discord, Zoom 또는 음성 채팅 앱으로 대화하세요. 마치 같은 방에 있는 것처럼 느껴집니다.</p>
|
|
</div>
|
|
<div class="use-case-card" data-reveal>
|
|
<picture><source srcset="../assets/RemoteProf-1x.avif 272w, ../assets/RemoteProf.avif 507w" type="image/avif"><img src="../assets/RemoteProf-1x.webp" srcset="../assets/RemoteProf-1x.webp 272w, ../assets/RemoteProf.webp 507w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="화면을 통해 두 마리의 원격 학생 코알라에게 강의를 진행하는 코알라 교수" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low"></picture>
|
|
<h3>
|
|
<span>원격 학습</span>
|
|
</h3>
|
|
<p>온라인 튜토리얼, 강의 또는 개발자 교육 스트림을 클래스메이트나 동료와 함께 분석해 보세요. 어려운 단계를 멈추고 토론할 수 있습니다.</p>
|
|
</div>
|
|
<div class="use-case-card" data-reveal>
|
|
<picture><source srcset="../assets/KoalaCupple_New-1x.avif 272w, ../assets/KoalaCupple_New.avif 579w" type="image/avif"><img src="../assets/KoalaCupple_New-1x.webp" srcset="../assets/KoalaCupple_New-1x.webp 272w, ../assets/KoalaCupple_New.webp 579w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="원격으로 함께 시청하는 귀여운 코알라 커플. 한 명은 PC에 앉아 있고 다른 한 명은 노트북과 함께 침대에 있으며, 둘 사이에 하트가 날아다닙니다" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low"></picture>
|
|
<h3>
|
|
<span>장거리 연애</span>
|
|
</h3>
|
|
<p>거리의 한계를 넘어 데이트를 즐겨보세요. 모든 줄거리의 반전을 경험하고, 같은 농담에 웃으며, 감동적인 순간을 정확히 같은 밀리초에 공유하세요.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features">
|
|
<div class="container">
|
|
<picture><source srcset="../assets/KoalaQuestions-1x.avif 250w, ../assets/KoalaQuestions.avif 355w" type="image/avif"><img src="../assets/KoalaQuestions-1x.webp" srcset="../assets/KoalaQuestions-1x.webp 250w, ../assets/KoalaQuestions.webp 355w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="A cute koala with a question mark above its head wondering why to choose KoalaSync" class="features-questions-mascot" width="250" height="211" loading="lazy" fetchpriority="low" data-reveal></picture>
|
|
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
|
|
<span>왜 KoalaSync인가요?</span>
|
|
</h2>
|
|
<p style="text-align: center; color: var(--text-muted); margin-bottom: 4rem;">
|
|
<span>신뢰할 수 있는 동기화, 개인정보 보호 중심 설계, 쉬운 설정을 위해 구축되었습니다.</span>
|
|
</p>
|
|
|
|
<div class="features-grid">
|
|
<!-- Card 1: Full Control / Instant Sync (Bento Large) -->
|
|
<div class="feature-card bento-large" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg>
|
|
</span>
|
|
<span>완벽한 제어 / 즉시 동기화</span>
|
|
</h3>
|
|
<p>한 명이 일시정지하면 모두가 일시정지됩니다. 한 명이 탐색하면 모두가 따라갑니다. 당사의 2단계 동기화 프로토콜은 실시간으로 모든 참여자의 비디오 재생을 조율합니다.</p>
|
|
</div>
|
|
|
|
<!-- Card 2: Endless Binge-Watching (Bento Standard) -->
|
|
<div class="feature-card" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg>
|
|
</span>
|
|
<span>끊임없는 몰아보기</span>
|
|
</h3>
|
|
<p>동기화된 자동 재생. KoalaSync는 에피소드 전환을 자동으로 감지하고 모든 참여자가 다음 비디오를 로드할 때까지 재생을 대기시킵니다.</p>
|
|
</div>
|
|
|
|
<!-- Card 3: Zero Accounts / Pure Privacy (Bento Standard) -->
|
|
<div class="feature-card" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg>
|
|
</span>
|
|
<span>계정 없음 / 완전한 개인정보 보호</span>
|
|
</h3>
|
|
<p>회원가입 없음, 추적 없음, 흔적을 남기지 않습니다. 서버는 휘발성 RAM에서만 완전히 실행되며 방을 나가면 영구히 삭제됩니다.</p>
|
|
<div class="bento-visual-architecture" style="margin-top: 15px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.7rem; font-family: monospace; display: flex; align-items: center; justify-content: space-between; color: var(--accent);">
|
|
<span>STATE: VOLATILE</span>
|
|
<span style="background: rgba(99, 102, 241, 0.15); padding: 2px 6px; border-radius: 4px; font-weight: 700; font-size: 0.6rem;">RAM-ONLY</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Universal HTML5 Support (Bento Large) -->
|
|
<div class="feature-card bento-large" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
|
|
</span>
|
|
<span>범용 HTML5 지원</span>
|
|
</h3>
|
|
<p>YouTube, Twitch, Netflix, Jellyfin, Emby 및 HTML5 비디오 요소가 포함된 거의 모든 웹 페이지에서 작동합니다. 사용자 정의 자체 호스팅 설정과도 호환됩니다.</p>
|
|
</div>
|
|
|
|
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
|
<div class="feature-card bento-large" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
|
</span>
|
|
<span>즉시 초대 / 클릭 한 번으로 참여</span>
|
|
</h3>
|
|
<p>IP 주소나 비밀번호를 교환할 필요가 없습니다. 생성된 초대 링크를 친구들과 공유하면 클릭 한 번으로 방에 자동으로 참여할 수 있습니다.</p>
|
|
</div>
|
|
|
|
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
|
<div class="feature-card" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><path d="m4 17 6-6-6-6m8 14h8"/></svg>
|
|
</span>
|
|
<span>자체 호스팅 가능 및 Docker 지원</span>
|
|
</h3>
|
|
<p>공식 서버는 무료이며 빠르지만, 원하는 경우 직접 호스팅할 수도 있습니다. Docker를 통해 몇 초 만에 나만의 개인 릴레이 서버를 구축해 보세요.</p>
|
|
</div>
|
|
|
|
<!-- Card 7: Volume Leveling / Audio Compressor (Bento Standard) -->
|
|
<div class="feature-card" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><path d="M11 5 6 9H2v6h4l5 4zm8.07-.07a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
|
|
</span>
|
|
<span>볼륨 레벨링 / 오디오 압축기</span>
|
|
</h3>
|
|
<p>더 이상 볼륨 노브를 계속 조정하지 마세요. 내장 오디오 압축기가 조용한 대화를 증폭하고 큰 폭발음을 완화합니다. Netflix, Prime Video, Disney+, YouTube 및 모든 HTML5 비디오에서 작동합니다. 완전히 로컬에서 처리 — 오디오 데이터가 컴퓨터를 떠나지 않습니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="comparison" class="comparison-section">
|
|
<div class="container">
|
|
<picture><source srcset="../assets/ProContraKoala-1x.avif 260w, ../assets/ProContraKoala.avif 423w" type="image/avif"><img src="../assets/ProContraKoala-1x.webp" srcset="../assets/ProContraKoala-1x.webp 260w, ../assets/ProContraKoala.webp 423w" sizes="(max-width: 768px) calc(100vw - 2rem), 260px" alt="A cute koala weighing options in both hands to compare KoalaSync vs Teleparty" class="comparison-mascot" width="260" height="184" loading="lazy" fetchpriority="low" data-reveal></picture>
|
|
<h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
|
|
<span>KoalaSync 대 Teleparty</span>
|
|
</h2>
|
|
<p class="section-subtitle" data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 3.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
<span>오픈 소스, 광고 없음, 개인정보 보호 중심의 서비스가 왜 함께 시청하기에 더 우수한지 확인해 보세요.</span>
|
|
</p>
|
|
|
|
<div class="comparison-table-wrapper" data-reveal>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th><span>기능</span></th>
|
|
<th class="highlight">KoalaSync</th>
|
|
<th>Teleparty</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>비용 / 유료 결제</span></strong>
|
|
<span class="feat-desc"><span>프리미ウム 구독, 숨겨진 수수료 또는 차단된 기능.</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>100% 무료</span></td>
|
|
<td class="cross">
|
|
✘ <span>유료 요금제 / 프리미ウム 제한</span>
|
|
<a href="https://www.teleparty.com/premium" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Premium Pricing"><sup>[1]</sup></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>라이선스 / 코드 감사 가능 여부</span></strong>
|
|
<span class="feat-desc"><span>소스 코드가 공개되어 있으며 자유롭게 감사할 수 있는지 여부.</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>오픈 소스 (MIT)</span></td>
|
|
<td class="cross">
|
|
✘ <span>독점 라이선스 (Proprietary)</span>
|
|
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Privacy Policy"><sup>[2]</sup></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>자체 호스팅</span></strong>
|
|
<span class="feat-desc"><span>자신만의 개인 릴레이 서버를 배포할 수 있는 기능.</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>지원 (Docker 지원)</span></td>
|
|
<td class="cross">
|
|
✘ <span>미지원</span>
|
|
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Privacy Policy"><sup>[2]</sup></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>개인정보 보호 및 추적</span></strong>
|
|
<span class="feat-desc"><span>회원가입 요구사항, 추적 쿠키 및 분석 도구 사용 여부.</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>흔적 없음 (RAM만 사용)</span></td>
|
|
<td class="cross">
|
|
✘ <span>구글 애널리틱스 및 쿠키 사용</span>
|
|
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Privacy Policy"><sup>[2]</sup></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>사이트 호환성</span></strong>
|
|
<span class="feat-desc"><span>지원되는 웹사이트 및 플레이어 호환성.</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>거의 모든 HTML5 비디오</span><a href="#footnote-3" class="source-link" title="Technical Compatibility Details"><sup>[3]</sup></a></td>
|
|
<td class="cross">
|
|
✘ <span>지원되는 사이트만 가능</span>
|
|
<a href="https://www.teleparty.com/premium" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Premium Platforms"><sup>[1]</sup></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>로컬라이징 / 다국어 지원</span></strong>
|
|
<span class="feat-desc"><span>제공되는 인터페이스 언어 및 번역 지원 여부.</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>13개 언어 지원 (추가 중)</span></td>
|
|
<td class="cross">
|
|
✘ <span>영어만 지원</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="table-footnotes">
|
|
<p style="opacity: 0.55; font-size: 0.65rem; margin-bottom: 0.4rem; display: block;">
|
|
<span>비교 기준일: 2026년 5월.</span>
|
|
</p>
|
|
<p>
|
|
<sup>[1]</sup>
|
|
<span>공식 Teleparty Premium 요금제 및 지원되는 네트워크 세부 정보:</span>
|
|
<a href="https://www.teleparty.com/premium" target="_blank" rel="noopener noreferrer">teleparty.com/premium</a>
|
|
</p>
|
|
<p>
|
|
<sup>[2]</sup>
|
|
<span>Teleparty 개인정보 처리방침 및 추적 데이터 수집 정보:</span>
|
|
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer">teleparty.com/privacy</a>
|
|
</p>
|
|
<p id="footnote-3">
|
|
<sup>[3]</sup>
|
|
<span>표준 HTML5 비디오 태그에 스크립트 삽입을 허용하는 웹사이트에서 작동합니다. 콘텐츠 보안 정책(CSP)이 매우 엄격하거나, DRM 복사 방지가 적용되었거나, 플레이어 래퍼가 복잡하게 난독화된 웹사이트(예: 복잡한 섀도 DOM)에서는 자동 제어 또는 스크립트 삽입이 제한될 수 있습니다.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="how-it-works" style="background: rgba(255,255,255,0.02)">
|
|
<div class="container">
|
|
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 4rem;">
|
|
<span>시작하기</span>
|
|
</h2>
|
|
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-text" data-reveal>
|
|
<div class="step-num" aria-hidden="true">01</div>
|
|
<h3><span>확장 프로그램 설치</span></h3>
|
|
<p>Chrome 웹 스토어, Firefox 부가 기능에서 KoalaSync를 브라우저에 추가하거나, GitHub에서 최신 개발자용 ZIP 파일을 다운로드하세요.</p>
|
|
</div>
|
|
<!-- Custom Step 1 Illustration -->
|
|
<div class="step-illustration-1" data-reveal>
|
|
<div class="illus-browser-container">
|
|
<div class="illus-browser-header">
|
|
<div class="illus-browser-dots">
|
|
<span class="illus-browser-dot"></span>
|
|
<span class="illus-browser-dot"></span>
|
|
<span class="illus-browser-dot"></span>
|
|
</div>
|
|
<div class="illus-browser-address-bar">
|
|
<span class="url-protocol">https://</span>sync.koalastuff.net
|
|
</div>
|
|
<div class="illus-browser-toolbar">
|
|
<div class="illus-extension-btn active">
|
|
<picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Extension" width="14" height="14"></picture>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="illus-browser-content">
|
|
<div class="illus-store-card">
|
|
<div class="illus-store-card-header">
|
|
<picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" class="illus-large-logo" width="30" height="30"></picture>
|
|
<div class="illus-store-info">
|
|
<div class="illus-store-title">KoalaSync</div>
|
|
<div class="illus-store-desc">
|
|
<span>개인정보 보호 중심의 비디오 동기화 프로그램</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="illus-store-buttons">
|
|
<div class="illus-store-btn chrome">
|
|
<img src="../assets/chrome.svg" alt="Chrome Logo" width="12" height="12">
|
|
<span>Chrome용 다운로드</span>
|
|
</div>
|
|
<div class="illus-store-btn firefox">
|
|
<img src="../assets/firefox.svg" alt="Firefox Logo" width="12" height="12">
|
|
<span>Firefox용 다운로드</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Extension Success Popup -->
|
|
<div class="illus-extension-popup">
|
|
<div class="popup-title">
|
|
<picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="12" height="12"></picture>
|
|
<span>KoalaSync</span>
|
|
</div>
|
|
<div class="popup-status">
|
|
<div class="status-badge-success">
|
|
<span class="status-check"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span>
|
|
<span>확장 프로그램 활성화됨</span>
|
|
</div>
|
|
</div>
|
|
<div class="popup-quick-start">
|
|
<span>함께 시청할 준비가 되었습니다!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-text" data-reveal>
|
|
<div class="step-num" aria-hidden="true">02</div>
|
|
<h3><span>방 만들기</span></h3>
|
|
<p>확장 프로그램 팝업을 열고 '+ 새 방 만들기'를 클릭하세요. KoalaSync가 안전한 방 ID와 비밀번호를 자동으로 생성하고, 참여한 후 초대 링크를 클립보드에 복사합니다.</p>
|
|
</div>
|
|
<!-- Custom Step 2 Illustration -->
|
|
<div class="step-illustration-2" data-reveal>
|
|
<div class="illus-popup-card">
|
|
<div class="illus-popup-header">
|
|
<div class="illus-popup-brand">
|
|
<picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
|
|
<span>KoalaSync</span>
|
|
</div>
|
|
<div class="illus-popup-version mockup-version">2.2.1</div>
|
|
</div>
|
|
<div class="illus-popup-tabs">
|
|
<div class="illus-popup-tab active">
|
|
<span>방</span>
|
|
</div>
|
|
<div class="illus-popup-tab">
|
|
<span>동기화</span>
|
|
</div>
|
|
<div class="illus-popup-tab">
|
|
<span>설정</span>
|
|
</div>
|
|
</div>
|
|
<div class="illus-popup-body">
|
|
<div class="illus-popup-btn action-create-room">
|
|
<span>+ 새 방 만들기</span>
|
|
<div class="illus-btn-shine"></div>
|
|
</div>
|
|
|
|
<div class="illus-collapsed-details">
|
|
<span class="details-arrow">▶</span>
|
|
<span>수동 연결 / 고급</span>
|
|
</div>
|
|
|
|
<div class="illus-floating-success">
|
|
<span class="success-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
|
|
<span>초대 링크가 복사되었습니다!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-text" data-reveal>
|
|
<div class="step-num" aria-hidden="true">03</div>
|
|
<h3><span>공유 및 동기화</span></h3>
|
|
<p>친구들에게 초대 링크를 보내세요. 친구들이 참여하면 비디오 탭을 선택하고 동기화된 재생을 즐기세요.</p>
|
|
</div>
|
|
<!-- Custom Step 3 Illustration -->
|
|
<div class="step-illustration-3" data-reveal>
|
|
<div class="illus-sync-theater">
|
|
<!-- Player A (KoalaPC) -->
|
|
<div class="illus-player-card player-a">
|
|
<div class="player-header">
|
|
<span class="player-user">🐨 KoalaPC</span>
|
|
<span class="player-badge active">PLAYING</span>
|
|
</div>
|
|
<div class="player-video-canvas">
|
|
<div class="player-play-pulse">▶</div>
|
|
<div class="player-video-overlay"></div>
|
|
</div>
|
|
<div class="player-controls">
|
|
<span class="control-btn">⏸</span>
|
|
<div class="player-timeline">
|
|
<div class="timeline-fill"></div>
|
|
<div class="timeline-knob"></div>
|
|
</div>
|
|
<span class="control-time">42:15</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Glowing Sync Bridge -->
|
|
<div class="illus-sync-bridge">
|
|
<div class="sync-line">
|
|
<div class="sync-beam"></div>
|
|
</div>
|
|
<div class="sync-status-badge">
|
|
<span>동기화됨</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Player B (LaptopKoala) -->
|
|
<div class="illus-player-card player-b">
|
|
<div class="player-header">
|
|
<span class="player-user">💻 LaptopKoala</span>
|
|
<span class="player-badge active">PLAYING</span>
|
|
</div>
|
|
<div class="player-video-canvas">
|
|
<div class="player-play-pulse">▶</div>
|
|
<div class="player-video-overlay"></div>
|
|
</div>
|
|
<div class="player-controls">
|
|
<span class="control-btn">⏸</span>
|
|
<div class="player-timeline">
|
|
<div class="timeline-fill"></div>
|
|
<div class="timeline-knob"></div>
|
|
</div>
|
|
<span class="control-time">42:15</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Self Hosters Paradise Section -->
|
|
<section id="self-hosting" style="background: rgba(15, 23, 42, 0.4); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);">
|
|
<div class="container">
|
|
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
|
|
<span>자체 호스팅 사용자를 위한 안내</span>
|
|
</h2>
|
|
<p style="text-align: center; color: var(--text-muted); margin-bottom: 2rem; max-width: 650px; margin-left: auto; margin-right: auto;">
|
|
<span>공식 서버를 신뢰하기 어려우신가요? 완벽한 데이터 주권을 유지하세요. 몇 분 만에 나만의 개인 릴레이 서버를 구축할 수 있습니다.</span>
|
|
</p>
|
|
|
|
<!-- Mascot Self-Hosting / Deploy Illustration -->
|
|
<div style="display: flex; justify-content: center; margin-bottom: 2.5rem;" data-reveal>
|
|
<picture><source srcset="../assets/KoalaDeploy-1x.avif 300w, ../assets/KoalaDeploy.avif 600w" type="image/avif"><img src="../assets/KoalaDeploy-1x.webp" srcset="../assets/KoalaDeploy-1x.webp 300w, ../assets/KoalaDeploy.webp 600w" sizes="(max-width: 768px) calc(100vw - 2rem), 300px" alt="자체 호스팅을 위해 Docker 컨테이너를 배포하며 노트북 앞에 앉아 있는 귀여운 코알라" class="selfhost-mascot" width="300" height="201" loading="lazy" fetchpriority="low"></picture>
|
|
</div>
|
|
|
|
<div class="terminal-container" data-reveal>
|
|
<div class="terminal-header">
|
|
<div class="terminal-dots">
|
|
<span class="terminal-dot red"></span>
|
|
<span class="terminal-dot yellow"></span>
|
|
<span class="terminal-dot green"></span>
|
|
</div>
|
|
<div class="terminal-tabs">
|
|
<button class="terminal-tab-btn active" data-tab="pane-docker">docker-compose.yml</button>
|
|
<button class="terminal-tab-btn" data-tab="pane-caddy-simple">Caddyfile (Simple)</button>
|
|
<button class="terminal-tab-btn" data-tab="pane-caddy-advanced">Caddyfile (Advanced)</button>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-body">
|
|
<button class="terminal-copy-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> <span>코드 복사</span>
|
|
</button>
|
|
|
|
<div id="pane-docker" class="terminal-pane active">
|
|
<pre><code><span class="t-key">services:</span>
|
|
<span class="t-key">koala-sync:</span>
|
|
<span class="t-key">image:</span> <span class="t-str">ghcr.io/shik3i/koalasync:latest</span>
|
|
<span class="t-key">container_name:</span> <span class="t-str">KoalaSync</span>
|
|
<span class="t-key">restart:</span> <span class="t-str">always</span>
|
|
<span class="t-comment"># Access internally by proxying to container port 3000</span>
|
|
<span class="t-key">environment:</span>
|
|
<span class="t-key">-</span> <span class="t-str">TZ=Europe/Berlin</span>
|
|
<span class="t-key">-</span> <span class="t-str">PORT=3000</span>
|
|
<span class="t-key">-</span> <span class="t-str">MIN_VERSION=1.0.0</span>
|
|
<span class="t-key">-</span> <span class="t-str">MAX_ROOMS=100</span>
|
|
<span class="t-key">-</span> <span class="t-str">MAX_PEERS_PER_ROOM=50</span>
|
|
<span class="t-key">pids_limit:</span> <span class="t-val">2048</span></code></pre>
|
|
<div style="margin-top: 1rem; font-size: 0.75rem; text-align: right; padding-right: 0.5rem;">
|
|
<a href="https://github.com/Shik3i/KoalaSync/pkgs/container/koalasync" target="_blank" rel="noopener" style="color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: opacity 0.2s; opacity: 0.85;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M16.5 9.4 7.55 4.24M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16"/><path d="M3.29 7 12 12l8.71-5M12 22V12"/></svg> <span>GitHub Packages에서 모든 이미지 태그 보기</span> →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pane-caddy-simple" class="terminal-pane">
|
|
<pre><code><span class="t-key">sync.koalastuff.net</span> {
|
|
<span class="t-key">root</span> <span class="t-val">*</span> <span class="t-str">/var/www/koalasync/website/www</span>
|
|
<span class="t-key">encode</span> <span class="t-val">zstd gzip</span>
|
|
|
|
<span class="t-comment"># Clean URLs support (no .html required)</span>
|
|
<span class="t-key">try_files</span> <span class="t-val">{path} {path}.html {path}/</span>
|
|
<span class="t-key">file_server</span>
|
|
}
|
|
|
|
<span class="t-key">syncserver.koalastuff.net</span> {
|
|
<span class="t-key">reverse_proxy</span> <span class="t-val">localhost:3000</span>
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div id="pane-caddy-advanced" class="terminal-pane">
|
|
<pre><code><span class="t-key">(security_headers)</span> {
|
|
<span class="t-key">header</span> {
|
|
<span class="t-comment"># Enable HTTP Strict Transport Security (HSTS)</span>
|
|
Strict-Transport-Security <span class="t-str">"max-age=31536000; includeSubDomains; preload"</span>
|
|
<span class="t-comment"># Prevent clickjacking attacks (Sameorigin)</span>
|
|
X-Frame-Options <span class="t-str">"SAMEORIGIN"</span>
|
|
<span class="t-comment"># Prevent MIME-sniffing</span>
|
|
X-Content-Type-Options <span class="t-str">"nosniff"</span>
|
|
<span class="t-comment"># Enable browser XSS protection</span>
|
|
X-XSS-Protection <span class="t-str">"1; mode=block"</span>
|
|
<span class="t-comment"># Control referrer information</span>
|
|
Referrer-Policy <span class="t-str">"strict-origin-when-cross-origin"</span>
|
|
<span class="t-comment"># Hide Caddy server stamp signature</span>
|
|
<span class="t-key">-Server</span>
|
|
}
|
|
}
|
|
|
|
<span class="t-key">sync.koalastuff.net</span> {
|
|
<span class="t-key">encode</span> <span class="t-val">zstd gzip</span>
|
|
<span class="t-key">root</span> <span class="t-val">*</span> <span class="t-str">/var/www/koalasync/website/www</span>
|
|
|
|
<span class="t-comment"># Clean URLs: Resolves paths without .html in the URL</span>
|
|
<span class="t-key">try_files</span> <span class="t-val">{path} {path}.html {path}/</span>
|
|
<span class="t-key">file_server</span>
|
|
|
|
<span class="t-comment"># Static Caching for high performance</span>
|
|
<span class="t-key">@static</span> {
|
|
<span class="t-key">file</span>
|
|
<span class="t-key">path</span> <span class="t-str">*.ico *.css *.js *.png *.svg *.webp *.avif</span>
|
|
}
|
|
<span class="t-key">header</span> <span class="t-val">@static</span> Cache-Control <span class="t-str">"public, max-age=31536000, must-revalidate"</span>
|
|
|
|
<span class="t-comment"># Hardened Security & Permission Policies</span>
|
|
<span class="t-key">import</span> <span class="t-val">security_headers</span>
|
|
<span class="t-key">header</span> {
|
|
Content-Security-Policy <span class="t-str">"default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"</span>
|
|
Permissions-Policy <span class="t-str">"camera=(), microphone=(), geolocation=(), payment=(), usb=()"</span>
|
|
}
|
|
}
|
|
|
|
<span class="t-key">syncserver.koalastuff.net</span> {
|
|
<span class="t-key">import</span> <span class="t-val">security_headers</span>
|
|
<span class="t-key">encode</span> <span class="t-val">zstd gzip</span>
|
|
<span class="t-key">reverse_proxy</span> <span class="t-val">KoalaSync:3000</span>
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="faq" style="border-top: 1px solid var(--glass-border);">
|
|
<div class="container">
|
|
<h2 data-reveal style="font-size: 2.2rem; text-align: center; margin-bottom: 1rem;">
|
|
<span>자주 묻는 질문</span>
|
|
</h2>
|
|
<p data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
<span>완벽한 동기화로 비디오를 함께 시청하는 방법에 대해 알아야 할 모든 것.</span>
|
|
</p>
|
|
<div class="faq-grid">
|
|
<details class="faq-item" data-reveal>
|
|
<summary><span>친구들과 Netflix, Emby 또는 Jellyfin을 함께 동기화하여 시청할 수 있나요?</span></summary>
|
|
<p><span>네! KoalaSync는 Netflix, YouTube, Twitch 및 HTML5 비디오 플레이어가 있는 모든 웹사이트(Emby, Jellyfin 및 자체 호스팅 미디어 서버 포함)에서 작동합니다. 확장 프로그램을 설치하고 방을 만든 후 초대 링크를 공유하면 모두가 완벽하게 동기화되어 시청할 수 있습니다.</span></p>
|
|
</details>
|
|
<details class="faq-item" data-reveal>
|
|
<summary><span>KoalaSync는 Teleparty의 무료 대체 서비스인가요?</span></summary>
|
|
<p><span>MIT 라이선스에 따라 100% 무료이며 오픈 소스입니다. 프리미ウム 등급도, 제한된 기능도, 광고도 없습니다. 모든 것이 포함되어 있습니다. Teleparty와 달리 KoalaSync의 릴레이 서버는 가입이나 개인정보 수집 없이 RAM에서만 실행됩니다.</span></p>
|
|
</details>
|
|
<details class="faq-item" data-reveal>
|
|
<summary><span>KoalaSync는 Emby, Jellyfin 및 자체 호스팅 미디어 서버에서 작동하나요?</span></summary>
|
|
<p><span>네. KoalaSync는 표준 HTML5 비디오 요소를 감지하므로 Emby, Jellyfin, Plex 및 모든 사용자 정의 자체 호스팅 스트리밍 설정에서 완벽하게 작동합니다. 데이터 주권을 완전히 유지하기 위해 Docker를 통해 KoalaSync 릴레이 서버를 직접 호스팅할 수도 있습니다.</span></p>
|
|
</details>
|
|
<details class="faq-item" data-reveal>
|
|
<summary><span>어떤 브라우저와 플랫폼이 KoalaSync를 지원하나요?</span></summary>
|
|
<p><span>Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave 및 모든 Chromium 기반 브라우저를 지원합니다. Chrome 웹 스토어 또는 Firefox 부가 기능에서 직접 설치하세요. 수동 설정이 필요 없습니다.</span></p>
|
|
</details>
|
|
<details class="faq-item" data-reveal>
|
|
<summary><span>친구들 모두 확장 프로그램을 설치해야 하나요?</span></summary>
|
|
<p><span>네, 각 참여자 모두 KoalaSync를 설치해야 합니다. 단, 가입이나 계정 생성은 필요하지 않습니다. 초대 링크를 클릭하고, 아직 설치하지 않았다면 확장 프로그램을 설치하면 몇 초 만에 자동으로 방에 참여하게 됩니다.</span></p>
|
|
</details>
|
|
<details class="faq-item" data-reveal>
|
|
<summary><span>제 데이터는 안전한가요? 공식 서버를 믿지 못하겠다면 어떻게 하나요?</span></summary>
|
|
<p><span>완전히 안전합니다. KoalaSync의 릴레이 서버는 RAM 전용으로 작동하여, 방을 나가는 즉시 모든 세션 데이터가 영구적으로 삭제됩니다. 데이터베이스도, 로그도, 분석도, 계정도 없습니다. 완전한 제어를 원하신다면 Docker를 통해 몇 분 만에 나만의 개인 릴레이 서버를 직접 호스팅할 수 있습니다. 전체 소스 코드는 오픈 소스이며 GitHub에서 확인할 수 있습니다.</span></p>
|
|
</details>
|
|
<details class="faq-item" data-reveal>
|
|
<summary><span>브라우저에서 비디오를 시청할 때 조용한 대화와 큰 폭발음을 개선할 수 있나요?</span></summary>
|
|
<p><span>네. KoalaSync 2.2.0에는 비디오의 조용한 부분과 시끄러운 부분 간의 차이를 줄이는 내장 오디오 압축기가 포함되어 있습니다. Web Audio API를 통해 로컬에서 실행되므로 오디오 데이터가 컴퓨터를 떠나지 않습니다. 팝업을 열고, 방을 만들고, 설정 → Audio Processing으로 이동하여 압축기를 켜고 프리셋을 선택하세요. Netflix, Prime Video, Disney+, YouTube 및 모든 HTML5 비디오 사이트에서 작동합니다.</span></p>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="text-align: center; border-top: 1px solid var(--glass-border); padding: 6rem 0 2rem 0;">
|
|
<div class="container">
|
|
<h2 data-reveal style="font-size: 2.2rem; margin-bottom: 1rem;">
|
|
<span>아직 고민되시나요? 직접 확인해 보세요.</span>
|
|
</h2>
|
|
<p data-reveal style="margin-bottom: 3rem; color: var(--text-muted); max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.6; font-size: 1.05rem;">
|
|
<span>KoalaSync는 100% 오픈 소스이며, 광고와 추적이 없습니다. GitHub에서 코드 베이스를 감사하거나 브라우저 확장 프로그램을 직접 설치해 보세요.</span>
|
|
</p>
|
|
<div class="cta-group" data-reveal style="justify-content: center; gap: 1rem; margin-bottom: 1rem;">
|
|
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
|
|
<img src="../assets/chrome.svg" alt="Chrome" width="20" height="20">
|
|
<span>Chrome에 추가</span>
|
|
</a>
|
|
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
|
|
<img src="../assets/firefox.svg" alt="Firefox" width="20" height="20">
|
|
<span>Firefox에 추가</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" rel="noopener" data-reveal style="display: inline-block; text-decoration: none;">
|
|
<picture><source srcset="../assets/KoalaGithub-1x.avif 250w, ../assets/KoalaGithub.avif 454w" type="image/avif"><img src="../assets/KoalaGithub-1x.webp" srcset="../assets/KoalaGithub-1x.webp 250w, ../assets/KoalaGithub.webp 454w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="GitHub 마스코트인 Octocat 옆에서 GitHub 저장소 페이지를 들고 있는 귀여운 코알라" class="cta-github-mascot" width="250" height="165" loading="lazy" fetchpriority="low"></picture>
|
|
</a>
|
|
|
|
<div class="cta-group" data-reveal style="justify-content: center; margin-top: 1rem;">
|
|
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" rel="noopener" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12"/></svg>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2026 KoalaSync. MIT 라이선스에 따른 오픈 소스.</p>
|
|
<p style="font-size: 0.8rem; margin-top: 0.5rem;">서버에 데이터가 저장되지 않습니다. 순수 RAM 기반 릴레이.</p>
|
|
<div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
|
|
<a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>법적 고지</span></a>
|
|
<a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>개인정보 처리방침</span></a>
|
|
<a href="https://ko-fi.com/koaladev" target="_blank" rel="noopener" title="Ko-Fi에서 커피 한 잔 사주세요" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
|
|
<span aria-hidden="true">♥</span>
|
|
<span>Ko-Fi</span>
|
|
</a>
|
|
<a href="https://mastodon.social/@koalastuff" rel="me noopener" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
|
|
Mastodon
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="../app.49c86a28.min.js"></script>
|
|
</body>
|
|
</html>
|