광고 제거·카드 리뉴얼·썸네일 자동화, 세 갈래를 한 번에

오늘 저녁 세 시간은 꽤 밀도가 높았다. 큰 줄기만 추리면 ① 여러 서브 사이트의 광고 전면 제거, ② pet 사이트 카드·히어로 디자인 리뉴얼, ③ Gemini 기반 썸네일 자동 생성 봇 연결. 얼핏 제각각처럼 보이지만 실은 하나의 맥락으로 연결돼 있다. "슬롭(slop) 냄새 지우기"라는 단어가 이 시간 내내 머릿속에 맴돌았다.

왜 하필 오늘이었나 — 우선순위 배경

며칠 전 AI 이미지 사용 금지 룰이 해제됐다(6/23). 그게 트리거였다. 이전까지는 카드에 아이콘 박스를 넣거나 히어로에 이모지를 때워서 "일단 보여주기" 식으로 유지했는데, 룰이 풀리자마자 "그러면 제대로 된 썸네일을 박아야 하지 않나"라는 생각이 들었다. 동시에 insurance·gov 서브 사이트들은 광고 태그가 레이아웃 곳곳에 어지럽게 박혀 있어서, 새 카드 디자인을 얹기 전에 먼저 청소를 해야 한다는 판단이 섰다. 순서가 자연스럽게 정해졌다: 광고 빼기 → 레이아웃 정리 → 디자인 올리기 → 봇 자동화.

광고 대청소: insurance·gov 서브 사이트

insurance와 gov 사이트 Post 레이아웃을 열어보면 AdSense, Mobon, Coupang 태그가 글 상단·하단·카테고리 페이지·match 페이지 등 군데군데 박혀 있었다. 수익화 목적으로 넣어뒀던 건데, 정작 사용자 UX를 저해하는 정도가 크고 실제 수익 기여도가 낮다는 판단 하에 전부 들어냈다.

광고를 빼고 나니 두 번째 문제가 드러났다. 레이아웃이 광고 박스를 감싸던 flex 구조로 남아 있어서 본문이 한쪽으로 쏠렸다. gov 사이트는 여기서 한 발 더 나아가 Post 레이아웃을 단일 열로 정리하고, TOC(목차)를 사이드에서 인라인으로 내렸다. 사이드바를 없애면 모바일 대응도 훨씬 단순해진다는 부가 효과도 있었다.

PostMetrics 컴포넌트의 아이콘도 이 시간에 같이 SVG로 교체했다. 이모지로 쓰던 👁‍🗨, 📅 같은 것들이 OS·브라우저마다 렌더링이 제각각이라 오래 전부터 눈에 거슬렸는데, 광고 제거 작업으로 어차피 파일을 열어 놓은 김에 처리했다.

pet 사이트 카드·히어로 리뉴얼

광고 청소가 끝나고 본론으로 들어갔다. pet 사이트의 카드 디자인을 잡지 스타일로 바꾸는 작업이다.

기존 카드 구조는 이렇게 생겼다:

┌─────────────────────┐
│  [아이콘 박스]       │  ← 이게 문제
│  카테고리 라벨       │
│  제목               │
│  날짜               │
└─────────────────────┘

아이콘 박스는 처음엔 "카드가 너무 텍스트만 있으면 허전하다"는 이유로 넣었는데, 막상 실제로 보면 그냥 배경색 덩어리에 이모지 하나 올려놓은 것 이상이 아니었다. 잡지 카드 느낌과는 거리가 멀었다. 그래서 일단 아이콘 박스를 완전히 걷어내고 텍스트 카드(카테고리 라벨 + 제목 + 요약 + 날짜)로 정리했다. 그게 첫 번째 커밋이었다.

히어로 영역의 이모지도 SVG로 교체했다. "de-slop"이라는 단어를 커밋 메시지에 쓸 정도로, 이모지 히어로는 AI가 대충 생성한 느낌을 강하게 풍겼다. SVG로 바꾸니 스케일링도 자유롭고 다크 모드 대응도 깔끔해졌다.

카드 리뉴얼 작업 중에 카테고리 페이지에서 한글 깨짐 버그도 발견했다. 원인은 DB에 저장된 cat.name 값 자체가 mojibake 상태였던 것. 이걸 그대로 h1에 뿌리고 있었으니 깨질 수밖에. categoryName(slug 기반)으로 대체하고 DB 카테고리명도 직접 정정했다. 디자인 작업 중에 데이터 버그를 잡는 흔한 패턴이다.

Gemini 썸네일 자동 생성 봇 연결

카드 구조가 정해지고 나니 핵심 문제가 남았다: "그러면 각 글의 플랫 일러스트 썸네일은 어떻게 만들지?" 수작업으로 하나씩 뽑는 건 현실적으로 불가능하다. 봇이 글 발행 시 자동으로 생성해야 한다.

작업 흐름은 대략 이렇게 구성했다:

기존에 generate.py는 본문 생성 흐름만 담당하고 있었는데, 썸네일 생성 로직을 gen_thumb.py로 분리해서 독립적으로 관리할 수 있게 했다. 프롬프트 튜닝이 필요할 때 본문 생성 코드를 건드리지 않아도 된다는 점이 중요했다.

featuredImage 연결이 생각보다 손이 갔다. 프런트엔드 컴포넌트가 featuredImage가 없는 글을 오랫동안 전제로 짜여 있었고, 이제 이 필드가 있는 글과 없는 글을 동시에 처리해야 하는 상황이 됐다. 조건 분기를 PostCard에 넣고 null 체크도 꼼꼼히 했다.

마무리: CLAUDE.md 갱신과 포트폴리오 썸네일

일련의 작업이 마무리되면서 CLAUDE.md 디자인 지침 문서도 갱신했다. AI 이미지 금지 룰 해제 내용, 썸네일 생성 방식, 서빙 경로, 봇 자동화 흐름, 히어로 SVG 방침을 정리했다. 이런 문서를 안 써두면 두 달 후에 내가 왜 이렇게 했는지 까먹는다.

포트폴리오 사이트의 pet.hedvion.com 대표 썸네일도 갱신했다. 작은 작업이지만 새 카드 디자인이 외부에 보이는 첫 인상이기 때문에 빠뜨릴 수 없었다.

세 시간 동안 커밋이 아홉 개 나왔다. 숫자만 보면 많아 보이지만, 실제로는 하나의 방향을 향해 순서대로 정리해 나간 흐름이었다. 광고를 걷어내고, 레이아웃을 정돈하고, 디자인을 올리고, 봇이 그걸 자동으로 유지하게 만들었다. 다음 단계는 기존 발행된 글들에 썸네일을 일괄 소급 생성하는 배치 작업이 될 것 같다.

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

• 모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →

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