공부하는 바이브 코딩 with 클로드 코드 - Ch8 - (2)

[바이브코딩] 클로드 코드(Claude Code) & MCP 연동으로 웹서비스 제작부터 자동 테스트, 깃허브 업로드까지 한 번에 끝내기!

안녕하세요, 앵그리비버입니다! 🦫✨

조금 늦은 감이 있지만 책을 따라 말로만 듣던 클로드 코드(Claude Code) 터미널 환경에 직접 다양한 MCP를 연동해서 프론트엔드 앱 개발부터 테스트, 배포까지 풀코스로 경험해보았습니다.

결론부터 말씀드리면... "와, 진짜 쉽다...!" 소리가 절로 나왔습니다. 과정들을 스크린샷과 함께 친절하게 풀어볼게요!

---

1단계: Context7 & Playwright MCP 설정하기

가장 먼저 최신 라이브러리 문서와 유용한 컨텍스트를 클로드에게 제공하기 위해 Context7 API Key를 발급받고 로컬 클로드 코드 환경에 연동했습니다.

claude mcp add --scope user --header "CONTEXT7_API_KEY: ..." --transport http context7 https://mcp.context7.com

터미널에서 claude mcp list 명령어를 입력하니, Context7은 물론이고 Notion, GitHub, Playwright까지 착착 연결된 것을 확인할 수 있었어요!

3단계에서 Playwright MCP로 자동 QA 테스트 진행하기 위해서 Playwright MCP도 연동했습니다.

 

2단계: 프롬프트 한 줄로 쇼핑 리스트 앱 생성

터미널을 열고 클로드 코드에게 아주 담백하게 요청했습니다.

"쇼핑 리스트 앱을 만들어 주세요. 아이템 추가, 삭제, 체크 기능이 있는 간단한 웹 UI로 로컬 브라우저에서 실행되게 해주세요."

그러자 클로드가 불과 30여 초 만에 HTML, CSS, JavaScript가 한데 담긴 깔끔한 shopping-list.html 파일을 작성해 주고 로컬 브라우저까지 자동으로 띄워주더군요! (localStorage 저장 기능까지 알아서 챙겨주는 센스...)

 

 

3단계: Playwright MCP로 자동 QA 테스트 진행

앱이 잘 작동하는지 사람이 일일이 클릭해 볼 수도 있지만, 우리는 스마트하게 Playwright MCP를 활용했습니다.

"Playwright MCP를 사용해서 이 쇼핑 리스트 앱의 모든 기능을 자동으로 테스트해주세요."

클로드가 브라우저 헤드리스 모드를 구동하더니, 아이템 추가, Enter키 동작, 체크박스 토글, localStorage 지목 테스트, 완료 항목 일괄 삭제까지 **총 12가지 테스트 시나리오를 100% 통과(PASS)**시키며 완벽한 리포트를 작성해 주었습니다.

https://youtu.be/cZCtmKTj7yg

 

 

4단계: GitHub MCP로 커밋 & 원격 저장소 생성까지!

마지막으로 만든 앱을 제 깃허브에 올리고 싶었어요. 원래라면 터미널 나가서 git init, git remote add 치고 깃허브 웹사이트 들어가서 Repo 만들고... 귀찮은 과정이 많죠?

하지만 GitHub MCP가 연결되어 있다면? 터미널 창에서 클로드에게 이렇게 말하면 끝납니다!

"현재 폴더에 만들어진 쇼핑 리스트 앱을 깃허브에 저장하고 싶습니다. github mcp를 사용해서 shopping-list-app 이라는 저장소를 만들고 업로드해 주세요."

그러자 깃허브 웹사이트를 터치 한 번 안 했는데도, 제 계정({계정}/shopping-list-app)에 신규 레포지토리가 생성되고 index.html과 README.md 커밋까지 완료되었습니다!

---

💡 느낀 점 & 마무리

예전에는 아이디어 하나를 구현해서 깃허브에 올리기까지 며칠씩 걸리곤 했는데, MCP를 장착한 클로드 코드와 함께하니 10분도 안 되어서 제작-테스트-배포 전 과정이 완성되었습니다.

이제 패러다임이 '코드를 직접 치는 것'에서 'AI 도구들을 어떻게 잘 엮어서 지시할 것인가'로 완전히 전환된 느낌이에요. 여러분도 망설이지 말고 꼭 도전해 보세요!

오늘도 즐거운 바이브 코딩 되시길 바랍니다! 하이팅~! 🔥