워드프레스 글 아래의 관련 글을 보다가 이미지부터 다시 확인했습니다. 여성 모델의 얼굴이 잘리고 도표의 글자가 흐려 어떤 글인지 알아보기 어려웠습니다. 이미지를 새로 만들기 전에 카드가 실제로 불러온 파일과 자르는 방식을 확인하면 같은 작업을 반복하는 일을 줄일 수 있습니다.
AI 에이전트에게 글 작성과 이미지 작업을 맡겨도 공개된 페이지에서 이런 문제가 남았습니다. 이번에는 이 블로그의 관련 글 카드를 고친 과정을 정리했습니다. 사진을 생성하는 모델의 성능 비교는 하지 않았습니다.
본문에서는 보이던 이미지가 카드에서 잘렸습니다
당시 화면에는 여섯 개의 관련 글 카드가 있었습니다. 흰옷을 입은 인물은 얼굴이 보이지 않았고 다른 인물도 머리 윗부분이 잘렸습니다. 숫자와 설명이 들어간 도표는 일부만 크게 보여 내용을 짐작하기 어려웠습니다. 글 제목을 읽기 전에는 썸네일이 무엇을 설명하는지 알 수 없었습니다.
옷 색을 비교했던 이미지 실험에서는 생성된 사진 자체를 확인했습니다. 이번 문제는 그 사진이나 도표를 작은 카드 안에 넣었을 때 생겼습니다. 원본이 괜찮아도 목록에서 같은 모양으로 보인다고 생각한 부분을 놓쳤습니다.
흐린 문제와 잘리는 문제를 따로 고쳤습니다
작은 파일을 카드 폭에 맞춰 확대하면 글자와 얼굴의 세부가 흐려질 수 있습니다. 이 경우에는 더 큰 이미지 파일이 필요합니다. 원본 파일이 충분히 커도 카드가 작은 축소본을 선택하면 그 원본을 올린 효과를 보기 어렵습니다.
워드프레스 공식 문서는 이미지에 여러 크기의 후보를 넣고 브라우저가 화면 조건에 맞게 선택하는 방식을 설명합니다. 그래서 파일 이름의 숫자만 보지 않고 브라우저가 선택한 이미지 주소와 실제 표시 폭을 함께 확인했습니다. 수정 전 모든 카드의 원본 픽셀 수를 보존한 기록은 없어 몇 배 확대됐다고 계산하지는 않았습니다.
얼굴이 잘리는 현상은 표시 방식도 확인해야 했습니다. MDN의 object-fit 설명에서 cover는 비율을 유지하면서 상자를 채우고 비율이 맞지 않는 부분은 자릅니다. contain은 이미지 전체를 상자 안에 넣으며 남는 공간이 생길 수 있습니다. 이미 잘려 저장된 축소본이라면 contain으로 바꿔도 잘린 부분은 복구되지 않습니다.
관련 글에는 사진과 도표가 섞여 있어 내용 전체를 보이는 편을 택했습니다. 이 사이트에서는 관련 글 플러그인이 요청하는 이미지 크기를 large로 바꾸고 카드에는 object-fit: contain을 적용했습니다. 테마나 플러그인이 다른 사이트에서는 같은 설정 이름이 없을 수 있습니다.
수정한 뒤에는 관련 글 화면을 다시 열었습니다
설정 파일에 변경 내용을 적는 것까지는 끝났어도 브라우저에 이전 화면이 남을 수 있습니다. 서버에 적용된 설정과 공개 페이지를 따로 확인했습니다. 아래는 수정 후 이 블로그의 관련 글 영역을 직접 캡처한 화면입니다. 카드 구성과 추천 글은 조회 시점에 따라 달라질 수 있습니다.
이번 확인에서는 불러온 이미지 주소, 이미지의 가로·세로 크기, 화면의 표시 크기와 contain 적용 여부를 대조했습니다. 얼굴이나 도표의 내용이 카드 상자 때문에 추가로 잘리는지도 화면에서 확인했습니다. 다만 원본 안에 이미 작게 들어간 글씨까지 카드에서 편하게 읽힌다고 보장하지는 않습니다.
썸네일 안에는 짧은 제목과 알아볼 수 있는 그림 정도만 남기는 편이 낫다고 판단했습니다. 상세한 표나 긴 설명은 본문에서 읽도록 두었습니다. 여성 모델도 모든 썸네일에 반복해서 넣기보다 글의 내용에 맞는 위치를 고르는 쪽으로 정리했습니다.
에이전트에게는 확인할 화면까지 지정합니다
MiniCPM에 앱을 맡긴 작업에서도 결과 파일을 받은 뒤 실제 화면을 다시 봐야 했습니다. 블로그 이미지를 맡길 때도 결과 파일과 공개된 카드의 상태를 각각 확인하도록 요청하는 것이 도움이 됩니다. 다음 문장은 이번 작업을 바탕으로 만든 요청 예시입니다.
관련 글 카드에서 실제로 선택된 이미지 주소와 원본 크기, 표시 크기를 확인해 주세요. 작은 파일의 확대와 상자에 의한 잘림을 구분하고 수정한 뒤 같은 페이지에서 이미지가 전부 보이는지 캡처해 주세요. 본문과 관련 글 카드 양쪽을 확인해 주세요.
새 대화에 작업을 넘기는 메모에도 공개 화면 확인 여부를 적습니다. 이미지 파일만 준비된 상태라면 카드 확인은 남은 일로 둡니다. 이번 썸네일 문제는 이미지를 다시 생성하기에 앞서, 어느 파일이 어떤 크기로 표시되고 있는지 확인하는 데서 풀기 시작했습니다.
