비전공자도 5분 컷! 구글 안티그래비티로 코딩 없이 랜딩 페이지 만든 후기
코딩 1도 모르는 비전공자인 제가 5분만에 구글 안티그래비티(Antigravity)로 제 블로그 랜딩 페이지를 만들었습니다. AI 에이전트 안티그래비티는 처음 설치해 봤습니다. 설치 방법 및 과정, 랜딩 페이지를 위한 프롬프트, 만들어진 랜딩 페이지를 담은 후기 지금부터 시작하겠습니다.
왜 구글 안티그래비티에 열광할까? 비전공자 솔직 후기
코딩에 1도 모르는 제가 제 블로그와 연결되는 위의 랜딩 페이지를 그것도 5분만에 만들었다면 믿으시겠습니까?
구글 안티그래비티(Antigravity)는
저는 최근 2년 동안 많은 AI 도구를 써 왔지만, 이런 AI는 처음이었습니다.
그냥 한국어로 명령을 내리면 AI 스스로가, 내 컴퓨터 바탕화면에 폴더를 만들고, 직접 브라우저 열어 만든 랜딩 페이지를 제게 보여주려고 한 시도는 저를 정말 깜짝 놀라게 했습니다.
구글 안티그래비티(Antigravity) 설치 방법
구글 안티그래티비를 설치 방법를 단계별로 말씀 드리도록 하겠습니다.
1. 구글 안티그래비티 다운로드 및 윈도우 OS 설치 방법
구글 안티그래비티 페이지에서 본인 컴퓨터 OS에 따라 다운로드를 받으시면 됩니다. 저는 윈도우 OS를 사용하고 있어서, Download for x64(일반적)를 선택해서 설치를 하였습니다.
설치가 끝나면 본인이 다운로드를 한 위치에서 안티그래비티 아이콘을 확인하실 수 있고, 그것을 클릭하시면 설치가 시작됩니다.
2. 구글 안티그래비티 편집기 색상 선택
편집기 색상 선택 장면입니다. 저는 Dark를 선택하고 Next로 넘어갔습니다.
3. 비전공자 설정: Review-driven과 Terminal execution 보안 수칙
설치 방법에서 다른 곳은 별로 손댈 곳 없이, 기본값으로 가시면 되는데, 위의 단계만 조금 설명이 필요합니다.
| Review-driven development | 단계마다 AI가 내게 이렇게 해도 될까 라고 물어보면서 진행하는 방식 |
| Agent-driven development | 나의 승인 없이 AI가 목표 달성을 위해 스스로 판단하고 연속적으로 작업 수행하는 방식 |
반면
각 단계마다 우리가 직접 결정을 해줘야 하기 때문에 상대적으로 귀찮을 수는 있습니다.
하지만, 저는 위험성을 좋아하지 않아서 Review-driven development를 선택했습니다.
오른쪽 메뉴에서는 다른 것은 볼 필요 없이, Terminal execution policy만 생각하시면 됩니다. 저는 Request review로 설정했습니다.
이 부분은 AI가 명령어(파일 삭제, 프로그램 설치, 시스템 설정 조정 등)를 내리기 전에 우리에게 한번 더 물어보는 부분을 뜻합니다.
이것을 Always Process로 하면 이런 명령어를 바로 실행할 수 있어, 자칫 내 컴퓨터가 위험한 상황에 빠질 수 있기 때문입니다.
4. 구글 안티그래비티 설치 완료
그냥 손대지 않고 기본으로 설정하고 지나갔습니다.
구글 안티그래비티(Antigravity)와 구글 계정을 연결하는 작업입니다. 본인 구글 계정과 연결시키면 됩니다.
구글 안티그래비티 설치가 완료되었습니다.
저는 한참 기다려도 안 넘어가길래, 그 버튼 누르니 편집기로 넘어가 지더라고요.
블로그 랜딩 페이지 만들기
1. AI 에이전트 시작의 핵심: 작업용 새 폴더 생성과 권한 부여
저는 코딩의 1도 모르는 비전공자입니다. 설치는 어떻게든 했지만, 처음 이 화면을 봤을 때 막막했습니다. 검은 것은 화면이고, 하얀색은 글자 정도로만 인식했습니다.
이 작업이 아주 중요합니다. 우선 일단 바탕화면에 새로운 폴더 임의로 이름 작성하셔서 하나 만드세요. 저는 antigravity라고 아무것도 들어있지 않은 새로운 폴더를 바탕화면에 만들었습니다.
그리고 위의 사진에서 중앙에 있는 open folder 누르시고 지금 생성한 폴더를 선택하시면 됩니다.
위의 작업은 그 폴더내의 파일 사용 권한은 안티그래비티에게 허용해 주는 부분입니다. 체크하시고 Yes, I trust the authors 클릭하세요
1. 코딩 없이 랜딩 페이지 만드는 마법의 프롬프트 명령어 입력
이제 우리는 코드(한국어)를 입력할 공간이 필요합니다. Ctrl + E 누르시면, 챗GPT 또는 제미나이 명령어 입력하는 것과 비슷한 내용 입력 부분이 나타납니다.
아니면 오른쪽 부분에서 코드(한국어)하려면, Ctrl + L를 클릭하시면 됩니다. 물론 마우스 커서로 갖다 놓아도 가능합니다.
저는 이렇게 입력했습니다. 물론 제가 이 긴 프롬프트를 생각해 낸 것은 아니고요, 제미나이 AI에게 블로그 자동화 경험을 담은 랜딩 페이지 만들 수 있는 프롬프트(명령어)를 알려 달라고 했습니다.
어떤 명령을 내리지 너무 고민하시지 마시고, 처음에는 본인이 관심있어 하는 것에 대한 랜딩 페이지를 하나 만들어 보세요.
참고로 랜딩 페이지는 방문자를 특정 웹사이트로 보내기 위해 만든 웹페이지라고 생각하시면 됩니다.
일단 실행을 하시면 막 AI가 코드를 열심히 짜는 모습을 볼 수 있는데, 우리는 코드를 모르니 그냥 기다리세요.
언제까지? 위와 같이 초록색 아이콘 Proceeded with 어쩌고 저쩌고가 보일 때까지 그냥 두시면 됩니다.
중간에 뭐 할까요 이런 식으로 물어볼 때가 있는데 그때는 그냥 허락(allow 또는 proceed 등)을 누르시면 됩니다.
기억하시죠. 안티그래비티 설치할 때, AI 너 마음대로 하지 말고, 단계별로 진행할 때 우리 한테 물어보라고 설정한 것 때문에 나타나는 것입니다.
3. 안티그래비티 제작 결과 확인: 크롬(Chrome) 및 엣지 브라우저 실행 팁
그렇게 최종적으로 작업이 끝나면, 왼쪽에 보시면 제가 만들어 달라고 했던 8mtree_blog 폴더와 landing.html 파일을 확인하실 수 있습니다.
작업이 끝이 난 것입니다. 우리 처음에 만들어 놓은 새로운 폴더 기억나시죠? 그 폴더로 들어가셔서 파일(landing)을 더블 클릭하시면 구글 안티그래비티 에이전트가 만든 랜딩 페이지를 보실 수 있습니다.
원래는 작업이 끝나면 만든 페이지를 자동으로 보여주게 되어 있는데, 이유는 모르지만, 그게Chrome 웹브라우저를 사용할 때만 되는 것 같습니다.
저는 Edge를 사용하기 때문에 부득이하게 새 폴더안의 파일로 들어가 확인한 것임을 알려드립니다.
이렇게 만들어진 랜딩페이지입니다. 어떻습니까? 코딩의 1도 모르는 제가 구글 안티그래비티(Antigravity)로 5분만에 만든 제 블로그 랜딩 페이지입니다.
그런데 솔직히 조금 투박한 것 같습니다. 노하우 무료로 알아보기 저 버튼 위치도 마음에 안듭니다. 이럴 때 다시 프롬프트로 수정을 요청할 수 있습니다.
오른쪽 메뉴(Ctrl + L) 쪽에서 수정 요청을 할 수 있습니다. 원하시는 대로 한국어로 쭉 입력하시면 됩니다. 작업이 끝난 후 어떻게 변경 되었는 지 보여드리겠습니다.
4. 5분 만에 완성된 랜딩 페이지 디자인 수정 및 블로그 링크 연결하기
어떻습니까? 훨씬 부드럽고 깔끔해 보이지 않는가요? 이렇게 원하시는 대로 수정을 하실 수 있습니다. 그리고 저는 같은 방법으로 ‘노하우 무료로 알아보기’ 버튼을 누르면 저의 메인 블로그로 연결이 되도록 요청했고 순식간에 해결되었습니다
위의 모든 프롬프트는 아래 메모장에서 복사하실 수 있습니다.
마무리
오늘은 코딩의 1도 모르는 비전공자인 제가 구글 안티그래비티(Antigravity)를 사용해서 저의 블로그 랜딩 페이지를 5분만에 만드는 것을 보여드렸습니다.
과거에는 코딩을 모르기 때문에 랜딩 페이지를 다른 플랫폼에서 구독을 하고 그 템플릿을 사용한 적이 있었습니다.
페이스북 해외마케팅을 할 때였는데, 상품 페이지로 가기 전에 상품의 필요성을 강조하기 위해서 랜딩 페이지를 만들었습니다. 물론 그 비용을 지불했어야 했습니다.
그리고 그 랜딩 페이지를 만들기 위해 엄청난 시간이 소요되었습니다. 문구와 디자인을 일일이 고쳐야 했기에 많이 고생했던 기억이 납니다.
그런데, 이제는 구글 안티그래비티로 위와 같이 이렇게 쉽고 빠르게 하나의 랜딩 페이지를 만들 수 있게 되었습니다.
저는 사실 이제 제 블로그에 이 안티그래비티를 어떻게 활용할 수 있을 지 무척 설렙니다. 여러분들과 공유할 만한 콘텐츠를 만들게 되면 바로 업데이트 하도록 하겠습니다.
<블로그를 AI와 함께 하는 법>
