VibeCoding

혼자 공부하는 바이브코딩 VibeCoding 1주차

✅Week 1 Progress: Ch 01

🚶Basic Mission (Required)
PROJECT 1. Create and capture my first webpage
Complete the review questions on p.33, p54-55 and submit proof
⠀
🏃Additional Mission (Optional)
Customize at least 2 times in Claude Artifacts and capture it
⠀
Practice Example:https://github.com/taehojo/vibecoding
Q&A:https://github.com/taehojo/vibecoding/issues

기본 미션:
Ch1. 0P.33
1. ① ChatGPT, Gemini, Claude
② 커서, 리플릿, 윈드서프
③ Claude code, 제미나이 CLI

2. ① 바이브코딩
   ② AI 어시스턴트
   ③ 모델선택형도구
   ④ 전용모델형 도구

p.54-55
1. ② 뉴럴넷 ->딥러닝-> 트랜스포머-> LLM
2. ④ 도구사용료, AI 모델 비용 모두 지불
3. ② 아티팩트
4. 게시
5 Customize

선택 미션:
Ch.1-2 바이브코딩으로 나만의 웹페이지 만들기

오늘의 날짜, 날씨와 주요 뉴스를 보여주는 나만의 시작 홈페이지를 만들고 싶다고 프롬프트를 주니, 짜잔~

1주: 일정표 대신 대시보드를 만들어 보았습니다.
https://claude.ai/public/artifacts/63cacfff-0867-4db1-8ec0-b87a9e19167e
깃헙 https://github.com/sechan9999/K21claude

2주: 포트폴리오 웹페이지 만들기
https://claude.ai/public/artifacts/2165ced8-5d0f-45f7-94f3-c227fe8f03dd

깃헙 https://github.com/sechan9999/portfolio

본 강의는 『혼자 공부하는 바이브 코딩 with 클로드 코드』의 내용을 바탕으로 제작하였습니다.

👨‍🏫주요 강의 내용
Ch 01. 나의 첫 바이브 코딩
01-1 나의 코딩 파트너, AI 어시스턴트

• 바이브 코딩이란?

01-2 AI로 나만의 첫 웹페이지 만들기

• 클로드 시작하기
• 클로드 아티팩트로 웹페이지 만들기

Ch 02. 효과적인 프롬프트로 AI 200% 활용하기
02-1 AI를 깨우는 프롬프트의 비밀

• 프롬프트의 중요성
• PRD(제품기획서) 작성하기

02-2 실전! 포트폴리오 웹사이트 완성하기

• 4단계 포트폴리오 전략(뼈대 → 기능 → 디자인 → 점검)
• 포트폴리오 웹페이지 만들기

🔗실습 예제: https://github.com/taehojo/vibecoding
🔗저자님께 질문하기: https://github.com/taehojo/vibecoding/issues
🔗혼자 공부하는 바이브 코딩 with 클로드 코드: https://www.hanbit.co.kr/store/books/look.php?p_code=B1785590517&type=book&utm_source=inflearn&utm_medium=affiliate&utm_campaign=50004

inflearn에서 챕터1과 2 동영상을 보고, 따라해보기 했습니다.

제품 요구사항 문서 (PRD): 프리랜서 데이터 사이언티스트 포트폴리오 웹사이트

1. 제품 개요

• 제품명: [Your Name] Data Science Portfolio (예: "John Doe - Freelance Data Scientist Portfolio")
• 목적: 데이터 회사 취업을 위해 채용담당자가 30초 안에 지원자의 역량을 파악할 수 있도록 임팩트 있게 구성된 개인 포트폴리오 웹사이트. 프리랜서 경력을 강조하며, 경쟁력 있는 지원자로 보이게 함.
• 왜(Why): 데이터 회사 취업 지원 시 이력서만으로는 기술 역량과 비즈니스 임팩트를 증명하기 어려움. 포트폴리오를 통해 실제 프로젝트 성과를 시각적으로 보여주어 채용담당자의 관심을 끌고 인터뷰 기회를 높임.
• 누가(Who): 주요 사용자 - 데이터 사이언스 채용담당자 (Hiring Manager). 부수적 사용자 - 동료 데이터 사이언티스트, 잠재 클라이언트 (프리랜서 측면).
• 무엇을(What): 경력 요약, 주요 프로젝트 성과 (비즈니스 임팩트 중심), 기술 스택, 연락처 정보.
• 언제(When): 이력서와 함께 지원서 제출 시 링크 공유. 또는 LinkedIn/GitHub 프로필에 상시 노출.
• 어디서(Where): 웹 브라우저 (데스크톱/모바일).
• 어떻게(How): 반응형(single-page 또는 간단 multi-page) 웹페이지. 빠른 로딩과 직관적 네비게이션으로 30초 내 핵심 정보 전달.

2. 목표 및 성공 지표

• 주요 목표:
  • 채용담당자가 30초 내에 "이 사람은 실무 역량이 강하고 비즈니스 임팩트를 낼 수 있음"을 느끼게 함.
  • 프로젝트를 통해 비즈니스 가치 (e.g., 매출 증가, 비용 절감, 정확도 향상)를 수치로 증명.
  • 프리랜서 경험 강조: 독립적 문제 해결, 엔드-투-엔드 프로젝트 수행 능력.
• 성공 지표 (측정 가능):
  • 사이트 방문자 수 / 평균 체류 시간 (Google Analytics 연동).
  • LinkedIn/이력서 클릭률 증가.
  • 인터뷰 요청 증가 (주관적 피드백).

3. 주요 기능 및 요구사항

• 전체 구조 (Above the Fold 우선: 화면 상단에 핵심 정보 배치)

  1. Hero Section (첫 화면, 10초 임팩트):
     • 큰 헤드라인: "Freelance Data Scientist | ML/AI 전문 | 비즈니스 임팩트 중심 프로젝트"
     • 서브타이틀: "X년 경력 | Y개 프로젝트로 Z% 매출 향상 등 성과 달성"
     • 프로필 사진 + 간단 자기소개 (1-2문장).
     • CTA 버튼: "프로젝트 보기" / "연락하기" / "Resume 다운로드 (PDF)".
  2. About Me / Skills Section:
     • 간단 경력 요약 (프리랜서 경험 강조).
     • 기술 스택: 아이콘으로 시각화 (Python, SQL, TensorFlow, AWS 등) + 레벨 바 또는 년수.
     • 핵심 강점: "End-to-End ML 파이프라인", "비즈니스 인사이트 도출", "스토리텔링".
  3. Projects Section (핵심, 3-5개 프로젝트만 선별):
     • 카드 형식 그리드 (이미지 + 제목 + 요약).
     • 각 프로젝트 상세:
       • 문제 정의 (Business Problem).
       • 접근 방법 (데이터 수집/전처리/모델링/배포).
       • 성과 중심: 수치 임팩트 (e.g., "예측 정확도 92% → 비용 20% 절감").
       • 시각화: 대시보드 스크린샷, 그래프.
       • 링크: GitHub Repo, Live Demo (Streamlit/Gradio 앱), Blog Post (Medium).
     • 프리랜서 프로젝트 강조: 클라이언트 익명 처리 가능.
  4. Experience / Freelance History:
     • 타임라인 형식으로 프리랜서/프로젝트 경력 나열.
  5. Contact Section:
     • 이메일, LinkedIn, GitHub 링크.
     • 간단 Contact Form (Netlify/Formspree 연동).
  6. Footer: Copyright, 소셜 링크.

• 필수 요구사항:

  • 반응형 디자인: 모바일 최우선 (채용담당자 모바일 확인 많음).
  • 빠른 로딩: 이미지 최적화, Lazy Loading (<3초 로드).
  • SEO 최적화: 메타 태그, Open Graph (LinkedIn 공유 시 썸네일).
  • 접근성: 색상 대비, 키보드 네비게이션.
  • 분석: Google Analytics 또는 Plausible 연동.

• 비기능 요구사항:

  • 다크/라이트 모드 지원 (선택).
  • PDF Resume 다운로드 버튼.

4. 기술적 구현 방향 (2025 기준 추천 Tech Stack)

데이터 사이언티스트로서 간단하고 유지보수 쉬운 스택 선택. 복잡한 백엔드 불필요 (정적 사이트 추천).

• 추천 스택 1: Next.js (React) + Tailwind CSS (가장 현대적, 성능 최고)

  • 왜? SSR/SSG로 빠른 로딩 + SEO 우수. GitHub Pages/Vercel 무료 배포.
  • 프레임워크: Next.js 14+ (App Router).
  • 스타일링: Tailwind CSS (빠른 반응형 디자인).
  • 추가: Framer Motion (부드러운 애니메이션), MDX (프로젝트 설명 Markdown).
  • 배포: Vercel (자동 CI/CD, 무료).
  • 장점: 데이터 사이언티스트가 익히기 쉬움 (JS 기반), 포트폴리오 자체가 프론트엔드 스킬 증명.

• 추천 스택 2: Astro + Tailwind CSS (정적 사이트 최적)

  • 왜? 초고속 로딩, 여러 프레임워크 (React/Vue) 컴포넌트 혼용 가능.
  • 배포: Netlify/Vercel.

• 대안 (노코드/저코드):

  • GitHub Pages + Jekyll/Hugo (정적, 무료).
  • 또는 Notion/ Carrd (초간단, 하지만 커스텀 제한).

• 프로젝트 통합:

  • 인터랙티브 데모: Streamlit/Plotly Dash 앱 iframe 임베드.
  • GitHub API로 최근 커밋 자동 표시 (선택).

• 개발 팁:

  • 템플릿 활용: GitHub에서 "data scientist portfolio template" 검색 (e.g., Next.js 기반 오픈소스).
  • 이미지 최적화: WebP 형식, Cloudinary 연동.
  • 총 개발 시간: 1-2주 (템플릿 사용 시 3-5일).

이 PRD를 기반으로 구현하면 채용담당자가 빠르게 매료될 수 있는 강력한 포트폴리오가 완성됩니다.