위에 사진이 있고 그 아래에 제목과 한 줄 텍스트가 있는 이미지 카드는 마케팅 페이지에서 가장 흔한 블록 중 하나입니다. 이 카드는 Elementor의 이미지 박스 위젯에 대응하지만, 결과가 제대로 보일지는 몇 가지 세부 사항이 결정합니다.
카드가 이미지 박스가 되는 경우
이미지 하나, 제목 하나, 최대 단락 하나만 정확히 담고 있고 다른 콘텐츠 요소가 없는 컨테이너는 단일 이미지 박스로 변환됩니다. 의도적인 안전장치가 하나 있습니다. 카드에 제목과 단락 외의 추가 텍스트(단계 번호, 배지, 가격 등)가 있으면 변환을 건너뛰고 블록을 일반 컨테이너로 유지합니다. 그 추가 텍스트를 잃는 것이 트리가 조금 더 깊어지는 것보다 나쁘기 때문입니다.
이미지가 실제로 카드를 채우게 하기
Elementor의 이미지 박스는 이미지를 기본값 30% 너비로 표시합니다. 변환된 카드에 맞는 경우는 거의 없으므로, 표시 너비는 카드 대비 이미지 너비를 기준으로 명시적으로 설정됩니다. 풀블리드 이미지는 100%가 됩니다.
소스 이미지가 object-fit: cover로 고정 높이(또는 aspect-ratio 박스)를 채우고 있었다면 그 설정도 옮겨집니다. 렌더링된 높이와 Object Fit = Cover가 위젯에 기록됩니다. 실제 이점은 자리표시자 모드에서 드러납니다. 설정이 이미 되어 있으므로 나중에 빈 슬롯에 실제 사진을 넣으면, 손으로 크기를 조정해야 하는 작은 썸네일이 되는 대신 바로 잘려서 카드를 채웁니다.
둥근 모서리
카드의 모서리는 보통 카드에 적용된 border-radius와 overflow:hidden에서 나오며, 이것이 풀블리드 이미지를 둥근 윗부분에 맞게 잘라 냅니다. 평탄화된 이미지 박스에는 자체 overflow 컨트롤이 없으므로, 이미지에 직접 같은 반경을 지정해 카드의 둥근 프레임과 맞춥니다.
유일한 실제 제약
Elementor의 이미지 박스에는 콘텐츠 패딩 컨트롤이 없습니다. 디자인에 풀블리드 이미지가 있고 텍스트가 예를 들어 18px 안쪽으로 들어가 있다면, 그 안쪽 여백은 위젯 안에서 재현할 수 없습니다. 위젯 자체의 패딩을 쓰면 이미지까지 안쪽으로 들어가기 때문입니다. 텍스트는 카드 가장자리에 가깝게 붙습니다.
깔끔한 단일 위젯보다 픽셀 단위로 정확한 텍스트 패딩이 더 중요하다면, 그 블록은 이미지, 제목, 텍스트 위젯을 따로 둔 컨테이너로 유지하세요. 각 위젯이 자체 패딩을 유지합니다. 구조의 깔끔함과 정확한 간격 사이의 실제 절충이므로, 카드로 가득한 페이지 전체를 변환하기 전에 알아 두면 좋습니다.
Object Fit은 높이가 있어야 작동합니다
특정한 불만을 설명해 주는 세부 사항입니다. Elementor의 이미지 박스에는 Object Fit 컨트롤이 있지만, 이미지에 명시적인 높이가 함께 있을 때만 효과가 있습니다. 위젯이 그렇게 만들어져 있으며, 이는 추측이 아니라 Elementor 자체 위젯 소스와 대조해 확인한 사실입니다.
따라서 Object Fit만 설정하면 아무 일도 일어나지 않습니다. 그래서 변환 시에는 둘을 함께 기록하거나 둘 다 기록하지 않습니다. 소스 이미지가 object-fit: cover로 고정 높이를 채우는 경우, 렌더링된 높이와 fit 값이 한 쌍으로 기록됩니다.
나중에 그 이미지를 바꾼 뒤 자르기가 작동하지 않으면 먼저 높이 필드를 확인하세요. 높이를 지우면 Object Fit이 조용히 비활성화되며, 위젯은 둘이 연결되어 있다는 힌트를 전혀 주지 않습니다.
30% 기본값이 그토록 중요한 이유
Elementor의 이미지 박스는 이미지 너비 30%로 제공되며, 이는 텍스트 블록 옆에 아이콘 크기의 사진을 두는 원래 용도에 맞습니다. 하지만 변환된 카드에 들어가면 변환이 실패한 것처럼 보입니다. 소스의 풀블리드 이미지와 전혀 다르게, 작은 썸네일이 제목 위에 떠 있게 됩니다.
그래서 너비는 항상 명시적으로 설정되며, 카드 대비 이미지의 실제 너비로 계산됩니다. 풀블리드 이미지는 100%, 절반 너비로 안쪽에 들어간 이미지는 원래 너비를 받습니다. 사소해 보이지만, 변환된 카드 페이지가 첫눈에 완성된 것으로 보일지 깨진 것으로 보일지를 결정합니다.
카드별이 아니라 페이지별로 결정하기
위의 패딩 제약은 실제 절충이며, 카드마다 결정하기보다 페이지마다 한 번 결정하는 습관이 유용합니다. 대표적인 카드 하나를 두 가지 방식으로 변환해 보세요. 이미지 박스 결과를 받아들인 다음, 카드에 요소를 하나 추가해 컨테이너로 남도록 다시 변환하고, 모바일 너비에서 둘을 나란히 비교합니다.
텍스트 안쪽 여백 차이가 거슬릴 만큼 눈에 띈다면, 그 페이지 전체에 컨테이너 방식을 쓰고 일관되게 유지하세요. 일부 카드는 이미지 박스이고 나머지는 컨테이너인 페이지가 최악의 결과입니다. 보기에는 괜찮지만, 앞으로 편집할 때마다 어느 것이 어느 것인지 기억해야 합니다.
이미지 카드 체크리스트
- 먼저 이미지를 미디어 라이브러리에 업로드하고 실제
https://URL을 참조하세요. 수동 작업 없이 가져와집니다. - 그렇지 않으면 빈 이미지 자리표시자를 사용하세요. 각 슬롯은
alt텍스트를 캡션으로 유지하므로 어떤 사진이 어디에 들어가는지 알 수 있습니다. - 단일 위젯 결과를 원한다면 카드를 이미지 + 제목 + 단락 하나로 유지하세요.
- Base64로 삽입된 이미지는 피하세요. 설계상 자리표시자로 대체됩니다.
- 나중에 이미지를 바꾼 뒤 자르기가 깨지면 높이 필드가 아직 설정되어 있는지 확인하세요. 높이가 없으면 Object Fit은 아무 효과가 없습니다.