웹게임 글의 이미지는 화면을 화려하게 채우는 장식이 아니라 독자가 설명을 검증하는 자료입니다. 공략 글이라면 어떤 상태에서 버튼을 눌러야 하는지 보여 줘야 하고, 제작 기록이라면 변경 전후의 차이를 확인할 수 있어야 합니다. 이 글은 실제 이미지를 본문 중간에 배치하면서 이미지 앞 문장, 대체 텍스트, 캡션, 이미지 뒤 해석이 각각 맡아야 할 역할을 정리합니다.
먼저 독자가 확인할 질문을 제시한다
이미지를 문단 사이에 갑자기 넣으면 독자는 화면 전체를 훑으며 중요한 부분을 스스로 찾아야 합니다. 먼저 “이 화면에서 어떤 선택을 할 수 있는가”처럼 확인할 질문을 제시하면 시선의 목적이 생깁니다. 아래 화면에서는 게임을 시작하기 전 난이도 선택지가 분리되어 있는지, 선택 전에 규칙을 읽을 수 있는지를 확인해 보겠습니다.
화면 중앙에는 난이도 선택 카드가 있고 그 위에는 짧은 게임 설명이 남아 있습니다. 따라서 이용자는 플레이를 시작하기 전에 규칙을 읽고 자기 수준에 맞는 선택을 할 수 있습니다. 이처럼 이미지 다음 문단에서는 보이는 요소를 다시 나열하는 데 그치지 말고, 그 배치가 이용자의 판단에 어떤 영향을 주는지 설명해야 합니다.
한 장에는 한 가지 판단만 담는다
공략의 모든 단계를 한 장에 표시하면 화살표와 글자가 겹쳐 모바일에서 읽기 어렵습니다. 한 이미지는 “시작 버튼의 위치”, “실패 직전의 상태”, “결과 화면의 변화”처럼 하나의 판단만 담당하게 합니다. 서로 다른 시점의 비교가 필요하다면 두 이미지를 나누고 각 캡션에 촬영 시점이나 조건을 적는 편이 명확합니다.
캡처할 때는 다음 세 요소를 우선 남깁니다.
- 행동 대상: 눌러야 할 버튼이나 이동해야 할 영역
- 현재 상태: 점수, 남은 횟수, 선택된 난이도처럼 판단에 필요한 값
- 행동 결과: 입력 뒤 바뀐 화면이나 성공·실패 표시
반대로 광고, 브라우저 계정 정보, 알림과 같이 설명과 무관한 영역은 제외합니다. 중요한 정보를 잘라 내서는 안 되지만, 독자의 시선을 분산시키는 주변 화면까지 그대로 보존할 이유도 없습니다.
대체 텍스트와 캡션은 같은 문장이 아니다
대체 텍스트는 이미지를 볼 수 없는 상황에서도 핵심 시각 정보를 이해할 수 있게 합니다. 캡션은 이미지가 어디에서 왔고 왜 이 위치에 놓였는지 설명합니다. 본문은 그 관찰이 공략이나 설계 판단에 주는 의미를 더 자세히 풉니다.
예를 들어 대체 텍스트에는 “난이도 선택 카드와 게임 설명이 함께 보이는 화면”이라고 적을 수 있습니다. 캡션에는 “실제 실행 화면을 직접 캡처했으며 시작 전 선택 구조를 보여 주기 위해 사용했다”는 맥락을 붙입니다. 본문에서는 이 구조가 이용자에게 규칙을 읽을 시간을 준다고 해석합니다. 세 문장이 서로 이어지지만 같은 역할을 반복하지 않습니다.
W3C WAI는 정보를 전달하는 이미지의 대체 텍스트가 핵심 정보를 짧게 전달해야 한다고 설명합니다. 복잡한 도식은 이미지 안의 세부 내용을 본문에서도 충분히 풀어야 합니다. <figure>와 <figcaption>을 함께 사용하면 이미지와 캡션을 하나의 단위로 연결할 수 있습니다.
크기 정보와 지연 로딩을 함께 지정한다
이미지에는 원본의 width와 height를 적어 브라우저가 내려받기 전부터 비율을 계산하게 합니다. 본문 중간 이미지는 첫 화면에 즉시 필요하지 않으므로 loading="lazy"를 사용합니다. CSS에서는 너비를 본문에 맞추고 높이를 자동으로 계산해 작은 화면에서도 원본 비율을 유지합니다.
이 설정은 큰 이미지를 작은 파일로 바꿔 주지는 않습니다. 실행 화면은 WebP처럼 용량을 줄이기 쉬운 형식으로 저장하고, 선과 글자가 중심인 설명 도식은 SVG를 사용합니다. 이미지 형식은 화면의 성격에 따라 고르고, 파일 이름만 바꾼 가짜 변환은 사용하지 않습니다.
게시 전에 다섯 가지를 확인한다
- 이미지 앞 문장이 독자에게 확인할 대상을 알려 주는가
- 대체 텍스트만 읽어도 핵심 시각 정보를 이해할 수 있는가
- 캡션에 직접 캡처·직접 제작·외부 자료 여부가 드러나는가
- 이미지 뒤 문단이 화면의 의미와 다음 행동을 설명하는가
- 모바일 너비에서 글자와 표시가 잘리거나 가로 스크롤이 생기지 않는가
이미지가 없는 글보다 이미지가 많은 글이 무조건 좋은 것은 아닙니다. 독자의 질문에 답하지 못하는 이미지는 내려받을 파일과 시각적 소음만 늘립니다. 필요한 위치에 한 장씩 놓고, 앞뒤 문장으로 관찰 목적과 결론을 연결할 때 스크린샷은 비로소 글의 근거가 됩니다.