더보기
챕터 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 |