튜토리얼
Claude Opus 5.5로 가로로 넘치는 상품 그리드 수정하기
Claude Opus 5.5에 중단점을 바꾸기 전에 가용 너비를 넘기는 그리드 트랙이나 자식 요소부터 찾도록 요청하세요.
Panelly로 직접 만들어 보세요
아이디어를 내 상품 광고로
상품 사진과 아이디어로 시작하세요. Panelly에서 네 컷 광고, 통일된 소재 세트, 영상을 만들 수 있어요.
Panelly에서 만들기 요청을 먼저 수정하고 생성하세요.
Claude Opus 5.5에 중단점을 바꾸기 전에 가용 너비를 넘기는 그리드 트랙이나 자식 요소부터 찾도록 요청하세요. 열이 1fr이어도 긴 상품 코드 때문에 자동 최소 너비가 화면보다 커질 수 있습니다. 실제 HTML, 계산된 스타일, 컨테이너 치수를 제공해야 합니다. 화면 캡처만으로는 최소 너비의 원인을 찾기 어렵습니다.
세 가지 너비 문제 구분하기
| 증상 | 먼저 확인할 부분 | 범위를 제한한 수정 |
|---|---|---|
| 긴 문자열 때문에 유연한 열이 늘어남 | 트랙과 자식의 최소 너비 | minmax(0, 1fr)와 min-width: 0 검토 |
| 카드는 정상인데 이미지가 넘침 | 이미지 고유 너비와 제약 | 비율을 유지하며 이미지 크기 제한 |
| 필요한 콘텐츠가 두 열에 들어가지 않음 | 사이드바, 간격, 가용 너비 | 콘텐츠에 맞는 지점에서 한 열로 전환 |
MDN minmax 문서는 자동 최솟값과 0을 구분합니다. 트랙을 줄인다고 내용이 자동으로 줄바꿈되거나 축소되지는 않습니다. 트랙과 실제로 넘치는 자식을 따로 수정하고 페이지 전체의 넘침을 숨기지 마세요.
CSS를 제안하기 전에 공간 계산하기
가상의 상품 레이아웃에서 그리드 내부 너비는 960 px, 사이드바는 240 px, 간격은 24 px입니다. 유연한 영역에는 696 px가 남습니다. 화면 너비가 390 px이고 양쪽 패딩이 각각 16 px라면 내부는 358 px입니다. 같은 사이드바와 간격을 유지하면 상품 영역은 94 px뿐입니다. 브라우저가 트랙을 줄일 수 있더라도 레이아웃을 바꿔야 합니다.
이 산술은 로컬에서 계산했습니다. Opus가 만든 수정이나 실제 운영 그리드는 테스트하지 않았습니다. 데스크톱 후보 규칙은 grid-template-columns: 240px minmax(0, 1fr)이며 상품 영역에는 min-width: 0을 줍니다. 긴 문장은 줄바꿈하고 기계가 읽는 코드는 복사할 수 있게 유지하세요. 비교표는 단어를 끊기보다 자체 컨테이너에서 가로 스크롤하는 편이 적절할 수 있습니다. 페이지 전체에 overflow-x: hidden을 적용하면 문제와 필요한 내용까지 가릴 수 있습니다.
복사할 수 있는 진단 프롬프트
첨부한 HTML, CSS, 계산된 스타일과 화면 캡처로 상품 그리드를 검토하세요. 데스크톱 내부 너비는 960 px, 사이드바는 240 px, 간격은 24 px입니다. 모바일 화면은 390 px이고 양쪽 패딩은 각각 16 px입니다. scrollWidth가 clientWidth를 넘는 첫 요소를 찾고 그리드 트랙과 최소 너비 규칙을 추적하세요. 트랙 크기, 줄바꿈되지 않는 내용, 이미지 고유 크기를 구분하세요. 가장 작은 수정과 근거 있는 단일 열 전환점을 제안하세요. 상품 순서, 표시 이름, 코드 복사, 포커스 테두리와 이미지 비율을 유지하세요. 원인 선택자, 수정 전후 너비 계산, 최소 패치, 390 및 1280 px 테스트 방법을 반환하세요. 제공 자료로 확인할 수 없는 점을 명시하고 실행하지 않은 브라우저 테스트를 했다고 쓰지 마세요.모델 참고 자료는 공식 Opus 프롬프트 가이드입니다. 이 글은 편집 작업 흐름 예시이며 모델 측정 결과가 아닙니다. 2018년 커뮤니티 질문은 최소 크기에 대한 오래된 혼란을 보여주지만 현재 검색 수요를 증명하지는 않습니다.
수정한 레이아웃 검증하기
공백 없는 긴 SKU, 번역된 이름, 누락 이미지와 키보드 포커스를 테스트하세요. 문서 스크롤 너비와 화면 너비를 비교하고 의도적인 국소 스크롤은 별도로 점검합니다. 글자 확대와 사이드바 제거 상태에서도 반복하세요. 한 너비에서 정상인 캡처만으로 전체 전환 구간이 정상이라고 판단할 수 없습니다.
이미지 파일 선택 문제라면 반응형 이미지 점검을 참고하세요. 목표 상품 형태를 레이아웃에 담을 수 있게 되면 Panelly Studio에서 캠페인 이미지를 만들 수 있습니다. Panelly가 Opus를 제공한다는 뜻은 아닙니다.
배포 전 질문
모든 그리드에 최소 너비 0을 써야 하나요?
아닙니다. 줄어들어야 하는 트랙에 적용하고 내부 콘텐츠 처리도 정하세요. 고정 너비가 의도된 비교 영역은 요구가 다릅니다.
상품 이름을 잘라도 되나요?
필요할 때 전체 이름을 확인할 수 있어야 합니다. 너비 제약을 먼저 고친 다음 생략 정책을 정하세요.
이미지를 다시 생성해야 하나요?
CSS 크기 문제라면 보통 필요 없습니다. 제공 이미지와 컨테이너를 먼저 확인하고 구도가 부적절할 때만 소재를 바꾸세요.
