VibeCoding2

탁가이버·2026년 1월 12일

VibeCoding

목록 보기
2/4

✅Week 2 Progress: Ch 02
Please study using the provided video lectures and practice example materials,
and when you have questions, please use the Q&A channel.
⠀

🚶Basic Mission (Required)
PROJECT 2. Create a marketing portfolio webpage and capture it
Complete the review questions on p.66, p.80-81 and submit proof
⠀
🏃Additional Mission (Optional)
Request design modifications from AI at least once and capture it
Summarize the structure of the webpage as I understand it in one paragraph
⠀
Practice Example:https://github.com/taehojo/vibecoding
Q&A:https://github.com/taehojo/vibecoding/issues

✅Frequently Asked Questions

🤔How much should I write for the blog post?

🧙: The reading challenge does not limit the amount. Please study according to the given curriculum and organize the important content you learned and the missions you completed on your blog. The goal is to complete the full 6 weeks without getting exhausted.
⠀

🤔 Won't summarizing what I studied on my blog violate publication copyright?

🧙: When organizing your missions and study content on your blog, please ensure that images and text citations do not exceed 15% of the total book content. In particular, when summarizing concepts, please be careful not to copy the book's text verbatim.
⠀
For questions regarding the reading challenge activities, please contact event@hanbit.co.kr.

기본 미션: p.66, p. 80-81 풀기

P.66
1. ③ 창의성,
좋은 프롬프트는 명확성, 구체성, 맥락 제공을 충족해야 합니다.
2. 5W 1H (Why, Who, What, When, Where, How)
3. ② What, How
4. ② 오늘의 날씨, 주요뉴스라고 필요한 기능을 명시해서 AI가 구체적으로 할 일을 인식하게 한다.

p. 80-81
1. ③ 기본틀-> 기능 넣기-> 디자인 입히기-> 점검
2. ② 모든 기능 한꺼번에는 안좋음.
3. ④ 자동 디자인 개선되는 것은 아님

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

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

선택 미션:

웹페이지 구조 요약

이 포트폴리오 웹사이트는 단일 페이지 애플리케이션(SPA) 구조로, 채용담당자가 30초 내에 지원자의 역량을 파악할 수 있도록 설계되었습니다. 상단에 고정 네비게이션 바가 있어 About, Skills, Projects, Experience, Contact 섹션으로 부드럽게 스크롤되며, "Hire Me" 버튼 클릭 시 Contact 모달이 팝업됩니다. Hero 섹션에는 프로필 사진, 핵심 헤드라인("Healthcare Data를 Actionable Insights로"), 16년+ 경력 요약, 그리고 "View Projects"와 "Resume PDF" CTA 버튼이 배치되어 있습니다. 이어서 About(자기소개 + 핵심 강점 태그), Skills(6개 카테고리의 기술 스택 카드), Projects(COVID-19, NLP Pipeline, Medicaid Impact, Azure Pipeline 4개 프로젝트 카드), Experience(타임라인 형식의 CDC 경력), Publications(DOI 링크가 연결된 2개 논문) 섹션이 순서대로 나열됩니다. 마지막으로 Footer에 LinkedIn, GitHub, Email 링크가 있고, Contact 모달은 mailto: 방식으로 실제 이메일 전송이 가능하며, Resume 모달은 이력서 요약과 함께 "Request Full Resume" 이메일 버튼을 제공합니다. 전체적으로 순수 HTML/CSS/JavaScript로 구현되어 외부 라이브러리 의존성 없이 작동합니다.

디자인 수정 요청

포트폴리오에 어떤 디자인 변경을 원해? 몇 가지 제안:

  1. 색상 테마 변경 - 현재 파란색/보라색 → 다른 색상으로
  2. Hero 섹션 레이아웃 - 사진 위치, 크기 조정
  3. 카드 스타일 - 그림자, 테두리, 호버 효과 강화
  4. 폰트 스타일 - 더 현대적이거나 전문적인 느낌
  5. 애니메이션 추가 - 스크롤 시 fade-in 효과
  6. 다크/라이트 모드 토글 추가

스크롤 애니메이션 추가 완료!

✅ 추가된 애니메이션 효과

애니메이션적용 섹션효과
fade-inAbout, Experience, Publications아래에서 위로 페이드인
fade-in-leftProjects (1, 3번째)왼쪽에서 오른쪽으로 슬라이드
fade-in-rightProjects (2, 4번째)오른쪽에서 왼쪽으로 슬라이드
fade-in-scaleSkills 카드작은 크기에서 확대되며 나타남
delay-1~5순차적 지연0.1초~0.5초 시차 효과

작동 방식:

  • IntersectionObserver API 사용
  • 요소가 뷰포트에 10% 이상 보이면 애니메이션 시작
  • 한 번 나타난 후 계속 유지 (재스크롤 시 사라지지 않음)

스크롤해서 각 섹션이 부드럽게 나타나는지 확인해봐! 🎉

제품 요구사항 문서 (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를 기반으로 구현하면 채용담당자가 빠르게 매료될 수 있는 강력한 포트폴리오가 완성됩니다.

3주차까지 숙제 완료! https://velog.io/@tcgyver/VibeCoding3

바이브코딩 2주째 몇 시간 만에 뚝딱 만들 수 있는 대시보드를 보며 신기해하는 중입니다.

🌐 기축통화(Anchor Currency) 작동 원리 대시보드

미국 달러가 세계 경제에 미치는 영향을 실시간으로 체험할 수 있는 인터랙티브 교육용 대시보드입니다.

✨ 주요 기능

1. 금리 조절 시뮬레이션

  • 미국 연준(Fed) 기준금리를 0.5%~6% 범위에서 조절
  • 금리 변화에 따른 실시간 경제 지표 반응 확인

2. 세 가지 시각화 모드

모드설명
💸 자금 흐름금리 변화에 따른 글로벌 자본 유출입 애니메이션
🚢 무역 결제달러의 국제 무역 매개 통화 역할 시각화
🏦 가치 저장각국 중앙은행 외환보유고 구조 표시

3. 실시간 차트

  • 원/달러 환율 변화 추이
  • 외환보유고 변화 그래프

4. 교육 콘텐츠

  • 기축통화, 금리-환율 관계, 외환보유고 개념 설명
  • 입문자도 쉽게 이해할 수 있는 시각적 설명

🚀 시작하기

필수 요구사항

  • Node.js 18.0 이상
  • npm 또는 yarn

https://github.com/sechan9999/CurrencyDashboard

통합 업데이트가 적용된 대시보드를 성공적으로 로컬에 반영하고 확인했습니다.

주요 변경 사항 및 확인된 기능:

미국 연준 기준금리 시뮬레이터: 상단에 금리 조절 슬라이더(현재 5.33%)가 추가되어, 긴축/완화 정책에 따른 변화를 시뮬레이션할 수 있는 UI가 적용되었습니다.
3가지 핵심 탭 구성: '자금 흐름', '무역 결제', '가치 저장'으로 나누어진 탭을 통해 기축통화의 역할을 다각도로 분석할 수 있습니다.
실시간 지표 카드: 글로벌 외환보유고 점유율(59.0%), 무역 결제 비중(74.0%) 등의 핵심 지표가 시각적으로 강조되었습니다.
다양한 차트 시각화:
환율 변화 추이: 2015년부터 현재까지의 원/달러 환율 변동 그래프.
역사적 달러 지배력 추이: 무역량 대비 달러 점유율의 역사적 흐름.
글로벌 외환보유고 구성: 도넛 차트를 통한 통화별 비중 시각화.
국가별 자금 흐름: 한국(KR), 미국(US), 중국(CN) 간의 자금 흐름과 외환보유고 현황을 보여주는 인터랙티브 요소가 확인되었습니다.

직접 실행하려면, Node.js 설치 필요

git clone https://github.com/sechan9999/CurrencyDashboard.git
cd CurrencyDashboard
npm install
npm run dev

Github 페이지로 배포된 대시보드.

🔗 대시보드 접속 주소: https://sechan9999.github.io/CurrencyDashboard

이전 대시보드에서도 다음 기능들을 확인하실 수 있습니다:

환율 계산기: 차트 상단에 USD ↔️ KRW 변환기가 추가되었습니다. 달러 금액을 입력하면 원화가, 원화 금액을 입력하면 달러가 자동으로 계산됩니다.

기간별 탭 (Tabs): 차트 우측 상단에 1D (1일), 1M (1개월), 1Y (1년), 5Y (5년), Max 탭이 생겼습니다.

기간별 차트 변화: 탭을 클릭하면 선택된 기간에 맞는 녹색 영역 차트(AreaChart)가 나타납니다. (1D는 시간대별, 1Y 등은 날짜별)

디자인: 그린(Green) 컬러 포인트를 적용하여 상승 느낌을 주고, 시인성을 높였습니다.

깃헙페이지 대시보드가 최종본입니다.

👨‍🏫주요 강의 내용
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

profile
탁가이버
더 나은 세상은 가능하다를 믿고 실천하는 활동가
이전 포스트

VibeCoding

다음 포스트

VibeCoding3

0개의 댓글