레거시 앱에서 클로드 코드와 함께 춤을

요즘 클로드 코드 덕분에 레거시 앱 프론트엔드에 새 피처 추가하는 시간이 훨씬 감소했습니다. 대강의 워크플로우를 공유해봅니다.

1. GitHub 이슈에 최대한 자세하게 컨텍스트 작성. 어떤 목적으로 어떤 기능을 추가할 것이다. UI는 기존의 이런 파일과 패턴을 참조해라. API는 이 PR을 참조해라. 유저스토리는 이렇다(어디서는 뭘 할 거고 어디서는 뭘 안 할 것이다).
2. 클로드 코드에서 (claude --model sonnet) 플랜 모드 켜고, 이슈 링크 참조해서 구현하라고 요청. CLAUDE.md에는 gh CLI 쓰라고 넣어놓음. 필요시 PM이 만들어주는 피그마 이미지도 캡처해서 올림
3. 플랜하는 거 지켜보면서, 또는 플랜 다 된거 지켜보면서 개입. 영 엇나간다 싶으면 취소하고 깃헙 이슈에 맥락 더 추가해서 다시 플래닝.
4. 플랜 다 되면 구현. 구현하는 동안에는 다른 작업 함.
5. 구현 완료되면 코드 쭉 살펴보고, 일단 문제가 안 보이면 스테이징.
6. pre-commit hook으로 돌아간 타입 체크가 실패하면 실패했다고 얘기해서 고치게 함. 몇턴 돌아도 잘 안 되면 코드 날리고 내가 고침. unstaged changes로 남아있으니 날리긴 쉬움. 이 상태에서 커밋
7. 테스트 돌려서 실패하면 얘기해서 고치게 함. 마찬가지로 몇 턴 지나도 잘 못하면 내가 고침. 성공하면 지난 커밋 amend
8. 직접 깃헙 이슈, 피그마 기획과 비교하면서 하나씩 실행해봄. 코드리뷰에서는 얘가 '잘못 작업'한 것은 비교적 잘 보이지만 '작업했어야 했는데 안 한' 건 안 보이는 걸 주의하며 검수
9. 빠진 부분이 있다면 일부는 내가 고치고 스테이징. 나머지는 현재 diff 참고해서 고치라고 클로드 코드에게 시킴. 완료 후 커밋, 테스트
10. 마지막으로 클로드에게 이번 작업 전체에서 내가 직접 고친 내용들 알려주며 CLAUDE.md에서 수정할 만한 거 찾아보라고 함
11. 푸시해서 PR 만들면 버셀이 프리뷰 만들어줌. PM에게 전달해서 QA 요청

다만 디버깅에서는 클로드 코드에게 그냥 사용자 리포트랑 스크린샷만 나이브하게 줬다가 실패한 경험도 꽤 있었습니다. 디버깅에서는 '원인 파악'이 깃헙 이슈에 자세히 쓰던 컨텍스트의 역할을 하는데 이걸 소홀히 하면 토큰 낭비가 엄청 심해지는 일이 다반사였어요.

역시 디버깅은 직접 세션 리플레이를 보고, 직접 재현해보며 최소 재현 조건을 찾는 게 선행되어야만 클로드 코드에게도 제대로 된 컨텍스트를 줄 수 있더군요. 작년에 많은 노력을 들였고, 인프콘에서 발표도 했던 '디버깅 마인드셋'이 AI 시대에도 빠르게 디버깅하는 데 도움을 주고 있습니다.

[인프콘 2024] 디버깅 마인드셋: 디버깅의 고통을 절반으로 줄여주는 고수들의 행동패턴 따라하기

디버깅 고수들이 부리는 마법은, 사실 누구나 배울 수 있는 기술입니다.

Steady Study배휘동