앞면·뒷면·상세 사진을 고를 때: 상품 갤러리 이름과 현재 장면

옵션을 바꾼 것인지 사진만 바꾼 것인지 구분합니다

앞면 사진을 눌렀다가 뒷면을 보더라도 고른 상품의 색상과 구성은 그대로일 수 있습니다. 상품 옵션과 갤러리 장면을 같은 상태로 다루면 사진을 둘러본 것만으로 주문값이 바뀌는 문제가 생길 수 있습니다. 먼저 “상품 선택”과 “같은 상품의 보기 방향”을 다른 정보로 둡니다.

예제는 가상의 파우치 앞면·뒷면·지퍼 상세를 그린 세 도식입니다. 실제 상품 사진이나 재질 자료는 아닙니다. 보기 버튼을 누르면 큰 도식과 장면 설명만 바뀌고 다른 상품을 선택하지 않습니다.

썸네일에도 고를 장면의 이름을 줍니다

1·2·3만 적힌 버튼은 사진이 없거나 작게 보일 때 무엇을 고르는지 알려주기 어렵습니다. 실제 장면 이름을 붙이고 현재 표시 중인 장면도 별도로 드러냅니다. 같은 상품 이름을 모든 썸네일에 길게 반복할 필요는 없습니다.

선택 표시와 키보드 초점을 다른 모양으로 둡니다

<button type="button" data-view="front"
        aria-pressed="true" aria-controls="product-view">앞면</button>
<button type="button" data-view="back"
        aria-pressed="false" aria-controls="product-view">뒷면</button>

예제는 현재 장면 버튼에 pressed 상태를 둡니다. W3C의 버튼 패턴은 토글 상태를 표시할 때 이름을 유지하도록 설명합니다. 선택됐다는 말을 버튼 이름 안에 붙였다 떼기보다 이름은 앞면으로 두고 상태를 별도로 바꾸는 방식입니다.

다른 버튼에 초점이 옮겨져도 현재 큰 사진이 무엇인지 알아야 합니다. 선택은 배경과 상태로, 초점은 윤곽으로 구분합니다. 이 예제의 버튼은 각각 기본 Tab 경로에 있으며 Enter·Space나 클릭으로 실행합니다. 탭 목록처럼 방향키 규칙을 제공하는 구현과 섞지 않습니다.

큰 그림과 설명을 같은 장면으로 갱신합니다

사진만 뒤쪽으로 바뀌고 캡션은 앞면이라고 남으면 보는 경로마다 다른 답을 줍니다. 장면 식별자, 큰 이미지나 도식, 짧은 설명을 한 선택 처리에서 함께 갱신합니다. 이미지 묶음에는 전체 상품과 개별 장면의 관계를 알 수 있는 설명도 남길 수 있습니다.

function showView(key) {
  scenes.forEach(scene => { scene.hidden = scene.dataset.scene !== key; });
  buttons.forEach(button => {
    button.setAttribute('aria-pressed', String(button.dataset.view === key));
  });
  caption.textContent = descriptions[key];
}

실제 이미지를 새로 받는 화면이라면 요청 중과 실패 상태도 필요합니다. 다른 장면의 사진을 새 장면이 준비된 것처럼 남기지 않고 현재 선택과 표시 상태를 구분합니다. 상품 옵션까지 바뀌는 경우는 옵션과 이미지 연결에서 다루는 별도 상태입니다.

그림을 바꿀 때마다 초점을 큰 화면으로 보내지 않습니다

사용자가 세 장을 연속해서 비교하려는데 매번 큰 사진으로 초점이 옮겨지면 다음 장면 버튼을 다시 찾아야 합니다. 이 예제는 실행한 버튼에 초점을 남기고 현재 장면 문장을 바꿉니다. 실제 서비스에서는 확대 창을 여는 행동과 일반 장면 변경을 구별해야 합니다.

확대 창을 열었다면 닫기와 원래 썸네일 복귀를 따로 설계합니다. 대화상자의 복귀 경로가 관련됩니다. 장면만 바뀐 경우에는 이름·현재 표시·설명이 같은 상태인지 먼저 확인하면 됩니다.

예제를 직접 열어 보기

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

참고한 원문

• W3C APG: Button Pattern
• W3C WAI: 이미지 묶음