깔끔한 썸네일이 오히려 독자를 쫓아낸다면 믿겠습니까? 저도 처음엔 말도 안 된다고 생각했습니다. 블로그 카드 UI를 처음 만들면서 이미지 크기가 제각각인 문제를 해결하느라 몇 주를 보냈는데, 막상 자동화를 완성하고 나서 새로운 문제가 기다리고 있었습니다. 썸네일 자동화의 시작부터 그 함정까지, 제가 직접 겪은 과정을 풀어보겠습니다.
object-fit으로 크롭 문제 해결하기
처음 블로그 카드 UI를 만들었을 때, 가장 먼저 부딪힌 문제는 이미지 크기 불일치였습니다. 가로 이미지가 들어오면 카드가 납작해지고, 세로 이미지가 들어오면 카드가 길쭉하게 늘어났습니다. 당시 저는 height: 200px을 고정하고 overflow: hidden으로 넘치는 부분을 잘라내는 방식을 썼는데, 이게 문제의 시작이었습니다.
세로 이미지에서 피사체가 가운데 아래쪽에 있으면, 잘린 영역이 배경만 덩그러니 보이는 경우가 생겼습니다. 인물 사진인데 얼굴이 통째로 날아가고 하늘만 남는 상황, 한 번쯤은 경험해 보셨을 겁니다.
여기서 object-fit: cover가 해결책이 됩니다. object-fit이란 이미지나 비디오 같은 대체 콘텐츠 요소가 주어진 컨테이너 안에서 어떻게 채워질지를 결정하는 CSS 속성입니다. cover 값을 쓰면 컨테이너 비율을 유지하면서 이미지를 가득 채우되, 비율이 맞지 않는 부분은 자동으로 크롭합니다. overflow: hidden으로 억지로 잘라내는 방식과는 차원이 다릅니다.
aspect-ratio 속성을 함께 쓰면 효과가 더 좋습니다. aspect-ratio란 요소의 가로 대 세로 비율을 고정하는 속성으로, 16 / 9처럼 지정하면 어떤 화면 크기에서도 일정한 비율이 유지됩니다. 이 두 속성의 조합만으로 카드 높이가 들쭉날쭉하던 문제는 깔끔하게 정리됐습니다(출처: MDN Web Docs).
object-position과 AI 분석으로 초점 자동 제어하기
object-fit: cover를 적용하고 나서 새로운 문제가 생겼습니다. 크롭 자체는 되는데, 이미지에서 중요한 부분이 잘리는 경우가 여전히 있었습니다. 인물 사진에서 얼굴이 이미지 하단에 배치된 경우, 크롭 후에 머리 상단이 잘려나가고 배경만 남는 상황이 반복됐습니다.
object-position 속성으로 이 문제를 어느 정도 제어할 수 있습니다. object-position이란 object-fit이 적용된 이미지의 초점 위치를 지정하는 속성입니다. center top으로 설정하면 이미지 상단을 기준으로 크롭하고, center bottom으로 설정하면 하단을 기준으로 크롭합니다. 인물 사진은 top, 음식이나 제품 사진은 center, 풍경이나 건물 사진은 bottom이 대체로 자연스럽습니다.
문제는 이미지마다 수동으로 이 값을 지정하는 게 현실적으로 불가능하다는 점입니다. 저는 이 부분을 Claude API로 해결했습니다. 이미지를 업로드할 때 API에 "이 이미지의 주요 피사체가 상단, 중단, 하단 중 어디에 위치하는지"를 분석하도록 요청하고, 그 결과를 object-position 값에 자동으로 매핑하는 파이프라인을 구성한 겁니다. 솔직히 이건 예상 밖이었습니다. 분류 정확도가 꽤 높아서 수동 교정이 필요한 경우가 전체의 10% 남짓에 불과했습니다.
이 파이프라인을 구성하면서 확인한 자동 분류 기준은 대략 이렇습니다.
- 인물, 얼굴 중심 이미지 →
center top - 제품, 오브젝트 중심 이미지 →
center - 풍경, 건물, 배경 중심 이미지 →
center bottom - 텍스트 오버레이가 있는 이미지 →
center
이 분류가 고정된 정답은 아닙니다. 이미지 구성에 따라 예외가 생기기 때문에, 수동 오버라이드 기능도 함께 만들어두는 편이 낫습니다.
DALL-E API로 썸네일 자동 생성하기
크롭과 초점 문제를 해결하고 나서, 아예 썸네일을 처음부터 자동 생성하는 실험도 해봤습니다. 포스트 제목과 카테고리를 AI에 넘기면 어울리는 이미지 프롬프트를 만들어주고, 그 프롬프트로 DALL-E API를 호출해 썸네일을 생성하는 방식입니다.
결과물의 스타일 일관성은 기대 이상이었습니다. 모든 썸네일이 같은 색조와 구도로 나오니, 블로그 전체를 한눈에 봤을 때 시각적 통일감이 분명히 생겼습니다. 처음 피드를 완성했을 때 저도 꽤 만족스러웠습니다.
다만 생성 시간이 포스트당 8~15초 정도 소요되고, API 호출 비용도 누적됩니다. 초기에는 포스트 저장 시 동기적으로 생성했는데, 이 대기 시간이 작업 흐름을 끊는다는 느낌이 강했습니다. 결국 초안 저장 후 백그라운드에서 비동기로 생성하는 방식으로 전환했습니다. 이렇게 하면 글 작성 흐름을 방해하지 않고, 발행 전에 생성된 썸네일을 확인하고 교체할 여유도 생깁니다.
Next.js를 사용한다면 next/image 컴포넌트를 활용할 수 있습니다. next/image란 Next.js가 제공하는 이미지 최적화 컴포넌트로, 레이아웃 시프트(Layout Shift) 방지, 자동 크기 조정, 포맷 최적화 등을 자동으로 처리해줍니다. 레이아웃 시프트란 이미지가 로딩되면서 주변 콘텐츠가 밀려나는 현상을 말하는데, 이게 사용자 경험을 상당히 해칩니다. next/image를 쓰면 이 부분도 같이 해결됩니다(출처: Next.js 공식 문서).
AI 썸네일 자동화의 함정, 균일함이 식상함이 된다
제가 가장 뒤늦게 깨달은 문제가 이 부분입니다. 자동 생성된 썸네일로 피드를 채우고 나서 몇 주가 지났을 때, 독자 피드백 중에 "어느 글이 어느 글인지 헷갈린다"는 말이 있었습니다. 처음엔 무슨 의미인지 잘 몰랐는데, 직접 피드를 스크롤해보니 바로 이해됐습니다. 썸네일이 모두 비슷한 색조와 구도라 눈에 걸리는 게 없었습니다.
썸네일의 역할은 단순히 빈 공간을 채우는 장식이 아닙니다. 독자가 피드를 훑을 때 특정 포스트를 기억하게 만드는 시각적 앵커 역할을 합니다. 모든 썸네일이 동일한 스타일이면, 뇌가 개별 포스트를 구분하는 단서를 잃어버립니다. 균일함이 오히려 가독성을 해치는 역설입니다.
저는 이 문제를 카테고리별로 색상 팔레트를 다르게 적용하는 방식으로 어느 정도 완화했습니다. 기술 포스트는 차가운 청색 계열, 리뷰 포스트는 따뜻한 주황 계열처럼 카테고리 신호를 썸네일에 심는 겁니다. 완전한 해결책은 아니지만, AI 생성과 수작업 교정을 병행하는 하이브리드 워크플로우가 현실적으로 가장 나은 선택이라는 결론에 이르렀습니다.
저작권 문제도 짚어야 합니다. AI 생성 이미지의 상업적 활용 가능 범위는 플랫폼마다 다르고, 학습 데이터의 저작권 문제는 현재도 법적 논쟁 중입니다. 편의성에만 집중하다 보면 이 부분을 놓치기 쉬운데, 사용 중인 생성 API의 이용약관을 반드시 확인해두는 것이 좋습니다.
자동화는 분명히 효율을 높여줍니다. 하지만 결국 콘텐츠의 개성은 사람이 만듭니다. object-fit과 AI 파이프라인으로 기술적 문제를 해결하고, 그 위에 편집자의 눈을 더하는 것이 지금 제가 택한 방식입니다. 썸네일 자동화를 고민하고 있다면, 기술 설정을 마친 뒤에도 피드를 직접 훑어보는 습관을 권합니다. 숫자로는 잡히지 않는 문제가 거기서 보입니다.
참고:
- MDN Web Docs, "object-fit" — https://developer.mozilla.org/ko/docs/Web/CSS/object-fit
- Next.js 공식 문서, "next/image" — https://nextjs.org/docs/app/api-reference/components/image
- Medium, "Next/Image를 사용한 이미지 최적화" — https://medium.com/@iamkjw/next-image를-사용한-이미지-최적화