웹게임 글에서 이미지는 빈자리를 채우는 장식이 아닙니다. 독자가 설명을 눈으로 확인할 수 있게 돕는 자료입니다. 공략이라면 어떤 상황에서 무슨 버튼을 눌러야 하는지 보여 줘야 하고, 제작 이야기라면 고치기 전과 뒤가 어떻게 달라졌는지 알 수 있어야 합니다. 이 글에서는 실제 이미지를 본문에 넣어 보며 이미지 앞 문장, 대체 텍스트, 캡션, 이미지 뒤 설명이 각각 무엇을 맡아야 하는지 살펴봅니다.
이미지를 보여 주기 전에 질문부터 던집니다
문단 사이에 스크린샷만 갑자기 넣으면 독자는 화면 전체를 훑으며 중요한 곳을 직접 찾아야 합니다. 먼저 ‘이 화면에서 어떤 선택을 할 수 있을까?’처럼 볼거리를 알려 주면 시선이 갈 곳이 생깁니다. 아래 화면에서는 게임을 시작하기 전에 난이도를 고를 수 있는지, 선택하기 전에 규칙을 읽을 수 있는지 살펴보겠습니다.
화면 가운데에는 난이도 카드가 있고 그 위에는 짧은 게임 설명이 남아 있습니다. 덕분에 시작 버튼을 누르기 전에 규칙을 읽고 자신에게 맞는 난이도를 고를 수 있습니다. 이미지 뒤의 문단은 보이는 요소를 그대로 읊기보다, 이런 배치가 이용자의 판단에 어떤 도움을 주는지 설명해야 합니다.
한 장에는 한 가지 판단만 담습니다
공략의 모든 단계를 한 이미지에 표시하면 화살표와 글자가 겹쳐 모바일에서 읽기 어렵습니다. 한 장에는 ‘시작 버튼의 위치’, ‘실패 직전의 상태’, ‘결과 화면의 변화’처럼 한 가지 판단만 담는 편이 좋습니다. 서로 다른 시점을 비교해야 한다면 두 장으로 나누고 각 캡션에 언제, 어떤 조건에서 찍었는지 적어 주세요.
스크린샷에는 다음 세 가지를 우선 남깁니다.
- 눌러야 할 곳: 버튼이나 이동할 영역
- 현재 상태: 점수, 남은 횟수, 선택한 난이도처럼 판단에 필요한 값
- 행동 뒤 결과: 입력 뒤 달라진 화면이나 성공·실패 표시
광고와 브라우저 계정 정보, 알림처럼 설명과 관계없는 부분은 빼도 됩니다. 중요한 정보를 잘라 내서는 안 되지만, 독자의 눈을 흐트러뜨리는 주변 화면까지 모두 남길 필요는 없습니다.
대체 텍스트와 캡션은 서로 다릅니다
대체 텍스트는 이미지를 볼 수 없을 때도 핵심 내용을 이해하게 돕는 문장입니다. 캡션은 이 이미지가 어디에서 왔고 왜 여기 놓였는지 알려 줍니다. 본문은 화면에서 본 사실이 공략이나 설계에 어떤 의미가 있는지 더 깊이 설명합니다.
예를 들어 대체 텍스트에는 ‘게임 설명과 난이도 선택 카드가 함께 보이는 화면’이라고 적을 수 있습니다. 캡션에는 ‘직접 캡처한 화면이며 시작 전 선택 구조를 보여 주려고 넣었다’고 씁니다. 본문에서는 이 구성이 플레이어에게 규칙을 읽을 시간을 준다고 해석합니다. 세 문장은 이어지지만 같은 말을 반복하지 않습니다.
W3C 웹 접근성 이니셔티브는 정보를 담은 이미지의 대체 텍스트가 핵심 내용을 간결하게 전달해야 한다고 안내합니다. 복잡한 그림은 이미지 안의 세부 내용도 본문에서 충분히 풀어 써야 합니다. <figure>와 <figcaption>을 함께 사용하면 이미지와 설명문을 하나의 묶음으로 연결할 수 있습니다.
원본 크기와 지연 로딩을 함께 적습니다
이미지의 원본 width와 height를 적어 두면 브라우저는 파일을 받기 전부터 가로세로 비율을 알 수 있습니다. 글 중간의 이미지는 첫 화면에 당장 필요하지 않으므로 loading="lazy"를 사용합니다. CSS에서는 너비를 본문에 맞추고 높이를 자동으로 계산해 작은 화면에서도 원본 비율이 흐트러지지 않게 합니다.
이 설정만으로 큰 이미지 파일의 용량이 줄어들지는 않습니다. 게임 화면처럼 색이 많은 이미지는 WebP로 용량을 줄이고, 선과 글자가 중심인 설명 그림은 SVG로 저장합니다. 화면의 성격에 맞는 형식을 골라야 하며 파일 이름의 확장자만 바꾸는 것은 변환이 아닙니다.
올리기 전에 다섯 가지를 확인합니다
- 이미지 앞 문장에서 무엇을 봐야 하는지 알려 주었나요?
- 대체 텍스트만 읽어도 핵심 내용을 이해할 수 있나요?
- 캡션에 직접 캡처했는지, 직접 만들었는지, 외부 자료인지 적었나요?
- 이미지 뒤 문단이 화면의 의미와 다음 행동을 설명하나요?
- 휴대전화 화면에서 글자나 표시가 잘리지 않고 가로 스크롤도 생기지 않나요?
이미지는 많다고 무조건 좋은 것이 아닙니다. 독자의 질문에 답하지 못하는 이미지는 내려받을 파일과 눈의 피로만 늘립니다. 꼭 필요한 자리에 한 장씩 넣고, 앞뒤 문장으로 관찰할 대상과 결론을 이어 줄 때 스크린샷은 비로소 글의 근거가 됩니다.