“비슷하게 만들고 싶은 사이트 URL이나 구조만 주면, AI가 알아서 기획하고, 이미지 그리고, 서버 띄우고, 브라우저 켜서 테스트까지 끝낸다?”
SF 영화 속 이야기가 아닙니다. 최근 공개된 **구글 안티그래비티 2.0(Antigravity 2.0)**의 실제 구동 화면을 보면서, 20년 동안 개발 씬에 몸담았던 시니어 엔지니어로서도 솔직히 소름이 돋았습니다.
인스타그램 프로필 링크로 널리 쓰이는 **’리틀리(Littly)’ 스타일의 멀티 링크 페이지(Link-in-bio)**를 한글 프롬프트 몇 줄로 완벽히 클론 코딩(복제)하는 과정을 분석해 드립니다.
1. 안티그래비티 2.0이 ‘괴물’이라 불리는 이유: 아키텍처 분석
기존 AI 툴(ChatGPT, Claude 등)과 안티그래비티의 결정적 차이는 **’단순 코드 생성기’가 아니라 ‘자율형 개발 에이전트(Autonomous Agent)’**라는 점입니다.
- 사전 기획 문서 자동 수립 (implementation_plan.md): 프롬프트를 받으면 무작정 코드를 치는 것이 아니라, UI 구조와 데이터 모델, 반응형 전략을 담은 계획서를 먼저 작성합니다.
- 멀티모달 에셋 자체 생성: 프로필에 필요한 레트로 CRT 캐릭터 아바타 이미지를 제미나이(Gemini) 모델을 호출해 프로젝트 에셋 폴더에 실시간으로 생성·저장합니다.
- 가장 최적화된 경량 스택 채택: 불필요하게 무거운 React나 Webpack 빌드 환경 대신, 가장 가볍고 유지보수가 쉬운 HTML5 + CSS 변수(Custom Properties) + Vanilla JS 구조를 선택합니다.
- 원클릭 로컬 서버 서빙: 생성된 정적 파일들을 백그라운드 태스크로 즉시 구동합니다.codeBash
python3 -m http.server 3000 - 서브에이전트(Browser Tester)의 자동 QA: 크롬 원격 디버깅(chrome://inspect/#remote-debugging)을 연동하여, AI 서브에이전트가 브라우저를 직접 띄우고 버튼 클릭, 테마 전환, 로컬스토리지 저장이 정상 동작하는지 테스트를 마칩니다.
2. 실전 클론 코딩 4단계 워크플로우
1단계: 프로젝트 생성 및 ‘터보 모드(Turbo Mode)’ 세팅
프로젝트를 생성할 때 보안 프리셋(Security Preset)을 Turbo Mode, 아티팩트 리뷰 정책을 **Always Proceed**로 설정합니다.
- 효과: AI가 터미널 명령어 실행이나 파일 생성 시 일일이 유저 승인을 기다리지 않고, 지시한 작업이 끝날 때까지 멈춤 없이 100% 자율 주행합니다.
2단계: 한국어 요구사항 프롬프트 입력
복잡한 기술 용어 없이, 사람이 기획하듯 화면의 배치와 콘셉트만 한글로 전달합니다.
[실제 입력 프롬프트 예시]“링크 모음 사이트를 만들어줘. 화면 구성은 나의 프로필, 링크 모음 순서야. 프로필에는 CRT 모니터 머리를 가진 캐릭터 이미지와 이름 ‘민혁’, 소개문구 ‘테크 콘텐츠를 만드는 사람’을 넣어줘. 링크 모음은 모바일 스마트폰에서 터치하기 쉬운 세로 카드 형태로 배치해 줘.”
3단계: 즉각적인 결과물 확인 (로컬 호스트 3000)
프롬프트가 끝나면 1분도 안 되어 이미지가 생성되고 파일들이 엮인 뒤 localhost:3000 포트로 사이트가 뜹니다. 스마트폰 뷰포트에 맞춘 완벽한 반응형 레이아웃과 감각적인 다크 테마 UI가 완성됩니다.
4단계: 자연어로 대화하며 점진적 고도화
완성된 뼈대 위에 원하는 기능과 디자인을 계속 살로 붙여나갑니다.
- 다크/라이트 모드 토글 스위치 추가: “라이트 모드로 밝게 바꿔주고, 클릭 시 다크모드로 전환되는 토글 버튼을 만들어줘. 설정은 재방문 시에도 유지되게 해줘.” → 에이전트가 CSS 변수와 LocalStorage 코드를 즉시 작성하고 브라우저를 띄워 검증.
- 직관적인 아이콘 교체: “유튜브, 기술블로그, 뉴스레터 카드에 어울리는 직관적인 아이콘으로 교체해 줘.” → Lucide 아이콘 시스템을 도입해 책, 신문, 대화창 아이콘으로 자동 변환.
- 24시간 팝업 모달창 탑재: “처음 접속했을 때 책 출간 알림 팝업창이 뜨게 해줘.” → 모달 컴포넌트와 ‘오늘 하루 보지 않기’ 로직 자동 구현.
3. 시니어 개발자가 전하는 ‘바이브 코딩’ 핵심 꿀팁
영상의 강사가 강조하듯, 코딩 지식이 전혀 없어도 **’UI 컴포넌트의 명칭’**을 알고 지시하면 AI의 결과물 퀄리티가 200% 상승합니다.
- 플레이스홀더(Placeholder): 데이터나 이미지가 들어갈 자리를 미리 비워둔 네모 박스
- 카드(Card / Box): 링크, 썸네일, 텍스트가 묶여 있는 독립된 터치 영역
- 칩 / 라벨 (Chip / Badge): NEW, HOT 처럼 부가 정보를 표시하는 알약 모양 태그
- 토글(Toggle): 클릭할 때마다 상태가 켜짐/꺼짐으로 전환되는 스위치
- 호버 효과(Hover Effect): 마우스를 올렸을 때 버튼이 커지거나 부드럽게 색이 변하는 애니메이션
💡 클론 코딩 치트키: 벤치마킹하고 싶은 사이트의 URL을 안티그래비티에 던져주고, *”이 사이트의 레이아웃과 컬러 팔레트를 분석해서, 비슷한 기능을 하는 내 브랜드 사이트를 기획해 줘”*라고 명령하면 사이트 분석부터 클론 설계까지 한 번에 끝낼 수 있습니다.
4. 총평: 이제 개발의 핵심은 ‘문법’이 아니라 ‘기획력’이다
과거에는 이런 모바일 링크 페이지 하나를 만들려 해도 HTML 구조를 짜고, CSS flexbox를 디버깅하고, 미디어 쿼리를 맞추느라 반나절 이상이 걸렸습니다.
하지만 안티그래비티 2.0 환경에서는 “무엇을 만들고 싶은지”에 대한 명확한 청사진만 있으면, 구현과 테스트는 AI가 5분 만에 끝냅니다.
이제 프로그래밍 언어의 문법을 외우는 시대는 끝났습니다. 내가 원하는 서비스의 와이어프레임을 머릿속에 그리고, 이를 AI 에이전트에게 명확히 디렉팅할 수 있는 **’오케스트레이션 능력’**이 미래 개발과 1인 창업의 가장 강력한 무기입니다.
*참고영상 보러가기
📚 공식 레퍼런스 및 참고 기술 문서
- 관련 도서 및 실습 교재
- 도서명: 《바이브 코딩을 위한 안티그래비티 2.0 (with 스팀, 멀티 에이전트, MCP, 하네스)》
- 부제: 오늘 만들어 오늘 배포하는 아이디어 실현 방법 (누구나 프로처럼 실전 AI)
- 주요 내용: 구글 차세대 에이전트 플랫폼 안티그래비티 2.0 및 제미나이 3.7 기반의 멀티 에이전트 클론 코딩 실습 가이드
- 기반 기술 및 구글 공식 도구
- Google AI Platform / Antigravity 2.0: 차세대 자율 소프트웨어 개발 에이전트 플랫폼 (Agent IDE & CLI)
- LLM Engine: Google Gemini 3.7 Flash High (초고속 추론 및 기획/코드 생성 엔진)
- Google Imagen / Multimodal Engine: 제미나이 내장 이미지 생성 파이프라인 (인라인 아바타 및 디자인 에셋 생성)
- 엔지니어링 표준 및 프로토콜 규격
- Chrome DevTools Protocol (CDP): 브라우저 자동화 및 서브에이전트 원격 디버깅 인터페이스 (chrome://inspect/#remote-debugging)
- Model Context Protocol (MCP): AI 에이전트와 로컬 개발 환경(파일시스템, 터미널, 브라우저) 간의 컨텍스트 통신 표준
- W3C Web Standards: 무빌드 경량 프론트엔드 아키텍처 (HTML5 Semantic Web, CSS Custom Properties, Vanilla ECMAScript, LocalStorage API)
- Python Standard Library: Python 3 내장 비동기 경량 웹 서버 모듈 (http.server)
- 벤치마크 서비스 분석
- 클론 대상: 모바일 멀티 링크 인 바이오(Link-in-Bio) 서비스 ‘리틀리(Littly)’ 및 ‘링크트리(Linktree)’ UI/UX 컴포넌트 아키텍처 분석