Google Drive를 이미지 CDN처럼 작동하게 만드는 React 라이브러리를 만들었습니다

Google Drive에 이미지를 저장하면서 이런 생각을 해본 적이 있나요?

"왜 이 링크를 내 React 앱에서 바로 사용할 수 없을까?"

저도 분명히 그런 생각을 했습니다.

깨진 Google Drive 이미지 URL을 디버깅하며 몇 시간을 보낸 끝에, 문제는 React가 아니라 Google Drive가 파일을 노출하는 방식에 있다는 것을 깨달았습니다.

그래서 저는 Google Drive 이미지를 일반적인 이미지 URL처럼 작동하게 만드는 오픈 소스 React 라이브러리인 DriveLoader를 만들기로 결심했습니다.

문제점

Google Drive에 이미지를 업로드하고 공유 링크를 복사한다고 가정해 봅시다.

보통 다음과 같은 형태를 얻게 됩니다:

자연스럽게 다음과 같이 시도하게 됩니다:

<img src={driveUrl} />

…하지만 아무것도 로드되지 않습니다.

Stack Overflow에서 검색해 본 적이 있다면 다음과 같은 제안들을 아마 보았을 것입니다:

• URL을 수동으로 변환하기
• /file/d/를 다른 엔드포인트(endpoint)로 교체하기
• uc?id=... 사용하기
• thumbnail?id=... 시도하기
• lh3.googleusercontent.com 사용하기
• 그냥 작동하기를 기도하기

때로는 작동합니다.

때로는 작동하지 않습니다.

왜 이런 일이 발생할까요?

Google Drive는 이미지 호스팅 서비스로 설계되지 않았습니다.

가공되지 않은 이미지 바이트(raw image bytes)를 반환하는 대신, 많은 공유 링크들이 HTML 미리보기 페이지를 반환합니다.

어떤 엔드포인트(endpoint)는 다르게 동작합니다.

어떤 것은 쿠키(cookies)를 요구합니다.

어떤 것은 트래픽이 몰리면 작동을 멈춥니다.

어떤 것은 썸네일(thumbnails)에만 작동합니다.

이는 개발자들이 단 하나의 이미지를 표시하기 위해서도 결국 많은 커스텀 로직을 작성하게 된다는 것을 의미합니다.

더 나은 방법이 있어야 했습니다

저는 다음과 같이 작동하는 무언가를 원했습니다:

import { DriveImage } from "@driveloader/react";

<DriveImage
...

URL 변환 없음.

수동 엔드포인트(endpoint) 선택 없음.

디버깅 없음.

그저 이미지일 뿐입니다.

DriveLoader 소개

DriveLoader는 Google Drive 이미지 링크를 작동하는 이미지 URL로 자동으로 해결(resolve)해 주는 React 라이브러리입니다.

개발자가 Google Drive의 다양한 엔드포인트(endpoint)를 이해하도록 강요하는 대신, 라이브러리가 내부적으로 모든 것을 처리합니다.

워크플로우는 다음과 같습니다:

Google Drive URL
        │
        ▼
...

이 모든 과정은 자동으로 이루어집니다.

주요 기능 (Features)

✅ 다양한 Google Drive URL 형식 지원

✅ 자동 파일 ID 추출 (Automatic file ID extraction)

✅ 지능형 엔드포인트 결정 (Intelligent endpoint resolution)

✅ 자동 재시도 (Automatic retries)

✅ 인메모리 캐싱 (In-memory caching)

✅ 요청 중복 제거 (Request deduplication)

✅ TypeScript 지원

✅ React Hooks 지원

✅ 트리 쉐이킹 가능 (Tree-shakeable)

✅ 가벼운 용량 (Lightweight)

예시 (Example)

일반적인 이미지를 사용하는 방법은 다음과 같이 간단합니다:

import { DriveImage } from "@driveloader/react";

export default function Profile() {
...

이것으로 끝입니다.

내부 동작 원리 (Under the Hood)

흥미로운 부분은 이미지를 렌더링하는 것이 아닙니다.

어느 Google Drive 엔드포인트가 실제로 작동하는지 결정하는 것입니다.

DriveLoader는 다음과 같이 동작합니다:

1. 파일 ID를 추출합니다.
2. 여러 개의 후보 URL을 생성합니다.
3. 순서대로 시도합니다.
4. 처음으로 작동하는 엔드포인트를 감지합니다.
5. 성공한 결과를 캐싱합니다.
6. 향후 요청에 해당 엔드포인트를 재사용합니다.

이를 통해 이후의 로딩 속도가 훨씬 빨라집니다.

개발자 경험 (Developer Experience)

<DriveImage /> 컴포넌트 외에도, 이 패키지는 고급 사용 사례를 위한 유틸리티와 훅 (Hooks)을 제공합니다.

const {
    imageUrl,
    loading,
...

이를 통해 동일한 리졸버 (Resolver)의 이점을 누리면서도 렌더링을 완전히 제어할 수 있습니다.

제작 이유 (Why I Built It)

이 프로젝트는 개인 프로젝트와 포트폴리오에서 Google Drive를 더 깔끔하게 사용하고 싶다는 생각에서 시작되었습니다.

모든 URL을 수동으로 변환하는 대신, 개발자가 단순히 Google Drive 링크를 붙여넣기만 하면 되는 솔루션을 원했습니다.

작은 유틸리티로 시작된 이 프로젝트는 빠르게 재사용 가능한 오픈 소스 패키지로 발전했습니다.

향후 계획 (What's Next?)

현재 폴더 지원 기능을 작업 중이며, 이를 통해 개발자들이 간단한 API로 공개된 Google Drive 폴더 내의 모든 이미지와 비디오를 로드할 수 있도록 할 예정입니다.

목표는 Google Drive가 React 애플리케이션을 위한 가벼운 미디어 CDN처럼 느껴지게 만드는 것입니다.

향후 개선 사항:

• 폴더 에셋 로딩 (Folder asset loading)
• 더 나은 캐싱 (Better caching)
• 스마트 엔드포인트 학습 (Smart endpoint learning)
• 성능 최적화 (Performance optimizations)
• Google Drive 미디어를 위한 더 많은 유틸리티

시작하기 (Get Started)

DriveLoader는 오픈 소스 npm 패키지로 사용할 수 있습니다.

📦 설치 (Install)

npm install @driveloader/react

🔗 링크 (Links)

• GitHub 저장소 (GitHub Repository): https://github.com/Pranav00076/driveLoader
• npm 패키지 (npm Package): https://www.npmjs.com/package/@driveloader/react

이 프로젝트가 유용하다고 생각하신다면, GitHub에서 ⭐를 눌러주세요. 이는 프로젝트가 더 많은 개발자에게 도달하고 향후 개선을 위한 동기부여가 됩니다.

기여하기 (Contributing)

DriveLoader는 완전히 오픈 소스이며, 언제나 기여를 환영합니다.

다음과 같은 활동을 원하신다면:

• 버그 보고 (Report bugs)
• 새로운 기능 제안 (Suggest new features)
• 문서 개선 (Improve the documentation)
• 성능 최적화 (Optimize performance)
• 풀 리퀘스트 제출 (Submit pull requests)

언제든지 이슈(issue)를 생성하거나 GitHub을 통해 기여해 주세요.

저장소 (Repository):
https://github.com/Pranav00076/driveLoader

마치며 (Final Thoughts)

Google Drive는 에셋 (assets)을 저장하기에 믿을 수 없을 정도로 편리한 곳이지만, 웹 애플리케이션에서 해당 에셋들을 직접 사용하는 것은 항상 번거로운 일이었습니다.

DriveLoader는 URL 해석 (URL resolution), 지능적인 엔드포인트 선택 (intelligent endpoint selection), 캐싱 (caching), 재시도 (retries), 그리고 React 통합 (React integration)을 자동으로 처리함으로써 이러한 마찰을 제거하는 것을 목표로 합니다. 이를 통해 개발자는 디버깅 대신 구축에 집중할 수 있습니다.

이것은 시작일 뿐입니다. 저는 공개 폴더 지원 (public folder support), 더 스마트한 캐싱 (smarter caching), 개선된 진단 기능 (improved diagnostics), 그리고 더 나은 개발자 경험 (developer experience)과 같은 새로운 기능들을 활발히 작업하고 있습니다.

만약 Google Drive 이미지 URL로 어려움을 겪은 적이 있다면, DriveLoader를 사용해 보시고 피드백을 공유해 주시면 감사하겠습니다.

⭐ GitHub: https://github.com/Pranav00076/driveLoader

📦 npm: https://www.npmjs.com/package/@driveloader/react

즐거운 코딩 되세요! 🚀