저는 커서는 약 1년 전부터 꾸준히 사용하고 있고, 클로드코드는 작년10월부터 조금씩 사용해서 올해 1월부터 집중적으로 익히고 있습니다. 이번 인프런 챌린지를 하면서 평소에 궁금했던 몇가지 실험을 했고, 그 결과를 공유하고자 블로그를 작성했습니다. 이번 실험의 컨셉은 얼마전 Cusor로 작업한 프로젝트를 Claude Code로 하게 되면 얼마나 더 잘 만들수 있는지 파악하는 것입니다. 몇 가지 개인적 실험 결과로 객관적 평가는 아닙니다. 다만 Claude Code 사용에 감을 잡기 위해 수행하였습니다.실험1. 만약 Cursor와 Claude Code에 프롬프트를 동일하게 넣으면 결과는 어떨까? 프로젝트 : 이전에 작업했던 국내 자살통계 대시보드(Fast API)기존 조건 : 2개 모두 claude op..

클로드 코드에 대한 공부를 위해서 한빛 미디어에서 발간한 혼자 공부하는 바이브코딩 도서를 구입했습니다. 빨리 공부하고 싶어서 발간일에 맞춰서 yes24에서 도서를 구입했고, 빠르게 1주일만에 한번 보면서 따라했습니다. 책을 다보니 마침 인프런에서 동영상 수업을 제공하는 챌린지를 한다고 해서, 인프런 챌린지는 복습차원에서 신청해서 내용을 다시 공부했습니다. 복습이기 때문에 1주일간 조금씩 진행하지 않고 거의 1주 만에 빠르게 진행했습니다. 도서 및 챌린지에서 좋았던 점 : 책 내용 및 구성이 초보자도 이해하기 쉽게 잘 씌여졌고, 쉽게 따라할 수 있습니다. 또한 제공하는 무료 동영상 강의가 상당히 고퀄리티입니다.이전에 저자의 '모두의 딥러닝' 책을 잘 읽어서 고민하지 않고 도서를 구입했습니다. 아쉬웠던..

🚶기본 미션(필수)PROJECT 10. AI 공감 다이어리 앱 만들고 캡처하기 🏃추가 미션(선택)PROJECT 15. 쇼핑 리스트 앱 만들고 캡처하기Supabase에 앱 연동하고 데이터베이스 테이블 캡처하기

🚶기본 미션(필수)PROJECT 9. 냉장고를 부탁해 앱 만들고 캡처하기Chapter6 # 프롬프트1OpenRouter에서 받은 API 키를 .env 파일로 저장했어. 이 키를 안전하게 사용할 수 있도록 준비해 줘.#프롬프트2이제 준비된 API가 실제로 작동하는지 테스트해 줘.이미지 인식은 google/gemma-3-27b-it:free 모델을 이용하고,텍스트 인식은 deepseek/deepseek-chat -v3.1:free 모델을 이용할 거야.API를 통한 텍스트와 이미지 인식을 각각 테스트해서 실행 결과를 알려줘.# 프롬프트3앞서 만든 OpenRouter API를 이용해서, 냉장고 사진에서 재료를 인식하고 레시피를 추천하는 웹 애플리케이션을 만들고 싶어. 다음과 같이 3단계로 나누어서 PRD를 만..

기본 미션(필수)PROJECT 5. 할 일 관리 앱 만들고 캡처하기 데스크톱 버전🏃추가 미션(선택)PROJECT 7. 상식 퀴즈 게임 앱 만들고 캡처하기 # PRD 작성 요청할 일 관리 앱을 만들고 싶어. PRD를 작성해줘.매일 10-20개 정도의 할 일을 관리하는 개인용 앱이야.주요 기능은:- 할 일 추가, 수정, 삭제- 완료 체크 기능- 카테고리 분류 (업무/개인/공부)- 진행률 보기브라우저에서 바로 실행되고, 새로고침해도 데이터가 사라지지 않았으면 좋겠어.기술적으로 복잡하지 않게 순수 자바스크립트로 만들고 싶어.# 단계별 프롬프트 생성이 PRD를 클로드 코드에서 사용할 단계별 프롬프트로 변환해 줘.5개의 핵심 단계로 정리해서 각 단계마다 명확한 지시 사항을 만들어 줘. Chapter5/memory..

기본 미션(필수)PROJECT 3. 손글씨 인식 프로그램 만들고 캡처하기손글씨로 숫자를 입력하면 이것을 인식하는 코드를 만들어서 실행해 줘. 모든 코드와 주석을 영어로 작성해 줘.숫자 인식 프로그램을 윈도우 탐색기에서 클릭해서 실행할 수 있게 해 줘. 책에서는 .bat로 만들었는데, 제가 클로드코드에게 요청했을 때는 .exe를 추천해줘서 그렇게 진행했습니다. 추가 미션(선택)PROJECT 4. 손글씨 인식 프로그램 웹 버전으로 확장하고 캡처하기 내용 정리p113CLAUDE.md에는 프로젝트 구조, 목표, 개발 규칙 등을 저장해 두면 클로드 코드가 언제든지 프로젝트 맥락을 이해하고 이어서 작업할 수 있습니다. 또한 여러 하위 프로젝트가 있을 경우, 각각에 맞는 설정 파일을 만들어 특성에 맞게 관리할..

도서 내 중요부분 정리 P62개발자들은 코딩에 앞서 PRD라는 제품 기획서를 작성합니다.주목할 점은 바이브 코딩에 있어서 제품 기획서가 매우 효과적인 프롬프트로 기능한다는 것입니다. 좋은 프롬프트는 해야 할 일을 명확히 제시하고 맥락을 제공하며, 구체적인 요구사항을 담아야 합니다. 마찬가지로 기획서는 무엇을 만들지, 왜 필요한지, 어떻게 작동해야 하는지를 체계적으로 정리하는 문서이므로, 본질적인 목적이 같습니다.PRD : 1)무엇을 만들지 명확히 정의, 2)프로젝트 목적과 배경 제시, 3)요구사항, 구현방법 구체화좋은 프롬프트 : 해야 할 일을 구체적으로 지시, 왜 필요한지, 어떤 상황인지 설명, 필요한 기능과 조건 세부 명시 기획의 핵심요소5W1HWhy, Who, What, When, Where, Ho..

p.33문제1웹기반 챗봇 : 클로드, 챗GPT, 제미나이모델선택형: 커서, 리플릿, 윈드서프전용 모델형: 클로드코드, 제미나이 CLI 문제21) 바이브코딩, 2)AI어시스턴트, 3)모델 선택형 도구 4)전용 모델형 도구 p54,55문1. 답2문2. 답4문3. 아티팩트문4. 게시문5. Customize PROJECT 1. 나의 첫 웹페이지 만들고 캡처하기https://claude.ai/public/artifacts/a72c440b-b467-4838-b359-21a0e26c2ce7 커스터마이즈1. 현재 오늘의 날씨가 계속 로딩 중... 으로 표시됩니다. 제대로 현재 서울의 날씨가 제대로 표시될 수 있도록 코드를 수정해주세요. https://claude.ai/public/artifacts/352b71cc-..

context를 사용했들 때 의문점왜 새로운 프로젝트로 연다음 /context를 입력했을 때 아래와 같이 나타납니다. context 많이 차지해서 mcp도 다 비활성화하고, 아무 것도 안했는데 무려 40%의 컨텍스트가 채워져 있는데요... 아래 상세한 내용들이 많이 있는데요. 그래서 claude code에게 물어봤습니다. Memory files · /memory └ ~\.claude\CLAUDE.md: 124 tokens └ ~\.claude\BUSINESS_PANEL_EXAMPLES.md: 2.2k tokens └ ~\.claude\BUSINESS_SYMBOLS.md: 2.1k tokens └ ~\.claude\FLAGS.md: 1.3k tokens └ ..

오늘은 간단히 지난 주 온라인 강의 복습과 skill-creator 스킬을 사용해서 간단한 스킬을 만들어 보는 것을 연습했습니다. - 바이브코딩이 되면서 비개발자도 개발자만큼 개발 능력을 발휘할 수 있게 되었다. 보다 도메인 중심의 기획 능력 및 전체 아키텍처 중심으로 보는 능력이 중요하게 된 것 같습니다.- 다른 툴을 붙여서 클로드코드의 기능을 확장할 수 있음. 예를 들어서 코드보안을 검수하고 싶으면 Snyk CLI 이라는 것이 있음 2. 클로드의 내장 스킬인 skill-creator로 스킬 만들기어제는 너무 주먹구구로 만들어서 SKILL.md 조차 제대로 만들어주지 않았습니다. 오늘은 클로드코드에서 클로드 내장 스킬인 skill-creator 스킬을 사용해서 만들어보고자 합니다. skill-crea..