AI 도구 소개

Google Stitch 는 Google Labs 의 자연어·이미지 → UI 디자인 + 코드 도구. Figma 의 자동 디자인 측면과 v0.dev 의 컴포넌트 생성 측면이 Google 톤 으로 결합된 자리. 14-ai-web-ides 가 풀스택 앱 빌더라면 Stitch 는 디자인 + 프론트엔드 코드 단계에 특화.

10-ai-coding-ides 가 데스크탑 IDE (Cursor · Windsurf · Kiro · Trae · Antigravity) 의 자리라면, 본 글은 브라우저만으로 AI 가 코드 + DB + 배포까지 만드는 자리 — AI Web IDE 와 AI 앱 빌더 — 를 정리합니다.

AI 가 브라우저 안으로 들어오는 흐름이 2023~2025 년에 빠르게 진행됐습니다. 사이드바 보조에서 시작해 페이지 요약·번역·드래프트, 그리고 에이전트가 사용자 대신 페이지를 다루는 자리까지 펼쳐졌습니다.

LLM 을 단발 호출로 쓰는 자리를 넘어, 여러 단계의 자동화·통합 흐름으로 묶는 도구가 늘었습니다. 코드 작성 없이 노드를 잇거나 (GUI), 자체 호스팅으로 운영 통제권을 두는 가닥이 다양합니다.

IDE 안에서 동작하는 보조 도구와 별개로, 터미널 CLI 형태의 AI 코딩 도구가 따로 자라고 있습니다. 셸·SSH·CI 와의 친화성, 스크립트 자동화, 가벼운 인터페이스가 동기.

2023 년 Cursor 가 GA 가 된 즈음부터 "AI 가 메인 인터랙션" 인 IDE 가 빠르게 늘었습니다. VS Code 포크 또는 신규 에디터 형태로 다양한 시도가 있습니다. 능력 평가는 시점에 따라 빠르게 바뀌므로 사실 위주로.

AI 코딩 보조 도구가 늘어나면서 "프로젝트 규칙·맥락을 한 파일에 적어 두자" 는 관습이 자리 잡았습니다. 도구마다 이름과 위치가 조금씩 다르지만 의도는 비슷합니다.

LLM 에이전트가 도구를 호출하기 전·후에 외부 동작을 끼우고 싶어지는 자리가 있습니다. 자동 포매터 실행, 변경 감시, 로깅, 정책 검증, 비밀 누출 차단 같은 작업입니다.

큰 작업을 한 LLM 인스턴스 한 번에 맡기면 컨텍스트가 빠르게 차고 책임이 흐려집니다. 서브에이전트는 작업을 작은 단위로 잘라 별도 모델 인스턴스에 위임하는 패턴입니다. 컨텍스트 절약 · 병렬성 · 역할 분리가 동기이고, 디버깅 · 메시지 디자인이 비용입니다.

Claude Code 는 Anthropic 이 2025 년 2 월에 공개한 터미널 기반 코딩 보조 CLI 입니다 (연구 프리뷰 시점). 이후 일반 가용성으로 옮겨가며 IDE 통합 · GitHub Actions · Skills 같은 기능이 추가됐습니다.

Google 이 2025 년에 공개한 Agent Development Kit (ADK) 는 LLM 기반 에이전트와 멀티에이전트 시스템을 만들기 위한 오픈소스 프레임워크입니다. Vertex AI 와의 통합을 의식하지만 모델·런타임에 대해 비교적 중립적이라는 점이 특징.

디자인 도구의 정보를 코드 작성 LLM 에 전달하는 시도가 늘어나고 있습니다. 디자이너가 만든 화면을 LLM 에게 보여주고 컴포넌트·토큰·레이아웃을 코드로 옮기는 자리에서 Figma 의 위치가 가장 큽니다. 2025 년에 Figma 가 공식 Dev Mode MCP 서버를 공개하면서 이 흐름이 표준화 단계로 들어갔습니다.

LLM 의 학습 데이터 시점이 늘 최신과 어긋납니다. 라이브러리 문서·API 명세는 자주 바뀌고, 모델은 옛 정보를 자신감 있게 답합니다. 문서를 LLM 친화 형식으로 노출하는 MCP 서버·서비스가 그 자리에 등장했습니다.

MCP 가 표준이라면 클라이언트는 그 표준을 실제로 사용자에게 노출하는 진입점입니다. 같은 서버를 여러 클라이언트에서 동시에 쓰는 멀티클라이언트 환경이 현실입니다.

Model Context Protocol (MCP) 은 LLM 클라이언트가 외부 데이터·도구·프롬프트와 표준화된 방식으로 연결하기 위한 프로토콜입니다. Anthropic 이 2024 년 11 월에 공개했고 이후 다른 AI 도구·IDE 가 빠르게 채택했습니다.