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

■ 1주 차 미션

주차별 진도에 따라 주어진 숙제와 한 주간 공부한 내용을 정리하여 블로그에 기록 (전체 공개)

---

✅ 1주 차 : Ch 01. 나의 첫 바이브 코딩

 

• 📘공부한 내용
  • 바이브 코딩: AI와 자연스럽게 대화하며 코드를 만드는 새로운 개발 방식
  • AI를 결합한 프로그래밍 도구
    • 모델 선택형: 프로그램에서 여러 LLM을 선택해 사용할 수 있도록 만든 방식 (커서, 리플릿, 윈드서프 등) 
    • 전용 모델형: 특정 AI 언어 모델을 직접 내 컴퓨터에 설치해서 사용하는 방식 (클로드 코드, 제미나이 CLI 등)
  • 용어 정리
    • 아티팩트: 대화창과 별도로 구분되는 패널로, 클로드가 코드를 생성하고 미리보기를 제공하는 작업 공간
    • 프롬프트: AI에 전달하는 요청이나 지시 사항 (구체적이고 맥락을 잘 반영할수록 좋음)
    • 게시: 만든 작품을 온라인에 공유하고 링크를 생성하는 기능
    • 커스터마이즈: 기존 디자인을 바탕으로 추가 수정 (첫 결과물이 완벽하지 않아도, 원하는 방향으로 조금씩 수정)

 

  

 

• 🚶기본 미션(필수)
  • PROJECT 1. 나의 첫 웹페이지 만들고 캡처하기
  • p.33, p54-55 확인 문제 풀고 인증하기

 

□ 나의 첫 웹 페이지

  - 책을 따라 클로드에서 프롬프트를 입력하고, 웹페이지를 만들어 개시해봤습니다. 화면에 바로 웹페이지가 나타나는게 신기합니다.

    . 게시 링크: https://claude.ai/public/artifacts/e8f3c071-fa72-4836-87ce-f72c4b1a0cdf

 

 

 

□ 확인 문제 풀고 인증

  - 티스토리 블로그에서 사용할 책의 확인 문제와 같은 구조를 만들어 달라는 부분도 클로드를 활용해봤습니다. 깔끔하게 잘 만들어져서 만족합니다.

 

마무리

▶확인 문제  (p.33: 1~2, p.54~55: 3~7)

 1. 다음은 바이브 코딩 도구의 유형입니다. 빈칸에 알맞은 도구 이름을 넣어 보세요.

구분	설명	대표 도구
웹 기반 챗봇	설치 없이 웹에서 바로 사용할 수 있는 방식. 복사-붙여넣기 필요	ChatGPT, Gemini, Claude
모델 선택형	여러 언어 모델 중에서 선택해 쓸 수 있는 방식. 이중 비용 부담 가능성 있음	Cursor, replit, Windsurf
전용 모델형	특정 언어 모델을 설치해 사용하는 방식. 로컬 파일 직접 접근 가능	Claude Code, Gemini CLI

 2. 다음 설명을 보고 알맞은 개념(용어)을 쓰세요.

  ① 사람과 대화하듯 아이디어를 설명하면 AI가 코드를 제시하고, 사용자가 검토/수정하며 완성하는 새로운 개발 방식 → ( 바이브 코딩 )

  ② 프로그래밍 과정에서 질문에 답하고 코드를 함께 작성해 주는 가상 파트너 → ( AI 어시스턴트 )

  ③ 렌터카처럼 여러 LLM을 고를 수 있는 AI 코딩 도구 → ( 모델 선택형 )

  ④ 자가용처럼 특정 모델을 설치해 사용하는 AI 코딩 도구 → ( 전용 모델형 )

 

3. AI 어시스턴트의 발전 과정을 올바르게 나열한 것을 고르세요.

  ① 딥러닝 → 뉴럴 넷 → 트랜스포머 → LLM

  ② 뉴럴 넷 → 딥러닝 → 트랜스포머 → LLM

  ③ 트랜스포머 → 딥러닝 → 뉴럴 넷 → LLM

  ④ LLM → 트랜스포머 → 딥러닝 → 뉴럴 넷

4. 클로드 코드와 같은 CLI 모델의 특징으로 옳지 않은 것을 고르세요.
  ① 로컬 파일 시스템에 직접 접근이 가능하다.
  ② 프로젝트 전체를 통합적으로 관리할 수 있다.
  ③ 터미널 명령어를 사용해 작업한다.
  ④ 도구 사용료와 AI 모델 비용을 모두 지불한다.

5. 클로드에서 코드나 문서를 생성할 때 사용하는 특별한 작업 공간으로 옳은 것을 고르세요.

  ① 프롬프트(Prompt)

  ② 아티팩트(Artifacts)

  ③ 터미널(Terminal)

  ④ CLI(Command Line Interface)

6. 웹페이지를 만든 후 다른 사람과 공유하기 위해 [ 게시 ] 버튼을 클릭해야 합니다.

7. 이미 게시된 웹페이지를 수정하려면 [ 사용자 지정 ] 버튼을 클릭해야 합니다.

 

 

• 🏃추가 미션(선택)
  • 클로드 아티팩트에서 [커스터마이즈] 2회 이상하고 캡처하기

 

□ 커스터마이즈

  - 처음은 책에 나온 예시대로 구글 스타일로 커스터마이즈를 진행해봤습니다. 

    . 구글 로고와 메모지 스타일, 오늘의 할일 추가 등

    . 게시 링크:  https://claude.ai/public/artifacts/d155032b-e2f6-488a-83d2-b810c5577ae2