이미지 자리를 미리 확보하기, 리뷰에서 함께 확인할 질문

이미지가 늦게 로드되면 아래의 글과 버튼이 갑자기 밀려날 수 있다.

작성자에게 당연한 전제도 리뷰어에게는 보이지 않을 수 있다. 파일의 차이만 보여 주면 변경 이유와 확인 범위를 추측하게 된다. 이번 기록에서는 결과를 판단하는 데 필요한 맥락을 짧게 전달하고, 질문이 실제 개선으로 이어지도록 확인 순서를 정리한다.

코드 밖의 맥락 전달하기

이미지의 가로세로 비율을 미리 알려 레이아웃이 공간을 확보하게 한다. 잘라 보여 줄 이미지와 전체를 보여 줄 이미지는 object-fit 규칙을 구분한다.

이번에 확인할 질문: 리뷰어가 변경 이유와 남아 있는 제약을 코드만 추측하지 않고 이해할 수 있는가?

작게 확인하는 예제

다음 예제는 핵심 조건을 드러내기 위한 출발점이다. 서비스의 전체 구현을 대신하지 않으므로 실제 입력 범위와 실패 처리 규칙을 함께 읽어야 한다.

<img src="/cover.jpg" alt="노트북 옆에 놓인 메모"
     width="800" height="500" loading="lazy">
<style>
  img { display: block; width: 100%; height: auto; }
</style>

네트워크 속도를 낮추고 이미지를 캐시에서 지운 뒤 로드 전후에 본문 위치가 유지되는지 확인한다.

놓치기 쉬운 조건

첫 화면의 핵심 이미지까지 무조건 지연 로딩하면 중요한 콘텐츠가 늦게 나타날 수 있다. 장식 이미지에는 내용 설명처럼 들리는 alt를 붙이지 않는다.

확인할 부분	살펴볼 내용
기준 동작	네트워크 속도를 낮추고 이미지를 캐시에서 지운 뒤 로드 전후에 본문 위치가 유지되는지 확인한다.
비교 조건	입력과 실행 순서를 고정하고 한 번에 한 조건만 바꾼다.
적용 범위	예제가 생략한 의존성과 실제 서비스의 제약을 구분한다.

다음 변경에 적용할 순서

1. 이번 변경이 해결하는 구체적인 상황을 먼저 설명한다.
2. 재현 예제와 확인한 결과를 한곳에서 볼 수 있게 남긴다.
3. 취향에 대한 제안과 지켜야 할 계약의 위반을 구분한다.

리뷰는 작성자의 지식을 시험하는 자리가 아니라 변경을 함께 책임지는 과정이다. 답변이 반복되는 질문은 설명이 부족한 신호일 수 있다. 대화가 끝난 뒤 가장 중요한 전제를 코드 가까이 남기면 다음 리뷰의 질문도 더 구체적이 된다.