[그지 바이브코딩 2번째] "해줘 해줘 해줘"로 만드는 법

오...하시는 분들이 진짜 있네요?

2026. 4. 8.

지난주 메일 발송때 보여드린 패밀리 라운지 (무료...아무나 가입가능)

아무튼 현재 회원수 270명 돌파!

잠자고 있는 멤버분들이랑 무료회원분들 증가 추이를 봐선

금방 500명 넘어갈 듯 합니다!

라운지 가입하기

어제 만들기 시작한 네이버 블로그 자동화

-글쓰기 / 이미지 생성/ 업로드 자동

-폰트/정렬/글자수 조정 가능

-이웃관리, 서이추 가능, 대량등록 가능 등등

원하는걸 만드는 중...

(4월 25일 오프라인 강연 오는분들은 이런거 만들수 있을겁니다)

하하하

그건 그렇고...다들 진짜 실행을 하시네요?

스레드에 makefamily 태그걸고 쓰신분도 계시고...

1대1 카톡 보내주신 분들도 계시고..

톡방에 말씀하신 분들도 계시고 ...ㅎ

이번에도 따라하고 있는지

막히는건 없는지 말씀해주시길 바라며!

두번째 그지같은 바이브코딩 강의 시작합니다.

안티그래비티만으로 “첫 화면” 띄우기

1일차까지 우리는 여기까지만 했다고 가정합니다.

안티그래비티 설치 완료
my-first-app 폴더를 안티그래비티에서 열어본 상태

“클로드 코드가 뭐다~” 같은 건 일단 잊어도 됩니다.

(결제하기 부담스러운 분들도 있을거고...)

2일차의 목표는 안티그래비티만으로

“내가 적은 문장이
브라우저에서 ‘웹페이지’처럼 보이는 것”
을 직접 눈으로 확인하는 것.

코드 이해 필요 없습니다.
파일 하나 만들고, 브라우저로 여는 것만 합니다.

1. 1일차가 잘 됐는지 빠른 점검

1. 안티그래비티 켜기
- 바탕화면/시작 메뉴에서 Antigravity 실행

2. 왼쪽 Explorer에 my-first-app 폴더가 보이는지 확인
- 안 보이면: File → Open Folder… → my-first-app 선택

여기까지 되면 준비 끝입니다.

2. 안티그래비티에서 직접 index.html 만들기

이제 AI고 뭐고 다 빼고, 안티그래비티 버튼만 씁니다.

왼쪽 Explorer에서 my-first-app 폴더에 마우스 오른쪽 클릭
New File / 새 파일 메뉴 클릭
파일 이름을 이렇게 적습니다.

index.html
Enter를 치면 index.html 파일이 생기고,
가운데 에디터가 자동으로 열립니다.

지금은 빈 파일이어도 괜찮습니다.

3. 복붙용 기본 HTML 골격 넣기

코드를 이해할 필요 없으니까,
그냥 “템플릿 한 번”만 복사해서 붙여 넣게 합니다.

index.html 안에 아래 내용을 통째로 붙여 넣으세요.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 바이브코딩 랜딩</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
margin: 0;
padding: 40px 20px;
background: #111827;
color: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 600px;
width: 100%;
background: #020617;
border-radius: 16px;
padding: 32px 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
border: 1px solid rgba(148,163,184,0.3);
}
h1 {
font-size: 24px;
margin-bottom: 12px;
}
p {
font-size: 14px;
line-height: 1.6;
color: #9ca3af;
margin-bottom: 20px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(59,130,246,0.15);
color: #bfdbfe;
margin-bottom: 12px;
}
.btn {
display: inline-block;
padding: 10px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
border: none;
cursor: pointer;
}
.btn-primary {
background: #3b82f6;
color: white;
margin-right: 8px;
}
.btn-ghost {
background: transparent;
color: #9ca3af;
border: 1px solid rgba(148,163,184,0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="badge">
⚙️ 그지 바이브코딩 1달차
</div>
<h1>돈은 없지만 툴은 있는 그지마케터의 첫 랜딩</h1>
<p>
이 페이지는 제가 실제로 쓰는 바이브코딩 방식으로,
개발자 없이도 랜딩 하나 정도는 직접 띄울 수 있다는 걸
보여주기 위한 연습용 화면입니다.
</p>
<button class="btn btn-primary">4월 오프라인 스터디 보러가기</button>
<button class="btn btn-ghost">라운지 구경 먼저 하기</button>
</div>
</body>
</html>

그리고 Ctrl + S로 저장.

여기까지 하면,
이미 “랜딩 비슷한 것 하나”는 만들어진 상태입니다.

(아직 눈으로만 안 봤을 뿐)

4. 브라우저로 열어서 “진짜 화면” 확인하기

이제 제일 중요한 단계입니다.
안티그래비티만으로, 방금 만든 걸 눈으로 보는 것.

내장 브라우저 / Preview로 열기

버튼을 눌렀을 때 처음 한 번은 이런 Antigravity Browser Control 안내 화면이 뜰 수 있다.
이건 “에이전트가 웹을 자동으로 클릭/스크롤할 때 쓰는 제어창”이지,
우리가 만든 랜딩 페이지가 아니다.
이 창이 뜨는 건 정상이고, 여기서 한 번만 ‘Ready’ 느낌으로 켜두면 된다.
그 다음에 해야 할 건:
- 크롬 주소창에 file:///.../my-first-app/index.html을 직접 여는 방법, 또는
- 안티그래비티에서 index.html 오른쪽 클릭 → “Open with Browser / Open Preview” 같이 파일 기준으로 여는 메뉴를 쓰는 것.