홈페이지 만들기 실습

화면 표시가 다를 수 있어요. 버튼 이름은 공식 문서 기준이에요(확인일 2026-10-06).

홈페이지 과정 4강의 '먼저 이것부터' 와 같은 사이트를 이번엔 앤티그래비티로 만들어요. 같은 일을 두 도구로 해 보면 차이가 잘 보여요.

┌──────────────────────────────┐
│ 큰 제목 + 한 줄 소개          │  ← 1. 맨 위
├──────────────────────────────┤
│ 사진 1장 + 소개글 3줄         │  ← 2. 가운데
├──────────────────────────────┤
│ 연락처 한 줄                  │  ← 3. 맨 아래
└──────────────────────────────┘

1단계. 폴더 만들기 (3강에서 했다면 건너뛰기)

1. 바탕화면에 빈 폴더 my-site를 만들어요.
2. 앤티그래비티 2.0에서 New Project → Add Folder → Create 로 이 폴더를 연결해요. (3강 참고)

2단계. 지시 보내기

입력창에 아래 프롬프트를 붙여 넣고 [ ] 부분을 내 것으로 바꿔 보내요. 홈페이지 과정 4-0 프롬프트와 같아요.

index.html과 style.css를 만들어줘. 한 페이지 소개 사이트야. 섹션은 딱 3개:
1. 맨 위: 큰 제목 "[이름 또는 가게 이름]"과 한 줄 소개 "[한 줄 소개]"
2. 가운데: 사진 한 장(사진이 없으면 회색 상자)과 소개글 3줄(예시로 채워줘)
3. 맨 아래: 연락처 "[이메일 또는 전화번호]"
폰에서도 보기 좋게.

설정 창에서 Local mode, 방식은 Planning mode를 골라요.

3단계. 계획 읽고 진행하기

계획 모드에서는 에이전트가 먼저 구현 계획(implementation plan) 을 보여 주고 멈춰요. 공식 문서에 따르면 이때 할 수 있는 일은 세 가지예요.

• Proceed(진행): 계획 그대로 진행해요
• 댓글(comment): 계획의 일부에 의견을 달아요. 예: "파일은 index.html, style.css 두 개만"
• Review(검토): 단 의견을 모아 한 번에 보내요

계획에 만들 파일이 index.html, style.css로 나와 있는지 읽고 Proceed를 눌러요. 권한을 묻는 알림이 뜨면 무엇을 하려는지 읽고 허용해요. (권한은 5·7강에서 더 설명해요)

4단계. 결과 확인

일이 끝나면 에이전트가 변경 요약인 워크스루(walkthrough) 를 남겨요. 그리고 my-site 폴더에 index.html이 생겼는지 봐요.

화면을 보는 방법은 두 가지예요.

• 공식 문서의 브라우저(Browser) 기능: 입력창에 /browser로 시작해 "index.html을 크롬에서 열어 화면을 확인해줘"라고 시켜요. 에이전트가 크롬을 열어 보고 화면 캡처를 남겨요. (5강)
• 직접 보기: my-site 폴더의 index.html 파일을 더블클릭하면 내 브라우저에서 열려요.

5단계. 고치기

한 번에 한 가지만 고쳐 달라고 하세요.

맨 위 제목을 더 크게 하고, 배경색을 연한 베이지로 바꿔줘. 다른 부분은 건드리지 마.

막히면

• 에이전트가 멈춰서 안 움직여요: 대화 화면에 승인을 기다리는 단계(pending steps)가 있는지 봐요.
• 파일이 안 생겨요: 프로젝트에 my-site 폴더가 연결됐는지, 모드가 Local mode인지 확인해요.
• 그래도 안 되면 막혔을 때 보는 순서를 따라가세요.

---

출처(확인일 2026-10-06): Implementation plan · Walkthrough · Features(브라우저) · Projects. 폴더 열어 파일 더블클릭으로 보는 방법은 앤티그래비티 기능이 아니라 일반 컴퓨터 사용법이에요.