튜토리얼
Claude Opus 5.5: 모바일 제품 비교표 개선하기
Claude Opus 5.5에 모바일 표를 단순히 작게 줄이기보다 비교 작업의 의미를 보존하도록 요청하세요.
Claude Opus 5.5에 모바일 표를 단순히 작게 줄이기보다 비교 작업의 의미를 보존하도록 요청하세요. 구매자는 각 값을 제품 및 기능과 연결해야 합니다. 모델명을 숨기거나 모든 누락 값을 ‘아니요’로 바꾸는 작은 레이아웃은 비교의 의미를 바꿉니다.
이는 가상 제품을 사용한 디자인 검토 절차입니다. 실제 데이터, 현재 HTML/CSS, 목표 뷰포트, 구매자의 질문을 제공하세요. 사양 추출과는 다른 작업입니다. 먼저 사실을 승인한 뒤 작은 화면에서 어떻게 비교할지 결정합니다.
독자의 작업에 맞춰 모바일 패턴 고르기
모바일 표 토론은 가로 스크롤, 열 줄이기, 개별 카드의 장단점을 다룹니다. 디자인 선택지일 뿐 특정 방식이 매출을 높인다는 증거는 아닙니다. 구매자가 비교할 두 제품과 결정에 중요한 속성을 먼저 파악하세요.
| 독자의 작업 | 레이아웃 후보 | 승인 전 확인 |
|---|---|---|
| 제품별 동일 기능 비교 | 스크롤 가능한 시맨틱 표 | 행과 제품을 명확히 식별 |
| 선택한 두 제품 비교 | 두 제품 선택기 | 선택을 바꿔도 행 의미 유지 |
| 한 제품씩 이해 | 라벨이 있는 기능 카드 | 모든 값에 기능 라벨 유지 |
| 특정 차이 찾기 | 선택 가능한 차이 필터 | 알 수 없는 값을 같다고 처리하지 않음 |
작업을 지원하는 가장 단순한 패턴부터 시작합니다. 선택기는 상태와 키보드 처리가 추가되고, 카드는 제품 간 비교를 느리게 할 수 있습니다. 데스크톱과 모바일의 사실 데이터를 따로 관리하면 결국 어긋나므로 피하세요.
작은 검증 데이터로 오류 드러내기
가상의 조명 A와 B가 각각 410 g, 560 g이라고 합시다. A는 USB-C 충전을 지원하지만 B의 자료에는 충전 정보가 없습니다. 밝기는 둘 다 3단계입니다. 무게 차이를 보여주고 B의 충전 항목은 ‘명시되지 않음’으로 표시해야 합니다. B가 USB-C를 지원하지 않는다고 결론 낼 수는 없습니다.
차이만 보기에서는 같은 밝기 행을 숨길 수 있지만 불확실한 충전 행은 유지합니다. 긴 번역 제품명과 각주가 있는 세 번째 제품을 추가하세요. 짧은 영어 이름 둘로는 놓치는 넘침과 연결 오류를 찾을 수 있습니다. 이 예시는 요구 동작이며 Opus의 실측 결과가 아닙니다.
단순한 행·열 표에 대한 W3C 안내는 헤더 셀과 `scope`로 관계를 나타내고 caption으로 표를 식별합니다. 시각적 배치를 바꿔도 이 관계를 유지하세요. 예쁜 스크린샷만으로 스크린 리더가 무엇을 읽는지 알 수 없습니다.
구체적인 합격 기준을 담은 프롬프트
Opus 공식 프롬프트 안내를 활용해 필요한 수정과 검사를 명시합니다. 데이터 출처를 제공하고 사실 변경은 레이아웃 작업에서 제외하세요.
이 제품 비교표를 390 CSS픽셀 뷰포트에서 개선하세요.
구매자 작업: 선택한 조명 두 개의 무게와 충전 방식을 비교합니다.
데스크톱과 모바일에 하나의 승인된 데이터 출처를 사용하고 누락 값을 만들지 마세요.
검증 데이터: A는 410 g이며 USB-C를 지원합니다. B는 560 g이고 충전 방식은 명시되지 않았습니다. 둘 다 밝기 3단계입니다.
가장 단순하고 적합한 배치를 제안하고 최소 HTML/CSS 수정안을 반환하세요.
각 값을 제품명과 행 라벨에 연결하고 caption과 시맨틱 헤더 관계를 유지하세요.
가로 스크롤을 쓰면 표 영역으로 제한하고 눈에 보이는 안내와 사용 가능한 키보드 접근을 제공하세요.
선택기를 쓰면 라벨을 지정하고 선택 변경 시 포커스를 유지하세요.
긴 번역 이름, 텍스트 확대, 키보드 탐색, 차이 필터의 알 수 없는 값을 테스트하세요.
실행한 검사와 실행하지 못한 검사를 나눠 반환하세요. 스크린샷만으로 접근성을 주장하지 마세요.첫 화면 너머까지 검증하기
목표 너비에서 모든 열이나 선택 옵션을 확인합니다. 고정 라벨이 데이터를 가리지 않고 긴 단위나 각주가 올바른 기능에 연결되는지 살펴보세요. 글자를 확대하고 페이지 전체에 의도하지 않은 가로 넘침이 생기는지 확인합니다. 표 영역의 스크롤은 의도적일 수 있지만 페이지 전체가 옆으로 움직이는 것은 대개 그렇지 않습니다.
키보드와 대상 스크린 리더로 헤더와 컨트롤을 이해할 수 있는지 확인하세요. 선택기에 의존한다면 스크립트가 없을 때의 대체 표시도 점검합니다. 실제 실행한 검사를 기록하고 작은 표의 필요보다 유지 비용이 큰 상호작용은 제거합니다.
비교 이미지의 조건 맞추기
Panelly Studio에서 두 제품의 카메라 각도와 크기를 맞춘 이미지를 만드세요. 비교 사실은 이미지에만 넣지 말고 페이지의 실제 텍스트로 유지합니다. Panelly가 표 구현을 생성하거나 인증한다는 주장은 아닙니다. 입력 검증은 PDF 사양 절차, 전체 구조는 랜딩 페이지 수정을 참고하세요.
같은 값인 행을 모두 지워도 되나요?
필요하다면 독자가 명시적으로 선택하고 되돌릴 수 있는 옵션으로 제공합니다. 같은 기능도 구매 결정에 중요할 수 있으며 정보 누락은 같다는 증거가 아닙니다. 전체 비교를 복원하는 방법을 보여주세요.
