Phase 3
5times Debug Loop
분석→수정→검증 최대 5회 반복 · /5times-debug-loop
5
최대 Rounds
3
검증 방법
📸
Playwright 지원
📋
자동 보고서
실행 명령어 생성기
🔁
/5times-debug-loop 스킬 실행기
프로젝트 폴더를 입력하면 cd 명령어 + 스킬 전문이 자동 생성됩니다
📁 프로젝트 폴더
⚡ 폴더 경로 입력 시 자동 생성 · 빈칸이면 스킬 내용만 표시
폴더를 입력하면 명령어가 생성됩니다...
🔄
루프 구조 (최대 5회)
Step 1 · 분석
문제 분석 & 원인 진단
현재 상태를 파악하고 근본 원인을 특정한다. 스크린샷, 에러 메시지, 로그를 기반으로 가설을 수립.
Step 2 · 수정
코드 / 설정 변경
진단된 원인에 맞는 최소한의 수정을 적용한다. 여러 원인이 있으면 가장 가능성 높은 것부터 순서대로.
Step 3 · 검증
결과 확인 & 완료 판정
Playwright 스크린샷 / 빌드 실행 / API 응답으로 수정 결과 검증. OK면 종료, 아니면 다음 Round.
🏁 완료 판정 기준
✅
문제가 해결된 경우 (스크린샷/테스트/로그 확인)
✅
사용자가 "OK" / "퍼펙트" / "좋아" 라고 한 경우
⚠️
5회 소진 후 미해결 → 결과 보고서 + 다음 접근법 제안
🔬
검증 방법별 가이드
시각적 결과물 — Playwright 스크린샷
UI / CSS / HTML 변경 시
# 기본 (1440×900)
npx playwright screenshot "[URL]" \
/c/Users/home/AppData/Local/Temp/debug_shot_N.png \
--viewport-size="1440,900" \
--wait-for-timeout=3000
# 모바일 (390×844)
npx playwright screenshot "[URL]" \
/c/Users/home/AppData/Local/Temp/debug_shot_mobile_N.png \
--viewport-size="390,844" \
--wait-for-timeout=3000
# PNG 읽기
Read tool → "C:/Users/home/AppData/Local/Temp/debug_shot_N.png"
체크 항목
여백 · 공백 크기
오버플로우 여부
요소 정렬 위치
SVG 종횡비 유지
반응형 레이아웃
폰트/색상 대비
코드 / 빌드 — 명령어 실행
TypeScript / npm 프로젝트
npm run build # 빌드 확인
npx tsc --noEmit # 타입 체크
npm test # 테스트
API / 서버 — 응답 확인
REST API / 서버 응답 검증
curl -s "[URL]" | head -50
🎨
자주 쓰는 CSS 수정 패턴
🗺️
SVG 지도 여백 제거
/* viewBox 타이트하게 조정 */
viewBox="[left] [top] [width] [height]"
/* height 기준 + auto width */
#svg { height: calc(100vh - Npx); width: auto; }
📐
Flex 컨테이너 여백 제거
.container { width: fit-content; }
.parent { align-items: center; }
📏
전체 화면 고정 (스크롤 없음)
html, body { height: 100vh; overflow: hidden; }
.main { height: calc(100vh - [header]px); overflow: hidden; }
.side-col { height: 100%; overflow-y: auto; }
🏷️
범례 / 오버레이 절대 배치
.container { position: relative; }
.legend {
position: absolute;
bottom: 20px; right: 20px;
background: rgba(255,255,255,0.92);
border-radius: 10px; padding: 8px 10px;
border: 1px solid #e5e7eb;
}
📖 실전 교훈 (2026-03-14, election-map-pages)
| 문제 | 원인 | 해결 |
|---|---|---|
| SVG 옆에 여백 많음 | viewBox가 실제 지도보다 넓음 | viewBox 타이트하게 + width:auto; height:calc(100vh-Npx) |
| 지도가 납작해짐 | width:auto flex item = 100% 아님 |
명시적 height + wrapper div |
| 범례 위치 이상 | flex row 안에 있어서 SVG 너비 잡아먹음 | position:absolute로 빈 공간에 overlay |
width:fit-content 무시됨 |
flex item은 항상 block | 부모에 align-items: center + width: fit-content |
💬
스킬 호출 예시
시각적 문제 (Playwright)
/5times-debug-loop
URL: https://my-app.vercel.app
문제: 지도 우측 여백 너무 많고 카드가 좁음
파일: C:/Project/index.html
검증방법: Playwright 스크린샷 (1440x900)
배포방식: vercel --prod
빌드/코드 문제
/5times-debug-loop
문제: TypeScript 빌드 오류
파일: src/app/api/route.ts
검증방법: npm run build