사이트를 거의 다 만들고 나서 마지막에 남는 것이 파비콘과 공유 이미지입니다. 둘 다 화면 안에는 없어서 잊기 쉬운데, 사이트가 다른 곳에 나타날 때의 첫인상을 전부 이 둘이 담당합니다. 브라우저 탭, 즐겨찾기, 메신저로 공유한 링크 카드가 그렇습니다.
파비콘은 한 장이 아닙니다
파비콘을 favicon.ico 한 장으로 끝내던 시절이 있었지만, 지금은 쓰이는 자리가 여럿이고 자리마다 요구하는 크기가 다릅니다. 다행히 전부 만들 필요는 없고, 실제로 쓰이는 것은 네 가지 정도입니다.
디자인 쪽에서 더 중요한 것은 크기가 아니라 형태입니다. 32픽셀에서 알아볼 수 있는 그림은 로고를 축소한 것이 아니라 로고에서 한 요소만 뽑아낸 것입니다. 워드마크 전체를 줄이면 탭에서 회색 얼룩으로 보입니다.
확인 방법은 간단합니다. 디자인 도구에서 32픽셀로 축소해 놓고 화면에서 한 걸음 물러나 봅니다. 형태가 남아 있으면 통과이고, 뭉개지면 요소를 더 덜어냅니다. 선이 가늘면 가장 먼저 사라지므로 파비콘용으로는 선을 굵게 다시 그리는 편이 낫습니다.
배경도 정합니다. 투명 배경은 밝은 테마에서는 좋지만 어두운 탭 배경에서 어두운 아이콘이 사라집니다. 단색 배경에 밝은 도형을 얹은 형태가 어느 환경에서도 안정적입니다.
공유 이미지 — 1200 × 630 과 안전 영역
링크를 붙여 넣었을 때 뜨는 카드 이미지입니다. 표준처럼 쓰이는 크기는 가로 1200 · 세로 630 이고, 대략 1.91 대 1 비율입니다.
여기서 디자인상 중요한 것은 어디가 잘리는가입니다. 같은 이미지가 서비스마다 다른 비율로 잘리고, 어떤 곳은 정사각형에 가깝게 자릅니다. 그래서 중요한 요소를 가운데로 모으고 가장자리는 여백으로 둡니다. 가장자리에 붙인 글자는 어딘가에서 반드시 잘립니다.
글자 크기도 흔한 함정입니다. 이 카드는 화면에서 대체로 작게 표시되므로, 1200픽셀 캔버스에서 적당해 보이는 크기는 실제 표시에서 읽히지 않습니다. 캔버스를 축소해 놓고 읽히는지 확인하는 것이 유일하게 믿을 만한 검사입니다.
절대 주소는 반드시 지킵니다. 공유 이미지 주소는 다른 서버가 읽어 가는 값이라 상대 경로로 적으면 해석되지 않습니다. 그리고 투명 배경 PNG 는 플랫폼이 흰색 또는 검은색을 깔면서 글자가 배경과 같은 색이 되는 사고를 만듭니다 — 배경색을 직접 칠해 둡니다.
가장 자주 겪는 함정 — 플랫폼이 캐시합니다
공유 이미지를 고쳤는데 링크를 다시 붙여 넣어도 옛 이미지가 나옵니다. 태그를 확인하면 새 주소가 정확히 들어가 있습니다. 코드가 틀린 것이 아니라, 플랫폼이 미리보기를 자기 쪽에 저장해 두었기 때문입니다.
이것이 이 주제에서 가장 중요한 사실입니다. 이미 공유된 링크의 미리보기는 태그를 고쳐도 바뀌지 않습니다. 메신저 대화방에 남아 있는 카드, SNS 게시물에 붙은 이미지는 그 시점의 사본이고 우리가 소급해서 고칠 수 없습니다.
대응은 두 가지입니다. 첫째, 서비스가 제공하는 공유 디버거로 갱신을 요청합니다. 새 주소를 다시 읽어 가게 만드는 도구이고, 주요 플랫폼은 대부분 이런 화면을 제공합니다. 둘째, 이미지 파일 이름을 바꿉니다. 주소가 달라지면 플랫폼 입장에서 다른 이미지이므로 캐시를 우회합니다.
그리고 예방이 더 중요합니다. 공유 이미지는 페이지를 공개하기 전에 확인합니다. 오픈 후에 고치면 그 사이에 공유된 링크들이 옛 이미지를 계속 달고 다니고, 그 링크들이 대체로 초기 홍보에서 가장 많이 퍼진 것들입니다.
확인 순서
마지막으로 공개 전에 밟을 순서를 정리합니다. 파비콘은 실제 브라우저 탭에서 확인합니다 — 디자인 도구 안에서는 언제나 괜찮아 보입니다. 탭을 여러 개 열어 두고 우리 탭을 한눈에 찾을 수 있는지 보면 됩니다.
공유 이미지는 주요 페이지마다 확인합니다. 홈, 서비스 페이지, 대표 아티클 정도면 충분하고, 나머지는 기본 이미지가 받아 줍니다. 기본 이미지를 지정해 두지 않으면 페이지의 첫 이미지가 임의로 선택되어, 본문 중간의 도표가 공유 카드에 뜨는 일이 생깁니다.
메타 태그와 구조화 데이터 전반은 SEO 아카이브에서 다루고, 이미지 형식과 크기 선택은 이미지와 미디어 연재에 정리돼 있습니다. 사이트가 밖에서 어떻게 보이는지부터 확인하고 싶다면 무료 도구 페이지의 진단 도구로 시작할 수 있습니다.