혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch5

혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch5 - (3)

앵그리비버 2026. 6. 23. 07:26

지난 개발에 이어서 클로드 코드로 이번에는 선생님 모드로 운영을 위한 대시보드 제작을 저도 해봤습니다!

앵그리비버입니다! 요즘 AI 덕분에 개발이 정말 즐거워지고 있죠? 이번에는 '선생님 모드'를 클로드 코드(Claude Code)로 구현해보는 재미있는 도전을 해봤어요. 가짜지만 학생들이 퀴즈 게임을 얼마나 잘하는지, 어떤 부분에서 어려워하는지 한눈에 파악할 수 있는 시스템을 만들고 싶었거든요. 수십 명의 학생 데이터를 일일이 들여다보는 건 정말 노가다 작업인데, 서비스를 만들더라도 이러한 운영성 업무를 효율적으로 할 수 있도록 운영 어드민을 만드는 것이 중요합니다.

1. 서비스를 아쉽고 빠르게 만들 수 있는데, 그러면 운영은 어떻게 할까? 고민에서 시작!

예전 같으면 "운영 어드민을 어떻게 하지?" 하면서 머리부터 아팠을 거예요. 그런데 클로드 코드를 쓰면, 이런 고민이 싹 사라집니다. 스크린샷에 있는 프롬프트를 통해서 명령어들과 기능을 먼저 요청해서 확인했습니다.

클로드는 제 말을 착착 알아듣고 필요한 '명령어'들을 만들어주기 시작했어요. 위 스크린샷 보이시죠?

teacher-overview: 전체 학생 성적 현황 개요
teacher-student: 특정 학생 심층 분석
teacher-compare: 학생 간 성적 비교
teacher-category: 카테고리별 성적 분석
teacher-alert: 부진 학생 자동 감지! (이건 정말 필수 기능이죠!)
teacher-report: 이 모든 걸 한 번에 볼 수 있는 종합 보고서

일일이 코드를 짜는 대신, 필요한 기능들을 '명령어' 형태로 정의하고 클로드에게 맡기는 방식이 아주 굳입니다. 개발 및 운영업무 생산성을 아주 기가막히게 올릴 수가 있습니다. 여러분도 이런 경험, 한번 해보시길...! 하이팅

2. 클로드 코드로 만든 '종합 보고서', 실제 모습은 어떨까?

실제로 생성된 HTML 보고서와 PDF 보고서의 모습을 자세히 보여드립니다. 정말… 생각보다 훨씬 더 고퀄리티라서 깜짝 놀랐습니다! 제가 클로드에게 teacher-report 명령어를 입력하고 기다리니, 이렇게 멋진 HTML 보고서 파일이 뚝딱 생성되었습니다. 스크린샷을 보시면, 웹 브라우저에서 보고서가 열린 모습이 보이시죠?

1/5 전체 현황 개요: 학생들의 등수, 닉네임, 총점, 정답률, 등급 등이 보기 쉽게 정리되어 있어요. '박카스' 학생이 총점 4,125점으로 1등이네요!
2/5 카테고리별 성적 분석: 스포츠 100%, 역사 80%처럼 각 카테고리의 평균 정답률과 함께 강점/취약 카테고리를 명확히 표시해줍니다. '스포츠'는 강점, 'IT'와 '일반상식'은 취약 카테고리로 분류됐네요.
3/5 부진 학생 자동 감지: 정답률이 낮거나, 특정 카테고리에서 약하거나, 게임 참여가 부족한 학생들을 AI가 똑똑하게 찾아내서 '저조한 정답률', '경계선 정답률', '게임 참여 부족' 등으로 분류해줍니다. 이걸 보면서 "와, AI가 여기까지 분석해준다고?" 싶어 감탄했어요.
4/5 학생 개인 심층 분석: 각 학생의 이름표와 함께 개인별 총점, 정답률, 게임 수, 카테고리별 성적을 상세히 보여줘요. '박카스' 학생은 스포츠 100%인데 역사는 60%로 조금 아쉽네요. 이런 디테일한 분석은 개인 맞춤 지도를 할 때 정말 큰 도움이 될 것 같아요.
5/5 종합 소견 및 권고 사항: 전체 학급에 대한 총평과 함께, '우수 학생', '관심 필요 학생' 분류, 그리고 '권고 사항'까지 제시합니다. "전체 게임 참여 횟수 3회 이상 목표", "IT/일반상식 카테고리 집중 학습 필요" 같은 구체적인 가이드라인을 제시해주는 게 정말 인상 깊었어요.