웹용 바이브 코딩 그 이상

1. 소개

코딩 에이전트가 일상적인 소프트웨어 개발에 필수적인 요소가 되면서 숙련된 엔지니어든 첫 앱을 출시하려는 신규 빌더든 빌드 방식과 빌드 대상이 근본적으로 바뀌고 있습니다. 코딩 에이전트를 사용하기 시작할 때는 일반적으로 '제로샷' 프롬프트, 즉 원하는 내용을 짧은 인간의 언어로 설명하는 단일 명령어로 시작합니다. 이 방법에는 다음과 같은 문제가 있습니다.

  • 사람을 기쁘게 하려는 편향: 모델은 요청을 최대한 빨리 완료하기 위해 결함이 있는 제약 조건이나 전제를 수락하는 경우가 많으며, 실제로 의도한 대로 작동하는지 확인하지 않습니다.
  • 검증 격차: 에이전트는 테스트를 작성할 때도 일반적으로 작업이 작동하는지 확인하지 않습니다. 라이브 브라우저에서 웹사이트를 사용하면 숨겨진 버그, 깨진 레이아웃, 액세스할 수 없는 컨트롤이 표시됩니다.
  • 기술적 부채: 모델이 학습되고 작동하는 방식 때문에 모델이 작성하는 코드는 오래되고 구식 패턴을 따르므로 관리하는 데 더 많은 토큰과 인적 및 기계적 시간과 노력이 드는 기술적 부채가 증가합니다. 기술적 부채는 사용자 경험에도 부정적인 영향을 미칠 수 있습니다.

4단계 게임 계획

코딩 에이전트가 요구사항에 더 부합하는 더 나은 코드를 생성하도록 안내하려면 4단계 제품 개발 수명 주기를 따르세요.

  1. 계획 및 설계: 에이전트와 공동으로 제품 요구사항 문서 (PRD)를 작성하고, 프로덕션 구현을 시작하기 전에 브라우저에서 PRD를 프로토타입으로 만들고 설계한 다음, 코딩을 시작하기 전에 PRD와 설계에서 아키텍처 설계 문서 (사양)를 작성합니다.
  2. 코딩 및 빌드: 제로샷 프롬프트 대신 PRD, 설계, 사양에 따라 빌드하도록 에이전트에게 지시하고 다른 에이전트를 실행하여 작업을 확인하도록 합니다.
  3. 반복: 추가하려는 새 기능마다 1단계와 2단계를 다시 실행합니다.
  4. 배포: 프로덕션에 출시합니다.

이 문서에서는 AI 에이전트를 기술 부채를 줄이고 출력 코드 품질을 개선하는 데 도움이 되는 관행을 갖춘 적극적인 협업 파트너로 사용하는 방법을 안내합니다. 최신 웹 가이드 및 에이전트용 DevTools와 함께 Antigravity를 사용하여 캐주얼 단어 게임을 빌드하고 AI 기능으로 개선합니다. 그런 다음 Firebase를 사용하여 Google Cloud에 배포하여 친구 및 가족과 공유합니다.

학습할 내용

  • AI 코딩 작업을 소규모 제품 개발 수명 주기로 취급하는 방법
  • 제품 요구사항과 아키텍처 사양을 분리해야 하는 이유
  • 브라우저에서 직접 프로토타입을 만들고 코드를 검토하기 위해 멀티 에이전트 워크플로를 오케스트레이션하는 방법
  • 서드 파티 기술과 도구를 활용하여 개발 및 사용자 경험을 개선하는 방법
  • Firebase MCP를 사용하여 웹 애플리케이션을 프로덕션에 직접 배포하는 방법

기본 요건

  • 개인 Google 계정 및 Google Cloud 또는 Firebase 프로젝트 (프로젝트 설정의 안내 참고)
  • HTML, CSS, JavaScript에 대한 지식
  • 웹브라우저(예: Chrome)
  • Node.js 설치 (LTS 권장)

2. 프로젝트 설정

Google 계정

아직 개인 Google 계정이 없다면 Google 계정을 만드세요.

Google Cloud 콘솔에 로그인

개인 Google 계정을 사용하여 Google Cloud 콘솔에 로그인합니다.

결제 사용 설정

개인 결제 계정을 설정하려면 Cloud 콘솔에서 결제 사용 설정으로 이동하세요.

Firebase 프로젝트 만들기

  1. Firebase Console로 이동하여 개인 Google 계정으로 로그인합니다.
  2. 프로젝트 추가 (또는 프로젝트 만들기)를 클릭합니다.
  3. 프로젝트 생성 마법사에서 다음을 실행합니다.
    • 프로젝트 이름 (예: wordup-web-app)을 입력하거나 프로젝트 설정 중에 설정한 Google Cloud 프로젝트를 재사용합니다.
  4. 결제 계정 연결
    • Firebase Console 사이드바에서 하단의 요금제 배지('Spark'라고 표시됨)를 찾습니다. 업그레이드를 클릭합니다.
    • 사용한 만큼만 지불 요금제를 선택합니다.
    • 프로젝트 설정 단계에서 설정한 결제 계정을 선택합니다.
    • 선택을 확인하여 결제 계정을 프로젝트에 연결합니다. (Firebase 호스팅은 넉넉한 무료 등급을 제공하므로 이 튜토리얼을 완료하는 데 일반적으로 비용이 들지 않습니다.)

도구 설치

  • Antigravity 2.0: 최신 Gemini Flash 모델과 함께 작동하는 기본 에이전틱 코딩 하네스로, 빠르고 최첨단 수준의 코딩을 지원합니다.
  • 최신 웹 안내: 코딩 에이전트가 최신 CSS, HTML, JavaScript를 작성하는 데 도움이 되는 스킬입니다. Antigravity Settings > Customization > Build With Google Plugins > Modern Web Guidance를 통해 설치합니다.
  • 에이전트용 DevTools: 에이전트가 Chrome을 실행하고, 실시간 DOM을 검사하고, 레이아웃을 테스트하고, 런타임에 디버그할 수 있습니다. Antigravity 설정 > 맞춤설정 > Google 플러그인으로 빌드 > Chrome DevTools 및 Antigravity 설정 > 맞춤설정 > MCP 서버 추가 > 상담사를 위한 Chrome DevTools를 통해 설치합니다.
  • Firebase MCP 서버: 원활한 프로젝트 설정 및 프롬프트 한 번으로 배포 Antigravity 설정 > 맞춤설정 > Google 플러그인으로 빌드 > Firebase 및 Antigravity 설정 > 맞춤설정 > MCP 서버 추가 > Firebase를 통해 설치합니다.

3. 계획 세우기

에이전트 코딩에서 흔히 유혹을 느끼는 부분은 제로샷 프롬프트 ('단어 게임을 만들어 줘')를 제출하고 운이 좋기를 바라는 것입니다. 이로 인해 거의 항상 극단적인 사례가 누락되고, 코드베이스가 비대해지며, 버그 수정 주기가 끝없이 반복됩니다.

대신 각 작업을 소규모 제품 개발 수명 주기로 취급하세요. 코딩 에이전트에는 코드를 작성하기 전에 아이디어를 명확히 하는 데 도움이 되는 협업 파트너 역할을 할 수 있는 연구 및 추론 도구가 있습니다. 아이디어를 말로 설명하면 문제가 되기 전에 질문을 찾고 답변하는 데 도움이 되는 경우가 많습니다. 소프트웨어 엔지니어링에서는 이를 러버덕 디버깅이라고 합니다. 코딩 에이전트를 러버덕으로 사용하여 프로젝트와 기능을 계획할 수 있습니다.

캐주얼 단어 게임을 빌드하고 있습니다. 원하는 게임을 디자인하도록 에이전트에게 프롬프트를 입력합니다.

I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.

이것이 프롬프트의 기본 모양입니다. 필요에 따라 리믹스하세요. 여기서 중요한 점은 AI가 심층 조사를 수행하고 해당 조사를 기반으로 질문을 하여 사용자가 업무를 계획할 수 있도록 돕는 것입니다.

코딩 에이전트와 작업하려면 검토가 많이 필요하므로 이 프롬프트로 시작하세요. 전체 구현 계획을 더 작고 집중된 부분으로 나누면 검토가 훨씬 쉬워지고, 특이 사례를 일찍 포착할 수 있으며, 에이전트의 학습 데이터 외부의 지식을 가져올 수 있고, 가장 중요한 것은 검토 사이에 더 많은 휴식을 취할 수 있다는 것입니다.

  • '무엇'과 '어떻게' 분리: 공식 제품 요구사항 문서 (PRD)에서 사용자 경험과 제품 범위를 정의하면 무엇을 원하는지 어떻게 구현하는지 분리할 수 있으므로 한 번에 모든 것을 처리하는 대신 제품 개발의 한 측면에 집중할 수 있습니다.
  • 특이 사례를 조기에 파악: 대화형 Q&A 세션을 통해 설계 또는 구현이 시작되기 전에 요구사항을 명확히 할 수 있습니다.
  • 활성 상담사 연구: 상담사 교육은 특정 날짜에 중단되고 교육의 정보는 매우 요약되므로 실시간 연구에서 가져오면 그렇지 않으면 놓칠 수 있는 새로운 정보를 가져올 수 있습니다.

연습 1

이제 여러분의 차례입니다 프로젝트를 설정하고 PRD를 빌드합니다.

  1. AGENTS.md 파일에 출력을 docs/plans/{{YYYY-MM-DD}}-{{description}}.md에 저장하도록 지시하는 명령어를 추가합니다.
  2. 원하는 대로 조정한 위의 조사 프롬프트를 실행하여 PRD를 작성합니다.
  3. [스트레치 목표] 에이전트가 수행하는 작업 중 마음에 들지 않는 부분을 AGENTS.md 파일에 업데이트하고 프롬프트를 다시 실행합니다.

4. 브라우저에서 디자인

정적 UI 디자인은 멋져 보이지만 극단적인 사례, 제약 조건, 실제 사용자 상호작용을 고려하지 못할 수 있는 모형에 의존합니다. 코드와 마찬가지로 에이전트에게 사이트 애플리케이션을 '설계'해 달라고 요청하면 일반적인 (보라색인 경우가 많음) 디자인으로 수렴되는 디자인이 생성됩니다.

웹 앱의 경우 에이전트가 에이전트용 DevTools를 통해 웹브라우저를 제어하는 기능을 사용하여 브라우저에서 디자인할 수 있습니다. 디자인의 충실도를 높이려는 디자이너, 프로젝트의 UI와 UX를 개선하려는 코더 또는 빌더, 또는 이 두 가지를 함께 작업하는 경우에도 빌드하는 실제 매체에서 작업하면 더 나은 결과를 얻을 수 있습니다.

브라우저에서 설계하면 함께 작동하는 여러 에이전트를 조정하여 단일 출력을 생성할 수도 있습니다. 이러한 하위 에이전트는 특정 페르소나와 목표를 가진 에이전트로서, 단독으로 작동하는 단일 에이전트보다 더 나은 결과를 생성하도록 조정할 수 있습니다. 설계를 사용하면 시각적 디자인 에이전트, 사용자 환경 에이전트, 접근성 에이전트가 모두 협력하여 설계를 지원하도록 요청하고 브라우저에서 직접 보여주도록 할 수 있습니다.

PRD에 따라 디자인을 선택하는 데 도움이 되는 디자인 에이전트 패널을 시작합니다.

Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.

정적 매체가 아닌 빌드하려는 매체(이 경우 웹)에서 디자인하면 관리하기 어려운 특이 사례와 제약 조건을 파악하고 프로덕션에 충실한 시각적 피드백을 즉시 받을 수 있습니다.

연습 2

이제 여러분의 차례입니다 프로젝트를 설계합니다.

  1. 원하는 대로 조정하여 위의 디자인 프롬프트를 실행하여 디자인을 빌드합니다. 원하는 다양한 디자인 방향 (예: 모던, 장난기 넘침, 사실적 등)에 대한 아이디어를 포함하세요.
  2. 마음에 드는 디자인을 선택하고 에이전트와 함께 반복합니다.
  3. 에이전트가 합의된 설계를 가리키도록 PRD를 업데이트하도록 합니다.
  4. 추가 목표: 선택한 디자인에 대해 접근성 테스트와 반응형 디자인 테스트를 실행하고 감사 결과를 바탕으로 디자인을 조정합니다.

5. 사양 작성

승인된 PRD ('무엇을 빌드할지')와 선택된 시각적 디자인 ('어떻게 보이는지')을 바탕으로 이제 아키텍처 ('빌드 방법')에 대한 기술적 조정이 필요합니다.

기술 설계 문서 또는 사양(줄여서 사양)에는 파일 구조, 상태 관리, 구성요소 인터페이스, 이벤트 파이프라인, 종속 항목이 자세히 설명되어 있습니다. 코드를 작성하기 전에 사양을 만들면 추론하고 리팩터링하기 더 어려운 코드로 바뀌기 전에 불일치와 바람직하지 않은 코딩 패턴을 조기에 포착할 수 있습니다.

Write a detailed technical design document on how to implement the game with
the chosen design.

이렇게 하는 이유

  • 아키텍처 명확성: 구성요소 계층 구조와 상태 전환 흐름 (예: Idle → InGame → EvaluatingGuess → GameOver)을 정의하면 경합 상태와 깨지기 쉬운 스파게티 코드를 방지할 수 있습니다.
  • 최신 표준 정렬: 최신 웹 가이드를 사용 설정하면 에이전트가 기존의 무거운 라이브러리를 가져오는 대신 최신 표준 (예: CSS @container 쿼리, 모달 또는 도움말 오버레이용 내장 요소, 모듈식 ES 모듈)을 참조합니다.
  • 단계별 검토: 기능 PRD 검토와 기술 설계 문서 검토를 분리하면 사용자 환경과 별개로 아키텍처를 평가할 수 있습니다.

연습 3

  1. AGENTS.md에게 출력을 현재 폴더에 저장하도록 지시합니다. 
    PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format
  2. 설계 문서 프롬프트를 실행하고 검토하여 디렉터리 구조, 이벤트 처리, 저장소와 같은 측면을 다루는지 확인합니다.
  3. 목표: 아직 포함되어 있지 않다면 Mermaid 다이어그램을 포함하여 애플리케이션을 통한 상태 흐름을 설명합니다.

6. 마지막으로 앱을 빌드합니다.

PRD, UI 모형, 설계 문서가 마련되었으므로 이제 빌드할 차례입니다. 이 세 가지 항목은 상담사가 만들어야 하는 항목에 대한 명확하고 모호하지 않은 안내입니다.

서브에이전트를 사용할 수 있는 또 다른 좋은 기회가 있습니다. 코드가 빌드된 후 이를 실행하여 빌드된 항목이 사전 설계에 얼마나 충실한지 검토하고, 다른 하나를 실행하여 빌드된 항목의 코드 품질을 확인할 수 있습니다.

Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.

이렇게 하는 이유

첫 번째 검토자와 함께 사양 기반 개발을 진행하면 에이전트가 빌드할 수 있는 명확하고 사전 검증된 요구사항과 계획을 준수했는지 확인할 수 있는 새로운 시각을 제공하여 품질과 충실도를 개선할 수 있습니다.

  • 검증된 요구사항: 에이전트가 원하는 것을 추측할 필요가 없습니다. 코드가 작성되기 전에 구현을 제외한 모든 것을 이미 검토했기 때문입니다.
  • 새로운 시각: 새로운 컨텍스트에서 생성된 검토 에이전트는 코드베이스를 빌드할 때 확인 편향이 없으므로 처리되지 않은 특이 사례, 누락된 구현 요구사항, 기타 누락된 코드 또는 제품 세부정보를 효과적으로 포착할 수 있습니다.

연습 4

  1. 검토할 정확한 파일을 가리키는 빌드 프롬프트를 실행합니다.
  2. 실행 시 출력을 확인합니다. 요구사항을 기반으로 빌드하려고 할 때 추론하는 것을 확인할 수 있습니다. 잘못된 방향으로 흘러가는 것 같으면 중지하고 수정할 수 있습니다.
  3. 개발 서버를 실행하여 최종 사이트를 확인하고 작동하는지 확인합니다.
  4. 스트레치 목표: 이 과정을 다시 실행하여 자동화된 테스트를 추가합니다.
  5. 스트레치 목표: 사이트를 빌드할 특정 프레임워크 또는 기술 스택을 선택합니다. PRD, 모형, 디자인 문서가 분리되어 있으므로 다른 프레임워크나 기술 스택에 쉽게 적응할 수 있습니다.

7. 프로덕션에 배포

계획, 설계, 코딩을 완료했습니다. 남은 것은 무엇인가요? 프로덕션에 배포

Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.

연습 5

  1. 프로젝트 ID를 대체하여 배포 프롬프트를 실행합니다.
  2. 상담사가 제공한 라이브 호스팅 URL을 복사합니다.
  3. 라이브 URL을 열어 배포되고 작동하는지 확인합니다.
  4. 스트레치 목표: 상담사가 DevTools를 사용하여 프로덕션 사이트의 Lighthouse 감사를 실행하고, Lighthouse 점수를 개선하도록 조정하고, 업데이트를 게시합니다.

8. [선택사항] AI 개선

이제 정적 사전을 사용하여 단어 게임이 완전히 작동합니다. 정적 사전을 동적 단어로 변경하려면 Prompt API의 소규모 로컬 언어 모델을 사용하여 매번 하나씩 프롬프트를 표시하면 됩니다.

이 기능은 모든 기기에서 사용할 수 없으므로 점진적 개선을 사용하여 API와 모델이 사용 가능한지 확인합니다. 있는 경우 사용하고, 없는 경우 정적 목록으로 대체합니다.

연습 6

배운 내용을 모두 모아 실습해 보세요.

  1. 에이전트와 협력하여 Prompt API를 사용하여 유효한 숨겨진 단어를 생성하는 PRD를 작성합니다.
  2. 브라우저에서 다운로드 진행률 표시줄과 AI 통합 UI를 설계합니다.
  3. 구현 사양을 작성합니다. (힌트: 에이전트를 실행하여 올바른 API 문법이 사용되었는지 확인하세요.)
  4. 새 기능을 개발합니다.
  5. 프로덕션에 배포합니다.

9. 마무리

축하합니다 에이전트형 코딩 권장사항을 사용하여 최신식의 접근성 높은 AI 중심 웹 애플리케이션을 빌드, 개선, 강화, 배포했습니다.

학습한 내용

  • 제품 중심 상담사 워크플로: 작업을 미니 제품 수명 주기 (PRD → 설계 → 사양 → 빌드)로 취급하면 부채, 검토 오버헤드, 앞뒤로 이동하는 마찰이 어떻게 줄어드는지 알아봅니다.
  • 다중 에이전트 전문가 패널: 여러 AI 하위 에이전트를 실행하여 작업의 품질과 충실도를 개선하는 방법
  • PRD와 설계 문서의 차이: 기능 범위 (계획)와 기술 아키텍처 (사양)를 분리하는 것이 제로샷 기능 프롬프트보다 확장 가능하고 정확한 프로세스인 이유
  • 원활한 배포: MCP 서버 (예: Firebase MCP)를 사용하여 사이트 배포와 같은 서드 파티 시스템에 대한 액세스를 간소화하는 방법