앱에서 앨범에 접근해 동영상 불러오는 시간 줄이는 방법

 

React Native에서 동영상을 갤러리에서 불러오는 방식은 여러 가지가 있지만,
처음에는 expo-image-picker를 사용했다.
하지만 느린 속도, 자동 압축 문제 등의 이유로,
expo-media-library로 전환하는 과정을 거쳤다.

---

🚨 문제점: 갤러리에서 동영상 불러오는 속도가 너무 느림

초기 방식: expo-image-picker 사용

처음에는 가장 간편한 방법인 expo-image-picker를 사용했다.
이 방식은 기본적으로 이미지 및 동영상을 선택하는 기능을 제공하지만,
사용해보니 여러 가지 문제점이 발생했다.

📌 초기 방식의 문제점

1. Base64 인코딩된 데이터를 반환하여 처리 속도가 느림
   • expo-image-picker는 자동으로 일부 압축을 수행
   • 동영상을 선택한 후 압축 과정에서 시간이 지체됨

✅ 결론
expo-image-picker는 빠르게 구현할 수 있는 장점이 있지만,
갤러리의 동영상을 선택할 때 속도 저하가 발생했다.

사용자입장에서는 선택할때 기다리는 시간도 굉장히 클 것 같음.  

---

🔍 해결 과정: expo-media-library로 전환

1.  expo-media-library를 활용한 파일 관리 개선

파일을 효율적으로 불러오고 관리하기 위해,
**갤러리를 직접 커스텀할 수 있는 expo-media-library**를 사용했다.

📌 적용 방법

• expo-media-library를 사용하여 사용자의 앨범에서 특정 폴더만 필터링
• getAlbumsAsync()를 사용하여 비디오 전용 앨범만 가져옴

const useVideoAlbums = () => {
  const [albums, setAlbums] = useState<MediaLibrary.Album[]>([]);
  const [permissionsResponse, requestPermission] = MediaLibrary.usePermissions();
  const { showAlert } = useAlert();

  useEffect(() => {
    const getVideoAlbums = async () => {
      if (!permissionsResponse?.granted) {
        const permission = await requestPermission();
        if (!permission?.granted) {
          showAlert(
            "비디오 업로드를 위해 갤러리 접근 권한이 필요합니다.",
            () => Linking.openSettings()
          );
          return;
        }
      }

      const allAlbums = await MediaLibrary.getAlbumsAsync({ includeSmartAlbums: true });
      const videoAlbum = allAlbums.find(album => album.title === "Videos" || album.title === "비디오");

      if (videoAlbum) {
        setAlbums([videoAlbum]);
      } else {
        console.log("비디오 전용 폴더를 찾을 수 없습니다.");
      }
    };

    getVideoAlbums();
  }, []);

  return { albums };
};

✅ 갤러리에서 비디오 전용 폴더만 필터링하여 속도 개선
✅ 앱이 직접 파일을 관리할 수 있도록 개선

---

2.  파일 경로 문제 해결: expo-file-system을 사용한 캐시 이동

📌 문제:

• expo-media-library로 불러온 동영상의 경로는 iOS에서 DCIM/ 폴더로 인식됨
• 앱이 이 경로에 접근하지 못해 미리보기 재생이 불가능

📌 해결 방법:

• expo-file-system.copyAsync()를 사용하여 파일을 캐시 디렉토리로 이동
• 이후 앱에서 재생 가능하도록 안전한 경로로 관리

const handleConfirmSelection = async () => {
  const finalAssets = [];

  for (const selVideo of selectedVideos) {
    const realLocalUri = selVideo.uri.split("#")[0]; // 경로 정제
    const fileName = selVideo.filename || `${Date.now()}.MOV`;
    const toPath = `${FileSystem.cacheDirectory}${fileName}`;

    try {
      await FileSystem.copyAsync({ from: realLocalUri, to: toPath });
      finalAssets.push({ ...selVideo, uri: toPath });
    } catch (err) {
      console.error("파일 복사 실패:", err);
    }
  }

  setMediaAssets(finalAssets);
  onClose(); // 모달 닫기
};

✅ 파일을 cacheDirectory로 이동하여 앱 내에서 안전하게 사용 가능
✅ 미리보기 구현 가능 → 파일 로딩 속도 개선

---

📉 최종 성과

개선 전 (expo-image-picker)개선 후 (expo-media-library)

갤러리에서 파일 로딩 속도 느림	✅ 자동 압축 없음 → 빠른 불러오기 가능
비디오 선택 후 자동 압축으로 인해 느려짐	✅ 압축 없이 원본 파일 그대로 사용 가능
미리보기 구현 어려움 (Base64 인코딩 이슈)	✅ 캐시 디렉토리로 복사하여 미리보기 구현 가능
갤러리에서 특정 폴더 필터링 불가	✅ 비디오 전용 폴더 필터링 가능 (getAlbumsAsync())
파일 경로 관리 어려움 → 삭제될 위험	✅ 캐시 디렉토리를 활용하여 파일 관리 가능

---

🎯 결론

1. expo-image-picker → 빠르게 구현 가능하지만 속도 저하 및 자동 압축 문제
2. expo-media-library → 갤러리를 직접 커스텀 가능, 빠른 파일 불러오기 가능
3. 파일을 cacheDirectory로 이동하여 미리보기 가능 & 파일 관리 개선