테마 깨짐·데이터 구멍, 한 세션에 몰아 처리한 날

오전에 슬랙을 보다가 누군가 블로그 라이트모드 캡처를 공유했는데, 코드블록 글자가 배경이랑 거의 구분이 안 됐다. "나중에 보자" 하고 넘겼다가 결국 바로 손댔다. 그게 오늘 세션의 시작이었다.

UI 퀄리티 — 블로그·kpopdex 동시 손보기

블로그 CSS부터 열어봤더니 코드블록 글자색이 하드코딩된 값이었다. 다크모드는 멀쩡한데, 라이트모드로 전환하면 대비가 WCAG 기준 미달이었다. var(--fg) 변수로 교체해서 테마가 바뀌어도 자동 대응되게 고쳤다. 그러다 보니 눈에 들어오는 게 더 있었다 — 네비, 버튼, 카테고리 뱃지 색이 전부 각자놀기였다. 결국 라이트모드 전반을 한 번에 정비했다.

그러면서 kpopdex 탭을 옆에 띄워놨는데, 회사 목록 카드에서 긴 이름이 중간에 툭 잘리는 게 보였다. 원인은 그리드 컬럼이 1fr로 고정돼 있어서 텍스트가 넘칠 공간 자체가 없었던 것. minmax(0, 1fr)로 바꾸고, 글자 크기도 1rem으로 내려서 긴 소속사명이 단어 중간에 잘리지 않게 했다. 검색박스 스타일도 함께 정리하고, 마지막으로 회사별 시그니처 컬러가 카드에 반영되게 마무리했다.

레거시 데이터 구멍 메우기 — blindboxdex backfill

UI 작업을 마무리하고 나니 blindboxdex 쪽에서 밀려온 이슈가 있었다. 이미지가 NULL인 피규어 행들이 여전히 남아있다는 것. 이건 초기 크롤링 시절에 slug 체계가 지금이랑 달랐던 레거시 행들이라, upsertFigure에서 slug 기반 UPSERT가 아예 매칭을 못 하고 있었다.

두 가지를 고쳤다:

• --backfill-nulls 모드 진입 시: slug 대신 brand + name 조합으로 대상 행을 찾아 이미지 URL을 패치
• 일반 upsert 흐름: slug 매칭 실패 시 series_id + name으로 폴백 룩업을 추가

// 폴백: short-slug 레거시 행 대응
if (!existing) {
  existing = await db.query(
    `SELECT id FROM figures WHERE series_id = $1 AND name = $2`,
    [seriesId, name]
  );
}

이 패치를 적용하고 backfill을 돌렸더니 NULL 이미지 행들이 채워지기 시작했다. 결과는 CLAUDE.md에 날짜와 함께 기록해뒀다.

kfoodlab WebP 전환 — LCP 7초에서 탈출

세션 후반엔 kfoodlab 히어로 이미지 문제도 처리했다. LCP가 7초 언저리였는데, PNG/JPEG 그대로 서빙하고 있어서였다. 기존 이미지를 WebP로 일괄 변환하는 파이썬 스크립트를 작성하고, image_gen.py에서도 이후 생성되는 이미지가 자동으로 WebP로 나오게 파이프라인을 수정했다. 히어로 이미지들(bibimbap, buldak-ramen-hacks, gimbap)을 변환 적용했다.

오늘 세션을 돌아보면, 애초에 블로그 CSS 하나만 건드리려다가 연쇄적으로 퍼진 작업이었다. 시각적으로 뭔가 어긋나 있는 걸 보면 그냥 넘기지 못하는 버릇이 있는데 — 결과적으로는 레거시 데이터 구멍이랑 성능 이슈까지 한 세션에 소화하게 됐다. 계획된 게 아니라 눈에 보이는 것들을 우선순위로 당겼던 날이었다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 커피머신 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.