튜토리얼
Claude Opus 5.5 반응형 이미지 점검: 흐릿한 제품 사진 고치기
더 큰 제품 사진을 내보내기 전에 Claude Opus 5.5로 표시 영역, 후보 파일, 브라우저의 실제 요청을 비교하세요.
더 큰 제품 사진을 내보내기 전에 Claude Opus 5.5로 표시 영역, 후보 파일, 브라우저의 실제 요청을 비교하세요. 대표 이미지가 흐린 이유는 잘못된 리소스 선택일 수 있고, 모바일 다운로드가 무거운 이유는 표시 영역을 과도하게 선언했기 때문일 수 있습니다. 스크린샷만 주지 말고 측정값을 함께 제공하세요.
증거에 맞춰 수정 선택하기
| 관찰 | 먼저 확인할 항목 | 가장 작은 유효한 수정 |
|---|---|---|
| 원본은 선명한데 페이지는 흐림 | 표시 너비, DPR, 요청 파일 | 후보 목록 또는 영역 선언 수정 |
| 모바일에서 가장 큰 파일을 받음 | `sizes`, CSS 배치, `currentSrc` | 선언 너비를 실제 배치에 맞춤 |
| 제품 일부가 잘림 | 자르기와 `object-fit` | 구도 또는 화면별 크롭 수정 |
| 파일은 맞는데 디테일이 깨짐 | 원본 픽셀과 인코딩 | 원본에서 다시 내보내기 |
MDN 반응형 이미지 설명은 해상도 전환과 구도 전환을 구분합니다. `sizes`는 표시 영역을 설명하며 CSS 너비를 설정하지 않습니다. 의도적으로 다른 크롭이 필요할 때 `picture`를 사용하세요. 잘린 컵 손잡이를 JPEG 품질을 높여 해결하도록 요청해서는 안 됩니다.
리소스 너비 계산 예시
가상의 컵 페이지에서 뷰포트가 390 CSS 픽셀이고 좌우 여백이 각각 24픽셀이라고 가정합니다. 이미지 영역은 390 − 48 = 342 CSS 픽셀입니다. DPR 2에서는 342 × 2 = 684픽셀을 리소스 너비의 출발점으로 삼을 수 있습니다. 480, 800, 1200픽셀 후보 중 800은 합리적인 후보지만 브라우저가 반드시 선택한다는 뜻은 아닙니다. 계산한 가상 예시이며 Opus 실측 결과가 아닙니다.
코드에 `sizes="100vw"`라고 쓰면 실제 342가 아닌 390픽셀을 선언합니다. 실제 영역보다 약 14% 큽니다. 선택 파일이 항상 바뀌지는 않지만 후보 경계에서는 중요해집니다. 데스크톱의 절반 너비 카드에 모바일 전체 너비 대표 이미지의 선언을 그대로 적용하지 마세요.
뷰포트, 확대 비율, `devicePixelRatio`, 요소 사각형, `currentSrc`, 응답 이미지 크기, 전송 바이트를 기록하세요. 네트워크 패널에서 실제 요청을 확인하고 캐시 조건도 남깁니다. 창을 줄여도 더 큰 리소스가 캐시에 남아 재사용될 수 있으므로 한 번의 크기 변경만으로 규칙이 틀렸다고 판단할 수 없습니다. web.dev 안내는 브라우저가 적절한 리소스를 선택하도록 하는 방법을 설명합니다.
완성된 검토 프롬프트
이 제품 이미지의 리소스 선택을 검토해 주세요. 입력은 HTML 또는 컴포넌트 코드, 관련 CSS, 후보 파일명과 실제 픽셀 크기, 뷰포트와 DPR, 표시된 이미지 사각형, currentSrc, 네트워크 전송량입니다. 누락된 측정값은 알 수 없음으로 처리하세요.
해상도 선택, 구도 크롭, 압축 손상을 구분하세요. 제공된 조건에서 표시 너비 × DPR을 계산하고 요청 파일과 비교하세요. 각 너비 서술자가 실제 파일 크기와 일치하는지 확인하세요. 제공된 각 분기점에서 sizes와 CSS 배치가 일치하는지 설명하세요. 코드만 보고 특정 브라우저 선택을 보장하지 마세요.
증거 표, 불확실성을 포함한 가장 유력한 원인, 최소 코드 수정, 좁은 화면과 넓은 화면의 DPR 1 및 2 검증표를 반환하세요. 제품 구도, 대체 텍스트, 기존 컴포넌트 API를 유지하세요. 증거가 부족하면 전체 이미지 시스템을 다시 작성하지 말고 다음 측정 항목을 제시하세요.이 프롬프트는 맥락과 출력 요구를 명확히 제공하는 공식 Opus 가이드의 접근을 따릅니다. 제안한 작업 흐름은 설명용이며 모델을 실제 실행했다고 주장하지 않습니다.
고객이 받는 이미지 검증하기
기록한 화면 너비에서 같은 제품을 반복 확인하고 일반적인 보기 크기에서 가는 윤곽을 살펴보세요. 외관뿐 아니라 요청 파일과 바이트도 확인합니다. 너비와 높이 또는 신뢰할 수 있는 종횡비 공간을 유지해 로딩 중 레이아웃 이동을 방지하세요. 구도가 올바르고 적절한 후보가 있으며 모든 화면에 최대 원본을 강제로 보내지 않을 때 수정을 승인합니다.
자주 묻는 질문
**모든 원본을 표시 너비의 두 배로 만들어야 하나요?** DPR 2는 테스트 조건 하나이며 보편적인 출력 규칙이 아닙니다. 배치, 후보 크기 간격, 브라우저 판단도 중요합니다.
**압축을 더 하면 잘못된 `sizes`도 고쳐지나요?** 바이트만 줄이고 선택 오류는 남길 수 있습니다. 표시 영역부터 확인하세요.
**스크린샷만으로 어떤 리소스를 받았는지 알 수 있나요?** 아닙니다. `currentSrc`와 네트워크 응답을 함께 봐야 합니다. 크기가 다른 파일도 작은 캡처에서는 비슷할 수 있습니다.
검증한 자산을 캠페인에 넘기기
승인한 제품 이미지와 크롭을 묶은 뒤 Panelly Studio에서 광고 변형을 만드세요. 물체 자체가 어색하다면 제품 사진 반사와 원근 점검을 참고하세요. 여기서 Panelly는 창작 작업의 인계 대상이며 Opus 통합을 뜻하지 않습니다.
