퇴근 후 컴퓨터 앞에 앉으면서 묘한 긴장감이 있었어요. 4일차에 Stitch 2.0으로 공들여 만든 디자인이 Antigravity를 통해 실제 프로그램에 입혀지는 날이잖아요. 마음에 드는 물건을 장바구니에 담아두고 구매버튼을 누르기 직전의 기분이랄까요. 실제로 구매하기 전까진 내 마음에 꼭 드는지 알 수 없으니까요.
4일차에서 Stitch와 Antigravity 사이에 MCP라는 다리를 놓아뒀어요. 디자인 데이터는 준비됐고, 통로도 열려있고. 남은 건 Antigravity한테 "이 디자인 입혀줘"라고 말하는 것뿐이었습니다. 과연 이번에도 한마디면 될까, 아니면 또 어딘가에서 막힐까. 기대감과 불안감이 공존하는 순간입니다.
1. 디자인은 골랐는데, 입히는 건 또 다른 문제
사실 이 부분이 가장 걱정이었어요. 디자인을 예쁘게 만드는 것과, 그 디자인을 돌아가는 프로그램에 적용하는 건 완전히 다른 이야기거든요. 마치 인테리어 시안은 멋지게 나왔는데, 실제 시공하면 벽 크기가 안 맞거나 콘센트 위치가 어긋나는 것처럼요.
1일차부터 4일차까지 쌓아온 기능들(URL 입력, 엑셀 불러오기, 프로그레스 바, IP 차단 감지 등)이 디자인을 바꾸는 과정에서 혹시 망가지면 어쩌나 하는 걱정도 있었습니다. 디자인 바꾸려다 기능이 고장 나면 그거야말로 최악이니까요.
2. Antigravity에게 마지막 임무를 맡기다
한 문장으로 시작된 UI 디자인 작업
UI 디자인을 적용하기 위해 Antigravity 채팅창에 이렇게 입력했어요.
"연결된 Stitch MCP에서 디자인 데이터를 불러와. 기존 프로젝트의 비즈니스 로직은 완벽히 유지하고, 프론트엔드 UI 컴포넌트와 스타일만 새 디자인에 맞춰서 코드 레벨로 완전히 교체해." (이 입력문은 Gemini에게 UI 디자인 입력 프롬프트 짜달라고 했어요.)
엔터를 누르고 나서 화면을 바라보는데, Antigravity가 무언가를 분석하기 시작하더라고요. Stitch에서 디자인 데이터를 가져오고, 색상 팔레트를 추출하고, 레이아웃 구조를 파악하고. 작업 내역이 주르륵 올라가는 걸 보면서 "지금 뭘 하고 있는 건지 하나도 모르겠지만, 뭔가 열심히 해내고 있구나" 싶었습니다.
특히 인상 깊었던 건, Antigravity가 디자인에 필요한 패키지를 알아서 설치하는 장면이었어요. Stitch 디자인에 사용된 아이콘이나 UI 라이브러리가 있으면, 그걸 프로그램에 적용하려면 추가 도구가 필요하잖아요. 그걸 제가 뭐가 필요한지 파악할 필요도 없이 Antigravity가 분석해서 자동으로 설치할지 물어보더라구요. 저는 그냥 "Run" 버튼만 누르면 끝이었어요.
UI 디자인 결과물 확인
작업이 끝났다는 메시지가 뜨고, 프로그램을 실행했어요.
솔직히 처음에는 당황했어요. 제가 Stitch에서 만든 디자인은 이 결과물과는 큰 차이가 있었거든요. 알고보니 Stitch가 만들어준 디자인에는 제 프로그램이 담고 있지 않은 기능들도 많이 탑재되어 있었는데, 기존에 프로그램이 가지고 있던 기능들만 살려서 디자인을 하다보니 휑한 디자인이 완성되어 버린거였어요.
잠시 생각하던 저는 Antigravity에게 디자인에 있는 내용들 모두 그대로 표시되도록 만들어달라고 했습니다. 제 프로그램에는 없는 기능이었지만, 자세히보니 나중에 추가하면 좋을 것 같은 기능들도 많이 있었거든요. 이참에 UI라도 미리 구축놓을 겸, 디자인도 완성시킬 겸 하여 최대한 디자인과 같은 모습을 만들기로 하였습니다.
완성본을 본 저는 이게 같은 프로그램 맞나 싶었습니다. 3일차까지 쓰던 투박한 화면이 완전히 사라지고, Stitch에서 봤던 그 깔끔한 디자인이 그대로 올라와 있었거든요. 버튼 색상, 입력창 모서리, 아이콘 하나하나까지 전부 바뀌어 있었어요. 심지어 배치도 구성지게 바뀌어 있었죠.
혹시 이전 UI 디자인과의 차이가 궁금하신 분들께서는 3일차 글에서 찾아보실 수 있습니다.
[사용하고 싶은 프로그램을 못찾으셨나요? Antigravity로 나만의 프로그램 만들기 [3일차]]
UI 적용 후 실제 작동 테스트
이제 디자인까지 완료된 프로그램이 잘 작동하는지 테스트 해보았어요. 디자인만 적용되고 기능이 안되면 의미가 없으니까요.
그런데 테스트해보기를 잘했어요. 정말 놀라울 정도로 아무런 기능도 실행되지 않았거든요. 디자인 하려다가 프로그램이 망가진 줄 알고 순식간에 정신이 아득해졌어요. 놀란 마음을 잠시 진정시킨 뒤, Antigravity에게 고쳐달라고 했습니다.
이번에도 많은 과정을 거쳤습니다. 버튼들이 전부 기능을 하지않으니 고쳐달라, 저장 경로 설정이 문제가 있으니 고쳐달라, 다운로드할 때 실시간 로그가 나오지 않으니 고쳐달라 등 하나씩 테스트를 거치며 기능들이 전부 작동할 때까지 수정을 해나갔습니다.
그리고 마침내 모든 기능들이 구동되기 시작했고, 드디어 저는 사진 자동 저장 기능과 디자인을 겸비한 프로그램의 제작에 성공하게 되었습니다.
물론 앞으로도 기능의 추가가 더 이루어질지도 모릅니다. 하지만 이제는 기능의 추가도, 새로운 프로그램의 제작도 더 이상 어렵게 느껴지지 않습니다. 아직도 코딩에 대해 아무것도 모르지만, AI를 이용하여 제가 원하는 기능의 프로그램을 만들어 가는 것이 가능해졌으니까요.
3. Before & After
| 1일차 | 2일차 | 3일차 | 4일차 | 5일차 | |
| 핵심 작업 | 프로그램 첫 생성 | 일괄 다운로드·병렬 처리 | 진행률 표시·엑셀 연동 | Stitch 디자인·MCP 연결 | 디자인 적용·최종 완성 |
| UI 상태 | 기능만 되는 투박한 화면 | AI 추천 디자인 적용 | 2일차와 동일 | 디자인 완성 (미적용) | Stitch 디자인 전면 적용 |
| 작업 시간 | 2시간+ | 1시간 반 | 1시간 | 2~3시간 | 1시간 반 |
| 막힌 포인트 | AI 소통 방법 | 할당량 초과 | 없음 | API 키 발급 위치 | 프로그램 기능 오류 |
| URL 30개 작업 시간 | 약 7분 | 약 3분 | 약 3분 | 약 3분 | 약 3분 |
4. 이런 분이 읽으면 딱 좋아요
읽어보시면 좋을 분:
- AI 도구끼리 연결해서 결과물을 만드는 게 실제로 되는지 궁금한 분
- "비전공자가 5일 만에 뭘 완성할 수 있을까?"에 대한 리얼 후기가 필요한 분
- Antigravity와 Stitch 2.0의 조합이 어떤 결과를 내는지 보고 싶은 분
- 자동화 프로그램을 만들어봤지만 완성도를 어떻게 높일지 고민 중인 분
이 글이 안 맞을 수 있는 분:
- 프론트엔드 개발을 직접 하시는 분
- 디자인 시스템 구축 경험이 이미 있는 분
5. 총평
| 디자인 적용 난이도 | ★★★★☆ | 문장 하나로 거의 끝남. 미세 조정만 직접 요청하면 돼요 |
| 기존 기능 유지 | ★★★★★ | 겉만 바꾸고 속은 완벽 보존. 이게 제일 놀라웠어요 |
| Before/After 체감 | ★★★★★ | 같은 프로그램 맞나 싶을 정도. 주변에 보여줬더니 다들 놀라더군요 |
| 5일 전체 난이도 | ★★★★☆ | 중간중간 헤맸지만 포기할 정도는 아니었어요. 매일 조금씩 나아졌으니까요 |
| 비개발자 추천도 | ★★★★★ | 코딩 한 줄 모르고 시작해서 5일 만에 여기까지 왔습니다. 증거는 이 글 전체예요 |
6. 5일간의 여정을 마치며
돌이켜보면 참 신기한 5일이었어요.
1일차, "AI한테 말 몇 마디 했더니 프로그램이 나온다고?" 하면서 반신반의했던 게 엊그제 같은데요. 2일차에는 할당량 초과에 데이고 나서 우선순위를 정하는 법을 배웠고, 3일차에는 편의 기능을 척척 붙이면서 자신감이 붙었습니다. 4일차에 Stitch라는 새로운 도구를 만나 디자인 영역까지 넘어갔고, 5일차인 오늘 그 디자인을 실제로 입혀서 완성품을 손에 쥐었어요.
수작업으로 1시간 넘게 걸리던 상품 이미지 저장이 3분으로 줄었습니다. 투박하기 그지없던 화면은 앱스토어에 올려도 될 법한 모습으로 탈바꿈했고요. 가장 큰 변화는 프로그램 자체가 아니라 저 자신인 것 같아요. "코딩 한 줄 모르는 사람이 프로그램을 만든다"는 게 가능하다는 걸 몸으로 증명한 5일이었으니까요.
이 5일 동안 제가 배운 건 코딩이 아니었어요. AI한테 내가 원하는 걸 정확히 전달하는 방법, 새 도구가 나오면 겁먹지 않고 일단 영상 하나 보고 따라해보는 습관, 그리고 "안 되면 다른 AI한테 물어보면 된다"는 유연한 사고방식. 이 세 가지가 진짜 남은 것들이에요.
지금 이 글을 읽고 계신 분이 "나도 해볼까?"라는 생각이 조금이라도 드셨다면, 이렇게 시작해보세요.
- Antigravity를 다운로드합니다. [공식 사이트 링크]
- 채팅창에 이렇게 입력해보세요. "나는 OOO 기능을 하는 프로그램을 만들고 싶어."
- AI가 물어보는 질문에 하나씩 대답하면, 프로그램이 만들어집니다.
디자인까지 신경 쓰고 싶다면 Stitch 2.0을 열어서 원하는 화면을 그려보세요. [Stitch 공식 사이트] 4일차 글에 적어둔 것처럼 MCP로 연결하면 Antigravity가 알아서 입혀줍니다.
1일차의 저는 정말 아무것도 몰랐어요. 5일차가 된 지금, 저는 업무용 프로그램 하나를 처음부터 끝까지 완성한 사람이 됐습니다. 다음에는 또 다른 업무의 반복 작업을 해결할 도구를 만들어볼 생각이에요. AI와 함께라면, 필요한 프로그램은 직접 만드는 시대가 진짜 온 것 같습니다.
| 4일차 글 보기: [사용하고 싶은 프로그램을 못찾으셨나요? Antigravity로 나만의 프로그램 만들기 [4일차]]
| 3일차 글 보기: [사용하고 싶은 프로그램을 못찾으셨나요? Antigravity로 나만의 프로그램 만들기 [3일차]]
| 2일차 글 보기: [사용하고 싶은 프로그램을 못찾으셨나요? Antigravity로 나만의 프로그램 만들기 [2일차]]
| 1일차 글 보기: [사용하고 싶은 프로그램을 못찾으셨나요? Antigravity로 나만의 프로그램 만들기 [1일차]]
Q & A
Q1. Stitch 디자인이 프로그램에 100% 그대로 적용되나요? 거의 그대로인데, 버튼 위치나 크기 같은 소소한 차이는 있었어요. 저는 두세 번 수정 요청으로 해결했고요. 99%는 된다고 보시면 돼요.
Q2. 4일차를 안 읽어도 5일차만 봐도 되나요? 흐름은 따라올 수 있지만, Stitch 디자인과 MCP 연결 과정은 4일차에 있어요. 디자인 적용 결과만 보고 싶다면 이 글만으로도 충분하고, 직접 해보고 싶다면 4일차부터 보시는 게 좋습니다.
Q3. 패키지 자동 설치는 안전한 건가요? Antigravity가 디자인에 필요한 공식 라이브러리만 설치하는 거라 걱정 안 하셔도 돼요. 저도 처음엔 뭘 깔고 있는 건가 싶었는데, 설치 목록을 보여주면서 진행하더라고요.
Q4. 5일 전체에 총 몇 시간 들었나요? 대략 정리하면 1일차 2시간, 2일차 1시간 반, 3일차 1시간, 4일차 2~3시간, 5일차 1시간 반. 합치면 8~9시간 정도요. 매일 퇴근 후에 1~2시간씩 투자한 셈이에요.
Q5. 완성 후에 프로그램 업데이트는 어떻게 하나요? 새 기능이 필요하면 Antigravity한테 말하면 됩니다. 5일 동안 해온 것처럼 "이 기능 추가해줘"라고 하면 돼요. 디자인도 Stitch에서 수정하고 다시 적용하면 되고요.
Q6. 이 시리즈를 처음 보는 사람은 어디서부터 읽으면 좋을까요? 1일차부터 순서대로 보시는 걸 추천해요. 프로그램이 없는 상태에서 완성까지의 전 과정이 담겨있거든요.