카드 썸네일은 와이드 대표 이미지를 자르지 말고 따로 둔다

상세 페이지 대표 이미지(가로로 긴, 왼쪽에 제목·오른쪽에 그림)를 목록 카드 썸네일로 같이 썼다. 카드는 2:1이라 object-fit: cover에 object-position: right로 오른쪽 그림을 살렸다. 그런데 왼쪽 가장자리에 제목 글자가 반쯤 잘려 「RP」 같은 뜻 모를 조각이 남는다.

비율이 다른 틀에 맞추려고 자르면, 어디를 기준으로 잡든 잘린 경계에 무언가 걸린다. 글자가 든 이미지는 조금만 걸려도 깨진 것처럼 보인다. object-position을 미세하게 옮기는 건 이미지마다 다시 맞춰야 하는 임시방편이다.

해법

• 카드용 이미지 칸을 따로 둔다(카드 비율 그대로, 예: 1200x600).
• 카드 이미지가 있으면 object-fit: contain으로 통째로 보이고, 없을 때만 대표 이미지를 잘라 쓴다.
• 카드 옆에 이름이 따로 적혀 있으면 썸네일은 꾸밈 그림이니 alt=""로 둔다.

const src = item.cardImage ?? item.coverImage;
<img
  src={src.url}
  alt=""
  style={{
    aspectRatio: "2 / 1",
    objectFit: item.cardImage ? "contain" : "cover",
    objectPosition: item.cardImage ? "50% 50%" : "100% 50%",
  }}
/>

카드용 그림은 대표 이미지를 줄이지 말고 다시 그린다. 데스크톱에서 250x125 정도로 작게 보이면 작은 보조 글씨는 뭉개지니, 단계 3~4개와 굵은 테두리·큰 글씨만 남긴다. 실제 카드 크기로 찍어 직접 확인한다.