이미지를 열심히 넣었는데 왜 검색에서 아무도 안 올까. 나도 한동안 그 질문을 안고 살았다. 티스토리 에디터의 가운데 정렬 버튼만 수년째 눌러오면서, 이미지를 "끼워 넣는 것"과 "제대로 다루는 것"이 완전히 다른 일이라는 걸 몰랐던 거다. HTML과 CSS로 이미지를 직접 제어하기 시작하면서 구글 이미지 검색 유입이 생겼고, 블로그 전체 디자인도 달라졌다.
내용이 좋으면 이미지가 어디 있든 상관없지 않나 싶었다. 그런데 어느 날 내 글을 남이 보는 눈으로 처음부터 다시 읽어봤다. 이미지가 본문 한가운데 덩그러니 있고, 그 아래 텍스트가 이어지는데 이미지가 무슨 내용인지 설명이 없었다. 그냥 이미지 하나가 텍스트 사이에 끼어있는 느낌. 마치 책 본문 중간에 아무 설명 없이 사진이 붙어있는 것처럼 어색했다.
잡지나 전문 매거진을 보면 이미지 아래에 반드시 설명이 붙어있다. 사진 아래 작은 글씨로 어디서 촬영했는지 캡션이 달려있는 것. 그게 있고 없고의 차이가 글 전체의 신뢰도를 바꾼다. 나는 그걸 한참 지나서야 깨달았고, 그때부터 이미지를 그냥 올리는 게 아니라 다듬어서 올리게 됐다. 이미지 정렬, 캡션, 테두리. 세 가지 조합만 제대로 해도 블로그가 한 단계 올라간다.
figure 태그와 alt 텍스트: 이미지가 검색에 잡히는 구조
블로그 이미지를 그냥 img 태그 하나로 올리는 분들도 많고, 나도 오래 그렇게 했다. 그런데 HTML5에서 도입된 figure 태그는 의미론적 마크업을 위한 요소다. 의미론적 마크업이란, 태그가 단순히 화면 배치를 넘어서 "이 콘텐츠가 무엇인지"를 브라우저와 검색 엔진에 알려주는 방식을 뜻한다. figure 안에 img를 넣고, figcaption으로 설명을 붙이면 이미지와 캡션이 하나의 독립된 콘텐츠 단위로 묶인다.
처음에는 솔직히 효과를 체감하기 어려웠다. 캡션이 기울임꼴로 조그맣게 나오는 것 말고는 눈에 보이는 변화가 없었기 때문이다. 그런데 한 달쯤 지나 구글 서치 콘솔을 열었을 때, 이미지 검색으로 들어오는 유입이 조금씩 생기기 시작했다. alt 속성을 바꾼 시점과 딱 맞아떨어졌다.
alt 속성은 이미지를 불러오지 못했을 때 대신 보여주는 텍스트다. 단순한 대체 텍스트가 아니라, 구글이 이미지 내용을 파악하는 핵심 단서이기도 하다. 이전까지 나는 alt를 비워두거나 파일명 그대로 쓰고 있었다. IMG_2034.jpg 같은 이름이 alt에 들어있었으니, 구글이 그 이미지가 무슨 내용인지 알 수 없었을 거다. 이걸 이미지 내용을 한 문장으로 서술하는 방식으로 바꿨더니, 구글 이미지 검색 결과에 내 글의 이미지들이 잡히기 시작했다. 구글은 alt 텍스트를 이미지 색인의 주요 신호로 활용한다고 공식 문서에서 직접 밝히고 있다.
이미지를 SEO 관점에서 제대로 다루려면 챙겨야 할 요소가 몇 가지 있다. figure와 figcaption으로 이미지와 캡션을 의미론적으로 묶는 것, alt 속성에 이미지 내용을 구체적으로 한 문장으로 서술하는 것, 파일명을 의미 있는 영문 단어로 변경하는 것이 있다. 예를 들어 img001.jpg를 blog-image-alignment-css.jpg로 바꾸는 식이다. 그리고 max-width: 100%; height: auto 설정으로 반응형 처리를 하는 것도 기본이다.
반응형 이미지란 화면 크기에 따라 이미지가 자동으로 크기를 조절하여 모바일과 PC 모두에서 깨지지 않고 표시되는 방식을 말한다. 이 두 줄을 안 쓰면 모바일에서 이미지가 화면 밖으로 삐져나오는 일이 생긴다. 이건 가장 먼저 잡아야 하는 기본 중의 기본이다. 기본을 안 지키면 다른 최적화를 아무리 잘해도 소용없다.
box-shadow와 float: 쓸수록 갈리는 의견들
이미지 정렬 방식에 대해서는 CSS를 오래 다룬 분들 사이에서도 의견이 엇갈린다. display: block과 margin: 0 auto 조합으로 가운데 정렬을 잡는 방법을 선호하는 분들이 있는가 하면, float를 이용해 텍스트 옆에 이미지를 나란히 배치하는 방식을 선호하는 분들도 있다. 나도 float를 꽤 써봤는데, 솔직히 이건 좀 다르다.
float는 이미지와 텍스트를 나란히 배치할 때 시각적으로 꽤 그럴듯한 결과를 만들어낸다. 그런데 문제는 모바일이다. float 속성은 요소를 문서 흐름에서 꺼내 좌우로 띄우는 방식인데, 모바일처럼 좁은 화면에서 이 처리를 그대로 두면 이미지와 텍스트가 겹쳐 보이는 최악의 레이아웃 붕괴가 일어난다. float를 해제하는 clear: both도 빠뜨리면 안 되고, 더 중요한 건 미디어 쿼리로 모바일에서 float를 아예 초기화하는 코드를 반드시 세트로 작성해야 한다는 거다. 미디어 쿼리란 화면 크기나 기기 유형에 따라 다른 CSS를 적용하는 규칙이다. 이 코드 없이 float를 블로그에 적용했다가는 모바일 독자들한테 글이 제대로 안 읽힐 수 있다. 나는 그 실수를 해봤다. 데스크탑에서 확인하고 괜찮다고 넘어갔다가, 나중에 모바일로 접속해보니 텍스트와 이미지가 엉켜있었다.
box-shadow 얘기도 빼놓을 수 없다. 이미지에 시각적 무게감을 주는 방법으로 border와 box-shadow를 동시에 과하게 쓰는 분들도 있는데, 나는 좀 다르게 본다. 액자가 그림보다 눈에 띄는 순간, 독자의 시선이 콘텐츠에서 멀어진다. 내가 직접 여러 조합을 써본 결과, box-shadow 값 하나를 적당히 고정하고 모든 이미지에 통일해서 쓰는 방식이 가장 자연스러웠다. 그림자가 있다는 걸 느끼게는 하되, 이미지 자체를 가리지 않는 강도가 중요하다. 테마 색상과 비슷한 톤으로 맞추니 이미지가 글 디자인의 일부처럼 녹아드는 느낌이 생겼다. 통일감이 없는 이미지 스타일링은 블로그 전체를 어수선하게 보이게 만든다.
웹 접근성 관점도 중요하다. 웹 접근성이란 시각 장애인을 포함한 모든 사용자가 웹 콘텐츠를 이용할 수 있도록 설계하는 원칙으로, 스크린 리더가 alt 텍스트를 읽어줌으로써 이미지 정보를 전달한다. MDN Web Docs는 alt 텍스트 작성 시 이미지의 기능과 맥락을 설명해야 하며, 장식용 이미지는 alt를 비워두는 것이 올바른 처리임을 명시하고 있다. 장식용 이미지에 alt를 채우면 오히려 스크린 리더 사용자에게 불필요한 정보를 반복해서 읽어주게 된다. 이 차이를 구분하는 것도 접근성의 일부다.
글을 오랫동안 쓰면서 이미지는 거의 신경을 안 썼다. 글은 서랍이고, 이미지는 손잡이 같은 것인데 손잡이 없이는 서랍이 열리지 않는다는 걸, 직접 alt 텍스트를 고치고 figure 태그를 쓰고 나서야 처음 실감했다. 구현 자체는 어렵지 않다. display: block, margin 조합, figure 태그, alt 속성 한 줄. 지금 블로그에 이미지가 있다면, alt부터 한 번 점검해보길 권한다. 바꾸고 나서 한 달 뒤 구글 서치 콘솔을 열어보면 달라진 숫자를 확인할 수 있을 거다. 단, 한 달이라는 시간이 필요하다는 걸 미리 알고 있어야 포기하지 않는다.
참고: