개발자나 기획자분들, 솔직히 프론트엔드 작업하다가 피 토한 적 한두 번 아니죠? 백엔드 로직은 어떻게든 짜겠는데, CSS 만지다가 하루 다 가고 디자인은 '개발자스러운' 투박함에서 벗어나질 못하고요. (저도 예전엔 버튼 색깔 맞추느라 밤샜습니다)
근데 이번에 구글 스티치(Stitch) 스킬이 안티그래비티(AntiGravity) IDE에 들어왔다는 소식 듣고 바로 써봤거든요? 이건 진짜 물건입니다. 단순히 코드를 짜주는 게 아니라, '디자인 감각'이 있는 에이전트가 내장된 느낌이에요. 피그마(Figma) 왔다 갔다 할 필요 없이 채팅창에서 바로 결과물이 튀어나옵니다.
- 안티그래비티 + 구글 스티치: 디자인부터 리액트 컴포넌트까지 대화 한 번으로 끝내는 조합 탄생.
- 단순 코딩 아님: 'Design MD'라는 독자 규격으로 레이아웃과 미적 요소를 먼저 잡고 코딩함. (예쁨 보장)
- 지금 당장 무료: 깃허브 명령어 한 줄이면 설치 끝. 프론트엔드 외주비 아끼고 싶다면 무조건 써봐야 함.
구글 스티치(Stitch)가 도대체 뭐길래?
쉽게 말해 '프론트엔드 전문 AI 에이전트'라고 보시면 돼요. 기존 안티그래비티가 "코드를 짜줘"에 반응했다면, 스티치 스킬이 합쳐지면 "이런 느낌으로 랜딩 페이지 디자인해서 배포까지 해줘"가 가능해집니다.
설치도 웃음 나올 정도로 간단해요. 안티그래비티 채팅창에 깃허브 설치 명령어만 치면 끝납니다. 설치되면 딱 두 가지 핵심 스킬이 생기는데요.
- 🎨 Design MD: 여러분의 추상적인 아이디어를 '디자인 언어' 파일로 변환합니다. 레이아웃, 컬러 팔레트, 구조를 정의하죠.
- ⚛️ React Components: 위 디자인 파일을 바탕으로 실제 작동하는 리액트(React)나 타입스크립트 코드를 생성합니다.
즉, "대충 심플하게 만들어줘"라고 해도 찰떡같이 알아듣고 시스템화된 디자인을 뽑아낸다는 거죠.
직접 써봤습니다 (feat. 에이전시 웹사이트 리뉴얼)
말로만 떠들면 안 믿으실 테니, 제가 운영하는 가상의 에이전시 사이트 리뉴얼을 맡겨봤습니다. 프롬프트는 딱 한 줄 줬어요.
"구글 스티치 스킬을 사용해서 Goldie Agency 랜딩 페이지를 현대적인 미니멀리즘 스타일로 리디자인해줘."
결과가 어땠을까요? (솔직히 좀 소름 돋았습니다)
1. 구조 분석 및 Design MD 생성
순식간에 기존 레이아웃을 분석하더니, 타이포그래피와 여백 규칙(Spacing)이 담긴 Design MD 파일을 먼저 만들더라고요. 무작정 코딩부터 하는 게 아니라 '설계도'를 먼저 그리는 겁니다.
2. 리액트 컴포넌트 자동화
그다음 리액트(React) 코드를 뱉어내는데, 지저분한 인라인 스타일이 아니라 재사용 가능한 컴포넌트로 쪼개서 줍니다. 웬만한 주니어 개발자가 짠 것보다 깔끔해요. 다크 모드 변경? "다크 테마로 바꿔줘" 한마디면 전체 CSS 토큰이 싹 바뀝니다. 이거 원래 손으로 하려면 반나절 걸리는 거 아시죠?
다른 툴이랑 뭐가 다른데? (Claw Code vs Gemini CLI)
"어차피 AI 코딩 툴 널렸잖아"라고 생각하실 수 있습니다. 저도 처음엔 의심했으니까요. 제가 써본 경험으로 비교해 드릴게요.
| 구분 | Claw Code | Gemini CLI | AntiGravity + Stitch |
|---|---|---|---|
| 강점 | 백엔드, 복잡한 로직 | 터미널 작업, 스크립트 | 프론트엔드 비주얼, UI/UX |
| 추천 대상 | 헤비 개발자 | 시스템 엔지니어 | 창업가, 디자이너, 프리랜서 |
백엔드 로직을 깊게 파야 한다면 Claw Code가 낫습니다. 하지만 "눈에 보이는 웹사이트나 대시보드를 빨리 찍어내야 한다"면 안티그래비티와 스티치 조합을 따라올 툴이 지금은 없어요.
자주 묻는 질문 (FAQ)
이 글이 도움 되셨나요?
더 궁금한 점은 댓글로 남겨주세요. 제가 아는 선에서 최대한 답변 드릴게요!
면책조항: 이 글은 정보 제공을 목적으로 작성되었으며, 특정 소프트웨어의 사용을 강요하지 않습니다. AI 툴의 기능과 정책은 개발사의 사정에 따라 예고 없이 변경될 수 있습니다.
