튜토리얼
Claude Opus 5.5로 뒤로 가기 후 제품 필터 복원하기
Claude Opus 5.5에 브라우저 동작 순서와 기대 상태를 주고 필터 복원을 고쳐 달라고 요청하세요.
Claude Opus 5.5에 브라우저 동작 순서와 기대 상태를 주고 필터 복원을 고쳐 달라고 요청하세요. 값을 저장하는 것은 절반입니다. 뒤로, 앞으로, 새로고침, 공유 링크 열기 후 주소와 선택 컨트롤, 결과가 일치해야 합니다.
한 번 뒤로 갈 때의 의미부터 정하기
작은 기록 동작 규칙을 작성합니다. 가상 카탈로그에서 파란색을 적용하고 제품을 연 뒤 뒤로 가면, 필터 없는 목록이 아니라 파란색 목록이어야 합니다. 검색창에 세 글자를 입력했다고 의도하지 않은 뒤로 가기 세 단계가 추가돼서는 안 됩니다.
2020년 개발자 질문은 반대 불편을 보여줍니다. 탭을 바꿀 때마다 기록이 쌓였습니다. 이는 설계 질문의 증거이지 모든 기록을 대체하라는 권고가 아닙니다.
| 동작 | 예제 기록 정책 | 기대 결과 |
|---|---|---|
| 제출 전 검색어 편집 | 로컬 초안 | 뒤로 가기가 키 입력을 재생하지 않음 |
| 의미 있는 필터 적용 | 기록 하나 추가 | 이전 적용 조건 복원 |
| 의도 변경 없이 기본 URL 정리 | 현재 기록 대체 | 중복 단계 없음 |
| 제품 열기 | 일반 이동 | 뒤로 가면 적용된 목록 |
URL로 상태를 재구성하기
카테고리, 색, 정렬처럼 공개 가능한 값을 쓰고 고객 정보나 비밀을 URL에 넣지 마세요. 허용값 목록으로 파싱하고 기본값과 중복 키 처리 방법을 정합니다. 필터를 바꿀 때 무관한 캠페인 매개변수를 보존하세요. 기억에 의존해 쿼리 전체를 다시 만들지 않습니다.
아래 가상 주소는 색과 정렬로 복원 가능한 목록을 설명합니다.
/products?color=blue&sort=price-asc&utm_source=newslettercolor를 green으로 바꾸면서 sort와 utm_source는 유지해야 합니다. 수동 문자열 연결 대신 URL과 URLSearchParams를 사용하세요. 일관된 인코딩과 파싱으로 새 탭과 새로고침도 이전 페이지 메모리 없이 상태를 복원하게 합니다.
MDN History API 가이드는 pushState 추가와 replaceState 갱신을 구분합니다. 호출 자체가 화면을 렌더링해 주지는 않습니다. 기록 이동 시 뷰를 복원하고 최초 기록도 초기화해야 합니다. 라우터가 있는 앱에서는 지원되는 탐색 API를 사용하고 경쟁하는 기록 제어기를 덧붙이지 마세요.
상태 전환을 지정한 수정 프롬프트
제공한 제품 카탈로그의 필터 복원을 고치세요. 입력은 라우터 버전, 필터 컴포넌트, URL 파서, 요청 로직, 실패 녹화입니다. 먼저 상태의 원본과 중복 저장소를 정리하세요.
원하는 순서: 무필터 목록 → 파란색 적용 → 제품 열기 → 뒤로 → 파란 목록 → 뒤로 → 무필터 목록 → 앞으로 → 파란 목록. 검색 초안의 각 키 입력이 기록을 만들면 안 됩니다. 새로고침과 공유 링크도 적용 상태를 복원해야 합니다.
무관한 쿼리 매개변수를 보존하세요. 색과 정렬의 허용값, 중복 키, 잘못된 값의 처리를 정의하세요. 적절하면 기존 라우터 API를 쓰세요. 기록 이동에서는 새 기록을 만들지 않고 컨트롤과 결과를 갱신하세요.
느린 이전 응답이 새 필터 상태를 덮지 못하게 하세요. 로딩과 빈 결과를 이해하기 쉽게 만들고, 올바른 결과가 존재한 다음 스크롤을 의도적으로 복원하세요.
최소 패치와 각 단계의 URL, 컨트롤, 결과 식별, 기록 위치가 담긴 테스트 표를 주세요. 실행하지 않은 브라우저 테스트를 통과했다고 하지 말고 부족한 실행 정보를 명시하세요.이는 제안하는 Opus 작업이며 모델 실측이 아닙니다. 공식 프롬프트 가이드는 작업 구성 자료일 뿐 패치가 맞다는 증거는 아닙니다. URL 읽기·쓰기 예는 로컬에서 확인할 수 있지만 실제 기록과 요청은 브라우저 테스트가 필요합니다.
느린 요청에서도 확인하기
제품을 연 직후와 느린 응답을 기다린 후에 각각 뒤로 가세요. 파란색 다음 초록색을 빠르게 적용하고 파란 응답이 늦게 끝나도 초록 결과를 덮지 않는지 확인합니다. 오래된 요청을 취소하거나 현재 요청 ID로 오래된 응답을 거절하세요. 모든 탐색을 멈춰 문제를 숨기지 마세요.
**local storage면 충분한가요?** 선호는 기억해도 각 기록이나 공유 가능한 화면을 정의하지는 못합니다. 저장된 선호가 명시적 URL을 몰래 덮지 않게 하세요.
**모든 필터에 replaceState를 쓰나요?** 이 규칙에서 의미 있는 중간 단계를 없애게 됩니다. 행동 정책을 먼저 고르세요.
**캠페인 링크 점검과 같은가요?** 캠페인 링크 점검은 목적지와 매개변수를 확인하고, 이 글은 상호작용 후 복원을 확인합니다.
Panelly Studio에서 맞는 제품 광고를 만든 다음 실제 목적지의 탐색·복귀 흐름 전체를 테스트하세요. Panelly가 Opus를 통합하거나 가상 카탈로그를 구현했다는 뜻은 아닙니다.
