혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch7 - (3)
클로드 코드 서브 에이전트로 뚝딱! AI PDF 요약 웹 제작
안녕하세요, 앵그리비버입니다! 🦫✨
지난 포스팅에 이어서 에이전트를 활용한 **'바이브 코딩(Vibe Coding)'**입니다. 바로 "PDF 문서를 업로드하면 AI가 핵심을 바로 요약해 주는 웹 서비스" 만들기입니다!
🤖 역할 분담으로 스마트하게: 서브 에이전트
이번 프로젝트에서는 클로드 코드에 역할을 부여해 '팀 프로젝트' 형태로 진행했습니다. 마치 회사에서 개발 팀을 운영하는 것과 유사한 방식이죠. 터미널 스크린샷을 보시면 제가 입력한 역할들은 다음과 같습니다:
product-prd-manager: 요구사항 정의서(PRD) 및 기능 명세서 작성backend-architect: PDF 파일 업로드 및 텍스트 추출 로직 구현llm-integration-specialist: OpenRouter API(Gemma 모델) 연동 및 요약 프롬프트 강화frontend-dev-expert: 드래그 앤 드롭 UI 및 한글 인터페이스 구축qa-engineer: 시나리오별 예외 처리 테스트 및 최종 버그 수정
이렇게 프롬프트를 짠 뒤 실행시키니, 에이전트들이 순서대로 작업을 이어나가는 모습이 정말 장관이었습니다! (생각보다 참 쉽죠잉~!?)
클로드 코드 PRO 쓰다보니까 토큰이 잠깐 다 소진되었었습니다. ㅠㅠ
그리고 다시 다음 날이 밝았네요. ㅎㅎ
📁 폴더 구조와 실행 결과
작업이 진행되면서 Finder에 index_pdf.html 파일과 PRD_pdf_summarizer.md 문서가 깔끔하게 생성되었습니다.
브라우저로 index_pdf.html을 열어보니 깔끔한 연보라색 톤의 드래그 앤 드롭 업로드 영역이 한눈에 들어왔습니다. 준비한 한글맞춤법.pdf 파일을 슥 드래그해 놓으니 파일 용량과 함께 업로드 완료 표시(✔)가 뜨더라고요!
책에서는 OpenRouter 를 활용했었는데요. OpenRouter 는 더 이상 무료 티어를 제공하지 않는다고 합니다.
클로드코드 도움을 받아서 바로 구글 gemini 호출로 변경하여 성공했습니다.
결과를 확인해보니 요약이 잘 되어 있네요!
(참고) 책에서 알려준 예시 PDF 파일은 여기에서 다운로드 받을 수 있어요.
https://github.com/taehojo/vibecoding/tree/master/%EC%9E%85%EB%A0%A5%EC%98%88%EC%A0%9C
💡 직접 해보고 느낀 점
AI에게 단일 요청을 보내는 것보다, 이렇게 기획-백엔드-프론트-QA 체계로 나누어 지시하니 코드의 완성도가 훨씬 높아졌습니다. 이렇게 동작시키는 방법을 좀 더 연습해 봐야겠습니다. 생산성이 300%는 뛰는 느낌이 들긴 하네요.
그리고 책의 내용이 벌써 예전 내용이 되어버려서 동작이 안되는 순간이 있는데, 이럴 때는 당황하지 말고 클로드코드와 대화를 하면서 충분히 해결해 나갈 수 있습니다.