프로그램을 만든 뒤, 사용할 때마다 한 가지가 눈에 걸렸어요. 기능은 잘 돌아가는데, 화면이 영 투박하다는 거. 버튼 배치가 들쭉날쭉하고 색감도 뭔가 2000년대 초반 느낌이랄까요.
3일차에 원하는 기능을 모두 넣어서 꽤 좋은 프로그램이 됐다고 생각했어요. 그런데 다른 사람들에게 자랑하고 싶지만 '이 상태로 보여주는게 맞나?' 하는 생각이 자꾸 드는 겁니다. 사실 기능만 되면 됐지, UI 디자인이 뭐 그리 중요하냐고 할 수도 있어요. 저도 처음엔 그렇게 생각했고요. 근데 매일 사용하는 프로그램인데, 볼 때마다 허접해보이면 그것도 스트레스더라고요. 마치 지저분한 그릇에 담겨 있는 맛있는 음식 같은 느낌이었어요.
1. 디자인은 다음 문제라고 생각했는데
UI 디자인 문제는 바이브코딩을 경험해 본 사람이라면 한 번쯤 겪었을 상황이에요. 기능은 금방 붙는데, 디자인은 말로 설명하기가 애매하잖아요. "좀 깔끔하게 해줘"라고 하면 AI가 나름대로 바꿔주긴 하는데, 딱 원하는 느낌이 아닌 경우가 대부분이고요.
3일차에 UI 디자인만 좀 더 다듬고싶다 싶었는데, 솔직히 그때는 어디서부터 손대야 할지 감이 안 왔어요. 말로 디자인을 설명하는 것 자체가 비전공자한테는 어려운 일이니까요. "버튼을 좀 더 둥글게, 색은 좀 더 차분하게"라고 해봤자 나오는 결과물은 매번 기대와 달랐거든요.
2. Stitch 2.0을 발견했습니다
그래서 방법을 찾아보기 시작했어요. "UI 디자인"으로 검색하다가 Google Stitch 2.0이라는 걸 알게 됐습니다. 말로 설명하면 알아서 UI를 디자인해주고, 그 디자인을 코딩 도구에 바로 연결까지 할 수 있다는 내용이었어요. 가장 솔깃했던 건, Antigravity와 직접 연결된다는 점이었죠.
3. 디자인부터 연결까지, 삽질의 기록
Stitch 2.0에서 UI 디자인하기
Stitch 2.0 사이트에 들어가자마자 보게된건 Gemini와 대화하는 듯한 대화 입력창이었어요. 검색을 통해 이미 이 화면을 봐서 낯설지는 않았어요. 그런데 제가 본 소개영상은 홈페이지 디자인을 예시로 들어 프로그램에 대한 디자인은 어떻게 해야하는지 모르겠더라구요.
결국 유튜브에서 Stitch 2.0 사용법 영상을 더 찾아보고, 조금 더 자세한 설명이 필요한 부분 Gemini한테 물어보면서 하나씩 따라갔어요. 이때 깨달은 건, 새로운 도구를 처음 쓸 때는 "일단 부딪혀보자"보다 "영상 하나 보고 시작하자"가 훨씬 빠르다는 거였어요. 이전에 레퍼런스를 보여주면 결과가 좋아진다는 걸 배웠는데, 도구 학습에도 같은 원리가 적용되더군요.
사용법을 어느 정도 익히고 나서, Stitch에게 제 프로그램의 UI를 디자인해달라고 입력했어요. "내가 만든 프로그램인데 UI 디자인을 이쁘게 하고 싶어"라고 했더니, 1분 만에 화면이 나왔습니다.
솔직히 놀랐어요. Antigravity에서 "깔끔하게 해줘"라고 했을 때와는 차원이 달랐거든요. 레이아웃, 색상, 아이콘 배치까지 전부 한 번에 잡혀서 나온 결과물은 진짜 앱스토어에 있어도 이상하지 않을 수준이었어요. 각 요소의 간격도 일정하고, 색상 조합도 눈이 편했습니다. 디자인 전용 도구의 힘이 이런 거구나 싶었죠.
물론 한 번에 완벽하진 않았어요. 프로그레스 바 위치를 바꾸고 싶었고, 버튼 크기도 조정이 필요했는데, Stitch의 캔버스에서 채팅으로 수정 요청을 보내니까 바로 반영이 되더라고요. 말로 디자인을 고칠 수 있다는 게 이렇게 편한 건지 처음 알았습니다. 디자인 최종 완성에 걸린 시간은 Stitch 사용법 학습 포함해서 대략 1시간 반 정도였어요.
MCP 연결 & API 키 발급
디자인이 끝나고 나서 진짜 고비가 왔어요. Stitch에서 만든 디자인을 Antigravity로 보내려면 MCP라는 걸 통해서 연결해야 하는데, 그 첫 단계가 API 키 발급이었거든요.
MCP가 뭐냐면, 쉽게 말해 AI 프로그램인 Antigravity가 다른 프로그램인 Stitch를 사용할 수 있게 해주는 통로예요. Stitch가 디자인 데이터를 가지고 있으니, Antigravity가 그걸 받아서 코드에 적용하려면 이 통로가 필요한 거죠. 그리고 그 통로를 이용하는 허가증인 API 키가 있어야 합니다.
문제는 그 허가증을 어디서 받는지 못 찾았다는 거예요. Stitch 화면 이곳저곳을 뒤져봤는데 API 키 발급 메뉴가 대체 어디 있는 건지. 설정에 들어가면 될 것 같았는데, 설정이 어디에 있는지도 찾지 못했어요.
여기서도 결국 Gemini한테 물어봤습니다. "Stitch 2.0에서 API 키 어디서 발급받아?"라고 했더니 Stitch 사이트의 Settings에서 API Keys 메뉴를 찾으라고 알려주더군요. 그 뒤로는 알려준대로 무사히 API키를 발급받았습니다.
여러분도 바로 위에 있는 사진처럼 [ 메인화면 우측상단 프로필 클릭 - Stitch 설정 - 설정창 하단에 '키 만들기' 클릭 ] 이런 순서로 하시면 쉽게 발급받으실 수 있습니다. 키를 발급받으신 후에는 발급된 키 우측에 복사하기 버튼을 눌러서 필요한 곳에 붙여넣어 사용하세요.
Antigravity에 MCP 연결하기
API 키를 손에 쥐고 나니 그다음은 의외로 간단했어요. Antigravity에서 Stitch의 MCP를 검색해서 설치하고, API 키를 입력하는 것까지가 전부였거든요.
연결이 됐는지 확인하는 방법도 단순했어요. Antigravity 채팅창에 "내 Stitch 프로젝트 목록 보여줘"라고 치면, 아까 만들었던 디자인 프로젝트 이름이 뜨는 거예요. 그 이름이 화면에 뜨는 순간, 드디어 연결됐구나 싶어 가슴이 뻥 뚫리는 기분이었습니다.
API 키 발급부터 연결 완료까지 걸린 시간만 따지면 한 30분 정도. 근데 그 30분 중에 API 키 찾느라 헤맨 시간이 거의 절반이었어요. 알고 나면 별것 아닌데, 모를 때는 너무 어려운게 이런 종류의 작업인 것 같아요.
4. 이런 분이 읽으면 딱 좋아요
읽어보시면 좋을 분:
- AI로 프로그램은 만들었는데 UI가 아쉬워서 고민 중인 분
- Stitch 2.0이 뭔지 궁금한데 비전공자 시점의 후기를 찾고 계신 분
- MCP 연결이란 걸 처음 들어보는데 어렵지 않은지 알고 싶은 분
- 디자인 감각이 없어서 AI한테 맡기고 싶은 분
이 글이 안 맞을 수 있는 분:
- UI/UX 디자인 툴을 이미 능숙하게 다루시는 분
- MCP 서버 설정을 직접 해본 경험이 있는 분
5. 총평
| Stitch 2.0 사용 난이도 | ★★★☆☆ | 영상 없이 시작했으면 포기했을 수도. 영상 보고 익숙해지니 금방이었어요 |
| 디자인 결과물 만족도 | ★★★★★ | 3일차까지 "깔끔하게 해줘"로 안 되던 게 Stitch 한 방에 해결 |
| MCP 연결 난이도 | ★★★★☆ | API 키만 찾으면 나머지는 쉬워요. 개념 이해가 조금 어려웠을 뿐 |
| 전체 작업 시간 | ★★★☆☆ | 약 2~3시간. 학습 시간이 절반 이상이라 다음엔 훨씬 빠를 듯 |
| 비개발자 추천도 | ★★★★☆ | API 키 같은 개념이 낯설 수 있지만, 하나씩 따라가면 충분히 가능합니다 |
6. Stitch에서 디자인한 건 완성했고, 다음은 적용이다
4일차는 "디자인 + 연결"의 날이었어요. Stitch 2.0에서 원하는 UI를 만들고, MCP라는 다리를 놓아서 Antigravity까지 이어놓은 거죠. 오늘 바로 프로그램에 UI를 적용시키고 싶었지만, 어느새 잘 시간이 되어버렸더라구요. 어쩔 수 없이 UI 적용은 내일 해야할 것 같습니다.
그래도 오늘 작업하면서 가장 크게 느낀 건, 도구가 하나 더 늘어나면 할 수 있는 일의 범위가 넓어진다는 점이었어요. 1~3일차까지는 Antigravity 하나로 기능을 쌓아올렸는데, 거기에 Stitch가 더해지니 디자인이라는 영역까지 건드릴 수 있게 된 거잖아요.
지금 자신이 만든 프로그램의 UI가 아쉬우신 분이라면, Stitch 2.0 한번 둘러보세요. Stitch 2.0 사용법은 유튜브에 검색하면 영상이 꽤 나와요. 저처럼 영상 하나 틀어놓고 따라하면 첫 디자인까지 1시간이면 충분합니다. [Stitch 공식 사이트]
5일차에서는 이 디자인을 실제 프로그램에 적용하는 과정을 기록할 예정이에요. Antigravity에게 "Stitch에서 디자인 데이터 불러와서 기존 프로그램에 입혀줘"라고 했을 때 어떤 일이 벌어질지 빨리 보고싶어요.
| 3일차 글 보기: [사용하고 싶은 프로그램을 못찾으셨나요? Antigravity로 나만의 프로그램 만들기 [3일차]]
| 2일차 글 보기: [사용하고 싶은 프로그램을 못찾으셨나요? Antigravity로 나만의 프로그램 만들기 [2일차]]
| 1일차 글 보기: [사용하고 싶은 프로그램을 못찾으셨나요? Antigravity로 나만의 프로그램 만들기 [1일차]]
Q & A
Q1. Stitch 2.0은 무료인가요? 네, 무료예요. Google 계정만 있으면 바로 쓸 수 있고, 월 350회 디자인 생성이 가능합니다. 저는 4일차 작업에서 10회도 안 썼어요.
Q2. Stitch 사용법을 따로 배워야 하나요? 저는 유튜브 영상 하나 보고 시작했어요. 완전 처음이라 헤맸지만 영상 보면서 따라하니까 30분이면 기본 사용법은 익히더라고요. 코딩 지식은 전혀 필요 없습니다.
Q3. MCP가 정확히 뭔가요? 꼭 필요한 건가요? MCP는 프로그램끼리 데이터를 주고받는 통로라고 보면 돼요. Stitch에서 만든 디자인을 Antigravity가 읽으려면 이 통로가 필요합니다. 없으면 디자인을 수동으로 옮겨야 해서 훨씬 번거로워요.
Q4. API 키 발급이 어렵지 않나요? 솔직히 처음엔 어디 있는지 모르겠어서 당황했어요. 근데 Stitch 설정에 들어가면 API Keys 메뉴가 있고, 거기서 버튼 한 번이면 발급 완료예요. 위치만 알면 30초도 안 걸립니다.
Q5. Antigravity 없이 다른 코딩 도구에도 연결할 수 있나요? 네, Stitch MCP는 Antigravity 말고도 Claude Code, Cursor, Gemini CLI 같은 다른 개발 도구와도 연결할 수 있어요. 저는 Antigravity를 쓰고 있어서 그쪽으로 연결한 거고요.
Q6. 디자인 수정은 쉽게 되나요? Stitch 캔버스에서 채팅으로 "버튼 모서리를 더 둥글게 해줘"라고 하면 바로 반영돼요. 말로 수정하는 방식이라 포토샵처럼 도구를 직접 다룰 필요가 없어서 비전공자한테 특히 편합니다.
Q7. 4일차까지의 작업으로 프로그램이 완성된 건가요? 아직이에요. 디자인은 만들어졌고 연결도 해놨지만, 실제 프로그램에 디자인을 입히는 건 5일차에서 진행합니다. 지금은 옷은 골랐는데 아직 안 입힌 상태라고 보시면 돼요.