혼자 공부하는 바이브 코딩 with 클로드 코드 (1)
인프런 완독 챌린지 책읽고 강좌보고, 요약정리 + 실습기록
Chapter 01, Chapter 02 까지는 저자가 만든 https://vixcode.ai/ 사이트에서 간단하게 실습 가능하나 Chapter 03 부터 클로드 코드를 사용하기 위한 Claude Pro 결제가 필요한것으로 보임
(vixcode.ai 는 구글 Gemma4 기반 인거 같다, 브라우저, CLI 둘다 지원)
Chapter 01 나의 첫 바이브 코딩
01-1 나의 코딩 파트너, AI 어시스턴트
- LLM, 바이브 코딩의 등장
- AI 통합 코딩 도구 (대표적인예) => 모델선택형(Cursor), 전용 모델형(Claude code)
- 코딩에는 Claude 점유율이 높다
01-2 AI로 나만의 첫 웹페이지 만들기
- '아티팩트' 는 클로드에서 제공하는 기능, 결과물을 별도 패널에 즉시 확인할 수 있음, 보고서 작성, 차트, 간단한 웹페이지 제작등에 많이 활용 (아이디어 검증 + 프롬프트 발전)
- '프롬프트' 는 AI에게 전달하는 요청이나 지시사항
- 간단한 프롬프트로 웹페이지 제작이 가능하다
- 기능/디자인 수정도 프롬프트로 가능
- 클로드 코드 이용하려면 Pro 이상 플랜이 필요하다
 |
| 나의 첫 웹페이지 실습 |
Chapter 02 효과적인 프롬프트로 AI 200% 활용하기
02-1 AI를 깨우는 프롬프트의 비밀
- 명확성, 구체성, 맥락 제공 세가지 요소를 충족해야 좋은 프롬프트
- 아이디어 -> 5W1H 기반으로 기획서 구체화 -> PRD 작성
- PRD (Product Requirements Document) 제품 기획서를 작성하고 프롬프트를 작성
- "무엇, 구체적인 기능 설명, 누구, 왜/어떤 문제를 해결, 구현방안" => 효과적인 프롬프트 => 템플릿화 + 재사용
02-2 실전! 마케팅 포트폴리오 완성하기
- 4단계 포트폴리오 전략 = 뼈대>기능>디자인>점검
- 웹페이지는 주제별 섹션 단위로 구성됨
- 뼈대 단계 = 기능이나 디자인을 넣기 전, 기본적인 HTML 구조만으로 틀을 잡음
- 기능 단계 = 실제 데이터를 채워 넣고 동작을 추가
- 디자인 단계 = 색상, 레이아웃, 시각적 요소를 적용해 완성도를 높임
- 점검 단계 = 완성된 웹페이지를 검토, 누락된 기능이나 오류를 수정
 |
| 마케팅 포트폴리오 웹페이지 실습 |
댓글
댓글 쓰기