안티그래비티(Antigravity) 사용법:
코딩을 몰라도 AI와 함께 첫 웹사이트 만들기
웹사이트를 만들고 싶지만 코딩을 배워야 한다는 부담 때문에 시작하지 못하고 있나요?
이제는 프로그래밍 언어를 처음부터 공부하지 않아도 AI의 도움을 받아 웹사이트를 제작할 수 있습니다.
구글의 AI 개발 도구인 안티그래비티(Antigravity)를 활용하면 한국어로 원하는 작업을 설명하고, AI가 작성한 코드를 이용해 실제 웹페이지를 만들 수 있습니다.
이번 글에서는 안티그래비티 설치부터 작업 환경 설정, 첫 프로젝트 생성, 웹사이트 실행까지 초보자 관점에서 차근차근 알아보겠습니다.
1. 안티그래비티란 무엇인가?
안티그래비티는 AI를 활용해 소프트웨어와 웹사이트를 개발할 수 있도록 도와주는 개발 도구입니다.
기존에는 웹사이트를 만들려면 HTML, CSS, JavaScript 등의 프로그래밍 지식이 필요했습니다.
하지만 AI 개발 도구를 이용하면 만들고 싶은 기능이나 화면을 자연어로 설명하고, AI가 작성한 코드를 검토하면서 개발을 진행할 수 있습니다.
예를 들어 다음과 같이 요청할 수 있습니다.
"간단한 개인 소개 웹사이트를 만들어줘. 이름과 자기소개가 화면 중앙에 보이도록 해줘."
AI는 요청을 분석한 뒤 필요한 파일과 코드를 작성합니다.
따라서 코딩 경험이 적은 사람도 아이디어를 실제 웹사이트로 구현하는 과정을 경험할 수 있습니다.
개발 과정에서 사용하는 주요 도구
| 도구 | 역할 |
|---|---|
| Antigravity | AI와 대화하며 코드를 작성하고 수정하는 개발 환경 |
| 작업 폴더 | 프로젝트 파일을 모아 두는 공간 |
| PowerShell | 명령어를 실행하는 윈도우 터미널 |
| Node.js | 웹 개발 환경과 실행 도구를 제공하는 프로그램 |
| Chrome | 제작한 웹사이트를 확인하는 브라우저 |
2. 안티그래비티 설치하기
가장 먼저 개발에 필요한 프로그램을 설치해야 합니다.
이번 과정에서는 다음 세 가지를 준비합니다.
- 안티그래비티 개발 도구
- 구글 계정
- Node.js
① 안티그래비티 다운로드
아래 공식 사이트에 접속합니다.
다운로드 페이지에서 일반 개발 환경에 해당하는 Antigravity IDE를 선택합니다.
운영체제에 맞는 설치 파일을 내려받아 설치하면 됩니다. 다른 용도의 제품이나 설치 항목과 혼동하지 않도록 선택 항목을 확인하세요.
② 구글 계정으로 로그인
프로그램을 실행한 다음 개인 구글 계정으로 로그인합니다.
공용 컴퓨터를 사용하는 경우에는 이전 사용자의 계정이 남아 있지 않은지 확인해야 합니다.
③ Node.js 설치
다음으로 Node.js를 설치합니다.
Node.js 공식 홈페이지에 접속한 뒤 LTS 버전을 선택합니다.
윈도우 사용자는 설치 파일인 MSI 파일을 내려받아 실행하면 됩니다.
별도의 설정을 변경할 필요가 없다면 기본 설치 옵션을 그대로 사용해도 됩니다.
중요: Node.js 설치가 끝나면 안티그래비티를 완전히 종료한 뒤 다시 실행하는 것이 좋습니다. 그래야 새로 설치된 개발 환경을 인식할 수 있습니다.
3. 프로젝트 전용 폴더 만들기
프로그램 설치가 끝났다면 이제 첫 번째 프로젝트를 준비할 차례입니다.
처음 시작할 때는 컴퓨터 전체를 작업 공간으로 사용하지 말고, 별도의 프로젝트 폴더를 만드는 것이 좋습니다.
이렇게 하면 AI가 작업해야 할 파일의 범위를 명확하게 지정할 수 있습니다.
폴더 이름 정하기
프로젝트 폴더 이름은 영어 소문자와 하이픈(-)을 이용해 간단하게 작성하는 것을 추천합니다.
| 권장하는 이름 | 피하는 이름 |
|---|---|
| my-first-site | 내 첫 사이트 |
| stock-project | Stock Project (1) |
윈도우에서 폴더 만들기
- 바탕화면에서 마우스 오른쪽 버튼을 클릭합니다.
- 새로 만들기에서 폴더를 선택합니다.
- 폴더 이름을 my-first-site로 지정합니다.
- Enter 키를 눌러 저장합니다.
안티그래비티에서 폴더 열기
- 안티그래비티를 실행합니다.
- 상단 메뉴에서 File을 선택합니다.
- Open Folder를 클릭합니다.
- 방금 만든 my-first-site 폴더를 선택합니다.
폴더를 신뢰할 것인지 확인하는 메시지가 나오면 직접 만든 폴더인지 확인한 뒤 승인합니다.
다른 사람이 보내 준 폴더라면 내용을 확인하지 않고 무조건 신뢰해서는 안 됩니다.
4. AI에게 작업 범위와 진행 방법 알려주기
이제 본격적으로 AI와 함께 개발을 시작합니다.
처음부터 무조건 코드를 작성하라고 요청하기보다는 AI가 작업할 범위와 진행 순서를 먼저 지정하는 것이 좋습니다.
특히 다음 두 가지 원칙을 기억하세요.
- 현재 프로젝트 폴더 안에서만 작업하도록 요청합니다.
- 실제 작업을 시작하기 전에 계획을 먼저 확인합니다.
처음 사용할 AI 프롬프트
아래 내용을 복사해 안티그래비티의 AI 채팅창에 입력합니다.
맥을 사용하는 경우에는 운영체제에 관한 내용을 맥 환경에 맞게 수정하면 됩니다.
AI가 제시한 계획 확인하기
프롬프트를 전송하면 AI가 먼저 작업 계획을 보여 줍니다.
이때 어떤 프로그램을 설치하고 어떤 파일을 생성하는지 확인합니다.
내용이 적절하다면 채팅창에 "좋아. 진행해줘."라고 입력합니다.
이후 AI가 터미널 명령어 실행이나 파일 변경에 대한 승인을 요청할 수 있습니다.
승인 창이 나타나면 실행할 내용을 확인한 뒤 필요한 작업만 허용합니다.
무슨 작업인지 이해되지 않는다면 먼저 AI에게 다음과 같이 물어보세요.
이 명령어가 어떤 작업을 수행하는지 초보자도 이해할 수 있도록 설명해 줘.
5. PowerShell 사용법과 오류 확인하기
AI가 프로젝트를 생성하기 시작하면 화면 아래쪽에 PowerShell이라는 터미널 창이 나타날 수 있습니다.
처음에는 검은 화면에 글자가 계속 출력되기 때문에 어렵게 느껴질 수 있지만, 기본적인 상태만 이해하면 됩니다.
터미널에서 확인할 세 가지 상태
| 화면 상태 | 의미 |
|---|---|
| 글자가 계속 출력됨 | 프로그램이 작업 중이므로 기다립니다. |
| PS 경로가 다시 표시됨 | 명령어 실행이 끝난 상태입니다. |
| 빨간색 오류 메시지 | 오류 내용을 확인하고 해결해야 합니다. |
오류가 발생했을 때 해결하는 방법
코딩을 처음 시작하면 오류가 발생하는 것은 자연스러운 일입니다.
오류 메시지를 이해하지 못하더라도 당황할 필요는 없습니다.
빨간색으로 표시된 오류 내용을 복사해 AI 채팅창에 붙여 넣습니다.
이처럼 오류 내용을 AI에게 전달하면 문제의 원인을 파악하고 수정하는 데 도움을 받을 수 있습니다.
윈도우에서 스크립트 실행 오류가 발생한다면?
Node.js 설치 후 PowerShell에서 스크립트 실행이 차단되는 경우가 있습니다.
이때 오류 메시지가 PowerShell의 실행 정책과 관련된 것인지 먼저 확인합니다.
해당 오류가 맞다면 현재 사용자 계정에 적용되는 실행 정책을 설정할 수 있습니다.
PowerShell에 입력할 명령어:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
변경 여부를 묻는 메시지가 나오면 내용을 확인한 뒤 Y를 입력합니다.
이 설정은 현재 사용자 범위에 적용됩니다. 보안 설정을 변경하는 작업이므로 명령어의 의미를 이해한 뒤 실행하세요.
6. 첫 번째 웹사이트 실행하기
프로젝트 파일 생성이 끝났다면 이제 웹사이트를 실행할 차례입니다.
직접 복잡한 명령어를 입력할 필요 없이 AI에게 개발 서버 실행을 요청할 수 있습니다.
AI에게 웹사이트 실행 요청하기
AI가 명령어를 실행하면 승인 요청이 나올 수 있습니다. 실행 내용을 확인하고 승인합니다.
정상적으로 실행되면 다음과 비슷한 주소가 표시됩니다.
http://localhost:3000
크롬에서 접속하기
- 구글 크롬을 실행합니다.
- 주소창에 AI가 알려 준 주소를 입력합니다.
- Enter 키를 누릅니다.
- 프로젝트의 첫 화면이 표시되는지 확인합니다.
만약 3000번 포트를 다른 프로그램이 사용하고 있다면 3001 등 다른 번호가 표시될 수 있습니다.
이때는 임의로 주소를 입력하지 말고 AI가 알려 준 주소를 그대로 사용합니다.
주의할 점: localhost 주소는 현재 컴퓨터에서만 접속할 수 있는 로컬 개발 주소입니다. 아직 인터넷에 공개된 웹사이트가 아닙니다.
또한 개발 서버가 실행 중인 터미널을 종료하면 웹사이트도 중단될 수 있습니다.
7. 웹페이지에 내 이름과 소개 문장 넣기
첫 화면이 나타났다면 이제 자신만의 페이지로 꾸며 보겠습니다.
처음부터 여러 기능을 추가하기보다는 제목과 소개 문장부터 수정하는 것이 좋습니다.
① 메인 제목 변경하기
AI에게 다음과 같이 요청합니다.
홍길동 대신 자신의 이름을 입력하면 됩니다.
② 자기소개 문장 추가하기
이번에는 제목 아래에 자신이 만들고 싶은 서비스나 웹사이트의 목적을 한 문장으로 작성합니다.
이렇게 하면 자신만의 첫 소개 페이지가 만들어집니다.
③ 수정 결과 확인하기
AI가 코드를 변경하면 변경 내용을 확인합니다.
- 요청한 부분만 수정되었는지 확인합니다.
- 변경된 내용을 승인합니다.
- 크롬 화면에서 결과를 확인합니다.
- 화면이 갱신되지 않으면 F5 키를 누릅니다.
AI가 요청하지 않은 부분까지 수정했다면 이전 상태로 되돌리도록 요청할 수 있습니다.
방금 수정한 내용을 취소하고 이전 상태로 복구해 줘. 내가 요청한 제목 부분만 다시 수정해 줘.
8. 안티그래비티 사용 중 자주 발생하는 문제
처음 개발 환경을 구성하다 보면 여러 가지 문제가 발생할 수 있습니다.
대표적인 오류와 해결 방법을 정리했습니다.
문제 1. npm을 찾을 수 없다는 오류
Node.js가 정상적으로 설치되지 않았거나 설치 후 개발 도구를 다시 실행하지 않은 경우 발생할 수 있습니다.
해결 방법
- 안티그래비티를 완전히 종료합니다.
- Node.js 설치 상태를 확인합니다.
- 안티그래비티를 다시 실행합니다.
- 문제가 계속되면 AI에게 오류 메시지를 전달합니다.
문제 2. 크롬에서 웹사이트가 열리지 않는 경우
개발 서버가 실행되지 않았거나 잘못된 주소로 접속했을 가능성이 있습니다.
해결 방법
- 터미널에서 개발 서버가 실행 중인지 확인합니다.
- AI가 알려 준 localhost 주소를 확인합니다.
- 주소에 표시된 포트 번호가 정확한지 확인합니다.
문제 3. Port already in use 오류
이미 다른 프로그램이 같은 포트를 사용하고 있다는 의미입니다.
AI에게 다음과 같이 요청할 수 있습니다.
현재 포트가 이미 사용 중이라고 나와. 사용 가능한 다른 포트를 찾아서 개발 서버를 실행해 줘.
문제 4. AI가 요청하지 않은 부분까지 수정한 경우
AI에게 작업 범위를 구체적으로 알려 주지 않으면 예상보다 많은 파일이나 디자인이 변경될 수 있습니다.
이런 경우에는 변경 내역을 확인하고 되돌리기를 요청합니다.
앞으로는 프롬프트에 다음 문장을 추가하는 것이 좋습니다.
요청한 부분만 수정하고 다른 파일과 기능은 절대 변경하지 마.
문제 5. 개발 서버를 실수로 종료한 경우
터미널을 닫거나 실행을 중단하면 웹사이트가 더 이상 표시되지 않을 수 있습니다.
AI에게 개발 서버를 다시 실행해 달라고 요청하면 됩니다.
9. 오늘 배운 내용 정리
이번 과정에서는 코딩을 처음 접하는 사람도 AI를 활용해 웹사이트를 제작하는 기본 과정을 살펴봤습니다.
핵심 내용을 정리하면 다음과 같습니다.
- 안티그래비티와 Node.js를 설치합니다.
- 프로젝트 전용 폴더를 만듭니다.
- AI에게 작업 범위와 진행 규칙을 알려 줍니다.
- AI가 제시한 계획을 확인하고 승인합니다.
- 터미널에서 실행 상태와 오류 메시지를 확인합니다.
- 개발 서버를 실행하고 크롬에서 웹사이트를 확인합니다.
- AI에게 제목과 소개 문장 수정을 요청합니다.
가장 중요한 것은 코드를 직접 작성하는 능력보다 AI에게 원하는 작업을 정확하게 설명하고 결과를 확인하는 습관입니다.
10. 다음 단계: 나만의 웹사이트로 발전시키기
이제 첫 번째 웹페이지를 만들었다면 다음 단계로 넘어갈 수 있습니다.
단순한 소개 페이지에 사진과 색상을 추가하고, 메뉴와 버튼을 만들고, 실제로 사용할 수 있는 기능을 하나씩 구현해 보세요.
예를 들어 다음과 같은 프로젝트를 만들어 볼 수 있습니다.
- 개인 포트폴리오 및 소개 사이트
- 주식 테마와 종목 정보를 정리하는 사이트
- 일정과 할 일을 관리하는 웹페이지
- 간단한 블로그 및 콘텐츠 관리 페이지
- 업무 자동화를 위한 개인용 도구
처음부터 완벽한 웹사이트를 만들려고 할 필요는 없습니다.
작은 기능 하나를 만들고, 실행해 보고, 수정하는 과정을 반복하면 됩니다.
코딩을 몰라도 아이디어가 있다면 시작할 수 있습니다.
AI와 함께 나만의 첫 번째 웹사이트를 만들어 보세요.
참고 자료
※ 이 글은 안티그래비티를 처음 사용하는 초보자를 위한 실습형 안내 자료입니다. 프로그램의 메뉴와 설치 화면은 버전에 따라 달라질 수 있습니다.
```
댓글 없음:
댓글 쓰기