앵그리비버's IT를 부탁해

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

퀴즈 게임 관리, 개 귀찮음! Claude Code의 명령어 체인 으로 해결!지난 포스팅에서 만들었던 퀴즈 게임이든 무슨 서비스를 운영하다 보면 계속 누적되는 운영 업무를 어떻게 해결할지에 대한 고민이 생기게 됩니다. 특히 퀴즈 게임 같은 경우에 매일매일 새로운 문제 있는지 확인하고, 부족한 카테고리 채워 넣고, 중복 없는지 검사하는 업무가 생길 수 밖에 없는데요. 혼자서 공부하는 바이브코딩 책을 보면서 이런 운영 업무부터 해결을 해야겠다고 마음 먹고 있었는데요. Claude Code에 이러한 운영 업무를 해결 할 수 있는 기능이 있습니다. 바로 **명령어 체인(Command Chain)**입니다! 스크린샷처럼 처음 /quiz-range을 실행하면, 현재 퀴즈 DB의 문제 분포 현황(카테고리별, 난이도별..

AI와 함께하는 기획, PRD도 뚝딱! 생각보다 참 쉽죠잉!?지난 번에는 할 일 목록을 만들고 자동으로 카테고리를 분류하는 것까지 해보았습니다. 이번에는 혼자서 공부하는 바이브코딩 책을 보면서 "상식 퀴즈 게임을 만들려고 합니다. PRD 작성부터 Claude AI의 도움을 받아서 진행했습니다.Claude.ai에 접속해서 "상식 퀴즈 게임을 만들려고 합니다. PRD를 작성해주세요." 라고 딱 한 문장 던지면 Claude가 순식간에 핵심 요구사항을 정리해줍니다. 100% 완벽하지 않더라도 초안으로 사용하기에 아주 적절합니다. 그리고 디테일한 부분은 역시 사람이 개입해서 완성도를 높여주면 더 좋습니다.Claude가 제안한 핵심 게임 규칙:다양한 카테고리: 한국사, 일반상식, IT상식, 스포츠까지 4가지나!문제..

클로드 코드가 만들어낸 web_version 폴더, 뜯어보니 이런 변화가!지난번 클로드 코드에서 할 일 목록을 만들고 카테고리를 자동으로 분류하는 것까지 해봤습니다. 이번에는 모바일용 화면 이외에 데스크톱용 화면에 최적화까지 해보았고, 그 결과물을 좀 더 자세히 파헤쳐 보려고 해요. 클로드 코드가 'web_version'이라는 새 폴더를 만들어줬는데, 그 안에 있는 것들이 무엇인지 공부 해보겠습니다.깔끔한 데스크톱 UI가 완성되었습니다! 클로드 코드는 1분 34초 만에 이 모든 작업을 끝내버렸어요. 정말... 놀랍습니다. 🔍 변경된 레이아웃 구조, 이 정도면 나쁘지 않음!클로드 코드가 요약해준 변경 내역을 보면 감탄이 절로 나옵니다.2단 그리드: 왼쪽에는 폭 260px의 고정된 사이드바, 오른쪽에는 메..

이게 되네? AI로 자동 분류되는 할 일! 🤯 카테고리 자동 분류 기능 추가클로드가 알려준 사용자 경험 개선 팁! 💡 할 일 앱 디테일 살리기PRD 작성부터 기능 구현, UX 개선, 그리고 복잡한 로직(자동 분류)까지 클로드 코드는 정말 전천후 만능 도우미입니다. 먼저 PRD를 생성하고 개발을 시키면 바로 뚝딱뚝딱 동작하는 웹페이지를 만들어줍니다. 물론 클로드가 완벽한 코드를 한 번에 짜주지는 않았어요. 제가 원하는 방향과 다를 때도 있었고, 몇 번의 수정이 필요한 부분도 있었습니다. 하지만 오히려 그런 과정을 통해 '어떻게 프롬프트를 개선해야 할까?', '어떤 점을 더 구체적으로 지시해야 할까?'를 배우면서 AI와의 협업 스킬이 향상됩니다.할 일 관리 웹페이지를 1차로 만들고 책에서 나온 것처럼 카..

AI가 뚝딱 만들어준 손글씨 인식 웹페이지 1장: 클로드 코드로 구현하기Chapter 03이 되어서야 드디어 클로드 코드(Claude Code)를 사용하여 학습을 진행합니다. 주제는 바로 손글씨 숫자 인식 웹페이지입니다. 다 만들어진 결과물을 살펴보니 CNN 모델을 갖다 쓰고, 그걸 Tkinter 기반의 GUI 앱으로 만드는 작업입니다."이거 만들어줘!" 한마디에 시작된 마법저는 클로드 코드에게 아주 간단하지만 명확한 프롬프트를 던졌습니다.손글씨 숫자를 입력하면 이것을 인식하는 앱을 만들어서 실행해주세요. 모든 코드와 주석을 영어와 한글로 작성해 주세요.이 한 문장으로 환경 설정부터 모델 학습, GUI 개발까지 다 해줄 수 있을까? 그런데 클로드 코드는 차근차근 작업을 시작합니다.환경 점검: 먼저 제 ..

Chapter 01, Chapter 02는 클로드 코드(Claude Code)가 아니라 클로드 AI(Claude AI)로 따라해본 결과입니다.구글 대신 네이버로? 나만의 취향이 담긴 시작 페이지 리디자인!Claude AI(클로드 AI)를 이용해 나만의 시작 페이지를 만드는 여정입니다. 책에서는 구글 스타일로 적용하라고 권했지만, 저는 좀 더 친숙한 '네이버 스타일'로 바꿔보고 싶었어요. 그래서 클로드 AI에게 대뜸 네이버 스타일로 디자인을 수정해주세요라고 요청했습니다. "설마 이것까지 될까?" 했는데, 정말 놀랍게도 클로드 AI가 제 의도를 정확히 파악하네요. 허허클로드 AI는 친절하게도 네이버 스타일로 어떤 부분이 바뀌는지 상세하게 설명해줍니다. GNB 스타일, 상단 메뉴, 로고, 검색창, 섹션 레이..

Chapter 01, Chapter 02는 클로드 코드(Claude Code)가 아니라 클로드 AI(Claude AI)로 따라해본 결과입니다.AI랑 웹 달력 만들기? 생각보다 참 쉽죠잉!? 🗓️2주 전부터 '혼자서 공부하는 바이브코딩' 책을 펼쳐서 '클로드 코드'로 바이브코딩을 시작했습니다. 책을 펴고 Day1부터 바로 들어갔습니다. '달력을 볼 수 있는 웹 페이지를 만들어 주세요.' 딱 한 문장이었습니다. 정말 놀랍네요! 몇 초 지나지 않아서 오른쪽에 보이시죠? 번듯한 달력 웹 페이지가 뚝딱 만들어져 있더라구요.이런 프론트엔드 작업, 특히 UI 구현은 디테일하게 손이 많이 간다고 생각했거든요. HTML 구조 잡고, CSS 하나하나 만지고, JavaScript로 날짜 계산하고... 생각만 해도 머리가..

지난 몇 주간은 커서 AI (Cursor AI)와 씨름하면서 서비스를 만들어 보던 시절이었는데요. 최근에는 클로드 코드 (Claude Code)가 많이 떠오르고 있더라구요. 그래서 이번에는 클로드 코드 (Claude Code)를 정복해보았습니다. 좋은 인터넷 강의도 너무 많고 잘 하시는 분들도 너무 많은데, 저는 조용히 혼자서 책 1권을 처음부터 끝까지 따라해보았습니다. 처음부터 끝까지 다 따라해보니 감이 많이 오더라구요. 이제 인터넷에 돌아다니는 좋은 강의들을 살짝 살짝 보더라도 무슨 이야기인지 잘 보이고 금방 감이 오는 느낌입니다. 바이브 코딩에 자신감이 더 생기네요! 오예! https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=379260002&srsltid=A..

PRD는 ChatGPT - Lovable PRD Generator로 만들고, 구현은 Cursor AI(커서 AI)와 함께, 서버 운영과 배포는 Google Cloud 로 웹서비스 만들기 지난 게시판 웹서비스 만들기에 이어서 이번에는 조금 더 의미있는 서비스를 만들어 보았습니다. PM 업무를 수행하다 보면 다른 앱/웹 프로덕트들의 모습을 찾아보게 됩니다. 그리고 스크린샷을 모아두기도 하고 함께 업무하는 분들께 소개하기도 합니다. 그래서 IT 프로덕트들의 스크린샷을 모아볼 수 있는 웹서비스를 하나 만들어보았습니다. "기획부터 배포까지" 약 2일 정도가 소요되었고, 매일 조금씩 수정하면서 1일 1회 ~ 10회 정도 추가로 커밋을 하고 있습니다. 이번 포스팅에서도 ChatGPT (특히 Lovable PRD Ge..

지난 게시판 웹서비스 만들기 - 사용자 프로필 기능 및 Display 명 수정 기능에 이어서 이번에는 관리 기능을 조금 더 확장해 본 경험에 대하여 포스팅합니다. 아예 관리자 페이지를 만들었습니다.관리자 페이지 생성실제 서비스를 런칭하고 나면 사용자들이 사용하는 화면 이외에 관리자를 위한 기능이 필요한 순간이 있습니다. 이번 포스팅은 관리자를 위한 관리자 페이지 생성과 관련 기능을 추가해본 내용입니다. 게시판 웹서비스의 관리자 페이지 추가 - Cursor AI 프롬프트사실 관리자 페이지와 기능은 최초에 PRD를 작성할 md 파일에 내용이 포함되어 있었습니다. 이번에 정상적으로 동작하는지 확인하면서 잘 동작하지 않는 부분을 수정하여 적용하였습니다.👉 결과물: https://board-app--board-..