Google 드라이브에서 HTML/CSS/JS 및 기타 코드 파일을 호스팅하는 방법

블로거나 웹사이트 개발자들은 CSS, JavaScript 등 필요한 코드를 외부에서 호스팅하는 것에 대한 고민이 항상 있습니다. 템플릿 크기를 줄이고 코드 가독성을 높이기 위해 외부 파일 호스팅은 필수적입니다.

템플릿 내에 모든 스크립트가 포함되면 코드 내용 파악 및 수정이 매우 복잡해지기 때문입니다.

따라서 파일 호스팅 위치를 올바르게 선택하는 것도 중요합니다. 인지도가 낮은 플랫폼에서 호스팅하면 응답 오류가 발생하거나 코드 실행 속도가 느려질 수 있습니다.

서버 응답 속도와 사이트 로딩 속도를 고려하여 파일을 호스팅해야 합니다. 이러한 점에서 Google 드라이브는 아주 좋은 선택지입니다.

Google 드라이브는 단순 저장 공간을 넘어 웹 개발에 유용한 다양한 기능을 제공합니다. 문의 양식, 설문 조사, 스프레드시트, 파일 다운로드 호스팅 등 여러 작업을 수행할 수 있습니다.

이번 글에서는 Google 드라이브의 모든 기능을 살펴보고, 특히 CSS, JavaScript 등 스크립트 파일을 무료로 호스팅하는 방법을 알아보겠습니다.

Google 드라이브를 이용한 파일 호스팅 방법

먼저 Google 드라이브에 호스팅할 코드를 담은 파일을 준비해야 합니다. CSS, JS, HTML 또는 기타 다양한 코드 파일이 될 수 있습니다.
호스팅할 코드를 복사합니다. 여기서는 CSS 코드를 예시로 들지만, 다른 언어의 코드도 동일하게 호스팅할 수 있습니다.

Google 드라이브를 열고 Gmail 계정으로 로그인합니다. 로그인 후, 오른쪽 상단에 있는 '만들기' 버튼을 클릭하고, 호스팅할 파일들을 담을 새로운 폴더를 만듭니다.

블로그나 웹사이트에서 스크립트를 사용하려면 업로드한 파일의 공개 설정을 '비공개'에서 '공개'로 변경해야 합니다.

'공개'로 설정하면 웹사이트 방문자 누구나 해당 파일을 사용할 수 있지만, '비공개'로 설정하면 사용 권한이 필요하므로 정상적으로 작동하지 않습니다.

파일 설정을 '공개'로 변경한 후 꼭 저장해야 합니다.

https://drive.google.com/file/d/0B_1mqJd2tC8qUzRYU0xLT0ZNS1E/edit?usp=sharing

https://googledrive.com/host/Green-color-drive-code-here

위 링크 형식을 적용하면 다음과 같이 사용할 수 있는 파일 링크가 생성됩니다. 만약 디자인 경험이 있다면 문제가 없지만, 디자인 내에서 호스팅된 파일 링크를 사용하는 방법을 모른다면 아래 형식을 사용하십시오.

http://googledrive.com/host/0B_1mqJd2tC8qUzRYU0xLT0ZNS1E

`google-drive-link-here` 부분을 실제 링크로 변경하고, 디자인에 붙여 넣기 전에 <head> 태그 안에 CSS를, <body> 태그 안에 JavaScript를 추가합니다. Blogger의 경우 '템플릿' 섹션에서 'HTML 편집'으로 이동한 후 <head> 또는 <body> 태그를 찾습니다.

Google에서 제공하는 서비스이므로 높은 품질과 신뢰성을 보장합니다.
Google 드라이브는 넉넉한 저장 공간을 제공합니다. 기본적으로 15GB의 스토리지를 제공하며, 필요한 경우 유료로 더 많은 공간을 확보할 수 있습니다.
Google 서버의 안정적인 속도와 무제한 대역폭 덕분에 다른 서비스보다 파일 로딩 속도가 빠릅니다.
사용법이 간편하고 직관적이며 다양한 유형의 파일을 제한 없이 저장할 수 있습니다.
가장 중요한 점은 무료로 이용할 수 있다는 것입니다.

이 글이 Google 드라이브에서 파일을 호스팅하는 데 도움이 되었기를 바랍니다. 만약 위 과정을 진행하면서 문제가 발생한다면 언제든지 댓글을 남겨주세요. 최대한 빨리 도와드리겠습니다.