원본 사진에는 얼굴이 전부 있는데 카드에서는 이마나 턱이 잘릴 때가 있습니다. 이 문제는 파일이 잘린 것인지 화면의 틀에서 일부가 가려진 것인지부터 구분해야 합니다. 비율을 찌그러뜨리지 않고 확인하는 순서를 알아봅니다.
파일 자체가 잘렸는지 먼저 확인하기
다운로드한 원본을 사진 앱에서 열어보세요. 그 파일에도 필요한 부분이 없다면 내보내기나 자르기 단계의 문제입니다. 원본에는 있는데 웹 카드에서만 없다면 카드 비율과 표시 방식을 확인할 차례입니다. 파일을 다시 압축하는 것으로 화면 틀의 잘림은 해결되지 않습니다.
같은 파일이 상세 화면에서는 온전히 보이고 목록 카드에서만 잘리는지도 비교합니다. 목록과 상세가 서로 다른 비율을 쓸 수 있기 때문입니다. 어느 화면에서 무엇이 사라졌는지 적어두면 운영자에게 수정 요청할 때 원인을 설명하기 쉽습니다.
틀 채우기와 전체 보이기의 차이
웹의 object-fit 속성에서 cover는 비율을 유지하면서 틀을 채우므로 일부가 가려질 수 있고, contain은 전체 이미지가 들어가도록 맞추므로 빈 공간이 생길 수 있습니다. fill은 비율이 다른 틀에 맞출 때 늘어날 수 있습니다. 사용자는 메뉴 이름이 다르더라도 결과를 기준으로 구분할 수 있습니다.
여백 없는 카드가 필요하면 일부 잘림을 감수하고 중요한 내용을 안전한 위치에 놓아야 합니다. 제품 전체의 형태가 중요한 자료라면 여백이 있더라도 전체가 보이는 편이 유용합니다. 선명도 문제와 표시 비율 문제를 섞어 판단하지 마세요.
비율이 다른 원본을 억지로 늘리지 않기
가상 예시로 세로 사진을 가로 16:9 카드에 넣으면 전체 표시에서는 양옆 여백이 생기고, 틀 채우기에서는 위아래가 많이 가려질 수 있습니다. 가로·세로 값을 따로 강제 입력해 얼굴이 넓어지는 방식은 피합니다. 비율을 유지한 상태에서 자르거나 여백을 넣는 방법을 비교하세요.
카드용 사본을 만든다면 원본을 보존하고 카드 비율에 맞춰 잘라봅니다. 필요한 얼굴이나 제품이 중앙에 있어도 제목이 모서리에 붙어 있으면 모바일에서 잘릴 수 있습니다. 제목과 중요한 물체는 실제 카드 미리보기에서 여유를 확인해야 합니다.
모바일과 상세 화면까지 비교하기
등록 후에는 넓은 화면의 목록, 모바일 목록, 상세 화면을 차례로 확인합니다. 화면마다 카드 크기나 비율이 바뀔 수 있으므로 한 화면에서만 확인하면 놓칠 수 있습니다. 이미지 안의 제목이 작아져 읽히지 않는다면 본문 제목과의 역할도 함께 살펴보세요.
운영자에게는 원본 파일 크기, 문제가 나타나는 URL, 화면 크기, 가려진 위치를 전달합니다. 새 파일을 계속 만들어 올리기 전에 표시 위치 조정으로 해결 가능한지도 확인하세요. 원본을 다시 자르는 작업은 화면 표시 문제를 확인한 다음 진행하는 편이 효율적입니다.
확인 자료와 적용 범위
- MDN — object-fit — 비율 유지·틀 채우기·전체 표시의 차이