글에서 다른 페이지를 소개할 때 단순한 텍스트 링크 대신 제목, 설명, URL, 이미지가 들어간 카드로 보여 줄 수 있습니다. 보통 블로그 카드, 링크 카드, 링크 미리보기라고 부릅니다.
이미지가 있으면 눈에 잘 띄지만 항상 정답은 아닙니다. 이미지를 자동으로 가져올지, 글에서 직접 지정할지, 이미지가 없을 때 어떻게 보일지를 정해야 안정적으로 운영할 수 있습니다.
일반적인 블로그 사이트의 방식
많은 블로그 플랫폼과 CMS는 URL을 붙여 넣으면 제목, 설명, Open Graph 이미지를 가져와 카드로 만듭니다. 편집 화면에서 URL만 넣어도 그럴듯한 미리보기가 생기기 때문에 작성 부담이 작습니다.
다만 독자가 글을 열 때마다 항상 링크 대상 페이지를 새로 읽는 것은 아닙니다. 붙여 넣은 시점, 발행 시점, 서비스 캐시에 가져온 결과가 저장되는 경우가 많습니다. 링크 대상의 OGP 이미지가 나중에 바뀌어도 글 속 카드가 바로 바뀌지 않을 수 있습니다.
- 붙여 넣은 URL을 자동으로 카드화할 수 있음
- 가져온 결과를 글 데이터나 캐시에 저장할 수 있음
- 이미지를 가져오지 못하면 제목, 설명, 도메인만 표시함
- 플랫폼에 따라 카드 디자인을 거의 수정할 수 없음
- 내부 링크는 풍부한 카드, 외부 링크는 간단한 카드로 나누기도 함
이미지 카드가 잘하는 것
이미지가 있는 카드는 독자가 클릭하기 전에 링크 대상의 분위기를 이해하는 데 도움이 됩니다. 앱, 제품, 서비스, 이벤트, 시각 자료가 중요한 글에서는 아이콘이나 OGP 이미지가 유용한 단서가 됩니다.
또한 한 글 안에 여러 카드가 이어질 때 이미지가 있으면 서로 구분하기 쉽습니다. 텍스트 링크만 나열하는 것보다 훑어보기 쉬운 경우가 있습니다.
이미지 카드가 어려운 점
외부 이미지는 실패할 수 있습니다. 이미지가 차단되거나, 없어지거나, 카드 비율과 맞지 않거나, 나중에 바뀌거나, 로딩을 무겁게 만들 수 있습니다.
- 외부 이미지가 hotlink 제한이나 fetch 제한으로 실패할 수 있음
- OGP 이미지 비율이 카드 레이아웃과 맞지 않을 수 있음
- 링크 대상 이미지 변경이 글의 외형까지 바꿀 수 있음
- 이미지 카드가 많으면 성능과 레이아웃 안정성에 영향을 줄 수 있음
- 앱 아이콘이나 로고는 사용 조건 확인이 필요할 수 있음
수동 이미지는 덜 화려하지만 안정적
작은 사이트나 편집 품질을 직접 관리하려는 사이트에서는 이미지 자동 수집보다 수동 이미지 필드가 더 현실적일 수 있습니다. 손은 더 가지만 이미지, 트리밍, 설명을 직접 정할 수 있습니다.
텍스트만 있는 카드도 충분히 유효합니다. 문서 링크, 기술 메모, 검증 글이 많은 사이트에서는 제목, 짧은 설명, 도메인만으로도 필요한 맥락을 전달할 수 있습니다.
TOOLPOOL에서의 현실적인 기본값
TOOLPOOL처럼 확인 메모와 도구 설명이 많은 사이트에서는 텍스트 중심 카드가 기본값으로 적합합니다. 독자는 링크가 어디로 가는지, 왜 글 안에 있는지 충분히 판단할 수 있습니다.
나중에 이미지를 넣더라도 모든 카드에 필수로 만들기보다 앱 소개, 서비스 메모, 제품 페이지처럼 이미지가 이해를 돕는 경우에만 선택적으로 쓰는 편이 좋습니다.
구현할 때의 순서
- 제목, 설명, 도메인 카드부터 만든다
- 이미지는 선택 필드로 추가한다
- 이미지가 없는 상태의 디자인을 먼저 정리한다
- 자동 수집은 캐시와 실패 처리가 정해진 뒤 도입한다
- 앱 아이콘이나 서비스 로고는 사용 조건을 확인한다
블로그 카드는 장식만을 위한 UI가 아닙니다. 링크가 어디로 이어지고 왜 글 안에 있는지 독자가 이해하도록 돕는 요소입니다. 이미지를 넣을지 여부도 그 목적에 맞는지로 결정하는 편이 좋습니다.