[6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 1주차

[1주차] 혼공바코 챌린지: 클로드 코드와 함께하는 ‘바이브 코딩’ 입문

이번 주부터 인프런의 “[6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지”를 시작했습니다! 1주차 학습을 마치고 그 과정과 소감을 간단히 기록하고 미션을 작성해 보려 합니다.

▶ 1주차 학습 요약

이번 주에는 교재의 Chapter 1. 나의 첫 바이브 코딩을 통해 본격적인 준비를 마쳤습니다.

• 01-1. 나의 코딩 파트너, AI 어시스턴트: 단순히 코딩 기술을 배우는 것을 넘어, ‘바이브 코딩’이 무엇인지 그 철학을 이해하는 시간이었습니다. AI를 나의 든든한 파트너로 삼아 대화하며 개발하는 방식이 신선하게 다가왔습니다.

• 01-2. AI로 나만의 첫 웹페이지 만들기: 이론을 넘어 실제 클로드 코드를 활용해 보는 시간이었습니다. ‘나만의 시작 홈페이지’와 ‘프리랜서 마케터 포트폴리오’ 웹페이지를 직접 제작해 보았는데, 복잡한 문법에 매몰되지 않고도 원하는 결과물을 빠르게 만들어내는 과정이 무척 인상적이었습니다.

◈ 학습 후기

클로드 코드를 이용해 보니, 코딩이 어렵게만 느껴졌던 이전과는 확실히 달랐습니다. 제가 구상하는 아이디어를 말하듯이 전달하면 AI가 즉각적으로 반영해 주는 실습 과정을 통해, “어떻게 클로드 코드로 바이브 코딩을 구현하는지” 그 핵심을 제대로 맛볼 수 있었던 유익한 시간이었습니다.

🚶기본 미션

PROJECT 1. 나의 첫 웹페이지 만들고 캡처하기

p.33, p54-55 확인 문제 풀고 인증하기

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

웹 기반 챗봇: 챗GPT, Grok, 제미나이

모델 선택형: 커서, 리플릿, 윈드서프

전용 모델형: 클로드 코드, 구글 제미나이 CLI

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

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

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

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

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

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

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

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

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

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

2. 클로드 코드와 같은 CLI 모델의 특징으로 옳지 않은 것을 고르세요.

① 로컬 파일 시스템에 직접 접근이 가능하다.

② 프로젝트 전체를 통합적으로 관리할 수 있다.

③ 터미널 명령어를 사용해 작업한다.

④ 도구 사용료와 AI 모델 비용을 모두 지불한다.

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

① 프롬프트(Prompt)

② 아티팩트(Artifacts)

③ 터미널(Terminal)

④ CLI(Command Line Interface)

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

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

🏃추가 미션

클로드 아티팩트에서 [커스터마이즈] 2회 이상하고 캡처하기

프롬프트 1:

“현재 포트폴리오의 ‘핵심 성과’와 ‘스킬 레벨’ 섹션을 시각적으로 더 강조하고 싶어. 스킬 레벨은 애니메이션이 적용된 프로그레스 바(Progress Bar) 형태로 변경해주고, ROAS나 매출 기여 같은 수치는 큰 폰트와 함께 강조 색상을 넣은 카드 스타일로 커스터마이즈해줘. 전체적인 색상 톤은 신뢰감을 주는 다크 모드(Deep Blue & White) 테마를 적용해줘.”

프롬프트 2:

“페이지 상단에 스크롤을 따라다니는 스티키 네비게이션(Sticky Navigation) 바를 추가해줘. 각 섹션(경력, 케이스스터디, 스킬 등)으로 바로 이동할 수 있는 링크를 포함해야 해. 그리고 케이스 스터디 섹션에 마우스를 올리면(Hover) 상세 내용이 살짝 떠오르는 효과를 넣고, 모바일에서도 가독성이 좋게 폰트 크기와 레이아웃을 최적화해줘.”

프롬프트 3:

“페이지 하단에 프리랜서 협업 문의를 위한 ‘Contact Me’ 섹션을 세련되게 추가해줘. 이름, 이메일, 문의 내용을 적을 수 있는 깔끔한 폼(Form) 디자인을 넣고, 옆에는 내 오픈 카톡이나 이메일 주소로 바로 연결되는 버튼을 눈에 띄게 배치해줘. 또한, ’30초 요약’이라는 플로팅 버튼을 만들어 클릭하면 내 핵심 역량 3가지만 팝업으로 뜨게 커스터마이즈해줘.”

프롬프트 3번을 추가로 실행해서 완성을 시켜 봤습니다.

게시 : https://claude.ai/public/artifacts/102d4206-e364-43f8-8bbb-0e91ab705b39

완성된 화면은 위에 게시된 링크 주소를 참고하시면 됩니다.

https://samparkblog.com/study/vibe/week1_portfolio_structure.html

제가 이용하는 호스팅에도 업로드(배포)를 해보았습니다.