포트폴리오 구현 에러 모음집

포트폴리오를 구현하는 과정에서 생기는 에러들 모아보았습니다.

mp4, gif 용량 문제

프로젝트를 영상으로 mp4파일을 추가해서 재생하는 기능을 구현하는중 로컬에서는 정상적으로 작동했다,

1차 에러 github exceed size file

하지만 github에 push 할때 해당 영상들의 용량이 너무커서 제대로 된 push를 하지 못했다. 이러한 상황에 git lfs (Large File Storage)를 사용해서 큰 용량의 파일들을 올리는 방법을 선택해서 github에 저장 했다.

git lfs install
git lfs track '*.mp4'
git add .gitattributes
//하지만 history에 이미 해당 파일들이 남아있으면? 
git lfs migrate import --include="*.mp4"
git commit
git push

2차 에러 vercel video not playing

github에 제대로 배포를 진행하고, vercel에 배포해서 실행했을때, 영상이 크기가 0이라는 것을 알수있었다.
네트워크 탭에서 Content-type 이 video/mp4 인것도 확인했지만 영상의 크기가 문제인것 같아서 찾아보니 lfs를 사용할때 git lfs pull 을 사용해서 lfs에 있는 영상들을 받아와야 했다... 하지만 이것도 문제를 해결하지 못했다.

3차 에러 webm 포멧

그래서 mp4를 대체할수있는 방법으로 webm으로 포멧을 바꾸어서 영상을 재생하기로 했다 로컬에서 잘돌아가고 해당 용량도 압축되었기 때문에 문제가 없을것이라 판단했다.

WebM은 구글에서 개발한 개방형 동영상 파일 형식으로, 주로 HTML5 비디오와 함께 사용됩니다. 로열티 비용 없이 고화질 영상을 압축하여 제공하며, MP4와 같은 다른 형식에 비해 작은 파일 크기로 고품질을 유지할 수 있는 장점이 있습니다

BUT! 어림도 없지 베포된 사이트에서 실행이 안된다, 실제 영상파일 자체를 실행해봐도 재생되지않는다 element탭에서 봤을때 분명이 있는데 뭐가 문제지?
github를 가서도 확인해보았다. ?? 깃헙에서도 영상이 재생이 안된다. 즉 git lfs 에서 부터 꼬이게 된것 같다, 히스토리를 체크해가며 문제를 찾을 수 있지만,
꼭 코드안에 영상을 넣어서 관리해야되나라는 의문이 들었다

최종 해결 방법

현재 프로젝트에서 gemini 및 크롤링 작업을 다른 기능때문에 사용하고있었는데,
supabase또한 사용중이였다. supabase에는 storage 라는 Amazon S3,Cloudfare R2같은 서비스가 있는데 이를 활용하면 보다 쉽게 관리 할수있게 되었다, 또한 실제로 영상 자체가 보안에 민감한 내용이 있지는 않기 때문에 public으로 URL을 돌려서 사용해도 문제되지않았다. supabase는 기본적으로 무료이지만 용량이 또는 너무 많은 요청을 보내면 유료화하는게 좋지만, 나는 포트폴리오에서 몇개안되는 파일들을 사용하기 때문에 상관없었다. 문제 해결 완!

webview full screen video

1차적으로 완성이되어서 다른 사람들과 공유하는 과정에 문제가 생겼다.

비디오가 전체화면으로 되서 다른걸 못봐.

처음에는 코드가 잘못된건가? 옛날 버전에서 사용하는 배포과정에 버전문제가 생겼나 하나씩 확인해가면서, 원인을 트래킹해보았다.

1. 어떤 문제인가 ? -> 모바일에서 영상이 전체화면이 된다
2. 모바일에서만 그런가 ? -> 모바일에서만 비정상 작동
3. 어떤 상황에서 발생하는가 ? -> 특정 브라우저가 아닌 카카오톡에서 실행하는 webview에서 문제

원인을 발견

안드로이드는 Chrome WebView IOS는 WKWebView라는 Safari 엔진 사용,
WebView는 <video> 태그의 풀스크린 제어를 자동으로 함, 즉 사용자가 터치하면 requestFullscreen()이 자동으로 호출됨 따라서 미디어 정책을 강제로 다르게 처리, 나는 사용자 처리 없이 autoplay를 하기때문에 자동을 풀스크린으로 전환되었던거다.

해결 방법

playsinline 속성 : 전체 화면으로 전환되지않고, 페이지안 인라인으로 그대로 재생된다
webkit-playsinline : iOS Safari 에선 webkit 기반 전용 속성만 인식함
또한 혹시 모르는 에러 처리까지 완성

video 전체 코드

   <video
        ref={videoRef}
        muted
        preload="auto"
        loop
        autoPlay
        playsInline
        webkit-playsinline
        controls={false}
        onCanPlay={() => setIsLoaded(true)}
        onError={(e) => {
          console.error('Video load error:', e);
        }}
        className={`w-full h-full object-cover rounded-t-lg transition-opacity duration-300 ${
          isLoaded ? 'opacity-100' : 'opacity-0'
        }`}
      >       
		<source src={src} type="video/webm" /> 
	</video>