2026 혼자 공부하는 바이브코딩

챌린지 2주차 미션

isfp_일상 2026. 1. 6. 14:52
더보기
챕터 2
- 4단계 포트폴리오 전략은 웹페이지를 뼈대 -> 기능 -> 디자인 -> 점검 순으로 AI 에게 요청하는 방법이다
- 웹페이지는 주제 별로 구분된 섹션으로 구성된다
- 뼈대 단계에서는 웹페이지에 기능이나 디자인을 넣기 전에 기본적인 HTML 구조만으로 틀을 잡는다
- 기능 단계에서는 실제 데이터를 채워넣고 동작을 추가한다
- 디자인 단계에서는 색상, 레이아웃, 시각적 요소를 적용하여 완성도를 높인다
- 점검 단계에서는 완성된 웹페이지를 검토하고 오류나 누락된 기능을 수정한다

 

🚶기본 미션(필수)

PROJECT 1. 마케팅 포트폴리오 웹페이지 만들고 캡처하기

https://claude.ai/public/artifacts/5a838740-950e-4a61-bd7b-77666c74b9b2

 

 

p.66, p.80-81 확인 문제 풀고 인증하기

  • 기본 틀 잡기 -> 핵심 기능 넣기 -> 디자인 입히기 -> 완성도 점검 (3번)
  • 모든 기능을 한 번에 요청하여 시간을 절약한다 (2번)
  • 자동으로 디자인이 개선된다 (4번)

 

🚶추가 미션(선택)

AI에게 디자인 수정 요청 1회 이상하고 캡처하기

career-timeline-section을 아래의 이미지 참고하여 디자인을 수정해

 

 

레퍼런스 이미지

 

 

내가 이해한 웹페이지의 구조를 한 문단으로 정리하기

 

네비게이션 바와 총 5개의 섹션 (hero, career timeline, expertise, project, cta)으로 구성되어 있고, 각각은 id 구분자로 css가 적용되어 있다.

각 섹션에는 여러 개의 하위 컨테이너로 구성되어있다. 

반응형

'2026 혼자 공부하는 바이브코딩' 카테고리의 다른 글

챌린지 5주차 미션  (0) 2026.01.15
챌린지 4주차 미션  (1) 2026.01.09
챌린지 3주차 미션  (0) 2026.01.06
챌린지 1주차 미션  (0) 2026.01.05