Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Claude Code를 사용하여 UI 변경 사항을 배포할 때 발생하는 프리뷰 단계의 오류를 검증하는 워크플로우를 소개합니다. testsprite를 활용해 라이브 프리뷰 URL을 대상으로 테스트를 수행하고, Claude가 실패 원인을 분석하여 자동으로 패치를 적용하도록 구성할 수 있습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 r/ClaudeAI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기Claude Code를 사용하여 UI 중심의 변경 사항들을 배포해 왔는데, 로컬의 그린 런(green run, 테스트 통과 상태)이 계속 저를 속이네요. diff(차이점)는 깔끔해 보이고, 유닛 테스트(unit tests)는 통과하는데, 막상 프리뷰(preview)를 보면 깨진 라우트(route), 누락된 환경 변수(env var), 잘못된 셀렉터(selector), 또는 프론트엔드/백엔드 간의 불일치 등이 발생합니다. 솔직히 말해서 바로 이런 것들이 놓치기 쉬운 부분들입니다.
그래서 이제는 머지(merge)하기 전에 라이브 프리뷰 URL을 대상으로 testsprite를 실행합니다. Node 20+ 버전이 필요하며, 브라우저/API 실행은 해당 서비스의 호스팅 측에서 이루어지는데, 이는 셀프 호스팅(self-hostable)이 불가능합니다. 팀에 엄격한 프리뷰 환경(preview-env) 규칙이 있다면 이 점이 중요합니다. 그 이후에는 Claude Code가 에이전트 스킬 파일(agent skill file)을 통해 이를 호출할 수 있습니다.
워크플로우는 충분히 간단합니다. Claude가 변경 사항을 만들면, 프리뷰 URL이 올라가고, CLI가 라이브 URL을 타격(hit)한 뒤, Claude가 실패 번들(failure bundle)을 돌려받아 이를 바탕으로 패치(patch)를 수행합니다. 실패 시에는 실패한 단계, 스크린샷, DOM, 근본 원인 추측, 그리고 권장 수정 사항이 하나의 번들로 제공됩니다. 보통 추측하며 헤매는 대신 작은 패치를 적용하기에 충분한 컨텍스트를 제공합니다.
지루한 작업들, 즉 회원가입 흐름(signup flows), 설정 페이지(settings pages), CRUD 화면, 역할 기반 리다이렉트(role-based redirects) 등에서 가장 유용합니다. diff 상으로는 구현이 괜찮아 보이지만 배포 후에 여전히 깨지는 그런 곳들 말이죠. 저는 여전히 일반적인 유닛 테스트와 리뷰를 유지하고 있습니다. 이것은 단지 머지하기 전, 배포된 AI 작성 UI에 대한 최종 클릭스루(click-through) 레이어일 뿐입니다.
submitted by /u/Pretend-Bet5069 [link] [comments]