“이런 느낌으로 만들어줘”라고 말하면 AI가 알아서 코드를 작성합니다. 문법이나 구조는 신경 쓸 필요 없이 원하는 결과물의 ‘느낌’만 전달하면 되죠. 이게 바로 바이브 코딩(Vibe Coding)입니다.

Analytics Vidhya의 개발자 Harsh Mishra가 Google의 Gemini 3 Pro로 스크린샷을 코드로 변환하는 앱을 단 두 번의 프롬프트만으로 완성했습니다. 스크린샷을 업로드하면 React 코드를 생성하고, 실시간 미리보기와 편집 기능까지 갖춘 완전한 프로토타이핑 도구입니다. 개발자가 직접 코드를 한 줄도 작성하지 않았습니다.

출처: Gemini 3 Pro Vibe Coding: Building a Screenshot-to-Code Agent – Analytics Vidhya

바이브 코딩이란

바이브 코딩은 코드 문법이 아니라 ‘결과물의 느낌’을 전달하는 개발 방식입니다. “다크 테마에 그라데이션 넣고, 업로드 영역은 점선 테두리로”처럼 시각적 요소와 사용자 경험을 자연어로 설명하면 AI가 이를 코드로 구현하죠.

Gemini 3 Pro가 이런 작업에 적합한 이유는 세 가지입니다. 첫째, 멀티모달 AI 능력입니다. 스크린샷의 레이아웃, 여백, 컴포넌트 관계를 개발자 수준으로 이해합니다. 둘째, 에이전틱 기능입니다. 여러 파일로 구성된 프로젝트에서 상태와 로직을 추적하면서 일관성을 유지합니다. 셋째, 긴 컨텍스트 윈도우입니다. 전체 코드베이스를 메모리에 유지해서 특정 컴포넌트를 수정할 때도 논리적 오류가 생기지 않습니다.

프롬프트 1: PRD 하나로 전체 앱 생성

대부분의 개발자는 “네비게이션 바 만들어줘”처럼 개별 컴포넌트를 요청합니다. 하지만 Harsh는 다르게 접근했습니다. 완전한 제품 요구사항 문서(PRD)를 작성해서 전체 앱의 스펙을 한 번에 전달했죠.

PRD에 명시된 핵심 기능은 이렇습니다:

핵심 기능:

• 스크린샷 업로드 → 구조화된 UI 모델로 변환
• HTML과 React 코드 자동 생성
• 디바이스 프레임 안에서 실시간 미리보기
• 시각적 편집 모드 + 코드 편집 모드, 양쪽 즉시 동기화
• 편집된 PNG와 로컬 실행 가능한 ZIP 파일로 내보내기

보안 및 프라이버시:

• 업로드된 이미지는 브라우저 세션에만 보관
• 서버 저장은 사용자의 명시적 동의 필요

이 프롬프트 하나로 Gemini 3 Pro는 전체 파일 구조를 생성했습니다. React, Tailwind CSS, Lucide React 아이콘을 포함한 현대적인 기술 스택을 선택했고, “Code”와 “Visual” 탭 전환 로직을 올바르게 구현했습니다.

프롬프트 2: 흰 화면 버그 수정

첫 번째 결과물은 인상적이었지만 완벽하지 않았습니다. 앱을 실행하고 스크린샷을 업로드했는데 Visual 탭이 완전히 하얗게 비어 있었습니다. 코드 로직은 정상이었지만 브라우저가 iframe 안에서 실행하지 못했던 거죠.

Harsh는 직접 수정하지 않았습니다. 대신 Gemini 3 Pro에게 물었습니다.

“왜 Visual 탭에 아무것도 안 보이고 흰색으로만 나와? GeneratedComponent.tsx는 생성됐는데. 고쳐줘”

모델은 즉시 문제를 진단했습니다. iframe이 TypeScript를 파싱하는 데 필요한 데이터 프리셋이 누락되어 있었습니다. Gemini 3 Pro는 PreviewWindow.tsx를 업데이트해서 env, react, typescript 프리셋을 추가하고, export default 구문을 제거하는 코드 정리 로직을 개선했으며, iframe의 스크립트 에러를 잡는 전역 에러 핸들러와 폴백 메커니즘을 구현했습니다.

수정은 바로 효과가 있었습니다. 앱이 UI를 오류 없이 렌더링했죠.

실무에 주는 의미

이 프로젝트는 개발 방식의 변화를 보여줍니다. 보통 이런 복잡도의 앱은 며칠이 걸립니다. Harsh는 몇 분 만에 완성했습니다. 개발자의 역할이 문법을 작성하는 것에서 AI 에이전트를 관리하는 것으로 바뀌고 있습니다.

바이브 코딩의 핵심은 비전을 제공하면 AI가 실행한다는 점입니다. 개발자는 사용자 경험과 제품 가치에 집중할 수 있죠. Gemini 3 Pro는 프로덕션 수준의 복잡성을 다룰 수 있음을 입증했습니다. 컨텍스트를 유지하고, 모호한 버그를 고치고, 세련된 UI를 제공했습니다.

물론 한계도 있습니다. 복잡한 비즈니스 로직이나 성능 최적화, 접근성 같은 부분은 여전히 사람의 판단이 필요합니다. 하지만 반복적이고 기계적인 작업을 줄여준다는 점에서 실질적 가치가 있습니다. 소프트웨어 개발의 진입 장벽이 낮아지고 있고, 명확한 아이디어만 있으면 누구나 빌드할 수 있는 환경이 만들어지고 있습니다.

참고자료:

• What are AI Agents? – Analytics Vidhya
• Vibe Coding Guide – Analytics Vidhya
• 완성된 앱 직접 사용해보기

Like?