Claude Code로 기획, AI Studio로 구현 — 두 AI 연계 실험기

2026. 3. 30.조회 1

배경

웹앱 하나를 처음부터 만들고 싶었다. 기획은 어느 정도 머릿속에 있었지만, 혼자 했다면 완성도가 크게 떨어졌을 것 같다. 특히 컬러셋, 콘텐츠 구성, 기능 명세를 체계적으로 정리하고 실제 코드로 연결하는 과정이 막막했다.

과정

1단계 — Claude Code로 기획 정리

  • 웹앱 전체 구조 기획

  • 컬러셋 · 콘텐츠 내용 · 기능 명세를 담은 요구사항 문서 작성

2단계 — Google AI Studio로 구현

  • 요구사항 문서를 AI Studio에 전달

  • 프론트엔드 UI 및 기능 구현 진행

  • 구현 결과물: 과목별 학습 일지 앱 (과목 관리 / 일지 작성 / 자동 저장 / 템플릿 기능)

트러블슈팅

  • 미리보기 환경(iframe)에서 브라우저 confirm() 창이 차단되어 앱이 멈추는 문제 발생

한국어 텍스트가 있는 페이지

결과

  • Before: 기획도 구현도 혼자서는 완성도가 낮았을 것

  • After: 기획~구현까지 막히는 구간 없이 매끄럽게 완료

  • 두 AI의 역할 분리(기획 vs 구현)가 자연스럽게 작동함

배운 점

Claude Code와 Google AI Studio를 역할에 따라 나눠 쓰는 워크플로우가 생각보다 자연스럽게 돌아간다. "기획은 Claude, 구현은 AI Studio"라는 흐름을 이번 작업으로 직접 검증한 셈이다.

댓글 0개

로그인하고 댓글을 작성하세요

Claude Code로 기획, AI Studio로 구현 — 두 AI 연계 실험기 | GPTers