[강의] 51~60쪽, 컨텍스트 기초, Plan 모드 활용, 애플 사이트 클론

애플 사이트를 Cursor로 클론하면서, 파일·이미지·플랜 모드·Composer까지 한 번에 익힙니다. 셋업 가이드 다음 강이라면 여기서부터 보시면 됩니다. 공용 에셋 받기, 폴더 열기, `index.html`로 Ask 모드 컨텍스트, 플랜으로 계획 세우고 빌드, 완료 후 브라우저로 확인하는 흐름을 따라갑니다. 마지막엔 “완벽히 같지 않다”는 한계와, 스크린샷·다중 이미지로 다듬는 법까지 짚습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 21페이지 시작, 바이브 코딩 본편 안내
0:17 워밍업·미리 알아두면 좋은 내용
0:42 실습 주제: 애플 사이트 따라 만들기
1:14 공용 파일 링크에서 실습 이미지 다운로드
1:50 드라이브 링크를 뷰어로 공유 설정
2:09 Open Folder, 바탕화면에 실습 폴더 만들기
2:54 Cursor가 폴더를 “보는” 이유, 에이전트에 폴더 상태 물어보기
3:34 이미지 압축 해제 후 프로젝트 폴더에 넣기
4:09 `index.html` 생성, Ask 모드로 진행
5:16 파일을 채팅에 넣고 “이 파일이 뭐야?” — 컨텍스트 집중 대화
6:15 Plan 모드, Composer, 책 프롬프트 복사 사이트
7:18 프롬프트 복사·붙여넣기로 실습
8:03 Plan 모드: 짧은 목적만 던져도 계획·질문·빌드까지
9:48 빌드 실행, Composer로 애플닷컴 클래식 스타일 제작
11:29 수정 후 Keep / Undo(되돌리기) 선택
12:45 할 일 목록으로 진행 상황 보기, 애플 사이트 구조 참고
14:06 완료 후 `index.html` 더블클릭 또는 에이전트에 열어달라고 하기
15:13 결과는 애플과 100% 동일하지 않음 — 바이브 코딩의 한계·숙제
16:15 스크린샷으로 레이아웃 개선 요청하기
17:24 이미지 다중 선택·드래그로 상품 이미지 반영
18:55 디자인은 모델 변경(예: 재미나 프로)도 시도해 볼 만함
19:50 오늘 51~60페이지까지, 다음 시간은 61페이지 사각 게임(모르는 것을 AI에게 알리는 연습)

오늘 다룬 내용
- 애플 스타일 사이트 클론 실습 전체 흐름(에셋·폴더·`index.html`)
- Ask 모드에서 파일을 컨텍스트로 넣어 “이 파일이 뭐야?”로 집중 대화
- Plan 모드 + Composer(구 컴포저 원)로 계획 수립 후 빌드, 프롬프트는 책 연동 사이트에서 복사
- 수정 적용 시 Keep/Undo, 할 일 목록으로 진행 확인
- 로컬에서 `index.html`로 결과 확인하는 방법
- 완성도 한계와 이미지·스크린샷으로 디테일을 잡는 방법, 모델 변경 팁
- 다음 강: 사각 게임으로 “AI가 모르는 것을 어떻게 지시할지” 예고

#바이브코딩 #Cursor #AI코딩 #애플사이트 #클론코딩 #Composer #플랜모드 #에이전트모드 #프롬프트 #웹개발입문 #코딩강의 #인공지능 #개발자 #프론트엔드 #AI활용