초보자를 위한 환경 세팅 안내

반갑습니다. 진심을 담아, Vibe Money 강의를 믿고 구매해주셔서 감사합니다.
여러분의 선택이 헛되지 않도록, 제가 가진 모든 노하우를 이 문서들에 녹여냈습니다.

시작하며 드리는 당부

지금부터 가르쳐드릴 모든 내용을 스펀지처럼 흡수하시길 바랍니다. 이를 위해 가장 먼저 해야 할 일은 기술적인 세팅이 아니라, 여러분의 '마인드'를 바꾸는 것입니다. 기존의 사고방식을 잠시 내려놓고, 새로운 세계로 들어갈 준비를 마인드세팅부터 시작하겠습니다.

1. 마인드세팅: 사고의 전환

웹사이트를 만들고 이를 통해 수익을 창출하기 위해서는 두 가지 핵심적인 마인드가 필요합니다. 바로 '엔지니어 마인드'와 '비즈니스 마인드'입니다.

엔지니어적인 마인드

우리가 돈을 벌기 위해서는 가치를 만들어내야 하고, 그 가치는 실체적인 '결과물'에서 나옵니다. 중요한 것은 "무엇을 만들 것인가?"를 얼마나 빨리 떠올리고 실행에 옮기느냐입니다.

• 실행력: 완벽을 기하기보다 빠르게 결과물을 만들어내는 것에 집중하세요.
• 레퍼런스 활용: 처음부터 창조하려고 하지 마세요. 좋은 '레퍼런스'들을 많이 보며 감을 잡는 것이 실력 향상의 지름길입니다.
• 익숙함의 단계: 처음에는 낯설고 어려울 수 있습니다. 하지만 반복하다 보면 어느새 손에 익고 자연스러워질 것입니다.
• 기록과 학습: 모든 과정과 실수는 기록하는 것이 좋습니다. 단순히 오류를 해결하는 데 그치지 말고, AI에게 해당 오류와 해결 과정을 정리해달라고 요청하여 나만의 학습 자료를 모으세요. 해결만 하는 사람과 과정을 기록하며 공부하는 사람의 차이가 성장의 깊이를 결정합니다.

비즈니스적인 마인드

우리가 만드는 모든 결과물은 '사용자의 문제'를 해결하고 '수익'으로 연결되어야 합니다. 시장의 니즈를 파악하고 이를 제품에 녹여내는 감각을 함께 길러나가겠습니다.

이 부분은 추후 내용을 보충해 설명드리겠습니다.

2. 핵심 툴(Tool) 소개

우리는 총 3가지의 강력한 도구를 사용하여 웹사이트를 제작하고 비즈니스를 자동화할 것입니다.

3. Antigravity 시작하기

가장 먼저 마주하게 될 핵심 도구, Antigravity의 사용법을 간단히 설명해 드리겠습니다. 설치가 완료된 후 프로그램을 실행하면 아래와 같은 초기 화면이 나타납니다.

▲ Antigravity를 처음 실행했을 때의 화면

프로젝트 폴더 열기

화면 중앙에 보이는 [Open Folder] 버튼을 클릭하세요. 여러분의 프로젝트 코드가 담긴 폴더를 선택하면, AI가 해당 폴더의 모든 맥락을 이해하고 코딩을 도와줄 준비를 마칩니다.

4. 터미널(Terminal) 활용하기

우선 버전 관리 및 데이터 관리를 위해서 깃허브(Github)를 사용해야 합니다. 이를 위해서는 먼저 터미널을 열어서 명령어를 입력해줄 겁니다.

▲ 상단 메뉴에서 터미널을 여는 방법

터미널 입력창 확인

상단 메뉴에서 Terminal > New Terminal을 클릭하세요. 그러면 화면 하단에 검은색 입력창(터미널)이 나타납니다. 앞으로 이곳에 명령어를 입력하거나 AI가 자동으로 명령어를 실행하는 과정을 지켜보게 될 것입니다.

5. GitHub 저장소 생성하기

작성한 코드를 안전하게 보관하고 배포하기 위해 GitHub 저장소가 필요합니다.GitHub.com에 접속하여 로그인을 마친 후 아래 순서를 따라주세요.

▲ 새로운 GitHub 저장소를 만드는 법

저장소 생성 및 공개 범위 설정

화면 좌측의 [New] 버튼을 눌러 프로젝트 생성을 시작합니다. 저장소의 이름을 정한 뒤 아래의 설정을 확인하세요.

• Public: 모든 사람에게 코드가 공개됩니다.
• Private: 본인(및 지정한 협업자)만 코드를 볼 수 있습니다. 개인적인 프로젝트나 중요한 코드는 Private 설정을 권장합니다.

저장소 주소 복사하기

화면 중앙에 보이는 https://github.com/유저명/저장소명.git 형태의 링크를 직접 드래그해서 복사하거나, 우측에 있는 복사 아이콘 버튼을 클릭하여 주소를 간편하게 복사할 수 있습니다.

💡 이 주소는 나중에 안티그래비티와 여러분의 프로젝트를 연결할 때 꼭 필요하니 잘 챙겨두세요!

6. 안티그래비티와 GitHub 연동하기

이제 복사한 주소를 사용하여 여러분의 로컬 폴더와 GitHub 저장소를 연결할 차례입니다.하지만 그 전에, 원활한 연동을 위해 Git 로그인을 먼저 진행해야 합니다.이 과정은 최초 1회만 해두면, 이후에는 로그인 과정 없이 매우 편리하게 모든 프로젝트를 관리할 수 있습니다.

1단계: Git 설치하기

아직 컴퓨터에 Git이 설치되어 있지 않다면, 아래 링크에서 Windows 용 Git을 다운로드하여 설치해주세요.
https://git-scm.com/install/windows

2단계: GitHub 로그인 (gh auth login)

설치가 되었다면, 안티그래비티 프롬프트(우측 채팅창)에 아래 명령어를 입력해보세요.
이 명령어는 GitHub CLI 도구를 자동으로 설치하고 로그인을 도와줍니다.

gh auth login

명령어를 입력하면 관련 CLI가 설치되고, 이어서 로그인을 진행하라는 안내가 나옵니다. 안내에 따라 엔터를 누르거나 선택지를 고르면 브라우저 로그인 창이 열립니다.

▲ GitHub 로그인 진행 화면

클릭하라고 하는 링크를 누르면 브라우저에서 로그인 창이 뜹니다.
거기서 Login 혹은 Continue 버튼을 누르면 로그인이 완료됩니다.

💡 로그인 한 번으로 끝!

한 번 안티그래비티에서 로그인을 해 놓으면 추후에 다시 로그인 할 필요가 없습니다.
다른 프로젝트를 진행하더라도 같은 계정으로 자동 관리됩니다.

따라서 다음 프로젝트부터는 복잡한 과정 없이, 프롬프트 창에 깃허브 레포 링크를 넣고"pull 해줘" 혹은 "push 해줘" 라고 입력하기만 하면 알아서 처리해줍니다.

로그인을 마쳤다면, 이제 아래의 연동 명령어를 사용하여 현재 프로젝트를 저장소와 연결해봅시다.
안티그래비티의 터미널 창에 아래 명령어들을 한꺼번에 복사해서 붙여넣고 엔터를 누르시면 됩니다. 특히 #5번 과정에서 [복사한-주소] 부분에 앞서 GitHub에서 복사한 여러분의 저장소 링크를 꼭 붙여넣어 주세요.

git init

echo "node_modules/" > .gitignore      # Node.js 의존성 폴더
echo "dist/" >> .gitignore             # 빌드 결과물 폴더
echo "build/" >> .gitignore            # 빌드 결과물 폴더
echo ".env" >> .gitignore              # 환경변수 파일
echo ".DS_Store" >> .gitignore         # macOS 시스템 파일

echo "# 프로젝트명" > README.md

git add .
git commit -m "Initial commit"

git branch -M main
# 아래 [복사한-주소] 부분에 아까 GitHub에서 복사한 .git 링크를 붙여넣으세요
git remote add origin [복사한-주소]

git push -u origin main

▲ 연동 및 푸시가 성공적으로 완료된 화면

7. 터미널 명령어가 어렵다면? (가장 쉬운 방법)

만약 터미널에 명령어를 직접 입력하는 것이 낯설고 어렵게 느껴진다면, 걱정하지 마세요. 우측의 안티그래비티 프롬프트 창에 도움을 요청하면 AI가 알아서 처리해줍니다.

▲ 프롬프트 창을 활용한 자동 연동 요청

AI에게 직접 부탁하기

복사한 깃허브 주소를 붙여넣으며 AI 에이전트에게 연동 요청을 해보세요.

그러면 안티그래비티가 위에서 설명한 복잡한 명령어들을 스스로 실행하여 연동을 마무리해줍니다.
세상의 모든 것을 직접 할 필요는 없습니다.
도구를 똑똑하게 활용하는 것도 뛰어난 실력입니다.

실전 적용 예시 (Sample)

아래는 실제 GitHub 주소(dev-shiba/study-page.git)를 사용하는 경우의 전체 명령어 예시입니다.
여러분의 환경에 맞춰 주소 부분만 바꿔서 참고해 보세요.

#1. Git 저장소 초기화
git init

#2. .gitignore 파일 생성
echo "node_modules/" > .gitignore
echo "dist/" >> .gitignore
echo "build/" >> .gitignore
echo ".env" >> .gitignore
echo ".DS_Store" >> .gitignore

#3. README.md 파일 생성
echo "# 프로젝트명" > README.md

#4. 모든 파일 스테이징 및 초기 커밋
git add .
git commit -m "Initial commit"

#5. 메인 브랜치 변경 및 원격 저장소 연결
git branch -M main
git remote add origin https://github.com/dev-shiba/study-page.git

#6. 메인 브랜치로 푸시
git push -u origin main

8. 에이전트와 대화하며 제작 시작하기

환경 세팅과 GitHub 연동이 모두 끝났다면, 이제 본격적으로 웹사이트를 제작할 차례입니다. 안티그래비티의 가장 강력한 기능은 바로 우측의 프롬프트 입력창입니다.

▲ 프롬프트 창을 통해 AI 에이전트에게 명령을 내리는 모습

🎨 여러분의 아이디어를 텍스트로 입력하세요

복잡한 코드를 직접 짤 필요가 없습니다.
프롬프트 창에 여러분이 원하는 바를 일상 언어로 입력하면 AI가 즉시 작업을 시작합니다.

입력 예시:

엔터를 누르는 순간, AI는 폴더 구조를 생성하고 코드를 작성하며 여러분만의 웹사이트를 현실로 만들어낼 것입니다.

9. 상세 구현 기획서 확인 (Implementation Plan)

프롬프트를 입력하면 안티그래비티는 즉시 코드를 짜는 것이 아니라, 먼저 '어떻게 개발할 것인지'에 대한 상세 기획서를 작성합니다. 이 기획서는 전체적인 개발 로드맵이며, 이를 바탕으로 실제 구현이 시작됩니다.

▲ 개발 시작 전 생성되는 상세 구현 기획서

📋 기획서 검토 및 번역

작성된 기획서(Implementation Plan)를 바탕으로 실제 구현이 시작됩니다.
만약 이 기획서를 매번 직접 확인하고 승인하고 싶다면, 앞서 설명한 User Settings에서 정책을 조정할 수 있습니다.

💡 한글 번역 팁: 기획서가 영어로 작성되어 이해가 어렵다면, 프롬프트 창에"위 기획서를 한글로 번역해줘."라고 요청하세요. AI가 친절하게 한글로 설명해 드립니다.

10. 터미널의 낯선 명령어들 (npm install, build 등)

개발을 진행하다 보면 터미널 창에 .../test > npm install; npm run build와 같은 낯선 명령어들이 자동으로 입력되거나 실행 권한을 요청받을 때가 있습니다. 이는 프로젝트를 정상적으로 구동하기 위한 필수적인 밑작업입니다.

📦 주요 명령어의 의미

• npm install: 프로젝트 제작에 필요한 각종 부품과 자재(라이브러리/도구)들을 공수해오는 과정입니다.
  건축으로 치면 현장에 필요한 자재들을 실어 나르는 것과 같습니다.
• npm run build (또는 build): 흩어져 있는 자재들을 조립하여 실제 사람이 살 수 있는 집으로 완성하는 과정입니다.
  골조를 세우고 마감 처리를 하여 즉시 입주 가능한 상태로 만드는 것과 같습니다.

11. AI 이미지 생성 과정 (나노바나나)

웹사이트 제작 과정에서 안티그래비티가 필요하다고 판단하면 AI 이미지를 직접 생성하기도 합니다. 이때 제미나이의 자사 이미지 생성 모델인 '나노바나나(NanoBanana)'가 사용됩니다.

▲ 이미지 생성 중 나타나는 회색 박스와 나노바나나 모델

🖼️ 회색 박스가 뜨더라도 당황하지 마세요

작업 중 위 이미지와 같이 회색 네모박스가 뜨는 경우가 있습니다. 이는 AI가 여러분의 웹사이트에 딱 맞는 이미지를 생성하고 있는 과정입니다.

잠시만 기다리면 이미지가 생성되며, 별도의 조작 없이도 자동으로 여러분의 랜딩페이지 적재적소에 삽입됩니다.
디자인 소스까지 알아서 챙겨주는 안티그래비티의 스마트함을 경험해보세요.

12. 테스트 및 브라우저 실행 팁

사이트 가 기본적으로 구축되었다면, 제대로 작동하는지 테스트를 해봐야 합니다. 안티그래비티는 스스로 브라우저를 띄워 테스트를 수행하는 기능이 있지만, AI가 직접 브라우저를 조작하는 방식은 다소 느릴 수 있습니다.

▲ 효율적인 테스트를 위한 요청 방식

🚀 쾌속 수정을 위한 스마트한 요청법

수정 사항을 빠르게 확인하면서 작업을 이어가고 싶다면, 다음과 같이 요청하는 것이 효율적입니다.
"수정 사항을 반영해서 사이트를 실행해줘. 단, 브라우저는 직접 켜지 마."

이렇게 요청하면 안티그래비티는 서버만 실행하고 브라우저 제어 권한을 여러분에게 넘깁니다. 여러분은 이미 열려 있는 브라우저 탭에서 새로고침만 하며 결과를 확인하고, AI는 그동안 다음 작업을 준비할 수 있어 개발 속도가 비약적으로 빨라집니다.

▲ 안티그래비티가 안내해주는 접속 링크

🔗 직접 접속하여 확인하기

사이트가 성공적으로 실행되면 위 이미지와 같이 접속 가능한 링크(URL)를 알려줍니다. 이 링크를 클릭하거나 복사하여 브라우저 주소창에 넣으면, 여러분이 만든 웹사이트를 직접 눈으로 확인하고 구석구석 테스트해볼 수 있습니다.

13. 결과 확인 및 작업 저장 (GitHub Push)

축하합니다! 이제 여러분의 요청 사항이 반영된 그럴듯한 웹사이트 껍데기가 완성되었습니다. 단순한 코드가 아니라 실제 브라우저에서 동작하는 멋진 결과물을 확인해보세요.

▲ 안티그래비티로 완성된 웹사이트 결과물 예시

💾 작업 내용 안전하게 저장하기

지금까지 작업한 내용이 마음에 든다면, 잃어버리지 않도록 중간 저장(체크포인트)을 해야 합니다. 터미널이나 프롬프트 창에 다음과 같이 입력해보세요.
"이제 푸시해줘."

이렇게 말하면 안티그래비티가 여러분의 코드를 GitHub 저장소로 자동 푸시합니다. 이는 단순한 저장을 넘어, 현재 상태를 안전하게 기록하는 체크포인트를 생성하는 것입니다. 언제든 이 시점으로 되돌아올 수 있으니, 중요한 작업이 끝날 때마다 푸시를 잊지 마세요

14. 권한 승인 및 자동화 설정 (Always Proceed)

웹사이트 구축을 요청하면, 안티그래비티가 특정 명령어를 실행하기 전 "Run command?"라는 확인창을 띄울 때가 있습니다. 이는 시스템 보안을 위해 AI가 여러분의 컴퓨터에서 작업을 수행해도 되는지 권한을 요청하는 것입니다.

✅ 기본 승인 방법

메시지 하단의 [Accept] 버튼을 누르면 권한이 허용되며 작업이 계속됩니다. 주로 필요한 라이브러리를 설치하거나 파일을 생성/수정할 때 발생합니다.

⚡ 더 빠른 개발을 위한 자동화 설정

매번 실행 권한을 수동으로 누르는 것이 번거롭다면, 신뢰하는 범위 내에서 자동 실행으로 설정을 바꿀 수 있습니다. 흐름이 끊기지 않고 빠른 개발을 원하는 분들께 권장합니다.

▲ 우측 상단 톱니바퀴 클릭 > Open Antigravity User Settings 선택

▲ Always Proceed 설정 화면

⚙️ 설정 변경 순서

1. 우측 상단 톱니바퀴 아이콘 클릭 후 Open Antigravity User Settings 메뉴를 엽니다.
2. Review Policy (구현 확인 권한): Always Proceed로 설정 (기획서를 매번 확인하고 싶다면 이 옵션을 조정하세요)
3. Terminal 항목 내 Terminal command Auto Execution (터미널 명령어 자동 실행): Always Proceed로 변경

💡 이렇게 설정하면 일일이 승인 버튼을 누를 필요 없이 AI가 알아서 개발을 진행합니다.