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

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

앵그리비버 — Tue, 23 Jun 2026 07:26:00 +0900

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

앵그리비버입니다! 요즘 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/일반상식 카테고리 집중 학습 필요" 같은 구체적인 가이드라인을 제시해주는 게 정말 인상 깊었어요.

HTML 보고서가 생성된 클로드 화면도 함께 첨부합니다.

그리고 최종 리포트로 PDF 파일과 데이터까지도 생성하였습니다.

이 모든 보고서가 클로드 코드 몇 줄로 생성되었다는 사실이 믿기시나요? 저는 처음에 보고서 UI/UX가 너무 깔끔하고 직관적이어서 깜짝 놀랐습니다. 이 정도 퀄리티면 실무에서 바로 활용해도 손색이 없을 것 같아요. 정말... 대단합니다!

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

앵그리비버 — Tue, 7 Apr 2026 07:11:35 +0900

퀴즈 게임 관리, 개 귀찮음! Claude Code의 명령어 체인 으로 해결!

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

스크린샷처럼 처음 /quiz-range을 실행하면, 현재 퀴즈 DB의 문제 분포 현황(카테고리별, 난이도별)을 보여주고, 어떤 카테고리에 문제가 부족한지(부족 현황)까지 친절하게 알려줘요. 이걸 보고 "아, 오늘은 history easy 문제가 부족하네" 하면서 아까 만든 /quiz-add 한국사를 수동으로 입력하면 문제를 만드는 워크플로우입니다. 문제는 이게 한두 번이지, 매일매일 하기엔 너무 번거롭다는 점이죠. 그래서 이러한 워크플로우를 번거롭지 않게하는 것이 중요한데, Claude Code에서는 명령어 체인으로 한 방에 해결이 가능합니다. 그래서 저는 Claude Code에게 한 번에 여러 작업을 처리해달라고 했습니다.

스크린샷처럼 quiz-daily.md라는 새로운 요구사항 정리 문서를 만들었습니다. 그리고 이 정리 내용에 따라서 /quiz-daily명 명령어를 만들었습니다. 아래와 같은 일련의 작업들을 자동으로 처리하도록 설계되었습니다.

seed.js 파일 구조 읽기
카테고리/난이도별 문제 수 집계
부족한 조합 파악 (S3개 매우 부족, 4개 부족 등)
중복 체크 후 새로운 문제 생성 (Claude.md 검증 후)
seed.js 파일 형식 검증
seed.backup.YYYYMMDD.js 백업 생성
전체 실행 결과 및 상세 보고

이 모든 단계가 명령어 한 번 (/quiz-daily)으로 쭈욱 이어집니다. 알아서 문제를 채워주고 백업까지 해줄 겁니다. 반복되는 업무로 인한 고민이 있다면 이런 명령어 체인으로 업무 효율을 확 높여볼 수 있겠습니다.

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

앵그리비버 — Fri, 3 Apr 2026 12:13:03 +0900

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의 기획 능력부터 웹 개발 전반적인 흐름을 직접 경험해볼 수 있는데, 정말 쉽게 됩니다. 그냥 시작하기만 하면 되어요.

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

앵그리비버 — Tue, 31 Mar 2026 07:29:55 +0900

클로드 코드가 만들어낸 `web_version` 폴더, 뜯어보니 이런 변화가!

지난번 클로드 코드에서 할 일 목록을 만들고 카테고리를 자동으로 분류하는 것까지 해봤습니다. 이번에는 모바일용 화면 이외에 데스크톱용 화면에 최적화까지 해보았고, 그 결과물을 좀 더 자세히 파헤쳐 보려고 해요. 클로드 코드가 'web_version'이라는 새 폴더를 만들어줬는데, 그 안에 있는 것들이 무엇인지 공부 해보겠습니다.

깔끔한 데스크톱 UI가 완성되었습니다! 클로드 코드는 1분 34초 만에 이 모든 작업을 끝내버렸어요. 정말... 놀랍습니다.

변경된 레이아웃 구조, 이 정도면 나쁘지 않음!

클로드 코드가 요약해준 변경 내역을 보면 감탄이 절로 나옵니다.

2단 그리드: 왼쪽에는 폭 260px의 고정된 사이드바, 오른쪽에는 메인 콘텐츠 영역이 딱! 데스크톱 앱의 정석이죠.
사이드바: 웹 제목, 오늘의 진행률 카드, 카테고리 필터 버튼(세로로 예쁘게!), 그리고 완료 토글 버튼까지. 필요한 모든 요소가 여기에 모여있네요.
메인: 할 일을 입력하는 영역과 실제 할 일 목록이 깔끔하게 정렬되어 있습니다. 너비도 최대 900px로 제한해서 너무 넓게 퍼지지 않고 보기 편해요.
반응형: 대박은 768px 이하에서는 사이드바가 상단 바로 변환되어 모바일에서도 여전히 사용할 수 있다는 점! 데스크톱에만 올인한 게 아니었다니, 역시 센스가 넘칩니다.

`web_version` 폴더 속 파일 변화

그럼 실제 파일들은 어떻게 바뀌었을까요?

index.html: 전체적인 2단 레이아웃 구조를 잡는 역할을 합니다. 그리드 시스템이 적용되었겠죠?
styles.css: 바로 이 파일이 데스크톱 그리드 스타일을 담당하고 있었어요. 깔끔한 CSS 코드가 기대됩니다.
script.js: 기존 .tab-btn 셀렉터가 .nav-btn으로 수정되었습니다. UI 요소 이름이 좀 더 명확해진 것 같아요. 이벤트 리스너 관련해서 몇 줄 변경이 있었네요.
open.command: 실행 스크립트 파일은 그대로 복사되었습니다.

이렇게 클로드 코드는 필요한 부분만 쏙쏙 골라 수정하고, 구조까지 완벽하게 재설계했습니다. 개발자는 이런 세세한 변경 내역을 보면서 AI가 어떻게 코드를 이해하고 적용하는지 배울 수 있는 것 같아요. 혼자 했으면 몇 시간 걸렸을 작업을 이렇게 뚝딱 해내다니! 하이팅!

(추가) Config, Doctor, Export 실행해보기

책에 있는 Config, Doctor, Export 명령어를 실행해보면서 진단도 해보고 대화를 외부로 저장해서 관리할 수도 있습니다.

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

앵그리비버 — Mon, 30 Mar 2026 07:18:40 +0900

이게 되네? AI로 자동 분류되는 할 일! 카테고리 자동 분류 기능 추가

클로드가 알려준 사용자 경험 개선 팁! 할 일 앱 디테일 살리기

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

할 일 관리 웹페이지를 1차로 만들고 책에서 나온 것처럼 카테고리를 자동으로 적용하는 방법을 요청했습니다. 그리고 클로드가 뚝딱 만들어준 기능은... 생각보다 쓸만합니다.

동작 방식:
1. 할 일 입력창에 텍스트를 입력하면, 클로드가 미리 학습한 키워드를 감지해요.
2. 예를 들어 "회의 준비"라고 입력하면 자동으로 '업무' 카테고리로 바뀌는 식이죠! "집 청소하기"를 입력했더니 "개인"으로 딱 바뀌는 거 있죠? (사진 참고!)
3. 자동 분류가 되면 옆에 "자동 분류"라는 힌트가 살짝 나타나서 알려줘요.
똑똑한 규칙:
- 타이핑하는 중에는 키워드를 감지해서 자동으로 카테고리를 바꿔줘요.
- 근데 만약 제가 수동으로 카테고리를 다시 선택하면, 제 선택을 존중해서 고정시켜주고요. (오, 똑똑해!)
- 할 일을 추가하고 나면 다음 입력을 위해 분류 상태는 초기화되는 센스까지!

설명을 참고해보니 이 기능을 구현하기 위해 script.js에 CATEGORY_KEYWORDS라는 키워드 사전과 detectCategory 함수를 추가했고요, index.html과 styles.css도 자동 분류 힌트와 디자인이 수정되었습니다.

'혼자서 공부하는 바이브코딩' 책과 클로드 코드를 활용해서 할 일 관리 앱을 기획부터 개발, 그리고 자동 분류 기능까지 추가해보니 단순히 AI를 활용하는 스킬만 늘어난 게 아니라, AI를 활용한 개발 프로세스 전반에 대한 이해도가 훨씬 높아진 것 같아요. 바이브코딩 학습을 통해 AI와 함께라면 혼자서도 꽤 괜찮은 결과물을 만들어낼 수 있다는 자신감을 얻게 됩니다. 바이브코딩 하이팅!

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

앵그리비버 — Sat, 28 Mar 2026 07:54:04 +0900

AI가 뚝딱 만들어준 손글씨 인식 웹페이지 1장: 클로드 코드로 구현하기

Chapter 03이 되어서야 드디어 클로드 코드(Claude Code)를 사용하여 학습을 진행합니다. 주제는 바로 손글씨 숫자 인식 웹페이지입니다. 다 만들어진 결과물을 살펴보니 CNN 모델을 갖다 쓰고, 그걸 Tkinter 기반의 GUI 앱으로 만드는 작업입니다.

"이거 만들어줘!" 한마디에 시작된 마법

저는 클로드 코드에게 아주 간단하지만 명확한 프롬프트를 던졌습니다.

손글씨 숫자를 입력하면 이것을 인식하는 앱을 만들어서 실행해주세요. 모든 코드와 주석을 영어와 한글로 작성해 주세요.

이 한 문장으로 환경 설정부터 모델 학습, GUI 개발까지 다 해줄 수 있을까? 그런데 클로드 코드는 차근차근 작업을 시작합니다.

환경 점검: 먼저 제 시스템에 PyTorch나 TensorFlow 같은 딥러닝 프레임워크가 설치되어 있는지 확인하더라고요. 역시 기본이 중요하죠!
코드 생성: train_model.py 파일로 CNN 모델 학습 스크립트를, digit_app.py 파일로 Tkinter GUI 앱 코드를 뚝딱 작성했습니다. 무려 300라인이 넘는 코드들을 몇 분 만에 써 내려가는데, 저 정말 입이 떡 벌어졌습니다.
모델 학습 및 실행: MNIST 데이터셋을 자동으로 다운로드하고, CNN 모델을 5 에포크 학습시킨 후, digit_app.py를 실행해서 GUI 앱을 띄웠습니다.

결과는?

앱이 실행된 후 클로드 코드가 요약해준 내용은 더 놀라웠습니다.

모델: CNN (Conv x2 + FC x2)
학습 데이터: MNIST (60,000장)
테스트 정확도: 무려 99.06%!
학습 에포크: 5회

"생각보다 훨씬 잘 하는데?!" 솔직히 말하면 직접 코드를 짜도 99% 넘기기가 쉽지 않은데, 클로드 코드가 알아서 뚝딱 해내니 기분이 묘하더라고요. GUI 앱도 깔끔하게 잘 동작하고, 제가 마우스로 숫자(0~9)를 그리면 실시간으로 인식해서 확률을 보여주는 모습이 정말 인상 깊었습니다. 이건 단순한 코딩 도구를 넘어, 아이디어를 현실로 만들어주는 강력한 파트너라는 확신이 들었어요.

이래서 계속 공부하게 되네요. 개발은 정말 끝이 없는 매력이 있는 것 같습니다!

그리고 생성된 구조에 대해서도 설명을 해주기 때문에 실제로 구현된 산출물을 잘 이해하는데 큰 도움이 됩니다.

```
Study-01/
├── CLAUDE.md
├── desktop_version
├── web_version
│   ├── CLAUDE.md
└── digit_recognition/
```

클로드 코드에 어떤 기능이 있는지 궁금하다면 그냥 물어봐도 됩니다.

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

앵그리비버 — Fri, 27 Mar 2026 07:21:47 +0900

Chapter 01, Chapter 02는 클로드 코드(Claude Code)가 아니라 클로드 AI(Claude AI)로 따라해본 결과입니다.

구글 대신 네이버로? 나만의 취향이 담긴 시작 페이지 리디자인!

Claude AI(클로드 AI)를 이용해 나만의 시작 페이지를 만드는 여정입니다. 책에서는 구글 스타일로 적용하라고 권했지만, 저는 좀 더 친숙한 '네이버 스타일'로 바꿔보고 싶었어요. 그래서 클로드 AI에게 대뜸 네이버 스타일로 디자인을 수정해주세요라고 요청했습니다. "설마 이것까지 될까?" 했는데, 정말 놀랍게도 클로드 AI가 제 의도를 정확히 파악하네요. 허허

클로드 AI는 친절하게도 네이버 스타일로 어떤 부분이 바뀌는지 상세하게 설명해줍니다. GNB 스타일, 상단 메뉴, 로고, 검색창, 섹션 레이아웃, 그리고 배경색까지 (#F5F5F5)... 크! (스크린샷 4 참고) 설명을 듣는 순간, "오~ 제법이군!" 하는 감탄사가 절로 나옵니다.

그리고 잠시 후 아티팩트로 만든 페이지는 정말 네이버 초기 화면을 연상케 하는 모습으로 변신해 있었습니다. 와우! 생각보다 참 쉽죠잉!? 이래서 AI 활용이 재미있나 봅니다. 이렇게 저만의 취향을 반영한 페이지가 순식간에 만들어지는 걸 보니, AI와 함께라면 뭐든지 가능할 것 같은 느낌이 듭니다.

아! 그리고 주의할 점은 토큰 사용량입니다. 책에 있는 내용을 몇 번 따라했을 때 토큰이 이 만큼 사용된다는 점도 참고해주세요.

추가!

처음 클로드 AI가 만들어준 아티팩트에 `날씨 정보를 불러올 수 없습니다` 같은 메시지가 떴는데, 수정 작업에 들어갔어요. 몇 번의 시행착오 끝에 클로드에게 특정 데이터를 불러오는 부분을 개선하도록 요청했고, 결과적으로 `오늘의 날씨`와 `오늘의 주요 뉴스` 관련 오류를 깔끔하게 해결할 수 있었습니다. 약간 헤매긴 했지만 결국엔 됩니다.!

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

앵그리비버 — Thu, 26 Mar 2026 10:00:59 +0900

Chapter 01, Chapter 02는 클로드 코드(Claude Code)가 아니라 클로드 AI(Claude AI)로 따라해본 결과입니다.

AI랑 웹 달력 만들기? 생각보다 참 쉽죠잉!? ️

2주 전부터 '혼자서 공부하는 바이브코딩' 책을 펼쳐서 '클로드 코드'로 바이브코딩을 시작했습니다. 책을 펴고 Day1부터 바로 들어갔습니다. '달력을 볼 수 있는 웹 페이지를 만들어 주세요.' 딱 한 문장이었습니다. 정말 놀랍네요! 몇 초 지나지 않아서 오른쪽에 보이시죠? 번듯한 달력 웹 페이지가 뚝딱 만들어져 있더라구요.

이런 프론트엔드 작업, 특히 UI 구현은 디테일하게 손이 많이 간다고 생각했거든요. HTML 구조 잡고, CSS 하나하나 만지고, JavaScript로 날짜 계산하고... 생각만 해도 머리가 지끈거렸는데, AI가 이렇게 뼈대를 탁! 만들어주니 정말 신기하더라구요. 저처럼 코딩 초보분들도 AI 덕분에 시각적인 결과물을 바로바로 확인할 수 있으니, 공부하는 재미가 두 배입니다.

Claude AI 아티팩트 기능, 첫 만남 후기

이어서 Claude AI의 '아티팩트(Artifacts)' 기능을 따라합니다.

아티팩트, 너는 무엇인가?

제일 먼저 마주한 화면은 다양한 아티팩트 카테고리였습니다. 글쓰기 에디터, 프로젝트 인사이트, 플래시카드 등등... 다른 것들을 클릭해보니, '앱 및 웹사이트', '문서 및 템플릿', '게임' 등 여러 가지 시작점이 있더군요. 그중에서 책에 있는대로 바로 '앱 및 웹사이트' 카테고리로 시작합니다.

첫 시도: 나만의 시작 페이지!

"오늘의 날씨와 주요 뉴스를 보여주는 나만의 시작 홈페이지를 만들어주세요."

불과 몇 초 만에 구체적인 계획과 함께 코드로 펼쳐집니다. 복잡한 UI/UX 고민 없이 제가 원하는 기능을 뚝딱 만들어낼 수 있다는 생각에 벌써부터 설레발이... 시작됩니다.

잠시 후, 첫 번째 결과물이 제 눈앞에 나타났습니다. 큼지막하게 현재 시각(16:58:13)과 날짜(2026년 3월 9일)가 표시되어 있었고, 그 아래에는 '오늘의 날씨'와 '오늘의 주요 뉴스' 섹션이 있었죠. 하지만... 여기서 작은 시행착오가 있네요. '오늘의 날씨'는 "날씨 정보를 불러올 수 없습니다"라고 뜨고, '오늘의 주요 뉴스'는 "뉴스를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."라는 메시지가...? "크흡, 역시 한 번에 완벽할 수는 없으니까요." 하면서 "이래서 계속 공부하게 되네요" 라는 마음으로 오류 메시지를 읽어봅니다. 아무래도 날씨 API 연동이나 뉴스 데이터 로딩에 문제가 있었던 것 같아요. 하지만 이 정도는 AI와 대화하며 충분히 개선할 수 있으니까요.

바이브코딩 책 1권을 따라해보니 이것저것 금방 될 것 같은 기대감이 생깁니다. Claude AI (클로드 AI)로 조금 더 영차영차 해보겠습니다.

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

앵그리비버 — Wed, 18 Mar 2026 10:51:22 +0900

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

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=379260002&srsltid=AfmBOorrRnBW0_R2erSVTr6yBV9AB797iR5gZ4Kt8lypKVM3kYK1dsTy

혼자 공부하는 바이브 코딩 with 클로드 코드 | 조태호

코딩을 잘 모르는 독자도 대화하듯 만들고, 질문을 통해 앱을 개선하며 AI 시대의 프로그래밍 방식을 가장 쉽게 체험할 수 있게 만든 안내서다. 클로드 코드와 함께 15개의 실습 프로젝트를 완주

www.aladin.co.kr

혼자 공부하는 바이브 코딩 with 클로드 코드를 따라하면서 블로그에도 정리해봅니다. 광고는 아니고 클로드 코드 관련된 책을 보다가 제일 유명한 것 같아서 1권 구매해서 따라해보았어요.

차례

나의 첫 바이브 코딩 - 아티팩트
효과적인 프롬프트로 AI 200% 활용하기
클로드 코드 설치하기 - 손글씨 인식하기
클로드 코드 실전 활동 (1) - 자동 분류되는 할 일 목록
클로드 코드 실전 활동 (2) - 레이아웃 변경
게임 제작으로 배우는 체계적인 개발과 관리 (1) - 상식 퀴즈 게임 개발
클로드 코드에 API 날개 달기
클로드 코드 AI 에이전트로 개발팀 구성하기
MCP로 클로드 코드의 한계 넘어서기

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

이게 되네? AI로 자동 분류되는 할 일! 카테고리 자동 분류 기능 추가클로드가 알려준 사용자 경험 개선 팁! 할 일 앱 디테일 살리기PRD 작성부터 기능 구현, UX 개선, 그리고 복잡한 로직(자

hanminwoo.com

손글씨 인식

자세한 내용은 각각 페이지에 남겨봅니다.

ChatGPT(Lovable) · Cursor AI(커서 AI) · Google Cloud 로 웹서비스 만들기

앵그리비버 — Mon, 2 Mar 2026 11:55:08 +0900

PRD는 ChatGPT - Lovable PRD Generator로 만들고, 구현은 Cursor AI(커서 AI)와 함께, 서버 운영과 배포는 Google Cloud 로 웹서비스 만들기

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

기획: ChatGPT (Lovable PRD Generator)
개발: Cursor AI + 로컬 Google Cloud Proxy 연동
BE(DB)와 배포: Google Cloud (Cloud SQL) + GitHub 연동
도메인: 가비아 연동

결과물: https://snaptheproduct.com/

SnapTheProduct - Product Screen Gallery for PM

BETAWe're excited to launch SnapTheProduct in beta! Explore and share your feedback. Explore Real Product Screens A gallery platform where you can discover and reference actual app/web service screens from various IT products.

snaptheproduct.com

1. 서비스 소개

서비스 개요

이번에 만든 서비스는 IT Product 스크린샷 모음 및 소개 웹서비스입니다.

snaptheproduct

복잡한 기능보다는 "AI 도구를 활용한 개발 프로세스"와 "Product 스크린샷 모음"에 집중한 프로젝트입니다.

서비스 화면 미리보기

로그인 전 - 홈

우선 로그인 전에는 상세 보기를 비활성화 해보았습니다.

로그인 전 - Gallery (Products & Screens)

갤러리로 들어가면 프로덕트의 스크린샷 모음을 볼 수가 있습니다.

로그인 후 - Gallery (Products & Screens)

로그인 후의 갤러리의 모습입니다.

로그인 후 - Gallery (Products & Screens) 상세 화면

조회하고 싶은 Product의 상세 화면으로 진입하면 Product Screens 을 조회할 수 있습니다. 그리고 간단한 설명과 태그를 추가해 놓았습니다.

로그인 후 - Request Board

특정 프로덕트에 대한 스크린샷을 요청하고 싶을 때는 Request Board 에 요청 글을 남길 수 있습니다. 지금은 저 혼자서 스크린샷을 올려보겠지만 나중에 기여자들이 생긴다면 같이 해볼 수 있지 않을까 상상해보았습니다.

로그인 후 - Profile (My Page)

프로필 정보를 바꾸고 싶을 때 사용할 수 있는 화면입니다.

관리자 로그인 후 - Admin Dashboard

관리자로 로그인을 하면 User 의 역할을 관리할 수 있습니다.

관리자 로그인 후 - Add Screen Collection

현재는 관리자만 Screen Collection 을 등록할 수 있도록 페이지를 생성했습니다. 지금은 직접 프로덕트의 스크린샷을 준비해서 Gallery 에 추가해볼 예정입니다.

2. 기획: ChatGPT + Lovable PRD Generator

왜 PRD부터 만들었을까?

요구사항을 먼저 명확히 정리하고 싶었습니다. ChatGPT의 Lovable PRD Generator를 활용해 아래와 같은 md 파일 4개를 생성했습니다.

masterplan.md
implementation-plan.md
design-guidelines.md
app-flow-pages-and-roles.md

참고 링크: https://chatgpt.com/share/6981dc42-bf2c-8012-8380-5dedd9b4dbea

이 단계에서 느낀 장점은:

역시 md 파일을 꼼꼼하게 작성해야 최초 기능 구현 후 수정이 매끄럽습니다.
구현 중 방향을 잃지 않게 해주는 기준점 역할을 하는 것도 잊지 말아야 할 점입니다.

3. 개발: Cursor AI와 함께한 구현 과정

PRD → Cursor AI 프롬프트

생성된 md 파일들을 그대로 Cursor AI에 넣고, 아래와 같은 방식으로 작업했습니다.

웹서비스 스크린샷 모음 서비스를 개발하려고 합니다.
4가지 문서를 참고하여 구현해주세요.

# masterplan.md
# implementation-plan.md
# design-guidelines.md
# app-flow-pages-and-roles.md

프로덕트가 다 만들어지면 로컬에서 테스트해볼 예정입니다.
이후 단계로 필요한 정보가 있으면 알려주세요.

로컬 환경에서 Google Cloud Proxy 사용

개발은 모두 로컬 환경에서 진행했습니다.

Google Cloud 프로젝트 생성
App Engine 사용
Cloud SQL 사용
Cloud storage 사용
Cloud DNS 사용
Cloud Build 사용
로컬에서 CRUD 동작 확인

지난 번과 다르게 Google Cloud 프로젝트에 Cloud SQL과 App Engine 으로 백엔드를 구현하였습니다. 중간중간 동작하지 않는 상황을 해결하면서 진행했습니다. 오류 메시지를 Cursor AI 에 넣고 수정 코드를 제안해달라고 요청하였을 때, 거의 대부분 한 번에 해결이 되었습니다. 정말... 놀랍습니다.

4. 배포: Google Cloud

Google Cloud를 선택한 이유

App Engine API 사용 용이
Cloud SQL 사용 용이
향후에 Google Analytics 연동하여 사용자 생성까지 확인
결제 편의성

GitHub 연동 & 배포 흐름

배포 구조는 아래와 같습니다.

Cursor AI에서 코드 작성
Google Cloud & GitHub 저장소 연동
GitHub 저장소에 push
Google Cloud 자동으로 빌드 & 배포

Cursor AI → GitHub Push → Google Cloud Deploy

이 과정이 한 번 세팅되고 나니, 배포에 대한 부담이 거의 사라졌습니다.

5. 이렇게까지 했을 때 비용

Cursor AI 사용량

현재 사용 중인 플랜은 ~~Pro $20/mo.~~ => Pro Plus $60/mo. 로 향상 ㅠㅠ
지금 상태로는 5일만에 거의 전체 비용에 가까워짐

Google Cloud 인보이스

Google Cloud 에서 이용한 서비스 별 금액

6. 직접 해보며 느낀 점

좋았던 점

AI 도구 덕분에 개발 속도가 매우 빠름
- 일단 배포는 첫 날(1일) 모두 완료
- 핵심 기능과 이것저것 추가로 기능을 붙여서 2일에 배포까지 모두 완료
혼자서도 기획–개발–배포까지 가능
클라우드 서비스 & AI 조합하면 이제 자신감있게 비개발자도 무언가 만들어서 배포할 수 있을 듯

아쉬웠던 점

역시 기존 Google Cloud 구조를 이해하지 않으면 문제 해결이 쉽지 않음
하지만 에러 메시지를 Cursor AI에게 전달하고 이것저것 구글링해서 문제 해결하면서 실력 향상을 느낌

마무리

이번 프로젝트는 "AI 도구를 활용해 혼자서 개발한 사이트를 실제 오픈할 수 있을까"에 대한 실험에 가까웠습니다.

결론적으로

서비스를 성장시키는 것은 별개의 문제이지만 일단 만들어서 시작하는 것은 가능하다!

이런 목적이라면 ChatGPT (Lovable PRD Generator) + Cursor AI + Google Cloud (BE 뭐가 됐건!) 금방 됨

다음 글에서는:

Snap the Product 에 올릴 Product 소개 콘텐츠를 자동으로 작성해주는 자동화 스크립트
구글 검색에 노출되도록 SEO 작업

같은 내용을 다뤄볼 예정입니다.

혹시 따라하다가 잘 안되시는 분들은 댓글로 남겨주세요.

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

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

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

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

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

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

퀴즈 게임 관리, 개 귀찮음! Claude Code의 명령어 체인 으로 해결!

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

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

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

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

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

클로드 코드가 만들어낸 web_version 폴더, 뜯어보니 이런 변화가!

변경된 레이아웃 구조, 이 정도면 나쁘지 않음!

web_version 폴더 속 파일 변화

(추가) Config, Doctor, Export 실행해보기

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

이게 되네? AI로 자동 분류되는 할 일! 카테고리 자동 분류 기능 추가

클로드가 알려준 사용자 경험 개선 팁! 할 일 앱 디테일 살리기

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

AI가 뚝딱 만들어준 손글씨 인식 웹페이지 1장: 클로드 코드로 구현하기

"이거 만들어줘!" 한마디에 시작된 마법

결과는?

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

구글 대신 네이버로? 나만의 취향이 담긴 시작 페이지 리디자인!

추가!

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

AI랑 웹 달력 만들기? 생각보다 참 쉽죠잉!? ️

Claude AI 아티팩트 기능, 첫 만남 후기

아티팩트, 너는 무엇인가?

첫 시도: 나만의 시작 페이지!

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

차례

손글씨 인식

ChatGPT(Lovable) · Cursor AI(커서 AI) · Google Cloud 로 웹서비스 만들기

1. 서비스 소개

서비스 개요

서비스 화면 미리보기

로그인 전 - 홈

로그인 전 - Gallery (Products & Screens)

로그인 후 - Gallery (Products & Screens)

로그인 후 - Gallery (Products & Screens) 상세 화면

로그인 후 - Request Board

로그인 후 - Profile (My Page)

관리자 로그인 후 - Admin Dashboard

관리자 로그인 후 - Add Screen Collection

2. 기획: ChatGPT + Lovable PRD Generator

왜 PRD부터 만들었을까?

3. 개발: Cursor AI와 함께한 구현 과정

PRD → Cursor AI 프롬프트

로컬 환경에서 Google Cloud Proxy 사용

4. 배포: Google Cloud

Google Cloud를 선택한 이유

GitHub 연동 & 배포 흐름

5. 이렇게까지 했을 때 비용

Cursor AI 사용량

Google Cloud 인보이스

6. 직접 해보며 느낀 점

좋았던 점

아쉬웠던 점

마무리

클로드 코드가 만들어낸 `web_version` 폴더, 뜯어보니 이런 변화가!

`web_version` 폴더 속 파일 변화