저에게 가장 번거로운 작업은 콘텐츠를 작성하기 위한 ‘키워드를 발굴하는 것'이었어요. 네이버, 구글, 경쟁사 블로그, 언론사 등 고려해야 할 자료가 너무 많거든요. 그래서 여러 채널에서 키워드를 추출하고, 콘텐츠 발행의 우선순위를 분석해 주는 시스템이 필요했어요.
비개발자를 위한 바이브코딩 가이드 (feat. 안티그래비티)
코딩 경험이 없는 비개발자를 위해 바이브코딩 하는 법을 제대로 알려드릴게요. 무료 도구인 안티그래비티(Antigravity)를 이용해 나만의 서비스를 쉽고 빠르게 만들어 보세요.
바야흐로 바이브코딩의 시대
비개발자라면, 개발 우선순위에 밀려 실행되지 못한 기획서들이 켜켜이 쌓여가는 경험이 있으실 거예요. 하지만 바이브코딩의 탄생으로, 비개발자에게도 드디어 ‘창조’의 기회가 열렸어요. 바이브코딩(Vibe Coding)은 AI와 대화를 통해 코드를 만드는 개발법으로, 개발자와 비개발자, 스타트업과 빅테크를 가리지 않고 기술 진영을 뒤흔들고 있어요.
바이브코딩의 가장 큰 장점은 업무 효율을 높일 수 있는 다양한 도구들을 개발해 볼 수 있다는 거예요. 기획, 영업, 마케팅 등 직무마다 루틴한 업무가 제각기 다를 텐데요. 오늘은 마케터인 제가 만들었던 키워드 분석 서비스를 예시로, 비개발자를 위한 바이브코딩 가이드를 전달하려고 해요. 이 과정을 그대로 따라가신다면, 누구나 원하는 서비스를 직접 개발할 수 있을 거예요. 그리고 가장 중요한 점, 전부 무료 도구를 사용해서 제작했으니 편하게 따라오세요!
1단계: LLM을 활용한 요구사항 구체화
1) 서비스 개요 정의
많은 분들이 바이브코딩에 실패하는 이유, ‘방향성’이 부족하기 때문이에요. 내가 무엇을 만들고 싶은지 명확하지 않으면, AI도 엉뚱한 방향으로 달리기 시작해요. 서비스를 개발하기 전 가장 먼저 해야 할 일은 "누가, 어떤 문제를, 어떻게 해결하는 서비스인가?"를 정의하는 거예요.
💡
2) PRD 작성과 프로토타입 구현
서비스 방향이 잡혔다면, PRD(Product Requirements Document, 제품 요구사항 문서)를 작성해요. PRD는 쉽게 말해 "이 서비스는 이런 기능을 이런 순서로 만들어야 한다"는 설계도예요. Claude나 ChatGPT, Gemini 등에 아래 프롬프트를 사용해보세요. 매우 쉽고 편하게 PRD를 작성할 수 있어요.
나는 [서비스 개요]를 만들고 싶어. 이를 바탕으로 PRD를 작성해줘.
여기서 PRD를 만든 후에 Antigravity를 이용해 바이브코딩을 할거야.
1. 주요 타겟 유저: [서비스 예상 타겟]
2. 핵심 기능: [기능 1], [기능 2], [기능 3]
3. 포함할 항목: 서비스 개요, 핵심 기능 목록, 화면 흐름, 기술 제약 조건, 우선순위💡
저는 ‘콘텐츠 제작을 위한 키워드 분석 서비스’를 만들었어요. 핵심 기능은 총 세 가지예요.
1. 채널별로 흩어진 자료들을 모아 키워드를 발굴 (자사 자료/블로그, 경쟁사 블로그, 최신 뉴스 등)
2. 키워드 우선순위 분석 (검색량, 키워드 난이도, 최근 검색 추이 등 고려)
3. 이를 바탕으로 검색 의도별 콘텐츠 주제 제시
PRD 초안을 읽고, 부족하거나 개선되어야 할 부분이 있다면 AI에게 의견을 제시해요. 여기서 중요한 점은, “내 의견에 대한 너의 객관적인 의견을 근거와 함께 제시해줘”라는 조건을 달아야 해요. 이 프롬프트를 통해 내가 미처 생각해 보지 못한 서비스의 오류나, 새로운 방향을 발견할 수 있을 거예요. 그리고 이를 ‘프로토타입’으로 구현해달라고 요청하면 돼요. 서비스를 배포하지 않고도, 크롬에서 시범적으로 사용해 볼 수 있어요.
바이브코딩의 핵심은 완벽주의를 버리고, 점진적으로 기능을 붙여가는 거예요. 이 단계에서는 전체적인 흐름을 잡기만 하면 성공이에요. 혹시 내가 생각하는 방향대로 서비스가 나오지 않는다면, AI가 참고할 수 있는 서비스의 UI 이미지를 전달해 주면 좋아요.
몇 가지 개선사항이 있어.
이에 대한 너의 객관적인 의견을 근거와 함께 제시해줘.
그리고 PRD를 기반으로 프로토타입을 구현해줘.
1. 개선사항 A
2. 개선사항 B
3) 바이브코딩을 위한 로드맵 작성
어느 정도 서비스의 밑바탕이 그려졌다면, 드디어 바이브코딩을 시작할 시간이에요. 이제부터 Antigravity에서 작업할 테니, 마지막으로 코드를 점검해 달라고 요청하세요. 그리고 앞으로 어떻게 개발을 이어 나갈지 확인할 수 있도록 로드맵을 요청해도 좋아요. 그러면 LLM이 그동안의 작업물이 담긴 폴더를 생성해 줄 거예요. 이제 이 폴더를 그대로 안티그래비티에 전달하면, 그동안의 개발 맥락을 잘 파악할 수 있을 거예요.
이제 antigravity에서 작업하고 싶어.
마지막으로 코드 최적화를 점검해줘.
그리고 antigravity에서 무엇부터 해야 할지 로드맵도 그려줘. 2단계: 안티그래비티(Antigravity)에서 바이브코딩 시작하기
Lovable, 클로드 코드 등 다양한 바이브코딩 서비스 중 안티그래비티를 사용한 이유는 간단해요. 1. 무료이고, 2. 원격으로 파일을 직접 조정해 줘서 비개발자에게 매우 유용하거든요. 안티그래비티 설치 후에 아래 사항들도 세팅해 주세요.
1) 사전 세팅하기
맨 위 설정 아이콘 - open antigravity user settings - Artifact - ‘Agent Decides’ 선택, File access 모두 활성화
크롬에서 테스트하기 위한 확장 프로그램 설치 ‘Antigravity Browser Extension’
그 외 Git, Node.Js 등의 프로그램도 설치가 필요해요. (잘 몰라도 괜찮아요. 안티그래비티가 알려줄 거예요!)
2) 바이브코딩 시작하기
화면을 기준으로 중앙에 실시간으로 코드가 보이고, 우측이 AI와 채팅을 할 수 있는 곳이에요. 상단 메뉴의 'File-Open Folder’를 클릭해 LLM에서 내려받은 폴더와 PRD 파일을 넣어주세요. AI가 서비스를 구현해 주면, 크롬에서 서비스를 테스트해 보고 보완이 필요한 부분을 채팅창에 이야기하면 돼요. 중간에 이해가 되지 않는 부분은 물어보고, AI에게 원격으로 직접 처리를 부탁해도 돼요.
💡
Antigravity를 기본 세팅대로 사용하고 있다면, 작업 중 오른쪽 화면에 파란색 ‘Run’ 버튼이나 ‘Accept all’ 버튼이 활성화될 거예요. 사용자 허락 후에 작업을 이어 나가는 중이니, 꼭 버튼을 눌러주세요.
3) 서비스 배포하기
서비스가 완성되었다면, 세상에 선보여야 할 차례예요. 가장 대중적인 무료 배포 서비스인 Vercel 또는 Netlify 활용해 배포하면 돼요. 아래 프롬프트를 붙여 넣으면, 배포도 절대 어렵지 않아요.
한 가지 주의할 점은, 배포 전에 서비스의 보안 취약점을 점검하면 좋아요. API를 연결하거나, 개인정보를 다루는 서비스의 경우 데이터가 유출되면 큰 사고로 이어질 수 있으니까요.
이 코드에서 발생할 수있는 보안 취약점을 점검해줘.
그리고 서비스를 Vercel로 무료 배포하고 싶어.
내가 해야 할 단계들을 비개발자 시점에서 하나씩 설명해줘. 
💡
완성된 저의 키워드 분석 서비스를 살짝 공개할게요. 여러 요소들을 복합적으로 고려해 키워드의 우선순위를 추려주었어요. 기능을 더욱 고도화하기 위해 갈 길이 멀지만, 실무에 유용하게 사용하는 중이에요. 최종 목표는 블로그와 연동해 콘텐츠 발행을 자동화하고, 노션과 연동하여 성과와 스케줄을 자동으로 관리하는 거예요.
지금까지 비개발자분들을 위한 바이브코딩의 전 과정을 설명해 드렸어요. 한 줄로 요약하면 아래와 같아요.
요구사항 정의 ➔ PRD 작성 ➔ 바이브코딩(안티그래비티 활용) ➔ 서비스 배포
마이크로소프트와 메타는 직원들의 AI 활용도를 인사 평가에 반영하기 시작했다고 해요. AI를 제대로 활용할 줄 아는 사람과 그렇지 않은 사람 사이의 격차는 지금 이 순간도 벌어지고 있는 거죠. 오늘 바로 바이브코딩을 시작해 보세요. 여러분의 전문 지식이 곧 기술이 되는 시대, 멋지지 않은가요?
Share article