[혼공바] 2주차 혼자 공부하는 바이브 코딩 with 클로드코드

[혼공바] 2주차 혼자 공부하는 바이브 코딩 with 클로드코드

요약

혼자 공부하는 바이브 코딩 with 클로드코드를 읽고 수행 해 보는 인프런에서 진행하는 챌린지에 참여중입니다.

효과적인 프롬프트를 사용하여 AI를 활용해봅니다. 프롬프트 엔지니어링이 정말 중요합니다.

AI 검색 결과에 잘 걸려보기 위하여 요약을 추가합니다.

 

실습 예제

🔗실습 예제: https://github.com/taehojo/vibecoding

GitHub - taehojo/vibecoding: <혼자 공부하는 바이브코딩 - with 클로드코드> (한빛미디어, 2025)의 실습 데

---

AI 도구 선택 가이드

모델 선택형 AI 코딩 도구

• 여러 AI 모델을 상황에 따라 선택해 사용할 수 있는 구조입니다.
• Chat GPT, Cursor, Replit, Windsurf처럼 에디터 중심 도구가 대표적입니다.
• 저는 주로 리서치용도나 데이터 정리 용도로 사용하고 있습니다.

---

전용 모델형 AI 코딩 도구

• 특정 AI 모델을 로컬이나 CLI 환경에 직접 연결해 사용합니다.
• Claude Code, Gemini CLI처럼 모델 중심 사용 방식입니다.
• 모델 사용료만 지불하는 단순한 비용 구조로 로컬 파일 직접 접근이 가능해 실무 개발에 적합합니다.
• 저는 주로 실무 개발이나 사이드 프로젝트에서 사용하고 있습니다. 제가 노리는 AI 교대 근무에 적합!

---

사족으로 최근 oh my opencode를 사용하고있는데요, 

하나의 전용 모델형이 아닌 여러개의 전용 모델 도구들을 각 특성에 맞게 연결해서 쓸 수 있다는 것이 장점입니다.

아직 손에 익지 않아서 손에 익으면 추가 포스팅을 하려합니다.

---

5W1H 프레임워크

5W1H 프레임워크는 기획, 개발, 문서화 전반에 활용 가능한 구조입니다.
생성형 검색과 AI 답변에서는 Why–What–How 흐름이 명확한 콘텐츠가 신뢰도와 노출에 유리합니다.

---

Why

• 왜 만드는가?
• 목적과 동기

Why는 문제를 정의하고 기획의 출발점을 명확히 하는 단계입니다.
목적이 분명해야 기능과 기술 선택이 흔들리지 않습니다.

---

Who

• 누구를 위한 것인가?
• 대상 사용자

Who는 실제 사용자를 구체적으로 설정하는 단계입니다.
대상 사용자가 명확할수록 기능 우선순위가 분명해집니다.

---

What

• 무엇을 만들 것인가?
• 핵심 기능과 내용

What은 제품이나 서비스의 핵심 가치를 정의합니다.
불필요한 기능을 줄이고 본질에 집중하기 위한 기준이 됩니다.

---

When

• 언제 사용되는가?
• 사용 시점과 상황

When은 사용 맥락과 타이밍을 고려하는 단계입니다.
실제 사용 상황을 기준으로 UX와 흐름을 설계할 수 있습니다.

---

Where

• 어디서 사용되는가?
• 사용 환경과 플랫폼

Where는 웹, 모바일, 로컬 환경 등 사용 플랫폼을 정의합니다.
환경에 따라 기술 스택과 설계 방식이 달라집니다.

---

How

• 어떻게 만들 것인가?
• 구현 방식과 기술

How는 구현 방법과 기술 전략을 구체화하는 단계입니다.
앞선 5W가 명확할수록 How는 자연스럽게 결정됩니다.

---

Example

• 서울 각 구를 기준으로 오늘의 날씨를 바로 확인할 수 있도록 개인용(Who) 웹 페이지(Where)를 만들어줘. (What)
• 현재의 날씨를 실시간으로 확인하는 용도이고, (When)
• 한 번에 서울의 날씨를 확인하려는 목적이야. (Why)
• 현재 날씨 API를 사용해 자동으로 정보를 보여주면 돼. (How)

---

 

Ch 02. 효과적인 프롬프트로 AI 200% 활용하기

기본 미션(필수)

PROJECT 2. 마케팅 포트폴리오 웹페이지 만들고 캡처하기

---

p.66, p.80-81 확인 문제 풀고 인증하기

 

1. 다음 중 좋은 프롬프트의 조건이 아닌 것을 고르세요. (③)
① 명확성: 원하는 결과를 구체적으로 전달한다.
② 구체성: 필요한 기능이나 조건을 세부적으로 지시한다.
③ 창의성: 결과물이 놀라움을 주도록 요구한다.
④ 맥락 제공: 왜 필요한지, 어떤 상황에서 활용되는지 알려 준다.

2. 다음 빈칸을 채우세요.
프롬프트와 PRD는 모두 5W1H 원칙을 기반으로 한다.
이 원칙은 Why, Who, What, When, Where, How 여섯 가지 질문으로 구성된다.

3. 소프트웨어 개발을 위한 PRD에서 특히 강조되어야 하는 두 가지 질문은 무엇인가요? (②)
① Why(왜), Who(누구)
② What(무엇을), How(어떻게)
③ When(언제), Where(어디서)
④ Who(누구), Where(어디서)

4. 아래 두 프롬프트 중 더 좋은 것은 어느 것인가요? 그 이유는 무엇인가요? (②)
① “멋진 나만의 홈페이지를 만들어 줘.”
② “오늘의 날씨와 주요 뉴스를 보여주는 나만의 시작 홈페이지를 만들고 싶어.”
→ What, How를 구체적으로 제시하였음.

p.80~81 확인 문제

 

1. 포트폴리오 웹사이트를 만들 때 사용한 4단계 전략의 올바른 순서는 무엇인가요? (③)
① 디자인 입히기 → 기본 틀 잡기 → 핵심 기능 넣기 → 완성도 점검
② 기본 틀 잡기 → 디자인 입히기 → 핵심 기능 넣기 → 완성도 점검
③ 기본 틀 잡기 → 핵심 기능 넣기 → 디자인 입히기 → 완성도 점검
④ 핵심 기능 넣기 → 기본 틀 잡기 → 완성도 점검 → 디자인 입히기

2. 다음 중 효과적인 프롬프트 작성 방법으로 옳지 않은 것은 무엇인가요? (②)
① 5W1H 템플릿을 활용하여 체계적으로 질문한다.
② 모든 기능을 한 번에 요청하여 시간을 절약한다.
③ 각 섹션에 ID를 부여하여 개별 수정이 가능하도록 한다.
④ 워드프로세스 테마 같은 구체적인 레퍼런스를 제공한다.

3. 섹션에 고유한 이름을 붙이면 생기는 장점이 아닌 것은 무엇인가요? (④)
① 원하는 부분만 정확히 수정할 수 있다.
② 전체 코드를 다시 생성하지 않아도 된다.
③ AI가 수정할 위치를 명확히 이해할 수 있다.
④ 자동으로 디자인이 개선된다.

---

추가 미션(선택)

AI에게 디자인 수정 요청 1회 이상하고 캡처하기

---

 

내가 이해한 웹페이지의 구조를 한 문단으로 정리하기

 

Claude 아티팩트에서 만들어주는 웹페이지는 한 번에 완성형을 만드는 방식이 아니라, 기본 구조를 먼저 잡고 기능과 디자인을 단계적으로 쌓아 올리는 구조입니다.

먼저 페이지 전체의 큰 틀과 섹션을 나누고, 각 섹션에 역할과 목적을 명확히 부여한 뒤 핵심 기능을 중심으로 내용을 채웁니다. 

디자인은 마지막 단계에서 입히는 요소로 다루며, 섹션마다 고유한 이름이나 ID를 부여해 특정 부분만 선택적으로 수정할 수 있도록 설계됩니다. 

이 구조 덕분에 전체를 다시 만들 필요 없이 필요한 부분만 점진적으로 개선할 수 있고, AI에게도 무엇을 어떻게 고쳐야 하는지 명확하게 전달할 수 있습니다.

또한 개인적으로는 Claude 아티팩트가 결과물을 자동으로 버저닝해 주기 때문에 변경 이력을 비교하기 매우 좋다고 느꼈습니다. 

이전 버전과 수정된 버전을 나란히 비교할 수 있어 어떤 요청으로 어떤 부분이 바뀌었는지를 명확히 확인할 수 있고, 잘못 수정된 경우에도 이전 상태로 돌아가 판단하기가 수월합니다. 

이 방식은 실무 개발에서 커밋 단위로 변경 사항을 확인하는 흐름과 유사해 웹페이지 구조를 학습하거나 점진적으로 개선할 때 특히 유용합니다. (웹알못)

 

#혼공바 #혼자공부하는바이브코딩 #한빛미디어 #인프런 #조태호 #클로드코드 #ClaudeCode #AI #바이브코딩 #프롬프트 #프롬프트엔지니어링