Adaptive Streaming를 활용하여 이미지 보여주기

✅ 개요

현재 imgbb라는 이미지 무료 서버를 쓰고 있다.

프로젝트 진행할 때 우리는 저예산으로 돈을 아끼면서 진행하는 것이 목적이었다.

그러다 보니 여러 애로사항들이 있었는데

이 imgbb라는 서버가 문제가 되었다.

처음에는 무료여서 선택하였는데 클라이언트랑 연결하고 나서 든 생각은

이미지를 그리는 시간까지 느리다는 것이었다.

✅ 이슈

(게임을 시작하였지만 사진이 업로드되지 않았다.)

(어떠한 사진은 1초가 걸렸지만 그 이후 사진은 9초가 걸렸다.)

그래서 이에 따른 대책으로 사진 화질을 낮추었는데,

이상형 월드컵을 고르는 이미지가 사진 화질이 낮아서

우리의 취지와 맞지 않았다.

그래서 사진의 화질과 업로드 속도를 둘 다잡아야 하는데

많은 고민에 빠졌다.

여러 시도를 해보았지만 해결하기 어려웠고,

미해결 문제처럼 오랫동안 내 마음속 한쪽에 자리 잡고 있었다.

그러던 중, 유튜브를 보고 있었는데 아이디어가 떠올랐다.

✅ 내가 생각한 해결 방법

Adaptive Streaming 이다.

이는 유튜브를 보면 처음에는 저화질로 시작하다가 고화질로 변경되는 것을 볼 수 있는데,
이는 업로드하는 영상의 화질에 따라서 다운로드 속도 차이가 생긴다.
그래서 사용자 경험을 고려하여서 처음에는 저화질의 영상을 보여주다가
고화질의 영상을 보여주는 것을 의미한다.

그래서 이 방법을 우리 이상형 월드컵에 적용하기로 하였다.

	const [loadHighQuality, setLoadHighQuality] = useState<boolean[]>([
		false,
		false
	]);
//상태관리 로직 추가

			<Image
					src={twoPeople[0].image}
					alt="고화질 이상형 1"
					width={330}
					height={330}
					priority
					className={`cursor-pointer sm:hover:scale-105 duration-300 ${
						loadHighQuality[0] ? "" : "hidden"
					}`}
					onLoad={() => {
						console.log("고화질", loadHighQuality);
						setLoadHighQuality((value) => [true, value[1]]);
					}}
				/>
				<Image
					src={twoPeople[0].thumb}
					alt="저화질 이상형 1"
					width={330}
					height={330}
					priority
					className={`cursor-pointer sm:hover:scale-105 duration-300 ${
						loadHighQuality[0] ? "hidden" : ""
					}`}
					onLoad={() => {
						console.log("저화질", loadHighQuality);
					}}
				/>

위와 같은 방법을 사용하여서 저화질 사진을 업로드하고
고화질 사진이 업로드되면 바꾸는 방식을 사용하여서 처리하였다.

display none을 사용한 이유는
렌더링은 하지만 공간을 차지하지 않기 때문이다.

opacity: 0: 페이지 레이아웃에 차지하는 공간이 있고, 이벤트도 작동합니다.
visibility: hidden:페이지 레이아웃에 차지하는 공간이 있고, 이벤트는 작동하지 않습니다.

✅ 추가적인 문제점

이후 콘솔로그로 검증을 하였는데, 이미지가 디코딩되기 전에 고화질 이미지로 바뀌었다. 그래서 이를 통해 onLoad는 이미지가 로드되자말자 업데이트된다는 것을 알 수 있었고, 공식 문서를 확인해 보았다.

디코딩
인코딩된 데이터를 원래의 형식이나 데이터로 복원하는 과정입니다.
예를 들어, Base64 인코딩된 텍스트를 원래의 텍스트 형식으로 복원하거나, JPEG 형식의 이미지를 화면에 표시할 수 있는 픽셀 데이터로 변환할 때 디코딩이 발생합니다.
디코딩은 데이터를 원래의 의미나 형태로 복원하여 이를 처리하거나 분석하는 데 사용됩니다.

내가 원하는 상황에서 디코딩하려면
onLoadingComplete로 바꾸어 주어야 했다.

				<Image
					src={twoPeople[0].image}
					alt="고화질 이상형 1"
					width={330}
					height={330}
					priority
					className={`cursor-pointer sm:hover:scale-105 duration-300 ${
						loadHighQuality[0] ? "" : "hidden"
					}`}
					onLoadingComplete={() => {
						console.log("고화질", loadHighQuality);
						setLoadHighQuality((value) => [true, value[1]]);
					}}
				/>

위처럼 바꾸어 주었다.

✅ 아직 끝나지 않은 문제

예전에 저화질 사진도 이미지 업로드가 오래 걸렸던 것을 확인한 적이 있어서
이 문제를 해결했다고 보기 어렵다.

그래서 이 후 사이트에 적용하여 꾸준한 디버깅을 통해 검증을 해보아야겠다.
'무료 서버는 실제 사이트에 적용할 생각이라면 사용하지말자' 라는 교훈을 얻었다.

좋았던 점

내 프로젝트에서 아쉬웠던 고민이나 생각들을 하고 있다가
아이디어가 떠올라 직접 적용해 보고 시도해 보는 부분이 좋았다.

꾸준한 고민과 주변을 관찰하는 점들이 도움이 되었다.

어릴 때는 해결할 수 있는 아이디어가 떠올라도 생각으로 끝나기 마련이었는데
점점 시도해 가는 나의 모습에 만족스러웠고,

꾸준한 고민과 주변 프로젝트를 잘 살펴보아서 도움이 될 부분이 있다면 다음에도 적용해보겠다.