SOP: Chrome DevTools 검증 루프(Validation Loop)

UI 작업이 실제 런타임 상호작용에 의존하고, 코드 검사만으로는 부족하며 스크린샷·DOM 상태·콘솔 출력이 더 중요할 때 이 표준 작업 절차(SOP)를 사용하십시오.

검증 루프(validation loop)란 특정 UI 여정(journey)이 깔끔하게 완료될 때까지 BEFORE/AFTER 상태를 반복적으로 비교하며 문제를 좁혀 나가는 디버그 사이클입니다.

목표

UI 유효성 검사(validation)를 에이전트(agent)가 여정이 깔끔해질 때까지 반복 실행할 수 있는 재현 가능한 상호작용 루프로 전환합니다.

핵심 루프

1. 대상 페이지 또는 앱 인스턴스를 선택한다.
2. 오래된 콘솔 노이즈를 제거한다.
3. BEFORE 상태를 캡처한다.
4. UI 경로를 실행한다.
5. 상호작용 중 런타임 이벤트를 관찰한다.
6. AFTER 상태를 캡처한다.
7. 수정 사항을 적용하고 필요하면 앱을 재시작한다.
8. 여정이 깔끔해질 때까지 유효성 검사를 재실행한다.

필요한 입력

• 안정적인 시작 명령어
• 재현 가능한 UI 여정
• DOM, 콘솔, 또는 스크린샷을 스냅샷할 수 있는 수단
• "깔끔함"의 기준이 되는 규칙

실행 절차

1. 활성 실행 계획(execution plan)에 대상 여정을 기록한다.
2. 성공을 관찰 가능한 항목으로 정의한다: 텍스트 존재 여부, 버튼 활성화, 오류 제거, 콘솔 정상, 요청 성공.
3. 상호작용 전 초기 상태를 스냅샷한다.
4. 한 번에 정확히 하나의 경로만 실행한다.
5. 런타임 이벤트, DOM 변화, 가시적 출력을 기록한다.
6. 여정이 실패하면 가장 작은 책임 계층을 수정하고 재시작한다.
7. 동일한 경로를 재실행하여 BEFORE/AFTER 증거를 비교한다.

깔끔함 기준

• 의도한 가시적 상태가 존재한다
• 예기치 않은 오류가 없다
• 콘솔 노이즈가 이해되거나 제거되었다
• 동일한 경로를 재실행하면 동일한 결과가 나온다

업데이트해야 할 저장소 산출물

• 활성 실행 계획
• docs/RELIABILITY.md — 해당 여정이 황금 경로(golden path)가 되는 경우
• 가시적 동작이 변경된 경우 제품 명세(product spec)