튜토리얼
Claude Opus 5.5로 제품 캐러셀 키보드 탐색 수정하기
캐러셀의 DOM, 상호작용 코드와 명확한 상태 규칙을 Claude Opus 5.5에 제공하고 초점과 자동 회전을 함께 고치도록 하세요.
Panelly로 직접 만들어 보세요
아이디어를 내 상품 광고로
상품 사진과 아이디어로 시작하세요. Panelly에서 네 컷 광고, 통일된 소재 세트, 영상을 만들 수 있어요.
Panelly에서 만들기 요청을 먼저 수정하고 생성하세요.
캐러셀의 DOM, 상호작용 코드와 명확한 상태 규칙을 Claude Opus 5.5에 제공하고 초점과 자동 회전을 함께 고치도록 하세요. 화살표에 키 이벤트만 붙여서는 숨은 링크가 초점을 받거나 읽는 도중 회전이 다시 시작되는 문제를 해결하지 못합니다.
변경 전에 실패 관찰하기
2016년 개발자 질문은 마우스로만 작동하는 화살표를 설명합니다. 오래된 라이브러리의 구체적인 문제이지 현재 권장 패치는 아닙니다. W3C 캐러셀 패턴에 따라 일반 Tab 탐색, 가능한 네이티브 컨트롤, 회전 콘텐츠 앞의 시작·정지 컨트롤을 사용하세요.
| 증상 | 수정 범위 | 검증 |
|---|---|---|
| Tab이 보이지 않는 구매 링크로 이동 | 비활성 슬라이드 노출 | 활성 내용만 일반 Tab 순서에 포함 |
| 다음 버튼이 새 슬라이드로 초점을 이동 | 컨트롤 실행 | 초점은 다음 버튼에 유지 |
| 초점이 나가면 회전 재개 | 자동 회전 상태 | 명시적인 시작 동작 필요 |
| 호버는 멈추지만 초점 진입은 무시 | 정지 조건 | 두 동작 모두 정지 |
페이지 전체 방향키를 가로채지 마세요. 기본 이전/다음 캐러셀과 탭형 선택기는 키보드 규칙이 다릅니다. 패치 전에 실제 패턴부터 정합니다.
정지 상태 유지하기
슬라이드 네 장에 링크가 두 개씩 있는 예에서 세 장을 화면 밖으로 밀기만 하면 숨은 링크 여섯 개가 Tab 순서에 남을 수 있습니다. 가상 레이아웃 계산이며 실제 쇼핑몰 감사가 아닙니다. 시각적 숨김이나 `aria-hidden`만으로 초점을 완전히 고치지 못합니다. 비활성 컨트롤을 키보드 탐색에서 제외하고 현재 슬라이드를 올바르게 노출하는 렌더링 또는 상태 전략이 필요합니다.
`activeIndex`와 회전 실행 여부를 정의하세요. 초점 진입은 회전을 멈추며, 다음 버튼은 초점을 옮기지 않고 인덱스만 바꿉니다. 밖으로 나가도 자동 재시작하지 않습니다. 명시적인 시작 동작으로 설계에 따라 재개하며, 이후 외부에서 초점이 다시 들어오면 정지합니다. 호버 정지도 처리하세요. 이 예시는 동작 줄이기 선호 시 초기 자동 회전을 끄지만, 이는 시작·정지 컨트롤의 대체물이 아닙니다.
전체 구현 검토 프롬프트
제품 캐러셀의 DOM, CSS와 상태 핸들러를 검토하세요. 기존 설계가 요구하지 않으면 탭 선택기 대신 기본 이전/다음 패턴을 사용하세요. 슬라이드 순서, 링크, 제품 ID와 선택된 옵션을 보존하세요.
활성 및 비활성 슬라이드의 모든 초점 가능 컨트롤을 나열하세요. 교육용 4장×링크2개 사례에서 일반 Tab 순서에 남으면 안 되는 비활성 링크 6개를 찾으세요. aria-hidden만을 키보드 수정으로 취급하지 마세요.
이전, 다음, 시작/정지는 네이티브 버튼을 쓰고 실행한 컨트롤에 초점을 유지하세요. 초점 진입과 호버 시 정지하며 초점이 나가도 자동 재개하지 않습니다. 명시적인 시작을 요구하세요. 이 설계에서 동작 줄이기 사용자는 초기 자동 회전을 끕니다.
최소 패치, 상태 전환 표와 테스트를 반환하세요. 양방향 Tab, Enter/Space, 반복 다음, 처음/끝 순환, 초점 정지, 명시 재개, 동작 줄이기 시작 상태를 시험하세요. 실행한 브라우저 검사와 제안 테스트를 구분하고 사이트 전체 접근성 인증을 주장하지 마세요.공식 프롬프트 가이드에 맞춰 범위를 정한 가상 Opus 작업입니다. 작은 로컬 상태 예제로 전환을 검증해도 실제 DOM, 화면 읽기 프로그램, 타이머 구현이 작동한다는 증거는 아닙니다.
납품 컴포넌트 확인하기
캐러셀 바깥에서 양방향 Tab으로 들어가 초점 표시와 의미 있는 버튼 이름을 확인하세요. 다음을 반복해도 초점이 사라지지 않아야 합니다. 긴 제품 설명에서 정지하고 일반 회전 간격보다 오래 기다린 뒤 명시 재시작을 별도로 시험합니다. 동작 줄이기와 실제 작은 화면에서도 반복하세요. 스크린샷만 남기지 말고 브라우저와 관찰 순서를 기록합니다.
**모든 슬라이드에 방향키 탐색이 필요한가요?** 아닙니다. 선택한 패턴을 따르며 네이티브 버튼은 기본 실행을 지원합니다.
**비활성 링크에 `tabindex=0`을 둘 수 있나요?** 화면 밖에 있고 사용할 수 없다면 안 됩니다. 보이는 사용 가능 상태와 키보드 노출을 맞추세요.
Panelly Studio에서 슬라이드 이미지를 만든 뒤 실제 캐러셀은 별도로 검사하세요. 터치 영역 간격은 버튼 형상을 다루며 키보드 동작을 입증하지 않습니다. Panelly의 Opus 연동을 가정하지 않습니다.
