웹사이트 로딩 속도 최적화: 파이썬(FastAPI) 이미지 WebP 자동 변환 및 CDN 적용기

👤 인스피

조회 수 16

1. 첫 번째 시도: 파이썬(Python) `Pillow`로 이미지 WebP 자동 변환하기

가장 먼저 해야 할 일은 용량이 무식하게 큰 원본 JPG, PNG 파일들의 덩치를 줄이는 것이었습니다. 구글이 권장하는 '차세대 이미지 형식'인 WebP는 기존 JPG 대비 화질 손실은 거의 눈에 띄지 않으면서 용량은 무려 50%~80%까지 획기적으로 줄여주는 마법의 포맷입니다.

유저가 사이트에 이미지를 업로드할 때, 무거운 원본을 그대로 저장소에 넣는 멍청한 짓을 막아야 했습니다. 그래서 저는 FastAPI 서버의 이미지 업로드 API 중간에 파이썬의 대표적인 이미지 처리 라이브러리인 Pillow를 투입했습니다.

코드는 생각보다 간단했습니다. 유저가 이미지를 올리면, 백엔드 메모리에서 파일을 가로채어 가로 해상도를 모바일 화면에 충분한 1200px 정도로 줄이고(Resize), 포맷을 강제로 .webp로 변환하여 품질(Quality)을 80 수준으로 압축해 버렸습니다.

from PIL import Image
import io

# FastAPI로 들어온 이미지 파일을 WebP로 압축하는 핵심 로직
async def optimize_image(file_bytes):
    image = Image.open(io.BytesIO(file_bytes)).convert("RGB")
    
    # 사이즈 조정 (최대 너비 1200px 기준 비율 축소)
    image.thumbnail((1200, 1200))
    
    output = io.BytesIO()
    # 대망의 WebP 변환 및 압축!
    image.save(output, format="WEBP", quality=80)
    return output.getvalue()

이 짧은 코드 몇 줄이 가져온 결과는 엄청났습니다. 장당 5MB가 넘어가던 초고화질 사진들이 화질 저하 없이 단 150KB 수준으로 쪼그라들었습니다. 데이터 다이어트에 완벽하게 성공한 것이죠.

2. 두 번째 시도: 데이터베이스 대신 전용 스토리지(Supabase Storage)와 CDN의 힘 빌리기

이미지 용량을 줄였다고 최적화가 끝난 것은 아닙니다. 이렇게 가벼워진 WebP 이미지를 유저의 화면까지 '얼마나 빨리' 배달해 주느냐가 관건이었습니다.

초보 시절엔 이미지 파일을 데이터베이스(DB)에 Base64 텍스트 형태로 우겨넣거나, 서버 본체 폴더에 덜렁 저장하기도 했습니다. 하지만 이렇게 하면 이미지를 불러올 때마다 DB와 서버 CPU가 끙끙대며 일해야 해서 전체 사이트가 멈칫거리는 병목 현상이 발생합니다.

그래서 저는 정적 파일 처리에 특화된 Supabase Storage로 모든 이미지를 이사시켰습니다. Supabase Storage는 AWS S3와 비슷하게 이미지나 영상 파일만 전문적으로 보관해 주는 거대한 창고입니다. 백엔드(FastAPI)는 압축이 끝난 WebP 이미지를 곧바로 Supabase Storage로 던져버리고, DB에는 이미지가 저장된 'URL 주소'만 달랑 한 줄 기록하도록 구조를 싹 뜯어고쳤습니다.

여기에 더해, Supabase에서 기본적으로 제공하는 CDN(콘텐츠 전송 네트워크) 기능이 날개를 달아주었습니다. 한국에 있는 유저가 제 사이트에 접속하면 서울에 있는 캐시 서버에서 이미지를 쏴주고, 미국에 있는 유저가 접속하면 미국 캐시 서버에서 이미지를 쏴주는 식입니다. 메인 서버는 이미지 전송이라는 중노동에서 완벽하게 해방되었습니다.

3. 결과: 로딩 시간 3초 ➡️ 0.5초, 코어 웹 바이탈(LCP) 지표 달성

이 두 가지 작업을 마친 뒤, 다시 지인의 스마트폰을 빌려 사이트에 접속해 보았습니다. 화면을 스크롤할 때마다 수십 장의 이미지들이 지연시간 0.1초도 없이 화면에 '탁탁탁' 박히듯 즉각적으로 로딩되는 것을 볼 수 있었습니다. 체감 속도가 문자 그대로 '빛'이 되었습니다.

가장 뿌듯했던 순간은 며칠 뒤 구글 서치 콘솔(Search Console)에 들어갔을 때입니다. 경고등이 번쩍이던 '코어 웹 바이탈(Core Web Vitals)' 메뉴의 LCP(최대 콘텐츠 렌더링 시간) 지표가 '개선 필요'에서 영롱한 초록색 '좋음' 상태로 바뀌어 있었습니다. 구글에게 "내 사이트 엄청 빠르고 쾌적하니까 검색 순위 팍팍 올려줘!"라고 떳떳하게 어필할 수 있는 완벽한 스펙을 갖춘 셈입니다.

맺으며: SEO의 숨은 권력자, '속도'를 잡아라

구글 애드센스 승인이나 검색 엔진 최적화(SEO)를 이야기할 때, 보통 글자 수나 키워드 배치 같은 '텍스트'에만 집중하는 경향이 있습니다.

하지만 아무리 좋은 글을 써두어도, 유저가 그 글을 보기 위해 화면이 뜰 때까지 3초 이상을 기다려야 한다면 그 사이트는 구글에게 버림받게 됩니다. 기술적인 최적화를 통해 사이트의 기초 체력을 튼튼하게 다져두는 것이 진짜 장기적인 SEO의 승부처라는 것을 이번 기회에 깊이 깨달았습니다.

서버 비용을 한 푼이라도 아끼고 사이트 성능을 극한으로 끌어올려야 하는 1인 개발자분들! 지금 당장 내 사이트에 올라가는 이미지들이 JPG인지, WebP인지 꼭 확인해 보시기 바랍니다. 파이썬 코드 단 10줄만 추가하면 여러분의 무거웠던 사이트도 깃털처럼 날아오를 수 있습니다.