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

■ 2주 차 미션

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

---

✅ 2주 차 : Ch 02. 효과적인 프롬프트로 AI 200% 활용하기

 

• 📘공부한 내용
  • 프롬프트: AI와 소통하는 창구이자, AI의 성능을 좌우하는 핵심. 좋은 프롬프트는 명확성, 구체성, 맥락 제공을 충족
    • 명확성: 모호한 표현을 피하고, 원하는 결과를 구체적으로 전달
    • 구체성: 결과물에 필요한 기능이나 조건을 세부적으로 지시
    • 맥락 제공: 왜 필요한지, 어떤 상황에서 활용되는지를 알려주기
  • PRD: 개발자들이 사용하는 제품 기획서
  • 5W1H: Why, Who, What, When, Where, How
    • Why: 왜 만드는가? (목적)
    • Who: 누구를 위한 것인가? (대상을 정의)
    • What: 무엇을 만들 것인가? (기능을 구체화)
    • When: 언제 사용되는가? Where: 어디에서 사용되는가? (사용 맥락을 파악)
    • How: 어떻게 만들 것인가? (구현 방법을 결정)
  • 템플릿: 효과적인 프롬프트 작성을 위해 재사용 가능한 질문 구조
    • 5W1H의 모든 요소를 적절히 포함
    • 구현 방향을 구체적으로 요구
    • 구체적인 기능을 기술적으로 설명
  • HTML: 섹션으로 이루어진 문서로 <section> 태그를 이용해 구역을 구분
    
    • 섹션: 웹페이지가 주제별로 구분된 단위
  • 4단계 포트폴리오 전략: 웹페이지를 뼈대 → 기능 → 디자인 → 점검 순으로 AI에게 요청하는 방법 
    • 뼈대: 페이지에 기능이나 디자인을 넣기 전, 기본적인 HTML 구조만으로 틀을 잡는 단계 (요청→생성→확인→수정)
    • 기능: 실제 데이터를 채워 넣고 동작을 추가하는 단계
    • 디자인: 색상, 레이아웃, 시각적 요소를 적용하여 완성도를 높이는 단계 (레퍼런스를 제공)
    • 점검: 완성된 웹페이지를 검토하며 누락된 기능이나 오류를 수정하는 단계

 

 

 

• 🚶기본 미션(필수)
  • PROJECT 2. 마케팅 포트폴리오 웹페이지 만들고 캡처하기
  • p.66, p.80-81 확인 문제 풀고 인증하기

 

□ 마케팅 포트폴리오

  - 책을 따라 클로드에서 프롬프트를 입력하고, 포트폴리오를 만들어봤습니다. 너무 잘 만들어줘서 놀랐습니다.

    . 게시 링크: https://claude.ai/public/artifacts/5e6a3001-ff78-4d7e-a6b1-019b5b4ff3e1

 

 

□ 확인 문제 풀고 인증

  - 기존에 클로드가 잘 만들어 준 확인 문제 양식을 계속 활용하고 있습니다.

 

마무리

▶확인 문제  (p.66: 1~4, p.80~81: 5~7)

 1. 다음 중 좋은 프롬프트의 조건이 아닌 것을 고르세요.

   ① 명확성: 원하는 결과를 구체적으로 전달한다.

   ② 구체성: 필요한 기능이나 조건을 세부적으로 지시한다.

   ③ 창의성: 결과물이 놀라움을 주도록 요구한다.

   ④ 맥락 제공: 왜 필요한지, 어떤 상황에서 활용되는지 알려준다.

 

 2. 다음 빈칸을 채우세요.

프롬프트와 PRD는 모두 [ 5W1H ] 원칙을 기반으로 한다.    이 원칙은 Why, Who, What, When, Where, How 여섯 가지 질문으로 구성된다.

 

3. 소프트웨어 개발을 위한 PRD에서 특히 강조되어야 하는 두 가지 질문은 무엇인가요?

  ① Why(왜), Who(누구)

  ② What(무엇을), How(어떻게)

  ③ When(언제), Where(어디서)

  ④ Who(누구), Where(어디서)

4. 아래 두 프롬프트 중 더 좋은 것은 어느 것인가요? 그 이유는 무엇인가요?
  ① "멋진 나만의 홈페이지를 만들어 줘."
  ② "오늘의 날씨와 주요 뉴스를 보여 주는 나만의 시작 홈페이지를 만들고 싶어."

    이유: 필요한 기능을 정확히 언급해서, 생성형 AI가 목표를 구체적으로 인식 가능

5. 포트폴리오 웹사이트를 만들 때 사용한 4단계 전략의 올바른 순서는 무엇인가요?

  ① 디자인 입히기 → 기본 틀 잡기 → 핵심 기능 넣기 → 완성도 점검

  ② 기본 틀 잡기 → 디자인 입히기 → 핵심 기능 넣기 → 완성도 점검

  ③ 기본 틀 잡기 → 핵심 기능 넣기 → 디자인 입히기 → 완성도 점검

  ④ 핵심 기능 넣기 → 기본 틀 잡기 → 완성도 점검 → 디자인 입히기

6. 다음 중 효과적인 프롬프트 작성 방법으로 옳지 않은 것은 무엇인가요?

  ① 5W1H 템플릿을 활용하여 체계적으로 질문한다.

  ② 모든 기능을 한 번에 요청하여 시간을 절약한다.

  ③ 각 세션에 ID를 부여하여 개별 수정이 가능하도록 한다.

  ④ 워드프레스 테마 같은 구체적인 레퍼런스를 제공한다.

7. 섹션에 고유한 이름을 붙이면 생기는 장점이 아닌 것은 무엇인가요?

  ① 원하는 부분만 정확히 수정할 수 있다.

  ② 전체 코드를 다시 생성하지 않아도 된다.

  ③ AI가 수정할 위치를 명확히 이해할 수 있다.

  ④ 자동으로 디자인이 개선된다.

 

 

• 🏃추가 미션(선택)
  • AI에게 디자인 수정 요청 1회 이상하고 캡처하기
  • 내가 이해한 웹페이지의 구조를 한 문단으로 정리하기

 

□ 대대적인 디자인 수정

  - 포트폴리오가 정적인 것 같아서, 동적이고 화려하게 디자인을 수정하였습니다. 확 바뀐것이 느껴지시나요?

    . 수정을 요청한 프롬프트는 아래 기술한 웹페이지의 구조 및 섹션을 참고하세요.

    . 게시 링크:  https://claude.ai/public/artifacts/3415636f-6743-4239-b485-94545aeb108b

 

 

 

□ 내가 이해한 웹페이지의 구조

  - 모던한 디자인 트렌드인 '글래스모피즘(Glassmorphism)'과 다채로운 그라데이션 애니메이션이 적용된 1페이지 구성의 퍼포먼스 마케터 포트폴리오

    . 역동적인 인터렉션 요소와 '3D 카드' 효과를 통해 전문적이면서도 시각적으로 몰입감 있는 사용자 경험을 제공하도록 설계

 

□ 자세한 섹션 구조

  - navigation-section - 상단 고정 네비게이션 바 (로고, 메뉴 이동 버튼, 모바일 메뉴 포함)
  - hero-section - 히어로 영역 (3년차 마케터 소개, 헤드라인, 주요 성과 숫자 3종, 프로젝트/연락 CTA 버튼, 애니메이션 프로필)

  - metrics-section - 임팩트 메트릭스 (ROAS, 매출 기여, 팔로워 성장, 트래픽 증가 등 4개의 성과 카드)

  - projects-section - 프로젝트 쇼케이스 (분야별 필터 기능 및 이커머스/스타트업/로컬 브랜드 3개 프로젝트 카드)

  - skills-section - 스킬 매트릭스 (퍼포먼스, 콘텐츠, 데이터 분석, 디자인/협업 툴 등 4개 카테고리 스킬바 및 경력 타임라인)

  - contact-section - 연락 섹션 (이름/이메일 메시지 전송 폼 및 이메일/링크드인/인스타그램 연락 정보)