구글 드라이브와 Cloudflare로 내 블로그에 '끊김 없는' 오디오 플레이어 만들기 (무료)

안녕하세요! 오늘은 내 블로그에 배경음악이나 팟캐스트 같은 오디오 파일을 넣고 싶을 때 겪는 여러 가지 문제를 한 번에 해결하는 '고급' 꿀팁을 알려드리려고 합니다.

혹시 이런 문제 겪어보셨나요?

• 티스토리에 파일을 올렸더니 링크가 만료되어 어느 날 갑자기 음악이 안 나와요.
• 구글 드라이브 링크를 직접 넣었더니 재생은 안 되고 다운로드만 돼요.
• 외부 플레이어를 썼더니 광고가 붙거나 서비스가 사라졌어요.

오늘 이 모든 문제를 무료로, 그리고 영구적으로 해결할 수 있는 방법을 알려드릴게요. 바로 구글 드라이브를 파일 저장소로, Cloudflare Workers를 안정적인 중계 서버로 사용하는 방법입니다. 이름은 어려워 보이지만, 차근차근 따라 하면 누구나 하실 수 있습니다!

핵심 원리: 왜 이 방법이 최고일까?

우리가 만들 시스템의 구조는 간단합니다.

1. 파일 저장소 (창고): 용량 걱정 없는 구글 드라이브에 오디오 파일을 안전하게 보관합니다.
2. 중계 서버 (똑똑한 심부름꾼): Cloudflare Workers라는 무료 서버가 블로그의 요청을 받아 구글 드라이브에서 파일을 대신 가져와 전달해줍니다.

이 '심부름꾼'이 구글의 성가신 "바이러스 검사" 경고 페이지 같은 장애물을 알아서 처리해주기 때문에, 우리 블로그의 오디오 플레이어는 언제나 깨끗한 오디오 데이터만 받아 안정적으로 재생할 수 있게 됩니다.

---

1단계: 구글 드라이브에 파일 업로드 및 공유 설정

먼저 오디오 파일을 보관할 창고부터 준비해 봅시다.

1. 구글 드라이브에 접속하여 사용할 오디오 파일(MP3 등)을 업로드합니다.
2. 업로드한 파일 위에서 마우스 오른쪽 버튼을 클릭하고 **[공유]**를 선택합니다.
3. '일반 액세스' 섹션에서 [제한됨]을 클릭하여 [링크가 있는 모든 사용자]로 변경해주세요. (이것을 안 하면 아무도 접근할 수 없어요!)
4. 권한이 [뷰어]로 설정되었는지 확인하고, [링크 복사] 버튼을 누릅니다.
5. (여기에 공유 설정 스크린샷을 삽입하면 좋습니다)
6. 복사된 링크에서 파일의 고유 ID를 찾아 메모장에 잠시 보관합니다.
   • 링크: https://drive.google.com/file/d/파일ID/view?usp=sharing
   • 위 링크에서 굵게 표시된 부분이 바로 파일 ID입니다.

---

2단계: Cloudflare Workers 설정 (똑똑한 심부름꾼 만들기)

이제 이 프로젝트의 핵심인 Cloudflare Workers를 설정할 차례입니다. 처음이시라면 계정 가입부터 해야 합니다.

1. Cloudflare 공식 사이트에 접속하여 무료 계정을 만듭니다.
2. 로그인 후, 왼쪽 메뉴에서 [Workers & Pages]를 선택합니다.
3. [Create application(애플리케이션 만들기)] 버튼을 누르고, [Create Worker(Worker 만들기)]를 선택합니다.
4. (여기에 Worker 만들기 스크린샷을 삽입하면 좋습니다)
5. Worker의 이름을 정해줍니다. (예: my-audio-proxy) 이름은 나중에 주소의 일부가 됩니다. 그 후 [Deploy(배포)] 버튼을 누릅니다.
6. 배포가 완료되면, 생성된 Worker를 관리하는 화면으로 넘어갑니다. [Edit code(코드 편집)] 버튼을 눌러주세요.
7. 기존에 있던 "Hello World" 코드를 모두 지우고, 아래의 코드를 그대로 복사하여 붙여넣습니다. 이 코드가 바로 '심부름꾼'의 행동 규칙입니다.

 

      export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const fileId = url.searchParams.get('id');

    if (!fileId) {
      return new Response('File ID is required. Please use ...?id=YOUR_FILE_ID', { status: 400 });
    }

    const googleDriveURL = `https://drive.google.com/uc?export=download&id=${fileId}`;

    try {
      const initialResponse = await fetch(googleDriveURL, {
        redirect: 'manual'
      });

      const finalURL = initialResponse.headers.get('location');
      let finalResponse;

      if (finalURL) {
        finalResponse = await fetch(finalURL);
      } else {
        finalResponse = initialResponse;
      }
      
      const newHeaders = new Headers();

      if (finalResponse.headers.has('Content-Type')) newHeaders.set('Content-Type', finalResponse.headers.get('Content-Type'));
      if (finalResponse.headers.has('Content-Length')) newHeaders.set('Content-Length', finalResponse.headers.get('Content-Length'));
      if (finalResponse.headers.has('Accept-Ranges')) newHeaders.set('Accept-Ranges', finalResponse.headers.get('Accept-Ranges'));
      
      return new Response(finalResponse.body, {
        headers: newHeaders,
        status: finalResponse.status,
        statusText: finalResponse.statusText,
      });

    } catch (error) {
      return new Response('Error fetching the file from Google Drive: ' + error.message, { status: 500 });
    }
  },
};
    

1. 코드를 붙여넣었다면, 오른쪽 상단의 [Save and deploy(저장 및 배포)] 버튼을 꼭 눌러주세요. 잠시 후 "Save and Deploy successful" 메시지가 뜨면 성공입니다.
2. 이제 뒤로 가기 버튼을 눌러 Worker 관리 화면으로 돌아옵니다. 화면 상단에 https://내-워커-이름.내-서브도메인.workers.dev 와 같은 주소가 보일 겁니다. 이 주소가 바로 당신의 심부름꾼 주소입니다!

---

3단계: 블로그에 오디오 플레이어 삽입하기

이제 모든 준비가 끝났습니다. 창고(구글 드라이브)와 심부름꾼(Cloudflare Worker)을 우리 블로그의 오디오 플레이어와 연결해 주기만 하면 됩니다.

1. 티스토리 등 블로그 글쓰기 에디터를 열고 [HTML] 모드로 전환합니다.
2. 오디오 플레이어를 넣고 싶은 위치에 아래의 HTML 코드를 복사하여 붙여넣습니다.

 

      <div style="text-align: center; margin: 20px 0;">
    <p style="font-weight: bold;">[오디오 제목]</p>
    <audio controls style="width: 80%; max-width: 500px;">
        <source src="여기에_내_워커_주소를_넣어주세요" type="audio/mpeg" />
        브라우저가 오디오를 지원하지 않습니다.
    </audio>
</div>
    

 

1. 위 코드의 src="..." 부분을 내 워커 주소와 파일 ID를 조합하여 완성합니다.
   • 조합 방식: 내_워커_주소 + /?id= + 1단계에서_찾은_파일_ID
   • 완성 예시:

           https://my-audio-proxy.my-subdomain.workers.dev/?id=파일ID
         

      
2. 이 완성된 주소를 src에 넣어주면 최종 코드가 완성됩니다.

최종 HTML 코드 예시

 

      <div style="text-align: center; margin: 20px 0;">
    <p style="font-weight: bold;">잔잔한 피아노 배경음악</p>
    <audio controls style="width: 80%; max-width: 500px;">
        <source src="https://my-audio-proxy.my-subdomain.workers.dev/?id=파일ID" type="audio/mpeg" />
        브라우저가 오디오를 지원하지 않습니다.
    </audio>
</div>
    

 

1. 글을 발행하고 확인해보세요! 이제 광고도, 끊김도, 만료 걱정도 없는 나만의 멋진 오디오 플레이어가 블로그에서 완벽하게 작동할 것입니다. 다른 오디오 파일을 추가하고 싶다면, 1단계에서 파일 ID만 새로 얻어서 3단계의 주소만 바꿔주면 얼마든지 추가할 수 있습니다.

조금 복잡해 보였지만, 한 번만 설정해두면 앞으로 정말 편하게 오디오 파일을 활용할 수 있습니다. 여러분의 블로그를 더욱 풍성하게 만드는 데 이 팁이 도움이 되길 바랍니다!