튜토리얼
Claude Opus 5.5로 제품 페이지의 작은 터치 영역 고치기
Claude Opus 5.5에 아이콘 크기가 아니라 실제 탭을 받는 영역을 살펴보게 하세요.
Claude Opus 5.5에 아이콘 크기가 아니라 실제 탭을 받는 영역을 살펴보게 하세요. 큰 아이콘도 작은 버튼 안에 있을 수 있고, 투명하게 늘린 영역은 옆 동작과 겹칠 수 있습니다. 필요한 결과는 측정 가능한 수정과 짧은 실제 조작 테스트입니다.
탭을 받는 요소 측정하기
렌더링된 페이지, CSS, 뷰포트 치수, 수량 증감·옵션·갤러리 화살표·닫기 버튼 목록을 제공합니다. 경계 사각형은 CSS 픽셀로 기록하세요. 스크린샷은 배치를 설명하지만 어떤 요소가 포인터 이벤트를 받는지는 보여주지 않습니다.
2012년 UX 토론은 큰 조작 요소와 서로 붙어 있는 상반된 동작을 구분합니다. 과거 커뮤니티 논의이지 현재 상점 측정 결과는 아닙니다. 현재 W3C 설명은 24 × 24 CSS 픽셀 최소 크기와 명시된 예외를 설명하며 작은 대상의 간격 예외도 포함합니다. 모든 인라인 텍스트 링크에 같은 크기를 적용하라는 뜻은 아닙니다.
| 발견 | 수정 후보 | 수정 후 확인 |
|---|---|---|
| 작은 아이콘과 작은 버튼 | 버튼 상자 확대 | 가장자리에서도 올바른 동작 |
| 눈에는 떨어져 있지만 터치 영역 중첩 | 중첩 제거와 레이아웃 간격 | 빈틈에서 양옆 동작이 실행되지 않음 |
| 넓지만 높이가 부족한 버튼 | 세로 공간 추가 | 두 방향 모두 설계 목표 충족 |
| 색으로만 구분하는 견본 | 의미 있는 접근성 이름 | 키보드와 이름도 유효 |
수량 조절 공간 계산하기
20픽셀 정사각형 버튼 두 개 사이에 2픽셀 간격이 있다고 가정합시다. 중심 사이는 22픽셀입니다. 각 중심에 지름 24픽셀 원을 놓으면 겹치므로 이 구체적인 배치는 간격 예외를 충족하지 않습니다. 가상 배치의 계산이며 실제 사이트 접근성 감사는 아닙니다.
이 예에서는 여유 있는 설계 선택으로 44 × 44 정사각형 버튼과 8픽셀 간격을 사용합니다. 버튼 둘과 간격 하나는 숫자 표시를 제외하고 96픽셀입니다. 가운데 숫자 영역이 40이고 양옆 간격이 각각 8이면 감소/숫자/증가 행 전체는 144픽셀입니다. 나중에 버튼을 다시 줄이지 않도록 행 전체 공간부터 확보하세요.
.quantity-button {
min-inline-size: 44px;
min-block-size: 44px;
display: inline-grid;
place-items: center;
}
.quantity-controls {
display: inline-flex;
align-items: center;
gap: 8px;
}이 CSS는 출발점이며 인증이 아닙니다. 테두리, 모양, 변환, 덮는 요소에 따라 실제 대상은 달라집니다. 시각적 균형을 위해 아이콘은 작게 유지해도 됩니다. 가상 요소를 겹쳐 투명한 영역을 늘리면 이웃한 동작이 모호해질 수 있습니다.
완전한 수정 프롬프트
제공한 제품 페이지의 터치 대상을 390 및 1280 CSS 픽셀 뷰포트에서 검토하세요. 입력은 렌더링 페이지, CSS, DOM, 수량·옵션·갤러리 컨트롤입니다. 브라우저를 쓸 수 없으면 추정 크기와 측정을 구분하세요.
각 컨트롤의 접근성 이름, 실제 터치 영역, 이웃 간격, 관찰한 중첩을 나열하세요. W3C 24 × 24 최소 기준 및 예외와 우리가 선택한 44 × 44 정사각형 설계 목표를 구분하세요. 이 검토만으로 전체 사이트가 준수한다고 선언하지 마세요.
최소 레이아웃 수정을 제안하고 가격, 선택 옵션, 수량 한계, 포커스 표시, 반응형 동작을 보존하세요. 아이콘 크기와 버튼 크기를 분리하고 투명한 터치 영역을 겹치지 마세요.
중앙과 가장자리 탭, 이웃 사이 빈틈, 키보드 포커스, 반복 수량 변경, 최솟값 비활성 상태를 테스트하세요. 실행한 것과 미검증 항목을 구분하고 측정, 패치, 변경 전후 조작 결과를 제출하세요.이는 Opus 활용 제안이며 공식 프롬프트 가이드를 작업 범위와 합격 조건 정리에 참고할 수 있습니다. 모델 실측은 아닙니다. 사각형 측정만으로 이벤트를 가로채는 투명한 덮개를 찾을 수 없으므로 수정 후 실제 조작을 해야 합니다.
출시 전 질문
**아이콘을 44픽셀로 만들면 충분한가요?** 실제 컨트롤도 충분히 크고 탭을 받아야 합니다. 아이콘과 버튼을 따로 확인하세요.
**모든 간격이 같아야 하나요?** 8픽셀은 이 예제의 선택이지 보편적인 표준이 아닙니다. 적용 기준과 옆 동작을 확인하세요.
**대화상자 닫기는요?** 터치 크기와 대화상자 포커스 복원은 다른 문제이므로 둘 다 검증하세요.
승인한 제품 이미지를 Panelly Studio에서 광고로 만들고 실제 랜딩 페이지의 컨트롤은 별도로 검토하세요. 이미지에 그려진 CTA가 자동으로 클릭 가능한 버튼이 되지는 않습니다. Panelly가 Opus를 통합했다는 주장도 아닙니다.
