튜토리얼
Claude Opus 5.5로 옵션 정보가 잘리는 제품 제목 수정하기
말줄임표를 넣기 전에 Claude Opus 5.5가 제품 옵션을 구분하는 정보를 보존하도록 하세요.
말줄임표를 넣기 전에 Claude Opus 5.5가 제품 옵션을 구분하는 정보를 보존하도록 하세요. “250 ml”와 “400 ml”가 사라져 다른 제품이 같아 보인다면 정돈된 카드도 쓸모가 없습니다. 문구, 너비 제약, 전체 이름을 보는 경로를 함께 검토합니다.
반응형 제목에 관한 질문은 고정 픽셀 너비가 만능 해결책이 아님을 보여 줍니다. 과거 커뮤니티 사례이며 현재 브라우저 시험은 아닙니다. 이 글은 검토 절차 제안으로 Opus 성능 평가가 아닙니다.
CSS보다 표시 정책을 먼저 정하기
| 내용 | 우선 처리 | 확인 기준 |
|---|---|---|
| 옵션이나 포장 수량 | 바로 보이게 유지 | 비슷한 제품을 구별 가능 |
| 장식적인 홍보 문구 | 승인된 짧은 표시 문구 | 전체 카탈로그 이름 유지 |
| 길고 끊기지 않는 모델 코드 | 의도적인 줄바꿈 | 코드를 완전히 복사 가능 |
| 보조 설명 | 전체 보기 경로와 함께 생략 검토 | 터치와 키보드로 열기 가능 |
MDN text-overflow 문서는 말줄임표 자체가 넘침을 만들지는 않는다고 설명합니다. 실제 너비 제약부터 확인하세요. flex 자식에 축소를 허용해야 할 수도 있습니다. 부모를 살피지 않고 텍스트만 바꾸면 문제가 남습니다.
두 옵션의 예시
가상의 카탈로그 이름 `Navo insulated travel cup — 250 ml`와 `Navo insulated travel cup — 400 ml`가 좁은 카드에서 모두 `Navo insulated travel…`로 보인다고 가정합니다. 원본 이름은 유지하고 승인된 짧은 제목 “Navo 여행용 컵”과 별도 용량 표시를 고려하세요. 용량은 제품 구분 정보이므로 마우스를 올려야만 보이는 설명에 숨기지 않습니다.
너비가 제한된 flex 레이아웃의 한 줄 보조 라벨에는 다음 패턴을 출발점으로 쓸 수 있습니다. 모든 카드에 적용하는 설계는 아닙니다.
.card-copy { min-width: 0; }
.secondary-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}부모에는 실제 사용 가능한 너비가 있어야 합니다. 이 예제는 여러 줄 생략이나 전체 보기 컨트롤을 구현하지 않습니다. 대화형 라벨의 포커스 테두리가 잘리지 않도록 내부 텍스트만 자르고 바깥 링크를 확인하세요. 실제 글꼴로 긴 단어, 공백, 문장부호, RTL 이름을 시험합니다.
복사 가능한 Opus 요청
공식 Opus 안내와 함께 사용하세요.
전체 카탈로그 이름, 옵션 필드, 마크업, 계산된 스타일, 320·390·1440 CSS 픽셀 스크린샷으로 제품 카드를 검토하세요.
숨겨진 단어 중 제품을 구분하는 정보를 찾으세요. 원본 문자열은 보존하세요. 생략한 의미가 다른 곳에 바로 보일 때만 승인 후보인 짧은 표시명을 제안하세요. 용량, 포장 수량, 호환성, 모델 접미사를 기본적으로 숨기지 마세요.
grid 또는 flex 부모를 따라 너비 제약을 추적하세요. 한 줄 말줄임, 여러 줄 제한, 일반 줄바꿈을 구분하세요. 최소 수정과 긴 단어·RTL 예제를 반환하세요. 링크 포커스 표시를 유지하세요.
터치와 키보드로 전체 이름에 접근할 수 있는 경로를 제공하고 title 속성에만 의존하지 마세요. 확대, 글꼴 로딩 완료 상태, 이웃한 두 옵션을 시험하세요. 관찰한 결함, 제안, 대기 중인 시험을 나누고 근거 없이 스크린샷 시험을 완료했다고 하지 마세요.정렬보다 제품 식별을 검증하기
각 너비에서 상세 페이지를 열지 않고 이웃 제품과 비교합니다. 구매자가 옵션을 구분할 수 있어야 합니다. 그다음 상세 경로에서 전체 이름이 원본과 같은지 확인합니다. 전체 보기 컨트롤이 있으면 터치와 키보드로 작동시킵니다. 호버만으로는 이 상호작용 목표를 충족하지 못합니다.
텍스트 크기나 브라우저 배율을 높이고 반복하세요. 같은 높이를 강제해 중요한 정보를 없애기보다 필요하면 카드를 늘립니다. 가장 긴 시험 이름과 정확한 옵션 필드를 기록해 이후 콘텐츠 가져오기에도 재사용합니다.
남은 질문
**모든 제목을 한 줄로 해야 하나요?** 제품 식별 정보와 공간에 따라 결정합니다.
**글자 수 제한으로 길이를 예측할 수 있나요?** 글꼴, 문자, 언어, 너비에 따라 달라집니다.
**카탈로그 이름도 고치나요?** 별도로 승인된 편집이 아니면 유지합니다.
카드가 옵션을 정확히 전달하면 같은 승인 이름과 참고 이미지를 Panelly Studio에 제공해 광고 이미지를 만드세요. 아랍어와 라틴 문자가 섞인 식별자는 RTL 제품 코드 검토를 참고하세요.
