요청이 정말 많아서 바이브코딩을 가볍게 다뤄보려고 합니다.

가볍게 다뤄본다는 것은 대충 알려주겠다는게 아니라,

그만큼 전문지식이 아닌 가벼운 지식으로 사용중이라는 것.

바이브 코딩 이제 1달차

- 네이버 블로그 자동화 (로컬에서 업로드까지 다됨)

- 네이버 카페 자동화 (로컬에서 업로드까지 다 됨)

- 숏폼 제작 자동화 (채널만 여러개 돌리는 중/업로드까지)

- 스레드 자동화 프로그램 제작 (로컬 테스트 진행중)

- 메이크패밀리 웹사이트 모두 제작

- 메이크패밀리 협력사 웹사이트 제작 (현재 플랫폼 2개 완성)

- 대표가 요청해서 만든 판서프로그램 (강의때 쓸라고...)

- 내가 필요해서 만든 회원전용 강의앱 (강의 좀 들으라고...)

외에도 초안 잡고 있는 다양한 툴들...

(사내 업무용 대시보드/ CRM 전용 툴 등등)

오늘 1일차에서 끝까지 가면, 여러분 컴퓨터에는

• 안티그래비티라는 작업실 프로그램이 깔려 있고

• 그 안에 클로드 코드(Claude Code)라는 

• 개발자 팀원이 확장 프로그램으로 앉아 있게 됩니다.

• 그리고 my-first-app이라는 내 프로젝트 상자가 준비되어 있을 겁니다.

코드는 단 한 줄도 이해할 필요 없습니다.
설치만 합니다.

1-1. 안티그래비티 = 작업하는 방(프로그램)

안티그래비티는 그냥 프로그램 이름입니다.

• 엑셀, 파워포인트처럼

• 내 컴퓨터에 깔아서 여는 코딩용 작업실 앱이에요.

켜보면:

• 왼쪽에는 폴더/파일 목록

• 가운데에는 파일 내용(코드, 텍스트 등)

• 오른쪽이나 아래에는 AI랑 대화할 수 있는 공간

이렇게 생긴 방 하나를 만들어 준다고 생각하시면 됩니다.

1-2. 클로드 코드 = 그 방 안의 개발자

클로드(Claude)는 챗GPT 같은 AI 이름이고,
그중에서 클로드 코드(Claude Code)는

“내가 말로 설명하면,
폴더 안에 파일을 만들고, 고치고, 실행까지 도와주는
개발자 특화 버전 클로드” 입니다.

우리가 앞으로 할 일은 “코딩 공부”가 아니라,

“이 개발자에게 일을 잘 시키는 법”을 배우는 것

이라고 보시면 됩니다.

1일차가 끝나면, 이 네 가지 상태가 되어 있어야 합니다.

1. 내 컴퓨터에 안티그래비티가 설치되어 있다.

2. 안티그래비티에서 my-first-app이라는 프로젝트 폴더를 열 수 있다.

3. 안티그래비티 확장(Extensions)에서 Claude Code를 설치했다.

4. 오른쪽에 Claude Code 대화창이 뜬다.

이 네 가지만 되면,
여러분은 이미 “안티그래비티 + 클로드 코드 환경을 가진 사람”입니다.

3-1. 다운로드

1. 크롬/엣지 같은 인터넷 브라우저를 엽니다.

2. 검색창에 이렇게 적습니다.

   google antigravity 다운로드

3. 검색 결과에서 구글 공식 안티그래비티 소개 / 다운로드 페이지를 찾습니다.

4. 그 페이지 안에서 “Download for Windows” 또는 “Windows용 다운로드” 버튼을 클릭합니다.

5. antigravity-setup-....exe 같은 설치 파일이 내려올 겁니다.

3-2. 설치 마법사

1. 다운로드가 끝나면, 브라우저 하단 또는 “다운로드” 폴더에서
   antigravity-setup-....exe 파일을 더블클릭합니다.

2. 윈도우가 “이 앱을 실행하시겠습니까?”라고 물으면

   • “추가 정보 → 실행” 또는

   • “예(Yes)”를 눌러 넘어갑니다.

3. 설치 화면이 뜨면, 대략 이런 순서를 따릅니다.

   • 언어: 한국어/영어 아무거나 선택

   • 설치 위치: 기본값 그대로 두고 다음(Next)

   • 바로가기: 기본값

   • 마지막에 설치(Install) 버튼 클릭

4. 잠시 기다리면 “완료(Finish)” 버튼이 뜹니다. 눌러서 마무리합니다.

5. 바탕화면이나 시작 메뉴에 Antigravity 아이콘이 생겼다면 성공입니다.

여기까지가 “작업실 만들기” 끝.

앞으로 이 폴더 안에 우리가 만드는 서비스가 들어갈 겁니다.

1. 바탕화면 빈 공간에서 마우스 오른쪽 클릭

2. 새로 만들기 → 폴더 클릭

3. 이름을 이렇게 적습니다.

   my-first-app

지금은 아무 파일이 없어도 됩니다.
그냥 “비어 있는 상자”만 있으면 됩니다.

이제 방 안에 상자를 올려놓는 단계입니다.

1. 바탕화면의 Antigravity 아이콘을 더블클릭해서 실행합니다.

2. 프로그램이 뜨면, 상단 메뉴에서

   File → Open Folder...

를 클릭합니다.

1. 폴더 선택 창이 뜨면, 방금 만든 my-first-app 폴더를 선택하고
   폴더 선택 버튼을 누릅니다.

2. 조금 기다리면, 왼쪽 Explorer 영역에 my-first-app이라는 폴더 이름이 보입니다.

이제 “안티그래비티라는 작업실 안에
my-first-app이라는 상자를 올려둔 상태” 가 된 겁니다.

이제 이 방 안에 클로드 코드를 “확장 프로그램”으로 붙일 차례입니다.

6-1. 확장(Extensions) 아이콘 열기

1. 안티그래비티 왼쪽 세로줄(사이드바)을 보면

   • 맨 위에 파일 모양 아이콘(Explorer)

   • 그 밑에 돋보기, Source Control 같은 아이콘들이 있고

   • 그 중간쯤에 퍼즐 조각 / 네모 네 개 겹친 모양 아이콘이 있습니다.

2. 마우스를 올려보면 대개 “Extensions”라고 뜹니다.

3. 이 아이콘을 클릭하면, 왼쪽에 확장 프로그램을 관리하는 패널이 열립니다.

6-2. Claude Code 검색하기

1. 확장 패널 상단 검색창에 이렇게 적습니다.

   Claude

2. 잠시 기다리면 여러 확장 목록이 나오는데, 그 중에서

   Claude Code
   또는
   Claude Code for VS Code / Anthropic

처럼 생긴 확장을 고릅니다.

• 설명에 “AI coding”, “Claude Code” 같은 문구가 들어 있을 겁니다.

6-3. Install 버튼 클릭

1. Claude Code 확장 카드 오른쪽에 보이는 Install 버튼을 누릅니다.

2. 처음 설치할 때는 “이 퍼블리셔를 신뢰하겠습니까?” 같은 팝업이 나올 수 있습니다.

3. Trust / 예(Yes)를 눌러 진행합니다.

4. 잠시 후, 버튼이 Install → Uninstall로 바뀌거나
   확장 이름 옆에 체크 표시가 뜨면 설치 완료입니다.

지금 이 순간이 바로

“안티그래비티라는 방 안에
클로드 코드라는 개발자 팀원을 입주시킨 상태” 입니다.

이제 오른쪽에 대화창을 띄워야 합니다.

환경마다 아이콘 위치가 조금씩 다를 수 있지만, 대표적인 방법을 적어둘게요.

7-1. 사이드바 아이콘으로 열기

1. Claude Code 설치가 끝나면,
   왼쪽이나 오른쪽 사이드바에 불꽃/말풍선/CLAUDE 
   비슷한 아이콘이 생길 수 있습니다.

2. 그 아이콘을 클릭하면,

   • 화면 오른쪽에 Claude Code 패널이 열리거나

   • 아래쪽 탭에 Claude 탭이 생깁니다.

7-2. 명령 팔레트로 열기 (예비 방법)

1. 키보드에서 Ctrl + Shift + P를 누릅니다.

2. 위쪽에 작은 입력창이 뜨면, 거기에

   Claude 또는 Open Claude 라고 적어봅니다.

목록에서 “Open Claude Code”, “Open Claude Chat” 
같은 항목을 골라서 실행하면
오른쪽에 Claude Code 대화 패널이 열립니다.

패널이 제대로 열리면:

• 오른쪽 상단에 Claude Code 같은 제목이 보이고

• 아래쪽에는 입력창이 하나 있을 겁니다.

• 상태바에 “ctrl+esc to focus Claude” 같은 안내 문구가 뜰 수도 있습니다.

이렇게 보이면, 1일차 설치 미션은 사실상 끝입니다.

코드까지 가려고 하지 말고,
오늘은 그냥 한 줄만 써봅시다.

Claude Code 입력창에 이렇게 적어보세요.

처음부터 다 이해할 필요 없습니다.

• “IDE, 확장, AI 에이전트”…
  이런 말들 지금 다 까먹으셔도 괜찮습니다.

오늘 중요한 건 딱 하나입니다.

“내 컴퓨터에 방(안티그래비티)을 만들고,
그 방 안에 개발자(Claude Code)를 앉히는 것.”

이게 끝났다면,
2일차부터는 이 개발자에게

• “이 폴더 안에 index.html 파일 하나 만들어줘”

• “여기다가 내 강의 소개 문구를 넣을 수 있게 구조를 짜줘”

같이 실제로 일을 시키는 법을 다루게 됩니다.

오늘은 여기까지.
못 따라 했으면, 설명 다시 읽지 말고
그냥 한 번 더 설치 화면 열어보는 것부터 해보세요.
그게 그지다운 바이브코딩 1일차입니다.