코딩 1도 모르는 내가 앱을 만들었다고? — Google AI Studio 5단계 가이드

✍️ 작성 기준: 2025년 12월

들어가며 — 코딩 없이 앱을 만든다는 게 진짜 가능한가?

"앱 만들기? 그건 개발자나 하는 거 아니야?"

저도 그렇게 생각했습니다. 그런데 Google AI Studio(구글 AI 스튜디오)를 써보고 나서 생각이 완전히 바뀌었습니다.

"할 일 목록 관리 앱 만들어줘" 라고 입력하면, AI가 진짜로 앱을 만들어줍니다. 코드 한 줄 몰라도 됩니다.

요즘 Google(구글)의 Gemini(제미나이)가 정말 빠르게 발전하고 있는데요. 구글은 Gemini뿐 아니라, 누구나 앱을 만들 수 있는 AI Studio라는 도구도 함께 제공하고 있습니다.

이 글에서는 AI Studio로 앱을 만들고, 실제로 배포하는 것까지 5단계로 정리해볼게요. 컴퓨터 앞에 앉아서 따라 하기만 하면 됩니다.


시작하기 전에 — 이것만 준비해주세요

아래 세 가지만 있으면 바로 시작할 수 있습니다.

준비물 설명 비용
Google(구글) 계정 Gmail 계정이면 충분합니다 무료
GitHub(깃허브) 계정 코드를 저장하는 온라인 공간입니다 무료
Vercel(버셀) 계정 앱을 인터넷에 올려주는 서비스입니다 무료 (기본 플랜)
💡 세 가지 모두 무료로 가입할 수 있으니 부담 없이 준비해주세요.

1단계. Google AI Studio에 접속하기

먼저 Google AI Studio에 접속해볼게요.

  1. 아래 링크를 클릭합니다. 👉 https://aistudio.google.com
  2. Google 계정으로 로그인합니다.
  3. 화면에서 "Build" 버튼을 찾아 클릭합니다.

별도로 프로그램을 설치할 필요가 없습니다. 웹브라우저만 있으면 바로 시작할 수 있어요.

1
Build 찾았다


2단계. 만들고 싶은 앱을 말로 설명하기

여기가 핵심입니다. 만들고 싶은 앱을 그냥 말로 적어주면 됩니다.

입력창에 원하는 앱을 자연어(일상적인 말)로 설명해주세요. 어렵게 생각할 필요 없습니다.

프롬프트(AI에게 내리는 명령어) 예시

할 일 목록 관리 앱을 만들어줘.
할 일을 추가하고, 완료 체크하고, 삭제할 수 있었으면 좋겠어.
디자인은 깔끔하고 심플하게 해줘.

입력을 마쳤다면 Build 버튼을 눌러주세요. 잠시 기다리면 AI가 앱을 자동으로 만들어줍니다.

저도 출근 전에 대충 생각나는 대로 넣어봤는데, 그럴듯한 앱이 바로 나와서 놀랐습니다.

2

💡 더 좋은 결과를 얻는 팁

처음에는 간단하게 써도 괜찮습니다. 하지만 구체적으로 쓸수록 결과가 좋아져요.

이렇게 쓰면 (❌ 모호함) 이렇게 바꿔보세요 (✅ 구체적)
할 일 앱 만들어줘 할 일 목록 앱을 만들어줘. 할 일 추가, 완료 체크, 삭제 기능이 필요해. 배경은 흰색, 버튼은 파란색으로 해줘
메모 앱 메모를 작성하고 저장할 수 있는 앱을 만들어줘. 카테고리별 분류 기능도 넣어줘. 모바일에서도 잘 보이게 해줘

3단계. 테스트하고 수정 요청하기

앱이 만들어지면 같은 화면에서 바로 테스트할 수 있습니다. 직접 버튼을 눌러보고, 기능이 잘 작동하는지 확인해보세요.

마음에 안 드는 부분이 있다면? 대화창에 수정 요청을 입력하면 됩니다.

수정 요청 예시

버튼 색상을 파란색으로 바꿔줘
글꼴을 좀 더 크게 해줘
완료된 할 일은 취소선으로 표시해줘

이렇게 몇 번 주고받으면 원하는 형태로 점점 다듬어집니다. 마치 디자이너에게 수정 요청하는 것과 비슷하다고 생각하시면 돼요.

처음부터 완벽할 필요 없습니다. 조금씩 고쳐나가는 게 핵심이에요. 저도 보통 3~5번은 수정을 거칩니다.
3
만들어보기

↓ 수정해보기

4
수정해보기
5
테스트해보기
6
테스트 결과


4단계. GitHub에 코드 올리기

앱이 완성되었다면, 이제 배포(인터넷에 공개)할 차례입니다. 이를 위해 먼저 코드를 GitHub(깃허브)에 올려야 합니다.

💡 GitHub(깃허브)란? 코드를 저장하고 관리하는 온라인 공간입니다. 개발자들의 구글 드라이브라고 생각하시면 쉬워요.

따라 하기

  1. GitHub.com에 접속하고 로그인합니다.
  2. 우측 상단의 "+" 버튼 → **"New repository"**를 클릭합니다.
  3. 아래 항목을 입력합니다.
항목 입력 내용 설명
Repository name 앱 이름 (예: my-todo-app) 영문, 소문자, 하이픈(-) 사용
Description 앱 설명 (선택사항) 간단히 한 줄로 적어주세요
공개 범위 Private 선택 나만 볼 수 있도록 비공개 설정
  1. "Create repository" 버튼을 클릭하면 완료입니다.

7
8
Repository name, Repository description 입력, Private

  1. AI Studio에서 완성된 코드를 이 Repository(저장소)에 업로드합니다.

5단계. Vercel로 앱 배포하기

마지막 단계입니다. **Vercel(버셀)**을 사용하면 GitHub에 올린 코드를 실제 웹사이트로 만들어줍니다.

💡 Vercel(버셀)이란? 코드를 인터넷에 올려서 누구나 접속할 수 있게 해주는 서비스입니다. 기본 플랜은 무료로 사용할 수 있습니다.

따라 하기

  1. Vercel.com에 접속하고 GitHub 계정으로 로그인합니다.
  2. "Add New" 버튼 → "Project"를 선택합니다.
  3. 방금 만든 GitHub Repository(저장소)가 목록에 보일 겁니다.
  4. 해당 저장소 옆의 "Import" 버튼을 클릭합니다.
  5. "Deploy" 버튼을 누르면 배포가 시작됩니다.

몇 분만 기다려주세요. 배포가 완료되면 고유한 웹 주소(Domains)가 생성됩니다.

이 주소를 공유하면 누구나 내가 만든 앱을 사용할 수 있습니다.

9
"Add New" 버튼 → "Project"
10
"Import" 버튼을 클릭

전체 흐름 한눈에 보기

Google AI Studio에서 앱 생성
        ↓
   테스트 & 수정
        ↓
  GitHub에 코드 업로드
        ↓
   Vercel에서 배포
        ↓
  🎉 나만의 웹앱 완성!
단계 하는 일 소요 시간 (대략)
1단계 AI Studio 접속 1분
2단계 앱 설명 입력 2분
3단계 테스트 & 수정 3~5분
4단계 GitHub에 코드 업로드 2분
5단계 Vercel로 배포 2분
합계 약 10~12분

Read more

ChatGPT Pro 활용법: VS Code에 Codex 설치하고 코딩 AI 쓰기

ChatGPT Pro 활용법: VS Code에 Codex 설치하고 코딩 AI 쓰기

요즘 카카오톡 선물하기에서 ChatGPT Pro 1개월 이용권이 29,000원에 풀리면서 난리가 났습니다. 정가가 월 200달러(약 29만 원)인데, 10분의 1 가격이니 당연한 반응이겠죠. 그런데 막상 Pro를 구매하고 나면 이런 생각이 듭니다. "채팅 말고 다른 데서도 쓸 수 있나?" 네, 있습니다. 바로 Codex(코덱스)입니다. Codex는 OpenAI(오픈AI)

By JS
GPT-5.3-Codex-Spark, 윈도우11에서 텔레그램 연동까지

GPT-5.3-Codex-Spark, 윈도우11에서 텔레그램 연동까지

"카카오톡 gpt pro 대란으로 GPT-5.3-Codex-Spark로 오픈클로를 바꿨다." 커뮤니티에서 이런 내용을 봤을 때 저도 꼭 해보고 싶었습니다. Anthropic의 성능은 정말 좋습니다. 특히 opus 4.6은 감탄할만한데요. 다만 너무 비싸죠... 그래서 이번 GPT pro 대란 구독으로 오픈클로 저의 봇 두뇌를 바꿔보기로 했습니다. 이 글에서는 제가 직접 윈도우11 환경에서 GPT-5.

By JS
회사 컴퓨터에서 Claude Cowork 썼다가 사내 프로그램 먹통됐을 때 해결법

회사 컴퓨터에서 Claude Cowork 썼다가 사내 프로그램 먹통됐을 때 해결법

작성일: 2025년 2월 기준 | Claude Cowork(클로드 코워크) Windows 버전 갑자기 사내 프로그램이 안 된다? 저는 평소 AI 도구를 적극 활용하는 편입니다. 최근 Anthropic(앤트로픽)에서 출시한 Claude Cowork(클로드 코워크)를 직장 컴퓨터에 설치해서 살짝 테스트 해보자라는 생각이 들었습니다. Cowork는 Claude Desktop(클로드 데스크톱) 앱에 내장된 기능입니다. 폴더를 지정하면

By JS
Claude Cowork 윈도우11 설치부터

Claude Cowork 윈도우11 설치부터

윈도우에서 AI가 내 파일을 직접 정리해준다고요? — Claude Cowork 4단계 시작법 작성 기준일: 2026년 2월 기준 엑셀 파일 수십 개, 다운로드 폴더에 쌓인 영수증 사진들. 일일이 정리하려면 반나절은 걸리는 작업입니다. 그런데 Claude Cowork(클로드 코워크)를 쓰면, "이 폴더 정리해줘"라고 말 한마디면 AI가 알아서 해준다고 합니다. 과거에는 맥(

By JS