AI로 전문가처럼 웹사이트 만들기
Jack Roberts “How I vibecode Beautiful Animated Websites (Anti-Gravity)”
위 콘텐츠에서 목화씨를 가져온 콘텐츠
“선비라면 사흘 만에 만나도 눈을 비비고 다시 대해야 할 만큼 성장해야 한다”는 뜻의 괄목상대가 있다. 그런데 AI는 선비보다 심하다. 하루 만에 만나도 눈을 비비고 다시 봐야 한다. 그런 의미에서, 눈을 비비고 다시 봐야 할 웹 빌더가 하나 등장했다. 안티그래비티(Anti-Gravity)다.
이 도구가 제시하는 관점은 단순한 웹 빌더가 아니다. 하나의 AI 기반 개발 운영체제(OS)에 가깝다. 디자인, 프론트엔드, 백엔드, 배포까지 흩어져 있던 작업을 하나의 흐름으로 묶는다.
핵심 개념은 스킬(Skills)이다. 영화 <매트릭스>에서 무술 능력을 다운로드하듯, 특정 능력을 즉시 추가하는 방식이다. 로그인 기능, UI 개선, 성능 최적화 같은 작업이 “스킬 하나 추가”로 처리된다. 코드를 하나하나 짜는 게 아니라, 능력을 장착하는 개발 방식이다.
디자인과 구조를 분리하는 접근 – 구글 AI 스튜디오와 안티그래비티
이 워크플로우가 흥미로운 이유는 두 도구의 철학이 명확히 다르기 때문이다. 구글 AI 스튜디오(Google AI Studio)는 시각적으로 강렬한 결과물을 빠르게 만들어낸다. 화려한 애니메이션, 눈에 띄는 레이아웃, 감각적인 스타일에 강하다. 반면 구조적 견고함이나 확장성은 상대적으로 약하다.
안티그래비티는 반대다. 접근성, 유지 보수, 점진적 개선에 초점을 둔다. 그래서 이 흐름에서는 디자인은 구글 AI 스튜디오에서, 구조는 안티그래비티에서 완성한다. 감각과 엔지니어링을 분리해 각각 AI에게 맡기는 셈이다.
프론트엔드 초안 – 메가 프롬프트와 UI 스나이핑
첫 단계는 구글 AI 스튜디오에서 프론트엔드 초안을 만드는 것이다. 이때 핵심은 프롬프트다. 깃허브(GitHub)에 공개된 디자인 프레임워크 프롬프트, 이른바 메가 프롬프트를 활용해 레이아웃, 색상, 타이포그래피, 애니메이션 규칙까지 한 번에 정의한다. SaaS인지, 이커머스인지 목적을 명확히 하면 결과물의 완성도가 크게 올라간다.
마음에 드는 사이트가 있다면 UI 스나이핑(UI Sniping)도 활용된다. HTML 웹사이트 익스트랙터(HTML Website Extractor)로 소스 코드를 가져와 구글 AI 스튜디오에 입력하면 특정 인터랙션이나 레이아웃을 재현할 수 있다. 파이어크롤(Firecrawl.dev) 같은 도구로 브랜드의 컬러 팔레트와 폰트 정보를 추출해 디자인에 일관성을 부여하는 방식도 자주 쓰인다.
이렇게 만들어진 결과물은 깃허브 리포지토리에 저장된다. 이 시점의 코드는 ‘완성품’이 아니라 재료에 가깝다.
전문가 수준으로 다듬기 – 안티그래비티와 스킬
깃허브에 저장된 코드를 안티그래비티로 클론(Clone)하면 본격적인 정제가 시작된다. 여기서 핵심은 UI/UX 프로 스킬(UI/UX Pro Skill)이다. 이 스킬을 적용하면 AI가 웹사이트를 분석해 접근성, SEO, 성능, 디자인 규칙 등 50개가 넘는 개선 사항을 자동으로 반영한다.
조명 효과의 강도를 조정하고, 글로벌 스타일을 통합하고, 눈에 띄지 않던 버그를 잡아낸다. 사람이 코드 리뷰하며 하나씩 고칠 작업을 AI 에이전트가 일괄 처리한다는 점이 다르다.
필요한 UI 컴포넌트는 21st.dev나 코드펜(CodePen)에서 가져온다. 버튼 하나, 애니메이션 하나를 복사해 붙이면 안티그래비티가 기존 구조에 맞게 통합한다. 복잡한 인터랙션도 ‘조합’의 문제로 바뀐다.
백엔드 구축 – 수파베이스와 MCP
프론트엔드 다음은 백엔드다. 사용자 인증과 데이터 저장은 수파베이스(Supabase)를 사용한다. 여기서 등장하는 개념이 모델 컨텍스트 프로토콜(MCP, Model Context Protocol)이다. MCP를 연결하면 안티그래비티가 데이터베이스를 자연어로 제어할 수 있다.
“이메일과 이름으로 로그인하게 하고, 대시보드에 목표 수입과 고객 수를 저장해줘.”
이 한 문장으로 인증 시스템과 데이터베이스 테이블이 생성된다. 사용자가 입력한 데이터는 수파베이스에 저장되고, 로그인 시 그대로 불러온다. 필요하다면 RLS(Row Level Security)를 활성화해 보안 수준을 높일 수도 있다.
배포와 분석 – 버셀로 닫히는 흐름
완성된 웹사이트는 버셀(Vercel)을 통해 배포된다. 안티그래비티에게 깃허브 푸시와 배포 준비를 요청하면 필요한 파일 정리가 자동으로 이뤄진다. 깃허브와 버셀을 연동하면 배포는 자연스럽게 이어진다.
환경 변수 역시 마찬가지다. 수파베이스 API 키 같은 값은 버셀 MCP를 통해 자동 설정할 수 있어 수동 입력의 번거로움이 줄어든다. 여기에 버셀 애널리틱스(Analytics)와 스피드 인사이트(Speed Insights)를 추가하면 방문자 수, 이탈률, 성능 지표를 바로 확인할 수 있다.
결론 – 코딩이 아니라 운영 방식의 변화
이 워크플로우의 핵심은 “코딩을 몰라도 된다”가 아니다. 웹사이트를 만드는 단위 자체가 바뀐다는 점이다. 디자인은 감각의 문제, 백엔드는 언어의 문제, 배포는 설정의 문제로 분리되고, 각각을 AI가 담당한다.
사람은 무엇을 만들지 결정하고, AI는 그것을 실행한다. 이 구조가 의미하는 바는 분명하다. 풀스택 웹 개발은 더 이상 소수의 기술자가 독점하는 영역이 아니라, 아이디어를 구조로 설계할 수 있는 사람의 영역으로 이동하고 있다.
AI 시대에는 많은 사람이 회사 밖에서, 자기 이름으로 살아가야 합니다. ‘회사 이름’이 아닌 ‘내 이름’으로 살아가는 법은 아래에서 확인할 수 있습니다.
https://product.kyobobook.co.kr/detail/S000217556693
