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

AI와 함께하는 기획, PRD도 뚝딱! 생각보다 참 쉽죠잉!?

지난 번에는 할 일 목록을 만들고 자동으로 카테고리를 분류하는 것까지 해보았습니다. 이번에는 혼자서 공부하는 바이브코딩 책을 보면서 "상식 퀴즈 게임을 만들려고 합니다. PRD 작성부터 Claude AI의 도움을 받아서 진행했습니다.

Claude.ai에 접속해서 "상식 퀴즈 게임을 만들려고 합니다. PRD를 작성해주세요." 라고 딱 한 문장 던지면 Claude가 순식간에 핵심 요구사항을 정리해줍니다. 100% 완벽하지 않더라도 초안으로 사용하기에 아주 적절합니다. 그리고 디테일한 부분은 역시 사람이 개입해서 완성도를 높여주면 더 좋습니다.

Claude가 제안한 핵심 게임 규칙:

• 다양한 카테고리: 한국사, 일반상식, IT상식, 스포츠까지 4가지나!
• 문제 수: 각 카테고리별 10문제, 총 40문제.
• 즉각적인 피드백: 맞았는지 틀렸는지 바로바로 알려주는 센스!
• 랭킹 시스템: 최종 점수와 랭킹 기능까지!

머릿속으로만 생각했던 것들을 이렇게 체계적으로 정리해줍니다. 유능한 PM 비서가 옆에 있는 기분인데, 앞서 말씀드린대로 그대로 갖다 쓸 수는 없지만 초안을 잘 만들어주기 때문에 기획 단계부터 시간과 노력을 확 줄일 수 있었답니다. 이래서 AI와 함께하는 PM이 참 매력적이라는 걸 다시 한번 느낍니다. PRD 작성, 이제 Claude에게 맡기고 시작합시다.

나만의 상식 퀴즈 게임, 어떤 기능들이 숨어있을까?

PRD를 만들었으니 이제 구현에 들어가야죠! 두 번째 스크린샷은 바로 Claude Code로 구현해본 상식 퀴즈 게임의 메인 화면입니다. 어때요, 참 깔끔하고 직관적입니다.

메인 화면에는 상식 퀴즈 게임이라는 타이틀과 함께, Claude가 제안했던 4가지 카테고리가 큼지막한 버튼으로 자리 잡고 있어요.

• 한국사: 조선시대 왕과 인물 문제
• 일반상식: 과학, 지리, 경제, 사회 상식
• IT상식: 인터넷, AI, 소프트웨어, 하드웨어
• 스포츠: 축구, 야구, 농구, 올림픽

각 카테고리마다 어떤 내용의 문제가 나올지 간단한 설명도 알아서 척척 해놓았습니다. UI/UX는 중요한 부분인데, Claude Code 가 이렇게 생각보다 알아서 잘 구현해 놓습니다.

 

퀴즈를 모두 풀고나면 기록이 나오고 이름을 저장할 수 있습니다. 알아서 척척 해놓았네요. 허허

도전! 상식 퀴즈 랭킹에 이름 올리기, 당신도 할 수 있어요!

뒷 부분의 스크린샷은 바로 상식 퀴즈 게임의 랭킹 페이지입니다. 랭킹 페이지는 전체, 한국사, 일반상식 등 카테고리별로 필터링해서 볼 수 있고, 주간, 월간, 전체 기간별로도 확인할 수 있도록 되어 있습니다. PRD 부분이 탄탄하게 만들어지면 뒷부분의 구현까지도 알아서 착착 진행되는 것을 느낄 수 있습니다.

이번 작업을 통해 바이브코딩을 통해서 AI의 기획 능력부터 웹 개발 전반적인 흐름을 직접 경험해볼 수 있는데, 정말 쉽게 됩니다. 그냥 시작하기만 하면 되어요.