최적화: 이미지 처리 ✍️
이전 글에서 Base64 인코딩 이슈와 관련하여 Amazon S3를 다루었는데, 아직 미션이 두 가지 남았다.
가장 먼저 Base64 형식의 URL을 File 객체로 변환하는 함수가 문제였다. 일단 돌아가니까 문제가 없는 것 같지만, fetch 부분이 이상하다.
fetch 요청은, 네트워크 리소스 URL을 대상으로 한다. 그런데 사실 Base64는 네트워크 리소스가 아니다. 따라서 코드의 의도를 파악하기 어렵기 때문에 fetch를 사용하는 것은 부적절하다고 볼 수 있다. 정석과는 거리가 멀고, 단순 구현을 위한 우회적인 성격이 강한 코드였다.
다음으로는 webp(웹피)다. webp는 2010년 구글에서 개발한 이미지 포맷이다. 구글놈들이 인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 출시한 파일 포맷이다. 그렇다면, "기본적으로 webp 확장자를 이미지에 적용하여 서버에 저장하되, webp가 적용되지 않은 경우에 예외적으로 jpeg를 적용하면 이미지 최적화에 큰 도움이 되겠구먼!"이라는 생각이 든다.
fetch 사용의 부적절함을 개선하고, webp를 통해 이미지 처리 최적화를 수행하기 위해 후술하게 될 두 가지 함수를 작성하게 되었다. 처음 구현하게 된 코드이기에 이해하는 데 약간의 어려움이 있었다. 차근차근 정리해보겠당!
convertBase64ToWebpFileWithFallback() ⚙️
어쩌구저쩌구 함수는 Base64 이미지 데이터를 webp 파일로 변환하는 함수다. 코드를 하나하나 씹어보자. 이어지는 글에서는 해당 함수를 편의상 convertWebp 함수라고 부르겠다. convertWebp 함수는 크게 세 파트로 구분된다.
const convertBase64ToWebpFileWithFallback = async (
base64: string
): Promise<File> => {
return new Promise((resolve) => {
// 1. Image 객체 생성 및 base64 설정
const img = new Image();
img.src = base64;
// 2. 이미지 로드 성공 시 처리
img.onload = () => {
// 2-1. 캔버스 생성 및 크기 설정
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// 2-2. 캔버스 컨텍스트 가져오기
const ctx = canvas.getContext("2d");
if (!ctx) {
console.error("Canvas context is not available.");
// 캔버스 컨텍스트를 사용할 수 없는 경우 원본 이미지로 반환
resolve(convertBase64ToOriginal(base64)); // 폴백: 원본 이미지 반환
return;
}
// 2-3. 이미지 캔버스에 그리기
ctx.drawImage(img, 0, 0);
// 2-4. webp 변환 시도
canvas.toBlob(
(blob) => {
if (blob) {
// WebP 변환 성공
const webpFile = new File([blob], `image-${Date.now()}.webp`, {
type: "image/webp",
});
resolve(webpFile);
} else {
console.warn("webp conversion failed. Returning original image.");
// webp 변환 실패 시 원본 이미지 반환
resolve(convertBase64ToOriginal(base64)); // 폴백: 원본 이미지 반환
}
},
"image/webp",
0.8 // 품질 설정 (0.8 = 80%)
);
};
// 3. 이미지 로드 실패 시 처리
img.onerror = (err) => {
console.error("Image loading failed:", err);
// 이미지 로드 실패 시 원본 이미지 반환
resolve(convertBase64ToOriginal(base64)); // 폴백: 원본 이미지 반환
};
});
};1. Image 객체 생성 및 base64 설정 🚀
사용자가 submit 하려는 이미지의 base64 url을, base64라는 이름의 파라미터를 통해 받아온다. 이미지 객체를 생성하고, 해당 객체의 src에 파라미터를 통해 받아온 base64 url을 할당한다.
2. 이미지 로드 성공 처리 🚀
2-1. 캔버스 생성 및 크기 설정
document.createElement("canvas")를 통해 canvas라는 HTML 요소를 동적으로 생성한다. 이렇게 생성된 캔버스는 메모리에서만 사용되며 DOM에 추가되지는 않는다.
img.width와 img.height는 로드된 이미지의 원본 크기를 나타내는데, 캔버스 크기를 이미지 크기와 동일하게 설정하여 왜곡 없이 이미지를 처리하기 위해 canvas.width와 canvas.height에 각각의 값을 할당하게 된다.
2-2. 캔버스 컨텍스트 가져오기
getContext("2d")는 캔버스 요소에서 2D 그래픽 작업을 수행하기 위한 컨텍스트를 가져오는 메서드다. 한마디로, 캔버스 컨텍스트란 미술 작업을 위한 도구들이 들어 있는 화구 가방 같은 개념이다.
2D 그래픽 작업을 위한 화구 가방이 잘 가져와지지 않았다면, 후술하게 될 convertBase64ToOriginal() 함수를 실행하게 된다.
2-3. 이미지 캔버스에 그리기
이제 화구 가방에서 drawImage 함수라는 도구를 꺼내서 이미지를 그리게 된다. 해당 코드에서 캔버스의 시작 좌표는 (0, 0)으로 설정했고, 각각은 x좌표와 y좌표를 뜻한다.
2-4. Webp 변환 시도
toBlob 메서드를 통해 캔버스 데이터를 webp 포맷의 Blob 객체로 변환한다.
toBlob 메서드에는 세 가지 매개변수가 있다. 첫 번째 매개변수에는 Blob 객체를 처리하는 콜백 함수를 전달한다. 두 번째 매개변수에는 변환할 이미지 포맷을 명시하고, 마지막 매개변수에는 webp 품질 설정에 대한 내용을 전달한다.
첫 번째 매개변수인 Blob 객체를 처리하는 콜백 함수에서는, Blob 생성에 성공하면 해당 Blob 객체를 기반으로 새로운 webp 파일을 생성한다. Blob 생성에 실패하면 convertBase64ToOriginal() 함수를 통해 fallback 처리를 하여 원본 이미지를 반환하게 된다.
3. 이미지 로드 실패 처리 🚀
2번 섹션에서는 이미지가 로드되었음을 전제로 ctx나 blob에 대한 예외 처리를 한 것이다. 하지만 위 코드는 이미지 자체가 로드에 실패했을 경우를 의미한다. 2번에서의 예외 처리와 마찬가지로 이미지 자체가 로드에 실패했다면 convertBase64ToOriginal() 함수를 실행하게 된다.
convertBase64ToOriginal() ⚙️
아래의 함수는 편의상 original 함수라고 부르겠다. original 함수는 base64 문자열을 원본 이미지 파일로 변환하는 기능을 수행한다.
const convertBase64ToOriginal = async (src: string) => {
const base = atob(src.split(",")[1]);
const blob = Uint8Array.from(base, (char) => char.charCodeAt(0));
console.log({ base, blob });
return new File([blob], `image-${Date.now()}.jpeg`, { type: "image/jpeg" });
};
const base = atob(src.split(",")[1]);
atob() 함수는 Base64로 인코딩된 문자열 데이터를 디코딩 한다. split() 메서드를 사용해 데이터 URI에서 Base64로 인코딩된 실제 데이터 부분만 추출한다. 즉, atob()은 Base64로 인코딩된 데이터를 ASCII 문자열 형식으로 복원한다.
const blob = Uint8Array.from(base, (char) => char.charCodeAt(0));
Uint8Array.from() 메서드는 base에서 복원된 ASCII 문자열을 바이트 배열로 변환한다. (char) => char.charCodeAt(0)는 각 문자의 유니코드 값을 반환하여, 이를 8비트(1바이트) 배열 형태로 변환한다. 실질적으로 이는 Base64로 인코딩된 문자열을 이진 데이터로 변환하는 과정이라고 할 수 있다.
return new File([blob], `image-${Date.now()}.jpeg`, { type: "image/jpeg" });
최종적으로 File 객체를 생성하여 바이너리 데이터(위에서 변환된 blob)를 파일 객체로 변환한다. 이렇게 변환된 객체는 실제 파일처럼 취급할 수 있으며, 파일 이름과 MIME 타입을 지정하여 반환한다.
도식화 및 최적화 결과 ⚙️
위 flow를 도식으로 만들어봤다.
파일 크기가 클수록 극적인 용량 축소를 확인할 수 있는데, 우선은 동일한 꿀 귀요미 사진으로 테스트를 진행해 봤다.
회고 🌿
며칠 전, 연말을 기념해 친구와 함께 회를 한 사바리 잡수며, "어떻게 하면 꾸준할 수 있을까?", "아니 일단 꾸준함이란 무엇일까?"라는 질문이 해물라면과 함께 우리의 대화 테이블에 올랐다.
꾸준함은, 조금의 여백을 두는 태도라고 생각한다. 하기 싫은 일을 억지로 계속하는 것이 꾸준함이 아니라, 조금 더 하고 싶을 때 멈춰서 열정 게이지에 여백을 남겨두는 것. 그래서, 하기 싫은 순간 자체를 최소화하는 것. 지속 가능성.
결국 무언가를 이루려면 꾸준함이 최고의 전략이다. 그리고 그 꾸준함은 '조금의 여백'에서 비롯된다. 아마 내가 존경하는 사람들에게서 왜인지 모를 여유가 느껴졌던 이유도 그런 것 아닐까, 싶다.
물론, 때로는 타이트하게 일을 처리해야 할 때도 있지만, 내가 정말로 중요하게 여기는 것일수록 의도적으로 여백을 두는 것이 필요하다. 매일 입을 수 있는 건 양복바지가 아니라, 결국 츄리닝일 테니까.
