포스트

[Antigravity #3] 인터페이스 200% 활용하기 (왕초보 가이드)

[Antigravity #3] 인터페이스 200% 활용하기 (왕초보 가이드)

Antigravity Interface

Editor’s Note
처음 Antigravity를 켜면 “어? 코딩하는 창이 어디 갔지?” 하고 당황하실 수 있습니다.
걱정 마세요. 여러분이 길을 잃지 않도록 딱 중요한 3가지 화면만 콕 집어 설명해 드립니다.


1. 전체 지도 (Big Picture)

Antigravity는 크게 두 구역으로 나뉩니다.

  • 왼쪽: 매니저 뷰 (Manager View) → 👮‍♂️ 지시하는 곳
  • 오른쪽: 에디터 뷰 (Editor View) → 👷 일하는 곳

이것만 기억하세요: “왼쪽에서 시키고, 오른쪽에서 확인한다.”

조금 더 실무적으로 말하면, 매니저 뷰는 “작업을 맡기는 화면”이고 에디터 뷰는 “작업 결과를 검토하는 화면”입니다. Antigravity를 처음 쓸 때 흔한 실수는 에이전트에게 일을 맡겨놓고 결과 확인 없이 다음 작업을 또 던지는 것입니다. 화면을 나눠 쓰는 이유는 일을 더 많이 시키기 위해서가 아니라, 진행 상황과 증거를 놓치지 않기 위해서입니다.

작업 흐름은 보통 이렇게 잡으면 편합니다.

  1. 매니저 뷰에서 목표와 제약을 설명한다.
  2. 에이전트가 만든 계획과 변경 파일을 확인한다.
  3. 에디터 뷰에서 실제 diff를 검토한다.
  4. 아티팩트에서 스크린샷, 테스트 결과, 실행 로그를 확인한다.
  5. 부족한 부분만 다시 지시한다.

2. 매니저 뷰 (Manager View): 우리의 관제탑

화면 왼쪽, 채팅창처럼 생긴 곳입니다. 여기가 여러분이 가장 많이 머물 곳입니다.

💬 채팅 입력창 (Command Center)

카카오톡 하듯이 AI에게 말을 거는 곳입니다.

  • “이거 만들어줘”, “저거 고쳐줘”
  • 파일을 드래그해서 던져주면 “이 파일 분석해줘”가 됩니다.

📋 에이전트 목록 (Agent List)

여러 명의 AI 알바생(?)들이 대기하고 있는 곳입니다.

  • Worker #1: 지금 코드를 짜고 있음
  • Browser Agent: 웹사이트를 탐색 중임
  • Planner: 전체 계획을 세우는 중임

여러분이 할 일은 그저 “누가 잘하고 있나 가끔 쳐다보는 것”뿐입니다.

하지만 정말 중요한 변경이라면 “가끔 쳐다보기”로 끝내면 안 됩니다. 에이전트 목록에서는 누가 어떤 작업을 맡았는지, 멈춘 에이전트가 있는지, 사람 승인이 필요한 단계가 있는지 확인해야 합니다.

특히 여러 에이전트를 동시에 돌릴 때는 작업 이름을 구체적으로 붙이는 습관이 좋습니다.

  • Frontend login form
  • API auth validation
  • Playwright smoke test

이름이 구체적이면 나중에 아티팩트와 변경 파일을 추적하기 쉽습니다.


3. 에디터 뷰 (Editor View): 작업실

화면 오른쪽, 익숙한 코드들이 보이는 곳입니다. VS Code와 거의 똑같이 생겼습니다.

📝 코드 편집기

AI가 작성한 코드가 실시간으로 타이핑되는 것이 보입니다.

주의! ✋ AI가 신들린 듯 타자를 치고 있을 때, 갑자기 끼어들어서 수정하지 마세요. (AI가 “어? 내 코드 어디 갔지?” 하고 꼬일 수 있습니다.)

수정이 필요하면 에디터에서 바로 끼어들기보다, 먼저 에이전트에게 “이 부분은 방향을 바꿔줘”라고 지시하는 편이 안전합니다. 직접 수정해야 한다면 에이전트 작업이 멈춘 뒤 변경하세요.

검토할 때는 전체 파일을 다 읽기보다 아래 순서로 보면 빠릅니다.

확인 위치 볼 것
변경 파일 목록 예상한 파일만 바뀌었는지
diff 불필요한 리팩터링이 섞였는지
테스트 결과 실제로 실행했는지, 실패를 숨기지 않았는지
브라우저 스크린샷 UI가 의도대로 보이는지

📦 아티팩트 (Artifacts) 패널 ✨중요✨

오른쪽 구석에 있는 이 패널을 주목하세요. 채팅 로그는 흘러가면 끝이지만, 중요한 결과물은 여기에 차곡차곡 쌓입니다.

  • 📄 Plan.md: AI가 세운 계획표
  • 🖼️ Screenshot: AI가 테스트하다 찍은 스크린샷
  • 📊 Diagram: AI가 그린 구조도

“아까 그거 어디 있지?” 싶을 땐 무조건 아티팩트 패널을 보세요.

아티팩트는 에이전트의 “작업 영수증”입니다. 중요한 작업일수록 결과물 자체보다 아티팩트를 먼저 확인하세요.

좋은 아티팩트에는 아래 내용이 들어갑니다.

  • 구현 계획
  • 변경한 파일 요약
  • 실행한 명령과 결과
  • 브라우저 스크린샷 또는 녹화
  • 남은 위험 요소

이 중 하나도 없다면 “정말 확인한 것인지”를 다시 물어보는 것이 좋습니다.


4. 200% 활용 꿀팁: “Manager Mod”

많은 분들이 모르는 숨겨진 기능을 하나 알려드릴게요.

Cmd + M (윈도우는 Ctrl + M) 을 눌러보세요. 화면이 ‘매니저 모드’로 바뀌면서 코드는 작아지고, 에이전트들의 상태가 대시보드처럼 한눈에 보입니다.

“내가 직접 코드를 볼 필요 없을 때, 그냥 팔짱 끼고 구경하고 싶을 때”
이 모드를 켜두면 정말 IT 기업 팀장이 된 기분을 느낄 수 있습니다. 😎

Manager Mode는 구경용이라기보다 병렬 작업을 관리하는 화면에 가깝습니다. 여러 작업을 동시에 맡길수록 “어느 에이전트가 어떤 근거로 완료했다고 말하는지”가 더 중요해집니다.

처음에는 자율성을 낮게 두고, 아래 상황에서만 범위를 넓혀보세요.

  • 테스트가 잘 갖춰진 저장소
  • 되돌리기 쉬운 작은 변경
  • 명확한 성공 기준이 있는 작업
  • 아티팩트를 꾸준히 확인할 시간 여유가 있는 작업

반대로 배포, 결제, 데이터 삭제, 권한 변경처럼 되돌리기 어려운 작업은 사람이 마지막 결정을 해야 합니다.


5. 오늘의 요약

  1. 왼쪽(매니저 뷰)에서 말하고, 오른쪽(에디터 뷰)에서 확인한다.
  2. 중요한 자료는 말풍선 위로 사라지기 전에 아티팩트 패널에서 검토한다.
  3. Manager Mode는 병렬 작업의 상태와 승인 지점을 관리할 때 유용하다.

이제 조작법은 마스터했습니다! 다음 편 [Antigravity #4] 에서는 Antigravity의 꽃, “내 손안의 브라우저(Browser Agent)”를 사용하여 웹사이트를 자동으로 돌아다니게 시켜보겠습니다.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.