Google AI Studio로 앱을 단계별로 만드는 가이드

오늘 밤 실제 앱을 만들 수 있습니다.

앱의 예쁜 그림이 아니라,

로그인, 무언가를 기억하는 데이터베이스, 그리고 엄마에게 보낼 수 있는 링크가 있는 진짜 앱입니다.

이 글은 몬트리올의 Build Night MTL에서 실제로 만든 그대로의 결과입니다.

우리는 사람들이 지원한 채용 공고를 관리할 수 있는 작은 앱 Joblog 를 만들고 있습니다.

진행 방식은 이렇습니다.

1. 무료 Google 계정 만들기 (Gmail이 있으면 건너뛰세요)
2. BrandKit에서 브랜드 만들기 (약 1분)
3. 브랜드를 DESIGN.md로 바꾸기 (프롬프트 1개)
4. Spec it에서 앱 기획하기 (질문 8개)
5. 기획 프롬프트를 Google AI Studio에 붙여넣기
6. 진행하라고 하기 전에 기획을 읽기
7. 한 단계씩 만들기
8. 테스트하고, 온라인에 올리고, 저장하기

모든 단계를 스크린샷과 함께 보여드리겠습니다.

하지만 먼저, 무엇을 만드는지부터 보시죠.

Google AI Studio가 Joblog를 위해 작성한 기획안: 작은 단계 9개와 아직 코드 없음. 그게 핵심입니다.

시작하기 전에 두 가지가 있습니다.

1. 이 글을 저장하세요. 이번 주 어느 저녁 한 시간을 비워서 실제로 해 보세요.
2. 계속 "앱 아이디어가 있어"라고 말하는 친구 한 명에게 보내세요.

공유는 무료이며, 이 뉴스레터가 성장하는 방식이기도 합니다.

왜 이제 먼저 기획하는가

2025년 2월, Andrej Karpathy는 새로운 개발 방식을 이름 붙였습니다. 바로 vibe coding입니다.

만들고 싶은 것을 평범한 영어로 설명하면, AI가 코드를 작성합니다.

마법 같았죠.

그런데 그다음에는 모두의 앱이 고장 나기 시작했습니다.

이유는 이렇습니다.

AI는 당신의 머릿속을 볼 수 없습니다.

"채용 추적 앱을 만들어 줘"라고 하면, 누가 로그인하는지, 무엇이 저장되는지, 누가 무엇을 볼 수 있는지까지 추측해야 합니다.

추측은 모두 반반입니다.

그래서 지금 AI로 진지하게 만드는 사람들은 다른 방식을 씁니다.

먼저 spec 을 씁니다 (spec = 완료된 상태가 어떤 모습인지 적은 짧은 한 페이지) .

그다음 작은 단계로 만들고, 무엇이 바뀌었는지 읽고, 테스트하고, 저장합니다.

이것을 agentic engineering이라고 하며, 오늘 우리가 하는 방식입니다.

당신은 감독입니다.

AI가 만듭니다.

같은 AI. 결과는 매우 다릅니다.

1. 먼저 무료 Google 계정을 만드세요.

오늘 필요한 것은 모두 하나의 Google 계정에서 실행됩니다.

(이미 Gmail 주소가 있다면 2단계로 바로 넘어가세요. 여기서는 끝입니다.)

먼저 한 가지.

개인용 Gmail을 사용하세요.

직장 및 학교용 Google 계정은 무료로 앱을 게시하지 못하는 경우가 많습니다 (Google이 무료 요금제에서 제외하기 때문입니다) .

만드는 방법은 이렇습니다.

1. 새 탭을 열고 accounts.google.com/signup 으로 이동합니다.
2. 이름과 성을 입력합니다. 다음 을 클릭합니다.
3. 생년월일을 추가합니다. 다음 을 클릭합니다.
4. 내 Gmail 주소 만들기 를 선택하고 원하는 주소를 입력합니다.
5. 비밀번호를 만듭니다. 안전한 곳에 적어 두세요 (노트북에 붙인 스티키 메모에는 적지 마세요. 알고 있습니다) .
6. Google이 인증 코드를 보내기 위해 전화번호를 요청할 수 있습니다. 전송된 코드를 입력하세요.
7. 아래의 동의함 을 클릭합니다.

이제 끝입니다.

이제 Google 계정이 생겼고, 오늘 필요한 유일한 비밀번호도 마련됐습니다.

하나의 계정. 로그인, 데이터베이스, 호스팅이 모두 한 번에 됩니다.

2. BrandKit에서 브랜드를 만드세요(약 1분).

초보자에게 아무도 알려 주지 않는 것이 있습니다.

AI에게 브랜드를 주지 않으면, 모두에게 주는 것과 똑같은 앱을 내놓습니다.

보라색 그라데이션.

한 줄에 카드 세 개.

모든 모서리에 이모지 하나씩.

(여러분도 본 적 있을 겁니다. 직접 만든 적도 있을지 모르죠. 뭐라고 하진 않겠습니다. 저도 더 심한 걸 본 적이 있으니까요.)

그래서 뭔가를 만들기 전에, 먼저 브랜드를 만듭니다.

저는 이를 위한 무료 도구인 BrandKit을 만들었습니다.

1. brandkit.prompts2products.com 으로 갑니다.
2. Build my brand 를 클릭합니다. 무료이며, 가입도 필요 없고, 약 1분이면 됩니다.

1. 첫 질문은 "What are you making?" 입니다. An app or website 를 클릭합니다. 팁: 클릭 대신 숫자 키를 눌러도 됩니다.

1. "What do you do?" 라고 묻습니다. 이건 선택 사항입니다. Joblog의 경우 job tracker 를 입력합니다. Next 를 클릭합니다.
2. "What style do you want?" 라고 묻습니다. 앱에 어울리는 스타일을 고르세요. Joblog는 Clean and techy 입니다. 스타일은 8개입니다. 머리가 아니라 감으로 고르세요.

1. "How bright should the colours be?" 에서는 Joblog의 경우 In the middle 을 고릅니다.
2. "How many colours do you want?" 에서는 Joblog의 경우 One colour that pops 을 고릅니다.
3. 마지막으로 "What colour is the background?" 에서는 Joblog의 경우 White 를 고릅니다. 맨 위의 막대가 보이시나요? 질문에 답할수록 색상이 쌓여 갑니다.

1. 그 아래에 Brand name 이라는 상자가 있습니다. 앱 이름을 입력하세요 (아니면 비워 두면 몇 가지를 제안합니다) .
2. Generate my brand 를 클릭합니다.

브랜드가 나타납니다.

로고, 색상, 글꼴, 그 모든 것이요.

1. 상단의 Download PDF 를 클릭합니다.
2. 인쇄 창이 열립니다. Save as PDF 를 선택하고, 페이지 레이아웃은 wide (landscape) 로 설정한 뒤, background graphics 는 켜 둡니다.
3. 바탕화면처럼 나중에 찾기 쉬운 곳에 저장합니다. 로고를 세 가지 방식으로 보여 주고, 7페이지짜리 브랜드 가이드까지 포함됩니다. 디자이너에게 돈을 주고 맡기던 바로 그 작업입니다.

3. 브랜드를 DESIGN.md로 바꾸기 (프롬프트 하나).

PDF는 사람에게는 좋습니다.

하지만 AI는 이를 사진처럼 읽기 때문에 색상을 조금 잘못 해석할 수 있습니다.

그래서 우리는 DESIGN.md 도 만듭니다 (정확한 색상, 글꼴, 규칙을 담은 일반 텍스트 파일로, AI를 위해 작성된 것) .

Google은 올해 DESIGN.md를 이 작업에 딱 맞는 오픈 포맷으로 공개했습니다.

안에 들어 있는 "never do this" 목록은 Leonxlnx의 인기 무료 디자인 스킬인 taste-skill 에서 가져온 것으로, 흔한 AI 느낌을 금지합니다.

1. aistudio.google.com 으로 가서 Google 계정으로 로그인합니다.
2. 일반 채팅을 시작합니다 (Build가 아닙니다. Build는 잠시 후에 사용합니다) .
3. + 를 클릭하고 BrandKit PDF를 첨부합니다.
4. 다음을 붙여넣습니다:

1234567891011I attached my brand guide. Write a DESIGN.md file for my app.

At the top, list my exact colours with their hex codes, my fonts, my spacing and my corner sizes.

Then explain in plain English when to use each colour and font.

Then add a list called "Never do this": no gradients, no glowing shadows, no emoji, no purple unless it is in my brand, no row of three identical cards, no centred hero with two buttons, no Inter font, no placeholder text, no "Submit" buttons.

If my brand guide uses a font from that list, swap it for a similar one and tell me why.

Reply with the file only.

1. 전체 답변을 복사합니다.
2. 일반 텍스트 편집기를 엽니다 (Mac에서는 TextEdit에서 Format, 그다음 Make Plain Text. Windows에서는 Notepad) .
3. 그것을 붙여넣고 PDF 옆에 DESIGN.md 로 저장합니다. 재미있는 사실: 제 브랜드 키트는 가장 AI처럼 보이는 글꼴인 Inter를 사용했습니다. 그 스킬이 바로 그걸 잡아냈습니다.

4. Spec it에서 앱을 계획하기 (8가지 질문).

이 단계가 모든 것을 바꿉니다.

지금까지 한 번도 해 본 적이 없다면, 처음부터 명세서를 작성하는 건 어렵습니다.

그래서 저는 질문을 던져 주고 대신 작성해 주는 두 번째 무료 도구를 만들었습니다.

1. spec.prompts2products.com으로 이동합니다.
2. Spec my app을 클릭합니다. 코드도, 추측도 없습니다. 답변은 브라우저 안에만 남습니다.

1. "What's your app called?" BrandKit에 준 이름을 입력합니다. Enter를 누릅니다.

1. "What does it do?" 한 줄로 적습니다. Joblog의 경우: 지원한 일자리를 추적하고, 각 일자리가 현재 어떤 상태인지 확인한다.

   (한 줄로 말할 수 없다면, 아직 만들 준비가 안 된 것입니다. 지금 알아내는 편이 낫습니다. 일주일을 아껴 줍니다.)

1. "Who uses it?" 구체적으로 적습니다. 구직 중인 사람 누구나.
2. "Can people see each other's things?" 이 질문이 가장 중요합니다. 이 질문 하나가 보안 규칙을 대신 써 줍니다.

일기장 같은 앱이면 Only their own을 고르세요.

게시판 같은 앱이면 Everyone's를 고르세요.

Joblog는 일기장입니다.

아무도 당신의 구직 활동을 볼 수 없어야 합니다.

1. "Does anyone need extra powers?" 첫 앱이라면 No, everyone is the same을 고르세요 (관리자는 만들고 테스트할 것이 훨씬 더 많아집니다).
2. "What pages does it need?" Log in과 Profile은 이미 포함되어 있습니다. 나머지를 각 줄에 하나씩, 각 페이지에 있는 내용을 함께 입력합니다. 나열하지 않은 페이지는 AI가 추측합니다. 동전 던지기를 기억하세요.

1. "What does it save?" applications 같은 이름을 붙입니다. 그런 다음 application 하나가 가지는 각 항목을 추가하고, 각 항목의 유형을 선택합니다. "type"은 데이터베이스에 어떤 종류의 내용을 상자에 넣을지 알려 줄 뿐입니다. 텍스트, 숫자, 날짜, 예/아니요, 또는 짧은 목록 중 하나입니다.

Joblog에서 status는 one of a list입니다: Applied, Interview, Offer, Rejected.

이렇게 하면 아무도 "interveiw"라고 잘못 입력해서 집계를 망치지 않습니다 (그럴 겁니다. 늘 당신이 사랑하는 사람이 합니다).

1. "Do you have a brand guide?" Yes, I'll attach it을 고릅니다.

사양서가 나타납니다.

이것이 진짜 사양서입니다. 페이지, 빌드 방식, 데이터베이스, 보안 규칙. 여덟 개의 답변을 바탕으로 작성됩니다.

1. Copy prompt를 클릭합니다.

사양서에 대해 더 깊이 알고 싶으신가요? 예를 들어 더 큰 앱을 위한 사양서를 어떻게 작성하는지 같은 것 말입니다.

그게 바로 제가 판매하는 가이드 SDD. 입니다. spec driven development에 관한 모든 내용이 담겨 있습니다.

5. Google AI Studio에 붙여넣습니다.

이제 만들 차례입니다.

1. aistudio.google.com으로 가서 Build를 클릭합니다.

그러면 "Describe an app and let Gemini do the rest"라고 적힌 큰 상자가 보일 것입니다.

1. 상자 왼쪽 아래의 +를 클릭합니다.
2. BrandKit PDF를 첨부합니다.
3. 다시 +를 클릭하고 DESIGN.md를 첨부합니다.

상자 위에 두 파일이 모두 올라가 있는 것을 볼 수 있습니다.

1. 상자를 클릭하고 사양서를 붙여넣습니다.
2. 전송합니다. 두 파일이 첨부되었고, 사양서를 넣을 준비가 끝났습니다. (붙여넣기 전까지 전송 버튼에는 "I'm feeling lucky"라고 표시됩니다. 빈 상자에서는 누르지 마세요.)

이제 기다립니다.

1~2분 정도 걸립니다.

(이때 새로고침하고 싶어집니다. 그러지 마세요. 차를 한 잔 만드세요.)

6. 진행을 허용하기 전에 계획을 읽어 보세요.

여기서 대부분 사람이 틀립니다.

계획이 나타나면 읽지도 않고 "go"라고 입력합니다.

그러지 마세요.

계획의 실수는 고치는 데 한 문장만 들면 됩니다.

코드에서 같은 실수는 한 시간이 듭니다.

Spec it은 이 작업을 위한 체크리스트를 프롬프트 바로 아래에 제공합니다.

하나씩 차례대로 체크하세요. 느리게 느껴집니다. 하지만 하루 종일 하게 될 일 중 가장 빠른 일입니다.

1. 멈췄나요? 코드가 아니라 계획이 보여야 합니다.
2. 페이지들. 당신의 페이지가 모두 있고, AI가 추측해 넣은 추가 항목은 없어야 합니다.
3. 역할. 당신이 선택한 can과 can't가 그대로여야 합니다. 예상치 못한 관리자 권한이 있으면 안 됩니다.
4. 데이터베이스. 당신이 입력한 것과 같은 이름과 타입이어야 합니다.
5. 보안 규칙. 가장 중요합니다. "자기 것만"을 선택했는데 계획에 "로그인한 모든 사용자가 읽을 수 있음"이라고 적혀 있다면, 지금 바로 고치세요.
6. 단계들. 하나하나, 작게.

무언가 잘못됐다면, 다시 시작하지 마세요.

Spec it에서 이 문장을 복사하고, 대괄호를 채운 뒤 보내세요:

Change the plan: [what to change]. Keep everything else the same. Show me the new plan and wait.

보안 규칙은 낯선 사람이 사용자의 데이터에 접근하지 못하게 막아주는 부분이고, AI 앱이 가장 자주 잘못 만드는 부분이기도 합니다.

실제 사람들이 앱을 사용하기 전에 전체 보안 검사를 받고 싶다면, 제 유료 가이드 Exposed. 를 보세요.

실제 사람의 데이터가 들어 있는 앱을 만드는 사람을 아시나요? 이 섹션을 그 사람에게 보내세요.

7. 한 번에 한 단계씩 만들어라.

계획은 단계 목록으로 끝납니다.

제 것은 아홉 개였습니다.

1단계, 2단계, 3단계. 각각이 하나의 프롬프트입니다.

규칙은 이겁니다. 한 단계, 하나의 프롬프트.

한 번에 전부 요청하면 AI가 추측합니다.

1. AI Studio에서 계획의 Step 1 텍스트를 복사합니다.
2. Spec it으로 돌아가서 아래로 스크롤해 One step, one prompt 로 갑니다.
3. 상자에 붙여넣습니다.

Spec it이 이를 전체 프롬프트로 감싸 줍니다:

AI가 스스로 설명하도록 만드는 문구도 추가합니다: 무엇을 만들었는지, 무엇을 클릭해야 하는지, 그리고 어떻게 망가질 수 있는지 한 가지입니다.

이렇게 보입니다:

Go. Build step 1 only: Firebase Provisioning & Setup (Initialize Firebase Auth with Google provider & Firestore). Nothing else yet. Do not change anything outside this step. Follow DESIGN.md.

When you are done, tell me in plain English what you built, what I should click to check it works, and one way it could break. Do not start the next step until I tell you it works.

1. Copy 를 클릭하고, AI Studio에 붙여넣은 뒤 전송하세요.
2. 끝나면 무엇을 바꿨는지 말하는 내용을 읽으세요 .
3. 오른쪽 미리보기에서 무엇을 클릭하라고 하면 그걸 클릭하세요.
4. 작동하나요? Spec it으로 돌아가 + 를 눌러 2단계로 가고, 2단계를 붙여넣은 뒤 반복하세요.

그게 전체 루프입니다.

단계를 복사하고, 붙여넣고, 보내고, 읽고, 확인하고, 다음으로.

(의도적으로 지루하게 만든 겁니다. 지루함이 바로 제대로 작동하는 앱이 만들어지는 방식입니다.)

막히면, 그리고 막히게 될 텐데, 그건 정상입니다.

Spec it에는 흔한 문제를 위한 수정 프롬프트가 아래에 있습니다. 너무 많이 만들었거나, 화면에 오류가 있거나, 데이터가 어디에 저장되는지 설명해 달라고 하고 싶을 때를 위한 것입니다.

정말로 막혔다면, 무료 Discord로 오세요: discord.gg/MwDSwNVGSq

지금 어디까지 왔는지 스크린샷을 올리면, 누군가가 막힌 상태를 풀 수 있도록 도와줄 것입니다.

그 방은 바로 그런 용도입니다.

8. 테스트하고, 온라인에 올리고, 저장하라.

미리보기에서 작동하는 앱이 있습니다.

마지막 세 가지가 남았습니다.

낯선 사람이 하듯 테스트하라

이것을 AI Studio에 붙여넣으세요:

Act as a tester. Give me five ways this app could break, show the wrong data, or let someone see another person's applications. Do not change any code yet.

그다음 직접 실제 테스트를 해보세요.

1. 브라우저에서 시크릿 창을 엽니다.
2. 앱을 열고 다른 Google 계정으로 로그인합니다.
3. 대시보드는 비어 있어야 합니다.

비어 있다면 보안 규칙이 제대로 작동한 것입니다.

두 번째 사람은 당신의 구직 활동을 볼 수 없습니다.

(이건 전체 제작 과정에서 가장 좋은 순간입니다. 아주 작지만, 이걸로 정말 현실이 됩니다.)

온라인에 올리기

1. AI Studio 오른쪽 상단의 Publish 를 클릭합니다.
2. Get Started 를 클릭한 다음 Publish App 을 클릭합니다.
3. .run.app 로 끝나는 링크를 받게 됩니다. 휴대폰에서 열어보세요.

그건 누구나 열 수 있는 진짜 링크입니다.

무료 티어에서는 Google 계정당 라이브 앱을 두 개까지 사용할 수 있는데, 시작하기에는 충분합니다.

나중에 앱에 고유한 제대로 된 웹 주소를 붙이고 싶다면, 유료 가이드 Live. 에서 그 과정을 안내합니다.

GitHub에 저장하기

GitHub는 앱의 모든 버전을 보관해 주는 무료 공간입니다 (비디오 게임의 저장 지점 같은 것이라고 생각하면 됩니다) .

1. AI Studio에서 Settings 를 열고, GitHub 탭으로 들어갑니다.
2. GitHub 계정을 연결한 뒤 푸시합니다.

이후에 하는 모든 변경 사항은 무엇이 바뀌었는지에 대한 짧은 메모와 함께 저장됩니다.

내일 뭔가를 망가뜨렸다고요? 어제로 돌아가면 됩니다.

이 방식이 대신해 주지 못하는 것들 (솔직하게 말하면).

즉시 되는 건 아닙니다. 이 계획을 실행하는 데도 1~2분이 걸리고, 각 단계도 마찬가지입니다. 9단계면 5분이 아니라 저녁 한나절이 걸립니다.

무료 티어에는 제한이 있습니다. Google 계정당 라이브 앱 2개, 그리고 데이터베이스의 일일 제한이 있습니다. 배우고 초기 사용자로 쓰기에는 좋지만, 대규모 출시용은 아닙니다.

흐릿한 아이디어를 해결해 주지는 못합니다. 여덟 가지 질문에 답할 수 없다면 AI도 답할 수 없습니다. Spec it이 그 질문들을 하는 진짜 이유가 바로 그것입니다.

도구 버튼은 바뀝니다. Google은 AI Studio를 자주 변경합니다. 화면에 보이는 버튼 이름이 조금 다르더라도 가장 비슷한 것을 찾거나 Discord에서 물어보세요.

오늘은 아무것도 팔지 않았습니다.

Google은 저에게 돈을 주지 않습니다.

BrandKit과 Spec it은 무료이며, 앞으로도 무료로 유지됩니다.

이들은 기획 단계, 즉 대부분의 초보자가 조용히 포기하는 그 지점을 위한 도구입니다.

이 글이 당신을 “아이디어는 있는데”에서 실제 링크까지 데려갔다면, 아직 아이디어 단계에 머물러 있는 한 사람에게 보내 주세요.

이렇게 이 뉴스레터는, 한 번씩 전달되며 성장합니다.

이것을 저장해 두세요: 1. 개인 Gmail 2. brandkit.prompts2products.com, 그런 다음 PDF 다운로드 3. PDF를 DESIGN.md로 바꾸는 프롬프트 하나 4. spec.prompts2products.com, 여덟 가지 질문, 프롬프트 복사 5. AI Studio, Build, +로 두 파일 모두 첨부, 붙여넣고 전송 6. 여섯 가지 체크로 계획 읽기 7. 한 단계, 한 프롬프트, 읽고, 확인하고, 다음 단계 8. 개인 창에서 테스트, Publish, GitHub에 저장

PS: 어느 단계에서 막혔나요? Discord는 무료이고, 반쯤 망가진 앱의 스크린샷도 아주 환영합니다: discord.gg/MwDSwNVGSq

출처

• 원문: https://prompts2products.substack.com/p/build-night-mtl (2026-10-09 · Aisha)