Antigravity와 Stitch MCP로 랜딩 페이지 만들기

이 문서는 Google Stitch에서 랜딩 페이지 시안을 만들고, 그 시안을 Antigravity의 에이전트가 React + Tailwind CSS 코드로 바꿔 브라우저에서 확인하는 과정을 처음부터 끝까지 따라 하는 실습 예제다. Antigravity에 Stitch MCP 연동(설치와 인증)이 이미 끝난 상태에서 시작하며, 연동 설치 과정 자체는 다루지 않는다. 끝까지 따라 하면 시안과 같은 모습의 랜딩 페이지 React 프로젝트가 컴퓨터에 남는다.

1 – Stitch에서 랜딩 페이지 시안 만들기

먼저 재료가 되는 디자인 시안을 만든다. Stitch는 글로 적은 요구사항을 받아 화면 시안을 생성하는 구글의 디자인 도구다. 디자이너가 없어도 문장 하나로 랜딩 페이지·앱 화면 같은 시안을 얻을 수 있고, 이 실습에서는 가상의 커피 원두 구독 서비스 "BeanBox"의 랜딩 페이지 시안을 만든다.

1.1 – 작업 환경 준비

코드와 기록 파일을 담을 폴더를 먼저 만든다. 작업마다 새 폴더를 만들지 않고, 이 실습은 끝까지 이 폴더 하나만 쓴다.

1. 파일 탐색기(macOS는 Finder)를 연다.
2. 문서 폴더 안에 새 폴더 "웹실습"을 만든다.
3. "웹실습" 안에 하위 폴더 "beanbox_랜딩"을 만든다.
4. 메모장(macOS는 텍스트 편집기)을 열고 빈 파일을 "웹실습/beanbox_랜딩/stitch_프롬프트.txt"로 저장한다.
5. Chrome 주소창을 클릭하고 https://stitch.withgoogle.com 을 입력한 뒤 Enter를 누른다.
6. 우상단 [Sign in(로그인)] 버튼으로 구글 계정에 로그인한다. 이미 로그인돼 있으면 이 단계는 건너뛴다.

"stitch_프롬프트.txt"는 이 실습에서 입력한 프롬프트를 그대로 복사해 두는 기록 파일이다. 같은 시안을 나중에 다시 만들거나 다른 주제로 바꿔 만들 때, 이 파일에 남긴 문장을 고쳐 쓰면 된다.

1.2 – 프로젝트 만들고 시안 생성

Stitch 첫 화면에서 프롬프트를 입력해 랜딩 페이지 시안을 만든다. 프롬프트는 만들 화면의 종류·서비스 이름·색·들어갈 구역을 문장으로 적은 요구사항이다.

1. 첫 화면 가운데의 프롬프트 입력창을 클릭한다.
2. 아래 문장을 그대로 입력한다.

Design a modern landing page for a coffee bean subscription service called BeanBox. Use a warm cream and deep brown palette. Include a hero section, three feature cards, a pricing section, and a footer.

1. 입력창 주변의 플랫폼 선택에서 [Web]을 고른다. [Mobile]이 기본으로 잡혀 있으면 [Web]으로 바꾼다.
2. 모델 선택 항목이 보이면 기본값을 그대로 둔다.
3. 생성 버튼(화살표 모양)을 클릭하고 시안이 나올 때까지 기다린다. 수십 초가 걸린다.
4. 생성이 끝나면 좌상단의 프로젝트 이름을 클릭한다.
5. 이름을 지우고 BeanBox를 입력한다.
6. Enter를 눌러 확정한다.
7. 방금 입력한 프롬프트를 마우스로 긁어 선택하고 Ctrl+C로 복사한 뒤, "stitch_프롬프트.txt"에 Ctrl+V로 붙여 넣고 Ctrl+S로 저장한다.

위 프롬프트는 네 조각으로 이뤄져 있다. 화면 종류(landing page), 서비스 이름(BeanBox), 색(warm cream and deep brown), 들어갈 구역(hero·feature cards·pricing·footer)이다. 자기 주제로 바꿀 때는 이 네 조각만 갈아 끼우면 된다. 예를 들어 반려동물 용품 서비스라면 이름을 PetBox로, 색을 soft mint and charcoal로 바꾸는 식이다.

1.3 – 시안 확인

생성된 시안이 코드로 바꿀 만한 상태인지 확인한다. Stitch에서 프로젝트는 시안을 모아 두는 단위이고, 화면(Screen)은 프로젝트 안에 생성된 시안 한 장이다. 방금 만든 BeanBox 프로젝트에는 랜딩 페이지 화면 한 장이 들어 있다.

1. 가운데 미리보기 영역에서 시안을 위아래로 스크롤하며 hero(첫 화면 큰 소개 구역)·기능 카드 3개·가격 구역·footer(맨 아래 정보 구역)가 모두 있는지 본다.
2. 구역이 빠졌거나 색이 요구와 다르면, 하단 입력창에 수정 요청을 입력하고 다시 생성한다. 예: Make the hero headline larger and add a subscribe button.
3. 시안이 마음에 들면 그대로 둔다. 이 화면을 다음 장에서 Antigravity가 불러온다.

시안 단계에서 구역 구성을 잡아 두는 이유는, 코드로 바꾼 뒤에 구역을 새로 추가하는 것보다 시안을 다시 생성하는 쪽이 수정 비용이 훨씬 적기 때문이다.

2 – Antigravity에서 Stitch 프로젝트 연결 확인

시안이 준비됐으니 이제 개발 도구로 자리를 옮긴다. Antigravity는 AI 에이전트에게 코드 작성과 명령 실행을 맡기는 구글의 개발 프로그램(IDE)이다. 여기서 에이전트는 대화창의 지시를 받아 파일 생성·코드 작성·명령 실행을 대신 수행하는 AI 작업자를 가리킨다.

두 도구를 잇는 것이 MCP다. MCP(Model Context Protocol)는 AI 도구를 외부 서비스에 연결하는 통신 규약이다. 이 규약이 있어야 에이전트가 Stitch 안의 프로젝트와 시안을 읽을 수 있다. MCP를 두 도구 사이에 놓인 "다리"라고 부르면, Stitch MCP는 Antigravity와 Stitch 사이에 놓인 다리인 셈이다.

이 장은 그 다리(Stitch MCP)가 이미 놓여 있다는 전제, 곧 stitch-mcp 초기화와 Antigravity의 MCP 서버 등록이 끝난 상태에서 시작한다.

2.1 – 작업 공간 열기

1장에서 만든 "beanbox_랜딩" 폴더를 Antigravity의 작업 공간으로 연다. 작업 공간은 에이전트가 파일을 만들고 고치는 범위가 되는 폴더다.

1. Antigravity를 실행한다.
2. Ctrl+E(macOS는 ⌘+E)를 눌러 Agent Manager(에이전트 관리 화면)를 연다.
3. [+ Open Workspace(작업 공간 열기)]를 클릭한다.
4. 폴더 선택 창이 뜨면 "웹실습/beanbox_랜딩"으로 이동한 뒤 [폴더 선택]을 누른다.

이제 에이전트가 만드는 모든 파일은 이 폴더 안에 생긴다. 1.1에서 만든 "stitch_프롬프트.txt"도 이 폴더에 있으므로, 시안 기록과 코드가 한자리에 모인다.

2.2 – 연동 상태 확인

코드 생성을 시키기 전에, 에이전트가 Stitch를 실제로 읽을 수 있는지 먼저 확인한다. 이 확인을 건너뛰면 뒤 단계에서 실패했을 때 원인이 연동 문제인지 프롬프트 문제인지 가릴 수 없다.

1. 에이전트 대화창(입력란)을 클릭한다.
2. 아래 문장을 입력하고 Enter를 누른다.

내 Stitch 프로젝트 목록을 보여줘.

에이전트가 Stitch MCP를 호출해 프로젝트 목록을 답하고, 그 안에 BeanBox가 보이면 연동이 정상이다. 목록에 BeanBox가 있다는 것은 다리 건너편(Stitch 계정)까지 에이전트가 실제로 다녀왔다는 뜻이다.

2.3 – 디자인 정보 추출

연동이 확인됐으니 시안에서 색상과 글꼴 정보를 뽑아 파일로 남긴다. 이렇게 만든 DESIGN.md는 시안의 색상·글꼴 정보를 정리해 두는 파일이다. 에이전트가 코드를 쓸 때마다 시안을 새로 불러오는 대신 이 파일을 참고하므로, 페이지 전체에서 색과 글꼴이 일관되게 유지된다.

1. 에이전트 대화창에 아래 문장을 입력하고 Enter를 누른다.

Stitch MCP로 'BeanBox' 프로젝트의 랜딩 페이지 화면을 불러와서, 색상 팔레트와 타이포그래피를 추출해 프로젝트 루트에 DESIGN.md 파일로 정리해줘.

1. 에이전트가 도구 호출이나 파일 생성 승인을 요청하면 [Accept(승인)] 버튼을 누른다.
2. 작업이 끝나면 좌측 파일 목록에서 "DESIGN.md"를 클릭해 연다.

파일 안에 배경·본문·강조에 쓸 색상 코드(#F5EFE6 같은 16진수 값)와 글꼴 이름이 표나 목록으로 정리돼 있으면 성공이다. 색상 코드는 시안 이미지에서 추출한 값이므로 문서마다 조금씩 다를 수 있다.

3 – React 코드로 바꾸고 브라우저에서 확인

디자인 정보까지 준비됐으니 이제 시안을 실제 동작하는 웹 페이지로 바꾼다. React는 화면을 컴포넌트(부품) 단위로 조립해 만드는 자바스크립트 라이브러리이고, Tailwind CSS는 미리 정의된 클래스 이름으로 스타일을 입히는 CSS 도구다. 이 단계부터는 에이전트가 대부분의 일을 수행하고, 우리는 지시와 확인을 맡는다.

3.1 – 코드 생성 요청

1. 에이전트 대화창에 아래 문장을 입력하고 Enter를 누른다.

이 랜딩 페이지를 React와 Tailwind CSS로 만들어줘. 섹션별로 컴포넌트 파일을 나누고, DESIGN.md의 색상과 글꼴을 그대로 적용해. 완성되면 개발 서버를 실행해서 통합 브라우저로 보여줘.

1. 에이전트가 실행 계획을 보여 주면 내용을 훑고 승인 버튼을 누른다.
2. 패키지 설치(npm install)와 파일 생성이 이어지는 동안 좌측 파일 목록이 늘어나는 것을 지켜본다. 수 분이 걸린다.
3. 이 프롬프트도 "stitch_프롬프트.txt"에 붙여 넣고 Ctrl+S로 저장한다.

이 프롬프트는 세 가지를 한 번에 지시한다. 구현 방식(React + Tailwind CSS), 구조 규칙(섹션별 컴포넌트 분리와 DESIGN.md 적용), 확인 방법(개발 서버 실행과 통합 브라우저 표시)이다. 확인 방법까지 프롬프트에 넣는 이유는, 넣지 않으면 코드만 만들어지고 결과 화면은 우리가 직접 띄워야 하기 때문이다.

3.2 – 미리보기와 시안 비교

개발 서버가 뜨면 결과를 시안과 나란히 놓고 비교한다. 개발 서버는 작성 중인 코드를 브라우저에서 바로 확인하도록 내 컴퓨터 안에서만 도는 임시 서버다.

1. Antigravity의 통합 브라우저 화면이 열리면 주소가 http://localhost:5173 같은 localhost 주소인지 확인한다.
2. 페이지를 위에서 아래로 스크롤하며 전체 구역을 훑는다.
3. Chrome의 Stitch 탭(https://stitch.withgoogle.com 의 BeanBox 프로젝트)으로 이동해 시안을 연다.
4. 두 화면을 번갈아 보며 색·글꼴·구역 순서·버튼 모양을 비교한다.

3.3 – 수정 요청으로 시안에 맞추기

비교에서 어긋난 부분은 다시 만들지 않고 수정 요청으로 좁혀 간다. 수정 요청은 어긋난 부분 하나를 짚어 고치게 하는 짧은 지시다.

1. 에이전트 대화창에 아래 문장을 입력하고 Enter를 누른다.

구독 시작 버튼의 안쪽 여백이 시안보다 좁아. Stitch 시안을 다시 확인해서 Tailwind 클래스를 수정해줘.

1. 에이전트가 수정을 마치면 통합 브라우저가 자동으로 새로 그려진다. 바뀐 버튼을 확인한다.
2. 남은 차이도 같은 방식으로 하나씩 지시한다. 한 번에 하나만 고치게 해야 무엇이 바뀌었는지 추적할 수 있다.
3. 쓸 만했던 수정 문장은 "stitch_프롬프트.txt"에 덧붙여 Ctrl+S로 저장한다.

수정 프롬프트도 세 조각으로 이뤄진다. 대상(구독 시작 버튼), 차이(안쪽 여백이 좁다), 근거(Stitch 시안 다시 확인)다. 자기 화면에서 고칠 곳이 다르면 대상과 차이만 바꾸면 된다. 예를 들어 색이 어긋났으면 footer 배경색이 시안보다 밝아. DESIGN.md의 색상 코드로 맞춰줘. 처럼 적는다.

통합 브라우저의 화면이 시안과 같은 모습이 되면 실습이 끝난 것이다. "beanbox_랜딩" 폴더에는 React 프로젝트 전체와 "DESIGN.md", 프롬프트 기록 파일이 남아 있다. 다음에 다른 주제의 페이지를 만들 때는 1.2의 프롬프트 네 조각만 바꿔 같은 과정을 되풀이하면 된다.