Ep3. QA도 Vibe하게 해보자
작성자 HelloStranger
Vibe Coding Diary
Ep3. QA도 Vibe하게 해보자
안녕하세요. 뉴니커!
Vibe Coding Diary가 벌써 네번째 발행이 되네요.
오늘은 Vibe Coding을 하면서 지저분해진 데이터베이스(이하 DB)를 좀 정리를 해보려 해요.
요근래에 기능을 추가하고 수정, 제거를 하다보니 DB 조작하는 일이 많아졌는데, 이 과정에서 DB 관련 코드가 지저분해졌답니다.
-
다양한 쿼리문(DB에 입력하는 문장)을 생성하여 프로젝트 하위에 저장함
-
다양한 테이블(특정 데이터를 저장하기 위한 공간, 엑셀에서 Sheet 개념임)을 생성
-
이러다보니 중복되고 불필요한 정보들이 발생함
그렇다보니 몇 가지 MCP를 동원하여 DB를 최적화를 해야했고 문제가 없는지 QA까지 해보았어요. 그 내용들을 이번 뉴스레터에 담아서 공유드려볼게요. 🙋♂️
기능 추가할 때마다 생겨난 쿼리 파일
지난 이야기
이번주 작업 내용
1. Serena MCP: 적은 토큰으로 코드 이해시키기
이번주에 꿀팁 하나를 얻어왔어요. 바이브 코딩의 꽃(?) 중 하나는 아무래도 적은 Token으로 고효율을 뽑아내는 것인데요. 아무런 도움 없이 Claude Code에게 명령을 한다면, 프로젝트의 모든 코드가 Token으로 입력되어 사용 한도가 금방 차버릴텐데요. Token 효율성을 최적화하고 프로젝트의 코드를 이해하는 MCP를 소개드려요.
바로 Serena MCP인데요. Serena MCP는 LLM을 활용하여 코드베이스에서 직접 코드를 검색하고 편집하는 기능을 제공하는 오픈소스 툴킷이에요. 심볼 단위의 코드 엔티티 추출 및 관계 구조 활용을 통해 IDE 수준의 기능을 제공하며, Claude Code, Claude Desktop 등 다양한 LLM과도 통합할 수 있답니다.
🔗 Serena는 개발자의 코드베이스에서 직접 작동하는 강력한 코딩 에이전트 툴킷으로, LLM을 완전한 기능을 갖춘 에이전트로 변환합니다.
보다 상세한 내용은 아래 블로그에서 확인해주세요. 설치 방법부터 활용 예시까지 상세하게 다루었으며, 저도 이 글을 참고로 셋업을 해두었어요.
🔗 LLM(Large Language Model)이 코딩 어시스턴트로 급부상하면서, 개발자들은 더 나은 도구를 갈망하고 있습니다. ChatGPT, Claude, Gemini 같은...
2. 프로젝트 이해 및 DB 분석하기
Serena MCP의 기능 중 하나는 온보딩인데요. Claude Code에 MCP Server로 등록이 완료되었다면 '/mcp__serena__initial_instructions' 명령어가 추가되었을 거예요.
이 명령어를 통해 현재 개발중인 프로젝트를 온보딩할 수 있으며, 코드를 전반적으로 수정하기 전에 이해시키기 위해 입력을 해주었어요.
프로젝트를 이해하였으니 실질적인 DB 관련 정리를 요청해볼게요. 저는 subapase라는 서비스에서 제공하는 DB를 연결해두어서 Cluade Code에 아래와 같이 요청했어요. 현재 상황과 더불어 어떤 결과를 원하는지, 그리고 어떤 mcp를 활용할 것인지 명시를 하니, Claude Code 스스로 Todos를 생성하고 하나씩 작업을 진행하더라고요.
입력한 내용
supabase를 이용한 데이터베이스를 운영중인데 개발을 하다보니, 코드에 있는 쿼리와 supabase에 있는 DB가 지저분하게 추가가 되고 있어. serena mcp를 이용하여 코드와 db 테이블을 분석하고, db 관련 쿼리 및 테이블을 정리해줘.
실제 입력한 화면
3. DB 문제점 파악 및 개선하기
Serena MCP를 이용해 프로젝트 내에서 DB 관련 코드들을 찾고 분석한 결과, 아래와 같이 문제점을 찾아주었는데요. 이러한 문제점은 Vibe Coding으로 개발된 다른 프로젝트에도 내포되어 있지 않을까해요.
-
테이블 중복 및 혼재
-
컬럼 중복 및 불일치
-
추가 테이블의 산발적 생성
-
마이그레이션 스크립트 과다
역시나 Cluade Code... 문제점을 정리하고 개선에 필요한 쿼리문을 생성해주어요. 심지어 정리 가이드 문서(*.md)까지 생성을 해주어서 손쉽게 개선을 할 수 있었어요.
물론, 이것으로 27번째 쿼리(sql)파일이긴 하지만, 파일들은 정리하면 되니까 괜찮아요 ^^,,
DB 개선에 필요한 파일 생성중
DB 정리 및 마이그레이션 가이드.md
이 후 해야될 작업들은 아래 5가지네요. 이 중에서 2번, 3번 항목(sql 실행)은 Supabase > Sql Editor 페이지로 이동하여 그대로 입력하고 실행을 해주었어요. 모든 작업을 완료하고 간단히 웹 서비스를 올려보니 일단 문제점은 없어보입니다 (휴)
4. Vibe QA
모든 서비스는 코드수정 후, 혹은 출시 전에 QA 테스트를 진행해요. 저 또한 데이터의 핵심인 DB 쪽을 수정했다보니, 사이트가 정상적인지 확인이 필요했는데요. Vibe Coding 시대에 QA도 Vibe하게 하면 좋겠다 생각이 들어서, 좋은 MCP Server를 또 가지고 왔어요. 😎
1) Playwright-MCP: 웹 브라우징 자동화하기
Microsoft에서 개발한 Playwright를 사용하여 브라우저 자동화 기능을 제공하는 MCP 서버인데요. 웹브라우저 자동화 작업은 이거 하나로 끝낼 수 있을 정도랍니다. (예시 👉 AI로 부동산 실거래가 다운로드)
🔗 Playwright MCP는 Playwright를 사용하여 브라우저 자동화 기능을 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다.
아래 이미지는 Playwright-MCP를 이용하여 QA하는 장면을 찍어둔것인데요. Claude Code에서 요청을 하면 브라우저 하나를 실행하여 자동화하는 모습을 볼 수 있었습니다. 어떻게 진행하였는지 이어서 공유를 드릴게요.
2) QA 체크리스트 생성 및 진행
이 프로젝트를 시작하면서 정식 QA는 이번이 처음인데요. 그렇다보니 기존에 작성해둔 체크리스트라는 게 없어요.
자동화 하는김에 체크리스트도 Claude Code에게 생성해달라고 요청을 했고, 그 체크리스트를 기반으로 QA를 진행해달라고 했습니다. (* 좀 더 디테일한 테스팅을 원한다면 사용자가 직접 체크리스트를 제공해주어도 좋을 것 같아요.)
입력한 내용
playwright-mcp를 이용하여 QA를 진행할텐데, QA 체크리스트를 생성하고 playwright-mcp로 'http://localhost:3000'에서 할 수 있는 모든 QA를 진행해줘.
실제 입력한 화면
웹브라우저에서 특정 기능을 수행하고 에러가 발생했는데요. 그 내용을 기반으로 하여 코드를 수정하는 모습도 볼 수 있었습니다.
QA 자동화 중 코드 수정하기
모든 QA를 완료하였고, 최종적으로 QA 결과도 제공해주네요. (Context가 길어지면 종종 영어로 출력을 뱉던데 그러려니 하고 사용중..)
Vibe QA (1)
Vibe QA (2)
5. 끝으로
지금까지 Serena-MCP와 Playwright-MCP를 이용하여, DB 개선 및 QA 자동화를 진행해보았어요. 개인적으로 Serena의 토큰 최적화도 놀라웠지만, 무엇보다도 Playwright로 자동화를 한다는게 너무 재밌고 신기했던 뉴스레터였네요.
다행히 빌드에도 이상이 없었구요 :)
현재 vercel을 이용해서 현재까지 개발한 내용들을 배포해두었는데요. 다음 뉴스레터에서는 vercel로 배포하는 내용을 다룰 예정이긴 하지만, 그 사이에 또다른 이슈가 있다면 변동될 수 있으니 참고해주세요.
바이브코딩 결과물 👉 mcphub-with-claude.vercel.app
그럼 이만 줄이고 그다음 시간에 또 만나뵐게요! 🙏