YouTube 플레이리스트 관리 및 감상에 특화된 웹 앱입니다. 영상을 쉽게 추가하고, 순서대로 또는 랜덤 재생을 지원하며, 백그라운드 재생(데스크톱 모드), DB 저장/불러오기, 제목 편집 등 강력한 기능을 제공합니다. 삼성 인터넷 브라우저 권장 팝업 및 반응형 디자인으로 모바일 환경에 최적화되었습니다.
✨ 핵심 기능 미리보기
📋 플레이리스트 관리
✔ YouTube URL 또는 영상 ID로 곡 추가
✔ 곡 제목 수정 (✏️ 버튼)
✔ 개별 삭제 / 전체 저장 및 내보내기
✔ 플레이리스트 DB 영구 저장 (PHP API 연동)
🎛️ 재생 모드 & 컨트롤
🔀 랜덤 재생 / 📜 순서대로 재생 즉시 전환
⏮️ 이전곡 / ⏯️ 재생/일시정지 / 다음곡 ⏭️
▶️ 리스트에서 바로 재생 / 현재 재생중인 곡 하이라이트
🎲 랜덤 모드일 때 랜덤 순서 인덱스 표시
📱 모바일 & 백그라운드 전용
✅ 백그라운드 재생 토글 (데스크톱 모드에서 활성화)
✅ 브라우저 감지: 삼성 인터넷 권장 모달
✅ 화면 꺼짐 / 탭 전환 시에도 유튜브 음성 재생 유지
🚀 시작하기 (빠른 가이드)
1영상 추가 : 상단 입력창에 YouTube URL (예: https://youtu.be/dQw4w9WgXcQ 또는 영상ID) 입력 후 [+ 추가] 버튼 클릭
2재생 모드 선택 : [🔀 랜덤 ON] 또는 [📜 순서대로] 버튼으로 재생 순서 결정
3곡 재생 : 플레이리스트 아이템 클릭 또는 ▶️ 버튼으로 재생, 하단 컨트롤바로 제어
4저장 / 내보내기 : [💾 DB 저장] 버튼으로 서버에 저장, [📤 내보내기]로 텍스트 파일 백업
5백그라운드 재생 : 데스크톱 모드에서 백그라운드 토글 ON 후 브라우저 탭을 벗어나도 음악 재생
💡 팁 : 첫 실행 시 DB에서 자동으로 플레이리스트를 불러오며, 랜덤 모드인 경우 첫 곡이 랜덤으로 선택됩니다. 모바일에서는 "삼성 인터넷" 사용 시 백그라운드 안정성이 가장 좋습니다.
🖥️ 화면 구성 & 컨트롤 설명
🎛️ 상단 컨트롤 영역
📱 모바일 전용💻 데스크톱 전용 – 재생 최적화 모드 전환
🎵 백그라운드 재생 – 토글 스위치 ON/OFF (데스크톱 모드에서만 작동)
🔄 DB 동기화 – 클릭 시 최신 DB 상태 다시 불러오기
▶️ 플레이어 영역
⏮ 이전 / ▶️ 재생·일시정지 / 다음 ⏭ / 🔀 랜덤 ON/OFF
현재 재생 중인 곡 제목 표시 및 랜덤 진행 상태 (ex: 🎲 랜덤: 3/7)
📋 플레이리스트 패널
➕ 추가 – URL 입력 후 곡 등록 (중복 검사)
💾 DB 저장 – 현재 플레이리스트 전체를 서버에 저장 (덮어쓰기)
📤 내보내기 – .txt 파일로 리스트 백업
각 곡 옆: ▶️ 즉시재생 / ✏️ 제목수정 / 🗑️ 삭제
🧩 예시: 플레이리스트 항목 디자인 → [1. 노래 제목 (1.8rem 크기)] [▶️] [✏️] [🗑️]
🎲 랜덤 / 순차 재생 시스템
랜덤 모드 : 활성화 시, 현재 플레이리스트를 기준으로 매번 새로운 셔플 인덱스 배열을 생성합니다. 재생 순서는 이 배열을 따라 이동하며, '이전곡' 버튼은 랜덤 배열 내에서 역순으로 이동합니다. (반복 종료 시 다시 첫 곡으로 순환)
순서 모드 : 0 → 1 → 2 ... 마지막 곡 이후 다시 처음으로 순환됩니다.
🎲 랜덤 ON 상태에서 플레이리스트가 변경(추가/삭제)되면 자동으로 랜덤 배열이 재생성됩니다. 현재 재생 중인 곡의 위치가 새 배열에 반영되어 끊김 없이 재생됩니다.
💡 전략 팁 : 랜덤 모드 우측에 “랜덤: 2/8” 와 같은 정보가 표시되어 전체 몇 곡 중 몇 번째 순서인지 알 수 있습니다.
🌙 백그라운드 재생 & 모드 설정
데스크톱 전용 모드에서 "백그라운드 재생" 스위치를 켜면, 브라우저 탭이 비활성화 상태이거나 화면이 꺼져도 YouTube 오디오가 계속 재생됩니다. (모바일 환경에서는 OS 제한으로 완전한 백그라운드 재생이 어려울 수 있지만, 삼성 인터넷 브라우저에서 안정성이 높습니다.)
✔ 데스크톱 모드 : 백그라운드 활성화 가능 + visibilitychange API 기반 강제 재생 유지
✔ 모바일 전용 모드 : 백그라운드 관련 동작 비활성화, 대신 일반 재생에 최적화
✔ 최초 접속 시 기기가 모바일이고 삼성 인터넷이 아니면 권장 브라우저 모달 표시
⚙️ 동작 원리: 데스크톱 모드 + 백그라운드 ON → 탭 전환 시 0.3초 간격으로 재생 상태 확인 & 자동 재생 시도
💾 DB 저장 & 동기화 가이드
본 플레이리스트는 PHP 기반 API (api.php)를 통해 MySQL 또는 파일 DB와 연동됩니다. 제공된 백엔드가 정상 작동해야 전체 기능을 사용할 수 있습니다.
기능
설명
자동 불러오기
페이지 로드 시 GET /api.php → 전체 플레이리스트 불러오기
저장 (POST)
각 곡을 개별적으로 DB에 INSERT (중복 방지 로직은 프론트에서 처리)
수정 (PUT)
video_id 기반 제목 업데이트
삭제 (DELETE)
video_id로 해당 곡 삭제
전체 저장
[💾 DB 저장] 버튼 클릭 시 기존 데이터를 모두 지우고 현재 플레이리스트를 새로 저장 (덮어쓰기)
📌 사용자 주의 : DB 저장 기능은 네트워크 상태에 따라 다소 시간이 걸릴 수 있으며, 저장 후 "DB 저장 완료 (x/y곡)" 메시지로 확인 가능합니다. 동기화 버튼(🔄 DB 동기화)을 누르면 서버 데이터를 다시 불러옵니다.
❓ 자주 묻는 질문
🔹 유튜브 URL이 인식되지 않아요
✔ 정식 YouTube 링크(youtu.be, youtube.com/watch?v=...) 또는 11자리 영상 ID를 입력하세요. 쇼츠 링크도 지원됩니다. 예시: https://youtu.be/abcd1234efg
🔹 백그라운드 재생이 안 돼요 (모바일)
✔ 모바일 OS 제한으로 완전한 백그라운드 재생은 어려울 수 있습니다. '데스크톱 모드'로 변경 후 PC 모드로 보기 시도, 또는 삼성 인터넷 브라우저를 사용해 보세요.
🔹 랜덤 모드에서 이전곡을 누르면 이상한 곡이 나와요
✔ 랜덤 모드에서는 셔플된 순서를 따라 이동합니다. 예를 들어 랜덤 순서가 [3,0,2,1] 인 경우 0번째 곡에서 이전곡을 누르면 마지막 랜덤 인덱스의 곡(1번)으로 이동합니다. 직관적인 셔플 로직입니다.
🔹 플레이리스트 제목이 너무 길어요
✔ UI 상 1.8rem 크기로 표시되며 말줄임표 처리됩니다. 마우스 호버 또는 터치 시 풀 제목을 확인할 수 있습니다.
🔹 내보내기 파일 포맷은?
✔ .txt 파일, 번호/제목/URL(유튜브 단축 링크) 형식으로 저장됩니다. 다른 플레이리스트로 가져오기 편리합니다.
⚡ 고급 팁 & 단축키
⌨️ Enter 키 입력창에서 URL 입력 후 엔터 → 곡 추가 🖱️ 더블클릭 플레이리스트 아이템 바로 재생 🎧 백그라운드 데스크톱 모드 + 배경 재생 ON 후 다른 작업 가능
🔄 DB 동기화 다른 기기에서 저장한 플레이리스트 불러오기 📦 내보내기 정기적인 백업 추천 ✏️ 편집 제목을 원하는 대로 변경 (DB에도 반영)
🧙 마스터 팁 : 랜덤 모드에서 원하는 곡을 ▶️ 버튼으로 직접 재생하면 랜덤 배열 상의 위치가 자동 재조정되어 이후 순서가 해당 곡부터 이어집니다.
🔧 개발자 정보 & API 명세
프론트엔드 : HTML5, CSS3, Vanilla JavaScript, YouTube IFrame API 백엔드 연동 : RESTful API (api.php) - GET, POST, PUT, DELETE 지원
📡 API 엔드포인트 예시
• GET api.php → {"success":true, "data":[{"id":"videoID","title":"제목","url":"..."}]}
• POST api.php → Body: { "video_id": "abc123", "title": "노래제목", "url": "https://..." }
• PUT api.php → Body: { "video_id": "abc123", "title": "수정제목" }
• DELETE api.php?video_id=abc123
로컬 스토리지는 사용하지 않으며, 모든 데이터는 서버 기반으로 관리됩니다. utv_6400 식별자 사용.
🛠️ 문제해결 (트러블슈팅)
⚠️ "DB 연결 실패" : 백엔드 서버가 실행 중인지 확인, api.php 경로와 CORS 문제 점검
⚠️ 영상이 재생되지 않음 : YouTube 영상이 지역 제한 or 삭제된 영상일 수 있음, 다른 URL 시도
⚠️ 백그라운드 재생 중단 : 데스크톱 모드인지 확인, 브라우저 절전모드 해제, 또는 크롬/엣지에서 '사이트에서 백그라운드 재생 허용' 설정 확인
⚠️ 모바일에서 편집 버튼 안 눌림 : 터치영역 충분함, 최신 브라우저 권장
📞 문의 및 피드백 : 플레이리스트 내 'DB 동기화' 후 오류가 지속되면 관리자에게 문의하세요.