Antigravity에게 첫 페이지 맡기기
기획서를 바탕으로 Antigravity에게 웹사이트를 만들어 달라고 해요. 그리고 결과를 꼼꼼히 확인해요.
🎯 이번 레슨을 마치면
- 기획서를 바탕으로 웹사이트 제작을 요청할 수 있다
- 만들어진 파일 구성을 이해할 수 있다
- 브라우저에서 결과를 확인하고 점검할 수 있다
1단계: 계획 먼저 받기
plan.md에 정리한 기획서대로 나만의 소개 웹사이트를 만들고 싶어. 코드를 쓰기 전에 먼저 1) 어떤 파일을 만들지 2) 화면이 위에서부터 어떤 순서로 구성될지 를 간단히 보여 줘. 내가 확인하면 그때 만들어 줘.
👉 plan.md가 없다면 기획서 내용을 직접 붙여 넣어도 돼요.
계획을 읽어 보고, 마음에 안 드는 부분이 있으면 지금 말하세요. 만들고 나서 고치는 것보다 계획 단계에서 고치는 게 훨씬 쉬워요.
좋아, 그 계획대로 만들어 줘. 사진은 아직 없으니 임시 그림 자리로 비워 두고, 나중에 내가 사진 파일을 넣으면 바꾸기 쉽게 해 줘.
2단계: 만들어진 파일 살펴보기
보통 이런 파일들이 생겨요.
my-site/
├─ index.html ← 내용과 뼈대 (HTML)
├─ style.css ← 색, 글꼴, 배치 (CSS)
├─ script.js ← 버튼 같은 동작 (JavaScript)
└─ images/ ← 사진 폴더
3단계: 직접 열어서 확인하기
index.html을 더블클릭하면 브라우저에서 열려요. (Antigravity에게 “미리보기로 보여 줘”라고 하면 바로 띄워 주기도 해요.)
4단계: 마음에 들면 저장!
첫 버전이 마음에 들어. "첫 버전 완성"이라는 메시지로 커밋해 줘.
퀴즈
웹사이트에 처음 들어왔을 때 서버가 가장 먼저 보여 주는 파일 이름은?
📝 정리해 볼까요?
- 기획서(plan.md)를 보여 주고 "계획 먼저 → 만들기" 순서로 요청했어요.
- 결과물은 보통 index.html(내용), style.css(꾸밈), script.js(동작) 파일로 나뉘어요.
- PC와 휴대폰 화면 모두에서 확인하고, 잘 되면 커밋해요.
📖 새로 나온 용어
- HTML
- 웹페이지의 뼈대와 내용을 적는 언어예요. "여기는 제목, 여기는 문단"처럼 표시해요. 비유: 집의 뼈대
- CSS
- 웹페이지의 색, 크기, 글꼴, 배치를 꾸미는 언어예요. 비유: 집의 인테리어
- JavaScript
- 웹페이지가 움직이고 반응하게 만드는 프로그래밍 언어예요. 비유: 집의 전기와 수도
잘했어요! 완료 표시는 이 브라우저에 저장돼요.