사진은 치즈폭탄인데 설명은 IMG_0427? ALT가 대체 뭐임
안맵다떡볶이 신메뉴 사진을 찍었습니다.
치즈가 제일 길게 늘어나는 순간을 잡겠다고 37장을 찍고, 36장을 지웠어요. 남은 한 장은 제법 광고 같습니다.
홈페이지에 올리려는데 낯선 칸이 하나 보입니다.
나: “대체 뭘 대체하라는 거지?”
잘 모르겠어서 파일명을 그대로 붙였습니다. IMG_0427. 저장 완료. 뭔가 한 것 같긴 합니다.
그래서 이 칸이 어디에 쓰이는데?
사진을 볼 수 없는 사람에게 이 사진이 전하는 정보를 글로 대신 알려주는 칸입니다. 보이는 사진 밑에 작은 제목을 하나 더 붙이는 작업과는 달라요.
예를 들어 화면의 글을 소리로 읽어주는 기능으로 이 메뉴 페이지를 듣는다고 해봅시다.
이미지: IMG_0427.”
이건 메뉴 설명이 아니라 파일 출석번호입니다. 열심히 찍은 37장은 아무 소용이 없었습니다. 잘못 적은 건 카메라가 아니라 저였고요.
여기서 말하는 ALT는 사진에 붙이는 ‘대체 문장’입니다. 사진을 못 보는 상황에서도 페이지의 뜻이 이어지게 하는 거죠.
그러면 치즈폭탄 떡볶이 치즈폭탄 떡볶이…?
아니요. 검색 키워드를 주문처럼 외우는 칸이 아닙니다. 사진을 보고, 이 사진에서 꼭 알아야 하는 게 뭔지 한 문장으로 쓰면 됩니다.
이 페이지에는 이미 ‘치즈폭탄 떡볶이’라는 메뉴 이름이 있습니다. 사진에서 새로 보이는 건 숟가락에 든 떡에서 치즈가 길게 늘어나는 모습이에요. 그래서 ALT를 이렇게 바꿨습니다.
파일명보다는 낫고, ‘떡볶이 맛집 배달 추천 SEO’처럼 단어만 잔뜩 넣는 것보다도 낫습니다. 사진과 옆 문장이 같은 이야기를 하게 만들면 돼요.
모든 그림에 긴 설명이 필요한 건 아닙니다. 내용과 상관없는 장식이라면 오히려 빈 ALT가 적절할 수 있어요. 오늘은 신메뉴처럼 정보를 담은 사진에 집중합시다.
그래서 어떻게 확인했냐면
사진 편집 화면에서 대체 텍스트 칸을 다시 열었습니다. 파일명을 지우고 사진의 모습을 한 문장으로 적었어요. 저장 뒤에는 공개된 페이지에서도 그 설명이 해당 사진에 붙었는지 확인하면 됩니다.
화면에 보이는 메뉴 이름과 사진 설명이 서로 다른 음식을 말하고 있지는 않은지도 봤습니다. ‘매운맛 한계 돌파’라고 적어놓고 사진에는 안맵다떡볶이가 있으면, 가게 이름부터 다시 설명해야 하니까요.
Google도 대체 텍스트를 주변 글과 이미지 자체를 살펴보는 여러 단서 중 하나로 사용한다고 안내합니다. 그러니 ALT를 적는다고 사진이 검색 첫 화면에 반드시 뜬다는 약속은 하지 맙시다.
결론. 사진에 왜 글까지 붙여야 하는데?
웹페이지에는 사진을 그대로 볼 수 없는 순간이 있습니다. 그때 중요한 사진의 뜻까지 사라지지 않도록 한 문장으로 남겨두는 겁니다. 사람에게 먼저 도움이 되고, 검색엔진에도 이미지 내용을 이해할 단서가 됩니다.
오늘은 세 가지만. 파일명 대신 사진의 핵심을 쓰기. 이미 적힌 글을 무의미하게 반복하지 않기. 키워드 주문 외우지 않기. 사진이 말해야 할 걸 우리가 대신 적는 거예요.
표지 원본: 〈Futurama Fry Blank HD〉 / Imgflip, 크롭·문구 조판. 본문 GIF: Gordon Ramsay 촬영 장면 · How Do I Explain This. 두 GIF와 표지 원저작자·사용 조건은 확인하지 않았습니다. 설명용 음식 사진: insatiablemunch / Wikimedia Commons, CC BY 2.0.