분류 디자인 · 인텔리전스 Apache-2.0 · 지구에서 제작
에이전트 · Antigravity

디자인을 위한 Antigravity.

Antigravity는 Google의 에이전트 우선 개발 플랫폼입니다. Gemini 3.x 모델이 스크린샷을 읽고 레이아웃을 추론하며, 통합 브라우저로 에이전트가 만든 것을 검증하고, Artifacts가 에이전트 작업을 리뷰 가능한 산출물로 바꿉니다 — 레퍼런스와 규칙, 검증 루프를 제공하면 실질적인 디자인 도구가 됩니다. Open Design은 이를 오픈소스 디자인 워크플로에 연결합니다. 당신의 Google 계정, 당신의 파일, 로컬 우선으로요.

Antigravity 디자인 피드백 루프: 에이전트 우선 IDE가 레퍼런스 이미지를 읽고, 통합 브라우저가 UI를 렌더링하며, Manager surface와 피드백 화살표가 다시 돌아오는 모습

Open Design은 Antigravity를 로컬 우선의 오픈소스 디자인 에이전트로 바꿉니다 — 당신의 Google 계정, 당신의 파일, 그리고 이를 둘러싼 엄선된 skill과 디자인 시스템 라이브러리.

Antigravity는 Gemini 3와 함께 출시된 Google의 에이전트 우선 개발 플랫폼입니다. 디자인에 특히 흥미로운 세 가지가 있습니다. 에이전트가 본래 멀티모달인 Gemini 3.x 모델로 돌아가 스크린샷을 읽고 레이아웃·간격·위계를 추론한다는 점, 에이전트가 구동할 수 있는 통합 브라우저를 갖춰 추측하는 대신 스스로 UI를 렌더링하고 점검한다는 점, 그리고 Artifacts — 작업 목록, 구현 계획, 스크린샷, 브라우저 녹화 — 를 생성해 에이전트 작업을 실제로 리뷰할 수 있는 무언가로 바꾼다는 점입니다. 적절한 레퍼런스와 규칙, 검증 루프와 짝지으면 실제로 반응형 UI를 만들어 냅니다 — 게다가 Google 계정으로 무료로 시작할 수 있습니다. 이 글은 Antigravity를 UI·프런트엔드·디자인 시스템 작업에 활용하고, 이를 Open Design과 함께 구조화된 디자인 워크플로에 연결하는 실용적이고 처음부터 끝까지 이어지는 가이드입니다.

Antigravity가 실제로 무엇인지, 왜 멀티모달 Gemini와 통합 브라우저가 디자인에 어울리는지, 처음부터 설정하는 방법, 스크린샷-투-UI 루프, 에이전트 컨텍스트와 도구로 어떻게 확장하는지, Codex·Claude Code·Cursor·Gemini CLI와의 비교, AI 결과물을 흔해 보이게 만드는 함정, 그리고 Open Design이 개방적이고 로컬 우선인 디자인 레이어로서 그 간극을 어떻게 메우는지를 다룹니다 — Open Design은 오픈소스이고 당신의 컴퓨터에서 돌아가니, 자연스럽게 어울리는 조합입니다.

Antigravity는 실제로 무엇인가

Antigravity는 Google의 에이전트 우선 개발 플랫폼입니다 — 사이드바 챗봇이 아니라 자율 에이전트가 작업을 하도록 만들어진 AI 기반 IDE입니다. 2025년 11월 18일 Gemini 3와 함께 발표되어 개인에게는 무료 퍼블릭 프리뷰로 제공되며, 복잡하고 여러 도구를 쓰는 소프트웨어 작업을 에디터·터미널·통합 브라우저를 넘나들며 동작하는 에이전트에 위임할 수 있게 합니다. 에이전트는 주로 Google의 멀티모달 Gemini 3.x 모델로 돌아갑니다.

디자인 작업에서는 세 가지 속성이 두드러집니다. Gemini 3.x가 본래 멀티모달이라 에이전트가 스크린샷을 읽고 실제 레이아웃을 추론합니다. 실제 브라우저를 구동할 수 있어 만든 것을 렌더링하고 검증합니다. 그리고 Artifacts — 작업 목록, 계획, 스크린샷, 브라우저 녹화 — 를 드러내, 원시 도구 로그가 아니라 손에 잡히는 결과물을 리뷰하게 합니다.

  • Editor View + Manager Surface: Editor View는 탭 완성과 인라인 명령이 있는 익숙한 AI IDE이고, Manager Surface는 여러 에이전트를 작업 공간 전반에서 비동기로 생성·오케스트레이션·관찰하게 합니다 — 긴 디자인 작업을 돌리기에 자연스러운 자리입니다.
  • 통합 브라우저 + Artifacts: 에이전트는 내장 브라우저에서 동작하고 Artifacts(스크린샷, 브라우저 녹화, 작업 목록, 계획)를 내놓으며 거기에 피드백을 남길 수 있습니다 — 덧붙여진 게 아니라 플랫폼에 내장된 검증 루프입니다.
  • 무료로 시작: 개인 Google 계정으로 로그인하면 Gemini 3.x에 넉넉한 사용 한도가 주어집니다. 플랫폼은 macOS, Windows, Linux에서 돌아갑니다.
  • 벤더: Google
  • 자격증명: Google 계정(개인 Gmail), 퍼블릭 프리뷰 동안 무료
  • 바이너리: agy로 실행; macOS, Windows, Linux에서 동작

왜 멀티모달 Gemini와 내장 브라우저가 디자인에 어울리는가

Antigravity의 디자인 강점은 모델과 플랫폼이 함께 만들어 냅니다 — 다만 모든 에이전트가 그렇듯 안목은 여전히 사람이 제공해야 합니다.

  • 강력한 멀티모달 이해: Gemini 3.x가 본래 멀티모달이라 에이전트가 레퍼런스 스크린샷을 잘 읽습니다 — 산문 설명으로 추측하는 대신 렌더링된 결과를 이미지와 다시 비교합니다.
  • 검증을 위한 통합 브라우저: 에이전트가 실제 브라우저를 구동해 UI를 렌더링하고, 여러 상태에서 점검하고, 깨진 레이아웃을 잡아냅니다 — 그리고 결과를 리뷰할 수 있는 브라우저 녹화 Artifact로 담습니다.
  • 에이전트가 읽는 규칙: 토큰·컴포넌트·리뷰 규칙을 에이전트의 프로젝트 컨텍스트에 남기면, 기본 모양 대신 당신의 브랜드에 맞춰 작업합니다.
디자인 시스템, skill, 레퍼런스 이미지가 좋은 디자인 결과물로 수렴하는 것을 보여주는 다이어그램
안목은 당신이 제공하는 세 가지 입력에서 나옵니다: 디자인 시스템, skill, 그리고 실제 레퍼런스 이미지.

교훈은 모든 에이전트가 가르치는 것과 같습니다. Antigravity는 기본적으로 안목을 갖고 있지 않습니다. 제약 — 디자인 시스템, 미적 skill, 구체적인 레퍼런스 — 을 주면 좋은 디자인을 만들어 냅니다. Open Design은 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞습니다(아래에서 자세히).

디자인 작업용 Antigravity를 처음부터 설정하기

깨끗한 컴퓨터에서 UI를 빌드·검증할 수 있는 Antigravity 에이전트까지 가는 전체 경로입니다. 정확한 앱 내 메뉴는 프리뷰 동안 바뀔 수 있으므로, 이 글은 믿고 따를 수 있는 수준에 머뭅니다.

# 1. Download Antigravity for your OS (macOS, Windows, Linux)
#    from the official download page: antigravity.google/download

# 2. Launch it and sign in
agy               # opens Antigravity; sign in with your Google account

# 3. Accept the data-use policy, pick a theme, and open your project folder

# 4. Start an agent task in the Editor View or the Manager Surface,
#    selecting a Gemini 3.x model (e.g. Gemini 3.1 Pro)
5단계 설정 흐름: 다운로드, Google로 로그인, 프로젝트 열기, 디자인 규칙과 skill 추가, 브라우저 검증 활성화
설정 순서: 다운로드 → Google로 로그인 → 프로젝트 열기 → 디자인 규칙과 skill 추가 → 통합 브라우저로 검증.
  • 디자인 규칙을 코드로 남기기: 토큰·프리미티브·규칙을 에이전트의 프로젝트 컨텍스트에 넣으면, 흔한 디자인으로 기본값을 내는 대신 결과가 브랜드에 맞습니다.
  • 통합 브라우저 사용: 에이전트가 Antigravity의 내장 브라우저에서 렌더링하고 여러 브레이크포인트에서 결과를 점검하게 해 — 빌드 통과만이 아니라 UI가 제대로 보이는지를 검증하세요.

스크린샷-투-UI 워크플로

Antigravity로 가장 효과가 큰 디자인 루프는 레퍼런스 이미지를 동작하는 반응형 UI로 바꾸고 일치할 때까지 반복하는 것입니다 — 멀티모달 모델로 결과를 레퍼런스와 다시 비교하고, 통합 브라우저로 그것을 검증합니다.

  1. 가지고 있는 가장 또렷한 시각 레퍼런스에서 시작하세요 — 그리고 한 장의 히어로 샷만이 아니라 여러 상태(데스크톱과 모바일, 호버, 빈 상태, 로딩)를 포함하세요.
  2. 프롬프트를 구체적으로 작성하세요. 모호한 프롬프트는 강력한 모델로도 흔한 UI를 만듭니다.
  3. 디자인 시스템과 규칙을 에이전트의 프로젝트 컨텍스트에 두고, 토큰과 정규 프리미티브가 어디 있는지 알려 주세요.
  4. 에이전트가 Antigravity의 통합 브라우저에서 렌더링하게 하고, 브레이크포인트로 크기를 조절하며 결과를 점검하세요.
  5. 에이전트가 구현 결과를 스크린샷과 다시 비교하게 하며 반복하고 — 단지 빌드가 되는지만 확인하지 말고 — 에이전트가 생성한 브라우저 녹화와 스크린샷 Artifacts를 리뷰하세요.

레퍼런스 이미지를 첨부하고 구체적인 제약을 준 뒤, 에이전트가 브라우저에서 검증하게 하세요:

# In an Antigravity agent task, attach reference-desktop.png and
# reference-mobile.png, then prompt:

Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Render it in the integrated browser and iterate until it matches
the references across breakpoints, and show me the screenshots.

프롬프트는 작고 집중되게 유지하고, 좋은 반복은 커밋하고 나쁜 반복은 되돌려(되돌릴 때 에이전트에 알려 주세요) 매번의 패스가 깨끗한 기반 위에서 쌓이게 하세요.

에이전트 컨텍스트, 도구, Artifacts

세 가지 확장 지점이 Antigravity를 지속적인 디자인 작업에 실용적으로 만들며, 셋 모두 개방형 디자인 워크플로에 깔끔하게 들어맞습니다.

  • 프로젝트 컨텍스트: 지속적인 프로젝트 규칙은 디자인 규칙을 담는 오래가는 보금자리입니다 — 에이전트가 모든 작업에서 읽는 토큰·프리미티브·리뷰 체크리스트라, 결과가 브랜드를 유지합니다.
  • 통합 브라우저 + 터미널: 에이전트가 에디터·터미널·내장 브라우저를 넘나들며 동작하므로, 플랫폼을 떠나지 않고 레퍼런스를 모으고, dev 서버를 돌리고, 렌더링된 UI를 검증할 수 있습니다.
  • 당신이 리뷰하는 Artifacts: 작업 목록·구현 계획·스크린샷·브라우저 녹화가 에이전트 작업을 읽기 쉽게 만듭니다. Artifact에 피드백을 남기면 에이전트가 수정을 반영합니다.

이것들은 진지한 디자인 루프에 필요한 역량 — 바로 Open Design이 프로젝트마다 다시 만드는 대신 오케스트레이션하도록 만들어진 종류의 것 — 입니다.

디자인을 위한 Antigravity vs Codex vs Claude Code vs Cursor vs Gemini CLI

디자인 작업에 단 하나의 승자는 없습니다 — 에이전트마다 강점이 다르고, 숙련된 팀은 이들을 겹쳐 씁니다. 공정한 요약:

에이전트디자인 강점가장 적합한 용도
Antigravity멀티모달 Gemini 3.x, 자가 검증용 통합 브라우저, 리뷰 가능한 Artifacts를 갖춘 에이전트 우선 IDE; 프리뷰 무료UI를 내장 브라우저로 검증하는 비동기 멀티 에이전트 빌드
Codex프런트엔드 skill과 함께 강한 시각적 완성도; 샌드박스 비동기 빌드위임형 비동기 빌드와 이식 가능한 AGENTS.md 규칙
Claude Code구체적인 디자인 결정(hex, 간격, 타이포)과 코드베이스를 이해하는 UX프런트엔드 추론과 대용량 컨텍스트 리팩터링
Cursor라이브 프리뷰와 인라인 편집이 있는 시각적 빌드-앤-시 루프IDE 안에서 긴밀하게 반복하며 지켜보는 UI 작업
Gemini CLI멀티모달 Gemini 기반의 오픈소스 터미널 에이전트, 100만 토큰 컨텍스트와 무료 등급스크린샷 중심 터미널 작업과 디자인 시스템 전체를 컨텍스트에 담기

커뮤니티에서 거듭 나오는 결론은 안목은 사람에게서 나온다는 것입니다. 이들 모두 skill·레퍼런스·제약이 없으면 흔한 미감으로 기본값을 냅니다. 그게 풀어야 할 진짜 문제이며 — 모델 모양이 아니라 디자인 도구 모양의 문제입니다.

함정, 그리고 “AI 슬롭” 느낌을 피하는 법

AI가 만든 디자인에 대한 가장 흔한 불만은 흔해 보인다는 것입니다 — 부드러운 그라데이션, 떠다니는 패널, 지나치게 큰 둥근 모서리, 과한 그림자, “AI가 만들었다고 외치는” Inter-와-보라색 분위기. 그 밖에 보고되는 문제로는 깨진 모바일 레이아웃과 지시문이 UI 카피로 새어 나오는 것이 있습니다. 어느 것도 Antigravity에만 있는 문제가 아닙니다. 엄선된 디자인 컨텍스트 없이 어떤 에이전트든 돌릴 때 생기는 일입니다.

  • 미적 skill 추가: 엄선된 디자인 skill은 에이전트가 기본 모양 대신 실제 방향을 택하도록 강제합니다.
  • 통합 브라우저에서 검증: 멀티모달 모델과 Antigravity의 내장 브라우저를 써서 여러 브레이크포인트에서 렌더링하고 스스로 점검해, 모바일에서 레이아웃이 조용히 깨지지 않게 하세요.
  • 토큰과 레퍼런스 제공: 실제 디자인 토큰과 레퍼런스 스크린샷은 결과 품질에 가장 큰 단일 지렛대입니다.
  • 프로젝트 컨텍스트에 규칙을 남기기: “히어로 카드 금지, 서체 최대 둘, 브랜드 우선 위계” 같은 규칙을 에이전트가 매 작업에서 읽는 곳에 두세요.

모든 완화책이 에이전트에게 엄선된 디자인 컨텍스트를 주는 것에 관한 것임을 눈여겨보세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 수고를 Open Design이 없애 줍니다.

Open Design 안에서 Antigravity로 디자인하기

Open Design은 위 워크플로가 계속 요구하는 바로 그 오픈소스 디자인 레이어입니다. Antigravity를 1차 어댑터로 취급해 엄선된 skill과 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다 — 그래서 Antigravity를 좋게 만드는 디자인 컨텍스트가 매번 손으로 조립되는 게 아니라 첫 실행부터 거기 있습니다. Open Design은 오픈소스이고 로컬 우선이라 자연스럽게 어울리는 조합입니다.

  1. Open Design을 설치하고 Antigravity를 에이전트로 선택하세요.
  2. 당신의 Google 계정으로 인증하세요 — 자격증명은 당신의 컴퓨터에 머물며 결코 우리를 거쳐 중계되지 않습니다.
  3. 디자인 시스템과 skill을 고른 뒤, 일관된 안목으로 덱·프로토타입·랜딩 페이지를 생성하세요.
  4. 모든 산출물과 DESIGN.md 파일은 호스팅 클라우드가 아니라 당신 소유의 저장소에 있습니다.

같은 Antigravity 에이전트, 같은 Google 계정 — 거기에 실제로 이식 가능한 오픈소스 디자인 워크플로를 둘러 줍니다. Open Design은 로컬 우선이고 Apache-2.0이라, 당신의 작업이나 자격증명에 관한 무엇도 당신의 컴퓨터를 떠나지 않습니다.

자주 묻는 질문

  1. 01 Antigravity가 정말 디자인 작업을 할 수 있나요?

    네 — 미적 skill, 디자인 시스템, 컨텍스트 속 실제 레퍼런스 이미지가 있으면 Antigravity는 프로덕션 품질의 반응형 UI를 만들어 내고, 멀티모달 Gemini 3.x 에이전트가 통합 브라우저에서 결과를 검증합니다. 그 컨텍스트가 없으면 흔한 모양으로 기본값을 내는 경향이 있는데, 그 간극을 Open Design이 메웁니다.

  2. 02 Antigravity로 디자인하려면 비용을 내야 하나요?

    Antigravity는 개인에게 무료 퍼블릭 프리뷰로 제공되며, 개인 Google 계정으로 로그인하면 Gemini 3.x에 넉넉한 사용 한도가 주어집니다. Open Design은 어느 쪽이든 당신의 자격증명을 중계하지 않습니다.

  3. 03 Antigravity가 디자인에 특히 좋은 이유는 무엇인가요?

    세 가지입니다. 에이전트가 레퍼런스 스크린샷을 잘 읽는 본래 멀티모달 Gemini 3.x 모델로 돌아가고, 에이전트가 UI를 검증하기 위해 구동할 수 있는 통합 브라우저를 갖추며, 리뷰할 수 있는 Artifacts — 스크린샷과 브라우저 녹화 — 를 드러냅니다. 안목은 여전히 당신이 제공하는 디자인 시스템, skill, 레퍼런스에서 나옵니다.

  4. 04 프런트엔드 디자인에는 Antigravity인가요, Claude Code인가요?

    둘 다 강력합니다. Claude Code는 구체적이고 코드베이스를 이해하는 디자인 결정으로 알려져 있고, Antigravity의 강점은 에이전트 우선 플랫폼 — 멀티모달 Gemini 3.x, 검증용 통합 브라우저, 리뷰 가능한 Artifacts — 입니다. 많은 팀이 둘 다 씁니다 — Open Design을 쓰면 디자인 워크플로를 바꾸지 않고 에이전트를 전환할 수 있습니다.

  5. 05 Antigravity가 만든 것을 어떻게 검증하나요?

    Antigravity는 에이전트가 구동할 수 있는 통합 브라우저를 갖춰, UI를 렌더링하고 여러 브레이크포인트에서 점검하며 스크린샷과 브라우저 녹화를 Artifacts로 담습니다. 그 Artifacts를 리뷰하고 — 에이전트가 결과를 당신의 레퍼런스와 다시 비교하게 하는 것 — 이 결과를 스펙에 맞게 유지하는 방법입니다.

  6. 06 Open Design은 Google과 제휴 관계인가요?

    아니요. Antigravity는 Google의 제품이고, Open Design은 이를 1차 어댑터로 지원하는 독립적인 오픈소스 프로젝트입니다. Antigravity와 Gemini는 Google의 상표입니다.

  7. 07 제 파일과 자격증명은 안전한가요?

    네 — Open Design은 로컬 우선이고 Apache-2.0입니다. 파일·산출물·DESIGN.md는 당신 소유의 저장소에 머물고, Google 자격증명은 당신의 에이전트가 직접 사용하며 결코 Open Design 서버를 거치지 않습니다.

Antigravity로, 개방적인 방식으로 디자인하세요.

직접 쓰는 Google 계정을 가져오고, 모든 파일을 로컬에 두며, 이미 쓰는 에이전트 주위에 엄선된 디자인 라이브러리를 얻으세요.

● Apache-2.0 Apache-2.0 · 지구에서 제작 · BYOK 지원되는 모든 에이전트 보기