튜브 클린뷰 검색 & 다운로더
유튜브를 검색하고, 영상을 바로 MP4 / MP3로 다운로드할 수 있는 올인원 PHP 웹 애플리케이션
📖 프로젝트 소개
유튜브 검색 · 재생 · 다운로드를 구현한 자체 솔루션입니다. MP4 또는 MP3 로 즉시 다운로드할 수 있습니다. 11가지 랜덤 컬러 테마가 적용되어 매번 새로운 느낌의 UI를 경험할 수 있으며, 별도 외부 API 키 없이 동작합니다.
✨ 주요 기능
🔍 검색
- 유튜브 검색 (API 키 불필요)
- 무한 스크롤 (36개씩 자동 로드)
- 정렬 — 관련성 / 최신 / 오래된순 / 조회수 / 평점
- 유형 필터 — 전체 / 쇼츠 / 일반영상 / 채널 / 재생목록
- 길이 필터 — 3분↓ / 3~20분 / 20분↑
- 날짜 필터 — 오늘 / 이번주 / 이번달 / 올해
- 추천 검색어 롤링 플레이스홀더
🎬 재생
- 라이트박스 인라인 플레이어
- 일반영상
16:9/ 쇼츠9:16자동 전환 - 카드 호버 시 미리보기 자동 재생 (650ms 딜레이)
- 썸네일 품질 자동 폴백 (hq → mq → sd)
⬇️ 다운로드
- MP4 최대 1080p (없으면 하위 품질 자동 선택)
- MP3 256kbps 오디오 추출
- 실시간 진행바 + 퍼센트 표시
- 변환 중 점 애니메이션
● ● ●표시 - 완료 시 Blob 자동 저장 (새 창 없음)
- 창 닫기 시
AbortController로 fetch 즉시 취소 - 임시 파일 전송 후 즉시 삭제 + 1시간 TTL 자동 청소
🎨 UI / UX
- 새로고침마다 11가지 랜덤 컬러 테마 (다크 8 + 라이트 3)
- 툴바 그룹별 4색 멀티컬러 칩 버튼
- 그레인 텍스처 + 블롭 배경 글로우 효과
- 스켈레톤 로딩 애니메이션
- 스크롤 방향 감지 화살표
- 반응형 모바일 레이아웃
⚙️기술적 특징
단일 파일 아키텍처
PHP 액션 라우팅(?ajax · ?action=download)으로 검색·다운로드·캐시 관리를
하나의 파일에서 처리. 별도 프레임워크 및 DB 불필요.
API 키 없는 유튜브 검색
YouTube Protobuf 기반 sp= 파라미터를 직접 인코딩하여 정렬·필터 쿼리 구성.
--flat-playlist 모드로 메타데이터만 빠르게 수집.
파일 시스템 캐시 동일 검색어+조건 조합을 30분간 JSON으로 캐시. 무한 스크롤 시 추가 fetch 없이 캐시에서 슬라이싱하여 응답 속도 최적화.
실시간 스트리밍 다운로드
Content-Length 헤더를 활용한 정확한 퍼센트 계산.
헤더 없을 경우 수신 MB 표시로 자동 폴백.
AbortController 로 사용자 취소 시 서버 연결 즉시 종단.
FOUC 없는 랜덤 테마
테마 JS를 <head> 내 동기 실행으로 배치,
body 렌더 전 CSS 변수를 주입하여 깜빡임(Flash of Unstyled Content) 완전 방지.
🛠 기술 스택
| 구분 | 기술 |
|---|---|
| 백엔드 | PHP 7.4 / 8.0+ |
| 프론트엔드 | Vanilla JS (ES2020+) · CSS Variables |
| 폰트 | Google Fonts — Cinzel / Outfit / Barlow Condensed |
| 검색 | yt-dlp flat-playlist + YouTube Protobuf SP 파라미터 |
| 캐시 | 파일 시스템 JSON 캐시 (30분 TTL) |
| 다운로드 | Fetch API + ReadableStream + Blob / 회원 . 비회원 |
이 개발자의 다른 프로젝트
수정 이력 (5)
재생 완료후 자동창 닫기
화질 보정 자동조정
1, 16:9 영상 세로사이즈 변경시 에도 반응형으로 비율 유지 2, 다운로드 진행바 CENTER에 고정
비회원은 1일 다운로드 횟수 제한 적용, 회원 무제한
회원 비회원 다운로드 권한 선택 기능 추가
좋아요! 그런데 중복이 제법 있어요. 예를 들면 : '여행' > 채널 만 검색하면 채널이 중복돼서 출력 되네요. +하나 더 : 스크롤바 조금 더 넓게 개선해주시면 이용하기 편하겠습니다! 아주 잘 만들어진 프로젝트 입니다!
감사합니다. 반영하겠습니다^^
감사합니다. 반영하겠습니다^^