소개
1탄에 이어서 일일퀘스트 웹앱을 가지고 놀고 있는 샘알토란입니다.
1탄이 뭔지 잘 모르시겠다구요?
4분 정도면 완독 끝!
빠르게 보고오시죠!
https://www.gpters.org/dev/post/7th-8th-cursor-challenger-VL3Ui5cI61sC3Ja
그런데 정말 개발이란게 쉽지만은 않습니다.
바이브 코딩인데 말입니다.
AI와 소통이 안되는 것같아요.
끝없는 디버깅 숲에 빠졌습니다.
로컬 구형 메시지 - 스크린 샷
한국어 텍스트가있는 검은 색 화면
오늘은 끊임 없이 디버깅하다
알아낸 꿀팁 하나를 알려드립니다.
진행 방법
처음에 디버깅 할 때는 아래의 두 가지 방식을 썼습니다.
스크린 샷을 해서 보내준다
한국어 로그인 한 Google 로그인 스크린 샷
확실히 보여주면 이해가 빠르긴 한데..
말로 표현못하거나
이 안되는 기능을 설명하기가 어려웠습니다.
코드를 보여준다.
보라색 배경이있는 컴퓨터 화면의 스크린 샷
이 방식도 좋긴합니다
하지만 저는 코드 까막눈....
그래서 새롭게 시도한 방식!
https://github.com/microsoft/playwright-mcp
바로 Cursor에게 직접 조작을 해서 문제점을 파악하고 디버깅하는 방식을 써봤습니다.
실제로 안되는 부분을 찾으니
전화에 한국어 앱의 스크린 샷
이렇게 스스로 체크까지 완벽합니다.
스크린샷으로도 코드로도 설명하기 어려울 때
한번 AI에게 직접 테스트하도록 해보세요
결과와 배운 점
여러 번 고쳐도 고쳐도 안 되던 문제가 있었는데, MCP 덕분에 정확한 지점을 눈으로 확인할 수 있었어요 👀
아직 완전히 해결하진 못했지만, 무작정 console.log 찍는 방식보다 훨씬 빠르게 핵심을 파악할 수 있었어요
디버깅이 지루하고 귀찮다? 그럴 땐 시각화 도구를 꼭 써보세요!
