leeruji의 작업 기록

Do it! 바이브 코딩 + 안티그래비티 스터디 1주차 - AI를 활용한 개발에 적응하기

바이브코딩 + 안티그래비티 스터디를 시작하며 If you are not embarrassed by the first version of your product,…

티스토리에서 옮겨 온 글이에요.

바이브코딩 + 안티그래비티 스터디를 시작하며
If you are not embarrassed by the first version of your product, you've launched too late.
제품의 첫 번째 버전이 당황스럽지 않다면 너무 늦게 출시한 것이다. - 리드 호프만

최근 경험한 사이드 프로젝트에서는 기획만 해도 최소 2~3주가 걸렸다.

한 번에 완벽한 제품으로 출시하려 앱을 보완하다보면 MVP는 점점 무거워지고,
공들여 출시한 앱이 사용자의 반응을 얻지 못하면 그 만큼 인력과 리소스가 낭비된다.

1. MVP를 바이브코딩으로 가볍게 구현한 뒤, 사용자 의견을 먼저 받아본다면 효율적이겠다는 생각이 들었다.
2. 셋로그처럼 가벼운 구조의 앱들이 유행하는 것처럼 규모가 작은 아이디어를 혼자서 빠르게 구현하고 싶을 때가 있었고
3. 개발 협업 감각을 기르고 싶은 니즈가 있어 바이브코딩을 배워두면 도움이 될 것 같았다.

감사하게도 이지스퍼블리싱에 신청했던 서평단에 선정되었다!

친절하게도 시트에 스터디 진도표가 상세하게 나와있어서 따라하기 편했다!
친절하게도 시트에 스터디 진도표가 상세하게 나와있어서 따라하기 편했다!

책이 출간되고 바로 안티그래비티가 2.0으로 업데이트되었지만, 디스코드에 실시간 스터디 질문채널이 있었고
부트캠프에서 VS CODE(HTML과 CSS)를 찍먹해봤던 경험이 있었기에 큰 어려움이 없었다.


첫째마당 | AI를 활용한 개발에 적응하기 (14~57p)

사실 책을 읽기 전까지는 '안티그래비티'가 무엇이고 어떤 구조로 작업되는지 몰랐다.

기존 AI 도구를 사용하면 오류가 발생했을 때 사람이 꼭 개입해서 상황을 전달해 주어야 했고, 반복적으로 작성이 필요한 보일러플레이트 코드, 복잡한 환경 설정, 끝없는 디버깅, 번거로운 배포 과정이 생김에 따라 개발자는 '이걸 어떻게 구현할까?'에 집중하게 된다고 한다.

그런데 바이브코딩을 사용하면 개발자가 모든 오류를 직접 해결하지 않고 AI 에이전트를 고용하여
AI 에이전트의 계획을 검토하고 승인하는 감독관 역할을 하게 되며 '이걸 왜 이렇게 만들어야 하지?'라는 질문을 통해 더 좋은 가치를 만들 수 있다고 한다!


디자이너 관점에서는, AI 에이전트가 있어도 효율적인 지시나 큰 실수의 예방을 위해 개발 지식이 필요한 감독 작업들이 있다고 생각된다. 이 책에서도 그 부분을 고려하여 안전하게 바이브 코딩을 활용하는 보안 원칙들을 알려주지만, 이번에는 체험을 위해 가볍게 지식을 습득하는 것이고 디자인에 집중하지 않고 모든 것을 관리감독할 수는 없다.

그래서 바이브코딩이 상용화된다고 해서 개발자의 수요가 없어진다기 보다는, 앞으로는 AI 활용과 기획을 잘 하는 개발자의 수요가 늘어나지 않을까 싶다. (이건 디자인 취업시장에서도 마찬가지..ㅎㅎ)

AI 에이전트가 상황에 따라 직군별 역할을 수행할 수 있도록 ROCK 프롬프트 작성법도 설명되어 있다.
AI 에이전트가 상황에 따라 직군별 역할을 수행할 수 있도록 ROCK 프롬프트 작성법도 설명되어 있다.

안티그래비티 설치하기

Google Antigravity

Google Antigravity - Build the new way

antigravity.google

구글 안티그래비티와 구글 안티그래비티 IDE 사이트에서 다운로드를 누르고, 본인의 PC 운영체제에 맞게 설치한다.

구글 로그인을 해주고,

밝은 화면이 편해서 라이트 모던을 택했다.
밝은 화면이 편해서 라이트 모던을 택했다.

에이전트 동작방식에 따라 자율성 수준과 보안성에 차이가 있다는데,
책의 추천에 따라 자동화와 안전한 파일 관리의 균형이 좋은 Review-driven- development를 선택했다.

다음 버튼을 누르고

이건 뭔지 몰랐는데 MCP를 미리 설치하는 화면이라고 한다.
Modern Web Guidance와 Chrome DevTools를 눌러 AI에게 웹 개발 가이드를 줄 수 있다고 한다.

일단 아무것도 고르지 않고 다음으로 넘어갔다!

좌측 사이드 바에서 위에서부터 1. 파일 탐색기, 2. 검색 및 소스 제어, 6. 확장 프로그램 이다.

작업 효율을 높이기 위해 한글화 확장 프로그램을 설치했고 나중엔 파이썬도 추가했다.

AI 에이전트에게 물어보니, 다양한 작업을 할 수 있는 것 같다.

디자이너로서 안티그래비티가 어떻게 디자인 시스템을 구축하는지 궁금하다.

다음 편에서는 안티그래비티와 협업하며 바이브코딩으로 웹 프로그램을 만드는 과정을 소개하고자 한다.


Do it! 바이브 코딩 + 안티그래비티 | 조준수 - 교보문고

Do it! 바이브 코딩 + 안티그래비티 | 바이브 코딩 시대, ‘상상력’과 ‘실행력’이 당신의 무기가 된다! 프롬프트 설계법부터 게임, 생산성 도구, 풀스택 서비스 개발까지 한 권으로 끝내는 바이

product.kyobobook.co.kr