Selenium으로 책 썸네일 원본 3,000개 교체하기

예전에 Velog에 쓴 글을 다시 옮겼다.

프로젝트 배포 뒤 Slack에 책 썸네일 화질이 너무 안 좋다는 피드백이 올라왔다. 당시 내 담당은 사용자 화면이 아니라 상품을 관리하는 어드민이었다. 그래도 화면 설정 문제인지 원본 데이터 문제인지는 금방 확인할 수 있을 것 같아서 직접 봤다.

처음엔 컴포넌트 옵션 하나 바꾸면 될 줄 알았다. 실제로는 데이터베이스에 저장된 약 3,000권의 이미지 URL을 바꿔야 했다.

일단 next/image의 quality를 바꿔봤다

사용자 화면은 next/image로 책 표지를 렌더링하고 있었다. 기본 압축 품질 때문에 흐려 보이는 건가 싶어서 quality={100}으로 바꿔봤다.

화질은 거의 달라지지 않았다. 생각해보면 quality는 압축 정도를 조절할 뿐이다. 작은 원본에 없던 디테일을 만들어주지는 않는다. 입력 이미지부터 다시 봤다.

목록 이미지와 상세 이미지 크기가 달랐다

책 이미지 URL은 외부 도서 API에서 받아 데이터베이스에 저장하고 있었다. API가 반환한 주소는 목록용 이미지였고 원본 너비가 200px에 불과했다. 화면에서는 이 이미지를 더 크게 표시하고 있었기 때문에 흐릿해질 수밖에 없었다.

같은 책의 상세 페이지를 확인하자 너비 500px인 별도 이미지가 사용되고 있었다.

화면에서는 200px 이미지를 확대하고 있었다. next/image 설정을 더 만지는 대신 데이터베이스에 저장된 목록용 이미지 URL을 바꿔야 했다.

3,000권을 직접 바꿀 수는 없었다

한두 권이면 직접 바꾸면 되지만 운영 중인 책은 약 3,000권이었다. ISBN으로 책을 검색하고 상세 페이지로 이동해 고해상도 이미지 URL을 가져오는 Selenium 스크립트를 작성했다.

수천 번 페이지를 이동해야 해서 요청 사이에 간격을 뒀다. 중간에 하나가 실패해도 전체 작업이 멈추지 않게 예외와 처리 로그도 남겼다. 전체 수집에는 약 4시간이 걸렸다.

수집 결과를 데이터베이스에 바로 쓰지는 않았다. 제목, ISBN, 기존 URL, 교체할 URL을 한 표로 정리했다. pandas로 .xlsx를 만든 뒤 직접 확인하고 반영했다.

import pandas as pd

df = pd.DataFrame(results)
df.to_excel('book-thumbnails.xlsx', index=False)

quality는 다시 75로 돌렸다

원본을 교체한 뒤 next/image의 quality는 기존 값인 75로 돌렸다. 압축 품질을 무작정 높여 파일 크기를 늘리지 않아도 입력 원본만 바꾸면 책 표지가 선명해졌다.

이 작업 전후로 로딩 성능이나 전환 지표를 따로 측정하지는 않았다. 목표는 이미 저장돼 있던 약 3,000권의 이미지 URL을 더 큰 원본으로 바꾸는 것이었다.

Selenium으로 외부 페이지를 읽는 방식은 DOM 변경에 취약하므로 상시 수집 파이프라인으로 두지 않았다. 당시 API에서 제공하지 않던 원본 URL을 기존 데이터에 채우기 위한 작업으로만 사용했다.