상품명이 두 줄에서 잘릴 때: 모델과 구성 차이를 먼저 남기기

목록에서는 모델 차이가 끝에서 잘리기 쉽습니다

상품 이름이 모두 “여러 공간에서 쓰는 데스크 정리 파우치…”로 시작하고 마지막에만 R12·R24 모델이 붙어 있으면 두 줄 카드에서는 서로 구별되지 않을 수 있습니다. 전체 문자열이 DOM에 남아 있어도 눈으로 목록을 훑는 사람에게 필요한 식별 정보가 보이지 않는 문제입니다.

예제는 가상 파우치 두 모델과 한 세트 구성을 비교합니다. 처음 안은 긴 공통 수식어 뒤에 모델을 두고, 수정안은 모델과 구성 차이를 먼저 보여 줍니다. 실제 상품의 성능이나 판매 자료가 아닙니다.

공통 설명과 고유 식별을 나눕니다

모델을 앞으로 옮기는 것은 내부 코드만 크게 노출하라는 뜻이 아닙니다. 코드와 사람이 구분할 설명을 함께 둡니다. “R24 · 클립 포함 세트”처럼 같은 목록에서 차이가 나는 정보가 먼저 남으면 긴 이름을 전부 열지 않아도 비교를 시작할 수 있습니다.

말줄임은 표시 규칙이지 내용 편집을 대신하지 않습니다

.product-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

MDN은 접두 속성을 사용하는 line-clamp가 display와 box-orient의 조합에 의존한다고 설명합니다. CSS는 화면에 보일 줄 수를 제한할 뿐 어느 단어가 중요한지 고르지 않습니다. 마지막의 모델명까지 같이 숨겼다면 먼저 제목의 정보 순서를 고쳐야 합니다.

속성의 지원 범위와 글꼴·폭에 따라 표시 결과는 달라질 수 있습니다. 두 줄이면 몇 글자가 보인다는 고정 규칙을 세우지 말고, 실제 이름 세 개를 같은 폭과 글자 크기로 놓아 구별되는지 봅니다. 작은 카드와 넓은 목록을 각각 확인합니다.

전체 이름을 확인할 길도 남깁니다

말줄임한 제목에 title 속성만 넣으면 터치나 키보드 환경에서 같은 정보를 확인하기 어려울 수 있습니다. 상세 페이지의 전체 이름, 펼치기, 별도의 모델·구성 줄처럼 해당 과업에 맞는 경로를 검토합니다. 이름을 더 읽으려는 행동과 상품을 여는 행동이 겹쳐 엉뚱한 이동을 만들지 않아야 합니다.

카드 전체가 링크라면 그 이름을 함께 읽어 보세요. 이미지 설명과 제목이 같은 모델을 두 번 길게 반복하거나, 보이는 모델과 접근 가능한 이름이 다른 구성을 가리키지 않는지 확인합니다. 링크의 역할은 목적지와 이름의 관계와 연결됩니다.

모델명만 맞고 실제 구성이 다르면 해결되지 않습니다

목록의 제목, 옵션명, 상세페이지, 주문 요약에서 같은 상품을 식별할 수 있어야 합니다. “R24 세트”라고 이름을 고쳤는데 사진은 R12 단품이거나 포함 품목이 다르면 비교의 빈칸이 남습니다. 세트의 실제 목록은 품목·수량·옵션의 구분으로 대조할 수 있습니다.

검토할 때는 제목을 하나씩 읽는 데서 그치지 말고 옆 카드와 비교합니다. 공통 문구를 잠시 가린 뒤 모델과 구성이 남는지 보세요. 목록 제목은 짧기만 한 이름보다 이 선택지를 다시 찾을 수 있는 이름이어야 합니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문

• MDN: line-clamp
• W3C: Headings and Labels