최근 동영상 콘텐츠의 중요성이 그 어느 때보다 강조되고 있습니다. 수많은 정보와 엔터테인먼트가 유튜브를 통해 소비되는 가운데, 자신이 큐레이션한 영상들이나 직접 제작한 유튜브 플레이리스트를 개인 웹사이트나 포트폴리오, 혹은 비즈니스 랜딩 페이지에 보여주고 싶어 하는 분들이 많아졌습니다.
특히, 복잡한 서버 구축 없이 무료로 빠르고 간편하게 웹사이트를 배포할 수 있는 서비스인 Netlify(넷리파이)를 활용하면 누구나 나만의 멋진 웹페이지를 가질 수 있습니다. 과거에는 이를 위해 HTML, CSS, 자바스크립트 등 복잡한 코딩 지식이 필수적이었지만, 이제는 인공지능 비서인 제미나이(Gemini)에게 의뢰하여 코드를 뚝딱 만들어내고 파일 저장까지 지시하는 방식으로 누구나 쉽게 웹사이트를 구축할 수 있습니다.
이번 글에서는 독자 여러분이 구성한 유튜브 플레이리스트를 https://classy-daffodil-08be84.netlify.app과 같은 나만의 Netlify 웹사이트에 성공적으로 연동하고 배포하는 전체 과정을 쉽고 자세하게 안내해 드립니다. 코딩을 전혀 몰라도 AI와 대화하듯 따라 할 수 있도록 단계별로 구성했습니다.
1. 왜 내 웹사이트에 유튜브 플레이리스트를 가져와야 할까요?
유튜브 플랫폼 자체에서도 영상을 볼 수 있지만, 굳이 내 웹사이트로 플레이리스트를 가져오는 데에는 명확한 장점이 있습니다.
- 브랜드 경험 통일: 유튜브의 복잡한 알고리즘 추천이나 무분별한 타 채널의 광고에서 벗어나, 방문자에게 오직 내가 보여주고 싶은 콘텐츠만 집중적으로 전달할 수 있습니다.
- 체류 시간(Dwell Time) 증가: 방문자가 내 웹사이트에서 영상을 시청하게 되면 자연스럽게 페이지에 머무는 시간이 늘어납니다. 이는 웹사이트의 신뢰도를 높이고 검색 엔진 최적화에도 긍정적인 영향을 미칩니다.
- 포트폴리오 및 아카이빙: 교육용 자료, 음악 재생 목록, 제품 사용 설명서 등 특정 주제로 묶인 플레이리스트를 웹페이지의 한 섹션으로 깔끔하게 정리하여 정보의 접근성을 극대화할 수 있습니다.
2. 준비 단계: 연동할 플레이리스트 ID 확보하기
웹사이트에 영상을 띄우기 위해서는 가장 먼저 '어떤 플레이리스트를 가져올 것인지'에 대한 고유 주소를 알아내야 합니다.
- 유튜브에 접속하여 웹사이트에 연동하고 싶은 플레이리스트 페이지로 이동합니다.
- 인터넷 브라우저 상단의 주소창을 확인합니다.
- 주소창의 URL은 대략 https://www.youtube.com/playlist?list=PL... 형태를 띠고 있습니다.
- 여기서 list= 바로 뒤에 붙어있는 영문과 숫자의 조합이 바로 플레이리스트 ID입니다. (예: PLxA687tZu...). 이 ID 값을 메모장에 안전하게 복사해 둡니다.
3. 코딩은 AI에게 맡기자: 제미나이에게 웹사이트 코드 의뢰하기
이제 가장 중요한 단계입니다. 과거처럼 검은 화면에 알 수 없는 영어 코드를 직접 타이핑할 필요가 없습니다. 여러분의 훌륭한 코딩 파트너인 제미나이에게 정확한 요구사항을 전달하여 필요한 코드를 모두 작성해 달라고 요청하면 됩니다.
AI에게 코드를 의뢰할 때는 '무엇을, 어떻게 만들고 싶은지' 구체적으로 지시(프롬프트 작성)하는 것이 핵심입니다.
프롬프트(명령어) 작성 예시
제미나이 대화창을 열고 아래와 같이 입력해 보세요. 괄호 안의 내용은 여러분의 상황에 맞게 수정하시면 됩니다.
"제미나이, 안녕? 나는 넷리파이(Netlify)에 배포할 간단한 단일 웹페이지를 만들려고 해. 이 웹페이지의 핵심 기능은 내 유튜브 플레이리스트를 화면에 예쁘게 보여주는 거야.
[요구사항]
- 내가 보여주고 싶은 유튜브 플레이리스트 ID는 '(여기에 2단계에서 복사한 ID 입력)'야.
- 코딩을 잘 모르니까 HTML, CSS 파일로 나누어서 복사하기 쉽게 코드를 짜줘.
- PC와 스마트폰 어디서 접속해도 화면이 깨지지 않고 잘 보이도록 '반응형 디자인'을 적용해 줘.
- 배경색은 깔끔한 연한 회색으로 하고, 영상 플레이어는 화면 중앙에 보기 좋게 배치해 줘.
- 복잡한 API 연동보다는 가장 오류가 적고 쉬운 iframe 삽입 방식을 사용해서 코드를 만들어 줘."
이렇게 지시하면 제미나이는 즉시 index.html (웹페이지의 뼈대)과 style.css (웹페이지의 디자인) 코드를 화면에 출력해 줍니다. 만약 디자인이 마음에 들지 않는다면, "배경색을 검은색으로 바꿔줘"라고 추가로 요청하여 코드를 지속적으로 다듬을 수 있습니다.
4. 복잡한 복사·붙여넣기도 안녕! 제미나이에게 '파일로 저장해 줘'라고 명령하기
제미나이가 완벽한 코드를 짜주었다면, 이제 이 코드를 내 컴퓨터에 실제 파일로 저장할 차례입니다. 메모장이나 편집기를 열고 일일이 복사해서 붙여넣는 과정조차 번거롭게 느껴진다면, 제미나이에게 직접 파일을 만들어 달라고 명령해 보세요. 최신 AI는 코드를 작성하는 것을 넘어, 사용자가 바로 다운로드할 수 있는 파일 형태로 결과물을 제공할 수 있습니다.
파일 생성을 위한 프롬프트(명령어) 예시
코드가 완성된 대화창에 이어서 아래와 같이 명령을 내려보세요.
"방금 네가 짜준 HTML과 CSS 코드를 내가 내 컴퓨터에 바로 저장할 수 있도록, 각각 index.html과 style.css 파일로 만들어서 다운로드 링크(또는 다운로드 가능한 파일 형태)로 제공해 줘."
또는, 웹사이트 관리를 더욱 쉽게 하고 싶다면 두 개의 파일을 하나로 합쳐달라고 명령하는 것도 좋은 방법입니다.
"초보자라서 파일이 여러 개면 헷갈려. 방금 만든 CSS 디자인 코드를 HTML 파일 안에 전부 포함시켜서, 오직 index.html 파일 딱 하나만 다운로드할 수 있도록 합쳐서 내보내 줘."
저장 및 작동 확인 과정
- 폴더 준비: 바탕화면에 웹사이트 파일들을 모아둘 새로운 폴더를 하나 만듭니다. 폴더 이름은 영어로 짓는 것이 좋습니다. (예: my-youtube-site)
- 다운로드: 제미나이가 명령을 수행하여 채팅창에 파일 다운로드 버튼이나 파일 형태의 결과물을 제공하면, 이를 클릭하여 방금 만든 폴더 안에 저장합니다.
- 실행 테스트: 다운로드가 완료된 index.html 파일을 마우스로 더블 클릭해 봅니다. 여러분이 평소 사용하는 인터넷 브라우저(크롬, 엣지 등)가 열리면서 방금 AI와 함께 기획한 나만의 유튜브 플레이리스트 웹사이트가 화면에 나타납니다.
코드가 완벽하게 작동하는 것을 확인했다면, 이제 이 파일들을 전 세계 사람들이 볼 수 있도록 인터넷에 올릴 준비가 끝난 것입니다.
5. Netlify를 통해 전 세계에 내 웹사이트 공개하기
컴퓨터에 저장된 웹사이트 파일들을 다른 사람들도 볼 수 있게 인터넷 공간에 올릴(배포할) 차례입니다. 앞서 언급한 Netlify를 사용하면 클릭 몇 번만으로 이 과정이 끝납니다. 최종 목표인 https://classy-daffodil-08be84.netlify.app와 같은 형태의 사이트 주소를 얻는 과정입니다.
- Netlify 가입 및 로그인: Netlify 공식 웹사이트(netlify.com)에 접속하여 회원가입을 진행합니다. 이메일이나 기존 구글 계정으로 1분 만에 가입할 수 있습니다.
- 드래그 앤 드롭 배포: 로그인을 완료하고 대시보드 화면(Sites 탭)으로 이동하면 화면 중앙 하단에 "Drag and drop your site output folder here" (여기에 사이트 폴더를 끌어다 놓으세요)라는 문구가 적힌 점선 박스가 보입니다.
- 폴더 업로드: 4단계에서 바탕화면에 만들어둔 my-youtube-site 폴더 자체를 마우스로 클릭한 채로 끌어서 Netlify의 점선 박스 안에 놓습니다. (파일이 아니라 폴더를 통째로 드래그해야 합니다.)
- 배포 완료 및 주소 생성: 마우스를 놓는 순간 Netlify가 즉시 파일들을 서버에 업로드하고 웹사이트 배포를 완료합니다. 화면에 녹색 불이 들어오면서 임의의 영어 단어로 조합된 웹사이트 주소(예: https://classy-daffodil-08be84.netlify.app)가 자동 생성됩니다.
이제 이 주소를 복사해서 스마트폰으로 접속해 보세요. 언제 어디서든 접속 가능한 나만의 웹사이트가 완성되었습니다.
6. 나만의 맞춤 도메인(주소)으로 변경하기
Netlify가 자동으로 만들어준 주소도 훌륭하지만, 기억하기 쉽게 주소 이름을 바꾸고 싶다면 간단한 설정을 통해 변경이 가능합니다.
- Netlify 대시보드에서 방금 배포한 사이트를 클릭합니다.
- 'Site settings' (사이트 설정) 메뉴로 들어갑니다.
- 'Domain management' (도메인 관리) 섹션에서 'Options' 버튼을 누르고 'Edit site name' (사이트 이름 수정)을 선택합니다.
- 원하는 영문 이름(예: my-music-list-2024)을 입력하고 저장합니다.
- 만약 다른 사람이 이미 사용 중인 이름이 아니라면, 즉시 https://my-music-list-2024.netlify.app으로 웹사이트 주소가 변경됩니다.
7. 자주 묻는 질문 (FAQ)
웹사이트에 유튜브를 연동하면서 자주 겪는 문제와 해결책을 정리했습니다.
Q. 플레이리스트에 새 영상을 추가했는데, 웹사이트에는 안 나타납니다. A. 단순 Iframe 삽입 방식을 사용했다면, 웹사이트 방문자가 페이지를 새로고침(F5)하기만 하면 유튜브에서 수정한 내용이 자동으로 반영되어 나타납니다. 웹사이트 코드를 다시 수정할 필요가 없습니다.
Q. 영상이 자동으로 재생되게(Autoplay) 할 수 있나요? A. 제미나이에게 "영상이 웹사이트에 접속하자마자 소리 없이 자동 재생되도록 코드를 수정해 줘"라고 명령하면, 코드 주소 뒤에 &autoplay=1&mute=1과 같은 파라미터를 추가해 줍니다. 단, 최근 웹 브라우저 정책상 '음소거(mute)' 상태가 아니면 자동 재생이 차단될 수 있습니다.
Q. 나중에 웹사이트 글자나 디자인을 바꾸고 싶으면 어떻게 하나요? A. 제미나이에게 변경하고 싶은 내용을 말하고 새로운 코드를 받거나 파일을 다운로드합니다. 그리고 기존 바탕화면의 폴더(my-youtube-site)에 덮어쓰기 한 뒤, 해당 폴더를 다시 Netlify 대시보드의 'Deploys' 탭에 드래그 앤 드롭하면 수 초 내로 업데이트된 웹사이트가 실시간 반영됩니다.
마무리하며
유튜브 플레이리스트를 내 웹사이트에 연동하는 일은 과거에는 전문 개발자들의 영역처럼 여겨졌습니다. 하지만 이제 우리는 Netlify라는 훌륭한 무료 배포 플랫폼과, 코딩부터 파일 생성까지 대신해 주는 똑똑한 AI 제미나이를 곁에 두고 있습니다.
어려운 기술적 장벽이나 복잡한 타이핑 작업은 AI에게 모두 맡기세요. 여러분은 '어떤 영상을 큐레이션 할 것인가', '웹사이트 방문자에게 어떤 가치를 전달할 것인가'하는 본질적인 기획에만 집중하시면 됩니다. 지금 바로 제미나이 대화창을 열고, 여러분만의 멋진 미디어 웹사이트 구축을 시작해 보시길 바랍니다.