블로그 글을 공유했는데 카드 이미지에도 제목만 크게 반복된다면, 그 작은 화면은 독자에게 무엇을 더 알려 주고 있을까. 제목은 주제를 말하고 첫 문장은 읽을 이유를 보여 줄 수 있다. 같은 말을 두 번 적기 전에 두 자리의 역할을 나눠 보고 싶다.
DEV 팀의 공유 카드 개선 글은 표지가 없는 게시물에 만들던 이미지를 바꾼 과정을 소개한다. 제목 반복과 플랫폼의 표시가 작성자 정보를 가리는 문제를 짚고, 본문 도입을 활용하는 방식을 설명한다. 원문에 연결된 공개 변경 기록에서는 남의 인용문을 작성자의 말처럼 보이게 하지 않도록 거르는 기준도 다룬다.
이 사례를 Matthew.kr에 그대로 이식하려는 것은 아니다. 플랫폼마다 카드 크기와 제목 표시, 이미지 처리 방식이 다르고 이후에도 바뀔 수 있다. 다만 내 글의 제목과 도입이 각자 일을 하고 있는지 읽어 볼 출발점은 된다. 카드의 모양보다 먼저 문장 두 개를 비교해 볼 수 있다.
제목이 약속한 다음에 첫 문장은 무엇을 할까
가상의 글 제목을 ‘캐시를 비웠는데 옛 화면이 보일 때 확인할 것’이라고 해 보자. 그 아래 도입이 ‘캐시는 현대 웹에서 매우 중요한 기술이다’라면 독자는 새로운 정보를 거의 얻지 못한다. 제목이 이미 문제를 말했는데 첫 문장은 다시 넓은 배경으로 돌아간다.
다른 도입은 구체적인 구분에서 시작할 수 있다. ‘내 브라우저에서 바뀐 화면이 보여도 다른 사람이 같은 결과를 보는지는 따로 확인해야 한다’라고 적는 것이다. 이 문장은 글에서 풀어 줄 문제의 경계를 조금 더 좁힌다. 실제 본문에 그런 확인 방법이 있어야 하며, 도입만 그럴듯하게 고쳐서는 약속이 완성되지 않는다.
이번에는 카드 이미지가 그 첫 문장의 일부를 보여 준다고 생각해 보자. 제목과 다른 판단 재료가 생긴다. 독자는 캐시의 중요성을 다시 듣는 대신, 이 글이 자신이 겪는 상황을 구분해 줄지 예상할 수 있다. 클릭을 늘린다는 보장보다, 열기 전에 무엇을 읽을지 정확하게 알린다는 목적이 먼저다.
첫 문장에 숫자를 넣으면 선명해질 수 있지만 근거 없는 수치는 오히려 약속을 왜곡한다. ‘90%가 놓치는 문제’처럼 확인하지 않은 표현을 만들 필요는 없다. 어떤 상황에서 무엇을 확인할 수 있는지 정확히 적어도 문장은 충분히 구체적일 수 있다.
보기 좋은 잘림과 의미가 남는 잘림
긴 문장을 이미지에 넣으면 끝이 잘릴 수 있다. 몇 글자까지 들어가는지만 보는 대신 잘린 문장만 읽어 봐야 한다. ‘설정은 바꾸지 않아도 된다’에서 마지막 부정이 사라지면 뜻이 바뀔 수 있다. 중요한 조건이 문장 끝에 몰려 있다면 짧게 보였을 때 오해하기 쉽다.
따라서 문장 길이를 줄일 때에는 주어와 조건, 핵심 판단을 함께 남기고 싶은 것이다. 긴 설명을 무조건 두 토막 내기보다, 카드에 보여 줄 수 있는 독립적인 문장을 고른다. 본문에서 따온 문장이라면 이미지에 보이는 말이 실제로 그 글의 주장인지도 확인한다.
다른 사람의 인용을 카드에 쓸 때에는 더 조심해야 한다. 따옴표나 출처가 잘려 나가면 독자는 그 말을 게시물 작성자의 주장으로 받아들일 수 있다. DEV 사례에서 인용문을 거르는 이유도 이 맥락으로 읽을 수 있다. 눈에 잘 띄는 문장을 고르는 일과 올바른 화자에게 연결하는 일은 함께 가야 한다.
이미지의 중요한 부분도 가운데에 남겨 보되, 중앙 배치만으로 모든 플랫폼의 크롭에 안전하다고 생각하지는 않는다. 정사각형, 넓은 카드, 작은 목록에서 각각 확인해 본다. 작성자 이름과 핵심 그림이 서로를 가리지 않는지, 제목이 덧씌워지는 상황에서도 뜻이 남는지 실제 표시를 봐야 한다.
원고의 수정과 카드의 갱신은 같은 순간이 아닐 수 있다
글을 수정했다면 본문을 다시 읽는 것만으로 확인을 끝내지 않는다. 페이지의 제목과 설명, 대표 이미지 주소가 기대한 값인지, 공유 서비스에 보이는 카드도 그 내용인지 나눠 살핀다. 서비스가 이전 정보를 보관하고 있다면 원문과 카드가 잠시 다를 수 있다. 정확한 보관 기간은 서비스마다 달라 단정하지 않는다.
이때 화면 하나만 보고 원인을 정하기보다 어느 층에서 값이 다른지 기록한다. 실제 글, 공개 페이지의 정보, 서비스가 그려 준 카드. 세 곳을 구분하면 본문을 다시 고쳐야 하는 일과 카드의 갱신을 확인해야 하는 일을 섞지 않을 수 있다. 제목을 여러 번 바꾸며 반응을 추측하는 것보다 작은 확인이 먼저다.
가상의 검수 노트에는 변경한 문장, 공개 URL, 확인 시각, 각 화면에 보인 문구를 적을 수 있다. 개인 메시지나 비공개 자료를 시험용으로 올릴 필요는 없다. 공개해도 되는 자기 글로 확인하고, 그 방문을 독자의 유입 성과로 세지 않는 것도 중요하다.
인쇄용 CSS를 다룬 이전 글에서는 같은 웹페이지라도 출력되는 자리에서 맥락이 사라질 수 있음을 생각했다. 공유 카드도 비슷한 질문을 준다. 본문을 떠나 작은 이미지가 되었을 때 무엇이 남는가. 화면에 들어온다는 이유만으로 글의 약속이 충분히 전달되는 것은 아니다.
다음 글에서는 제목을 쓴 뒤 첫 문장만 따로 읽어 보고 싶다. 제목이 묻는 문제에 한 걸음 더 들어가는가, 아니면 같은 말을 멋지게 반복하는가. 카드를 꾸미기 전에 그 차이를 고쳐 보면, 작은 화면에서도 독자를 더 정확하게 맞이할 수 있을 것이다.
이어 읽기: 웹페이지를 인쇄할 때 사라지는 맥락, 인쇄용 CSS에서 확인할 것
공개 원문을 참고하고 AI의 도움으로 구성한 글입니다. 가상의 예시는 본문에 구분했으며 제품이나 원문의 실험을 직접 실행한 후기는 아닙니다.
