-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgemini.html
More file actions
490 lines (437 loc) · 32.9 KB
/
Copy pathgemini.html
File metadata and controls
490 lines (437 loc) · 32.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 코딩 마스터클래스: Windows에서 시작하는 풀스택 서비스 런칭 (심화편)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
<style>
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
background-color: #020617; /* Deepest Slate */
color: #f8fafc;
line-height: 1.7;
}
.gradient-text {
background: linear-gradient(135deg, #38bdf8, #818cf8, #e879f9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card {
background: rgba(30, 41, 59, 0.3);
border: 1px solid rgba(148, 163, 184, 0.1);
backdrop-filter: blur(16px);
border-radius: 1.25rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 24px 48px -12px rgba(0, 0, 0, 0.5);
padding: 3rem;
margin-bottom: 3rem;
transition: all 0.3s ease;
}
.card:hover {
border-color: rgba(56, 189, 248, 0.3);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 24px 48px -12px rgba(56, 189, 248, 0.15);
}
.step-badge {
background: linear-gradient(90deg, #0284c7, #6366f1);
padding: 0.4rem 1.2rem;
border-radius: 9999px;
font-weight: 800;
font-size: 0.85rem;
display: inline-block;
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}
h2 {
font-size: 1.85rem;
font-weight: 800;
margin-bottom: 1.5rem;
border-bottom: 1px solid #334155;
padding-bottom: 1rem;
color: #f1f5f9;
}
h3 {
font-size: 1.35rem;
font-weight: 700;
color: #bae6fd;
margin-top: 2.5rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
h4 {
font-size: 1.1rem;
font-weight: 600;
color: #e2e8f0;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
p { color: #cbd5e1; margin-bottom: 1rem; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1.5rem; color: #cbd5e1; }
li { margin-bottom: 0.5rem; }
li::marker { color: #38bdf8; }
/* Image Styling */
.hero-image {
width: 100%;
height: 350px;
object-fit: cover;
border-radius: 1.5rem;
border: 1px solid rgba(148, 163, 184, 0.2);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
margin-bottom: 3rem;
opacity: 0.9;
}
.step-image-container {
width: 100%;
height: 280px;
overflow: hidden;
border-radius: 1rem;
border: 1px solid rgba(148, 163, 184, 0.2);
margin-bottom: 2.5rem;
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
position: relative;
}
.step-image-container::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 60%, rgba(30, 41, 59, 0.8));
pointer-events: none;
}
.step-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.card:hover .step-image {
transform: scale(1.03);
}
/* Code Block Styling */
.code-header {
background-color: #1e293b;
padding: 0.5rem 1rem;
font-size: 0.8rem;
font-family: 'Fira Code', Consolas, monospace;
color: #94a3b8;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
border: 1px solid #334155;
border-bottom: none;
display: flex;
justify-content: space-between;
}
pre {
background-color: #020617;
border: 1px solid #334155;
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
padding: 1.5rem;
overflow-x: auto;
margin-top: 0;
margin-bottom: 2rem;
font-family: 'Fira Code', Consolas, monospace;
font-size: 0.9rem;
line-height: 1.6;
}
.syntax-keyword { color: #c678dd; }
.syntax-string { color: #98c379; }
.syntax-function { color: #61afef; }
.syntax-comment { color: #64748b; font-style: italic; }
.syntax-tag { color: #e06c75; }
.syntax-type { color: #e5c07b; }
code:not(pre code) {
background-color: #1e293b;
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: 'Fira Code', Consolas, monospace;
font-size: 0.9em;
color: #f472b6;
}
.highlight-box {
background: linear-gradient(to right, rgba(56, 189, 248, 0.05), transparent);
border-left: 4px solid #38bdf8;
padding: 1.5rem;
border-radius: 0 0.5rem 0.5rem 0;
margin: 2rem 0;
}
.terminal-box {
background: #000;
border: 1px solid #333;
border-top: 25px solid #222;
position: relative;
border-radius: 0.5rem;
padding: 1rem;
margin: 1.5rem 0;
font-family: 'Fira Code', Consolas, monospace;
font-size: 0.85rem;
}
.terminal-box::before {
content: "•••";
position: absolute;
top: -22px;
left: 10px;
color: #555;
font-size: 1.2rem;
letter-spacing: 2px;
}
a { color: #38bdf8; text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; color: #7dd3fc; }
</style>
</head>
<body class="antialiased selection:bg-indigo-500/40 selection:text-white">
<header class="border-b border-slate-800 bg-slate-950/80 backdrop-blur-xl sticky top-0 z-50">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6">
<span class="gradient-text">AI 코딩 마스터클래스</span>
</h1>
<p class="text-xl text-slate-400 font-medium max-w-2xl mx-auto">
단순한 코딩을 넘어, 아키텍처 설계부터 글로벌 클라우드 배포까지.<br>
Windows PC와 AI 에이전트만으로 풀스택 서비스를 구축하는 완벽한 가이드입니다.
</p>
</div>
</header>
<main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80&w=1200&h=400" alt="코딩 환경" class="hero-image">
<section class="card">
<div class="step-badge">STEP 1</div>
<h2>핵심 기술 스택: 프론트엔드와 백엔드의 이해 및 예제</h2>
<div class="step-image-container">
<img src="https://images.unsplash.com/photo-1555099962-4199c345e5dd?q=80&w=1200&auto=format&fit=crop" alt="프론트엔드 코드 아키텍처" class="step-image">
</div>
<p class="mb-6">AI에게 올바른 지시를 내리려면 우리가 무엇을 만들고 있는지 전체 구조(아키텍처)를 알아야 합니다. 현대 웹 서비스는 화면을 그리는 <strong>프론트엔드</strong>와 데이터를 처리하는 <strong>백엔드</strong>로 완전히 분리되어 <strong>JSON</strong> 형태의 데이터를 주고받습니다.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
<div class="bg-slate-900/80 p-6 rounded-2xl border border-slate-700/50">
<h3 class="mt-0 text-sky-400">🎨 프론트엔드 (React + TS)</h3>
<p class="text-sm mb-4 text-slate-400">사용자의 브라우저(크롬, 엣지)에서 실행되며 눈에 보이는 화면(UI)을 담당합니다.</p>
<ul class="text-sm space-y-3">
<li><strong>npm (Node Package Manager):</strong> 자바스크립트 생태계의 거대한 앱스토어입니다. <code>npm install [패키지명]</code> 명령어로 전 세계 개발자들이 만든 기능을 1초 만에 가져옵니다.</li>
<li><strong>React:</strong> 웹페이지를 레고 블록(컴포넌트)으로 쪼개어 조립하는 페이스북의 UI 라이브러리입니다.</li>
<li><strong>TypeScript:</strong> 자바스크립트에 '자료형' 규칙을 추가한 언어입니다. <strong>AI는 종종 존재하지 않는 변수를 부르는 '환각'을 일으키는데, TypeScript가 이를 실행 전에 잡아내는 방패 역할을 합니다.</strong></li>
</ul>
<div class="mt-4">
<h4 class="text-xs text-slate-500 uppercase tracking-wider mb-2">React + TS 예제 (App.tsx)</h4>
<pre class="!m-0 !p-4 !text-xs !border-t-0 !rounded-t-none"><code><span class="syntax-keyword">import</span> { useState, useEffect } <span class="syntax-keyword">from</span> <span class="syntax-string">'react'</span>;
<span class="syntax-keyword">interface</span> <span class="syntax-type">User</span> {
id: <span class="syntax-type">number</span>;
name: <span class="syntax-type">string</span>;
}
<span class="syntax-keyword">export default function</span> <span class="syntax-function">UserProfile</span>() {
<span class="syntax-keyword">const</span> [users, setUsers] = <span class="syntax-function">useState</span><<span class="syntax-type">User</span>[]>([]);
<span class="syntax-function">useEffect</span>(() => {
<span class="syntax-function">fetch</span>(<span class="syntax-string">'http://localhost:8000/api/users'</span>)
.<span class="syntax-function">then</span>(res => res.<span class="syntax-function">json</span>())
.<span class="syntax-function">then</span>(data => <span class="syntax-function">setUsers</span>(data));
}, []);
<span class="syntax-keyword">return</span> (
<span class="syntax-tag"><div</span> className=<span class="syntax-string">"p-4 bg-slate-800 text-white"</span><span class="syntax-tag">></span>
{users.<span class="syntax-function">map</span>(u => <span class="syntax-tag"><p</span> key={u.id}<span class="syntax-tag">></span>{u.name}님 환영합니다.<span class="syntax-tag"></p></span>)}
<span class="syntax-tag"></div></span>
);
}</code></pre>
</div>
</div>
<div class="bg-slate-900/80 p-6 rounded-2xl border border-slate-700/50">
<h3 class="mt-0 text-indigo-400">⚙️ 백엔드 (FastAPI + SQLite)</h3>
<p class="text-sm mb-4 text-slate-400">데이터를 데이터베이스(DB)에 저장하고 프론트엔드의 요청에 응답하는 서버입니다.</p>
<ul class="text-sm space-y-3">
<li><strong>FastAPI:</strong> 파이썬 기반의 최신 웹 프레임워크입니다. <strong>특히 AI 모델(LLM)을 서버에 연동할 때, AI 생태계의 표준인 파이썬을 그대로 쓸 수 있어 압도적으로 유리합니다.</strong></li>
<li><strong>SQLite:</strong> 복잡한 DB 서버 설치 없이, 프로젝트 폴더 안에 <code>database.db</code>라는 가벼운 파일 하나로 동작하는 관계형 데이터베이스입니다. 초기 프로젝트에서 최고의 가성비를 제공합니다.</li>
</ul>
<div class="mt-4">
<h4 class="text-xs text-slate-500 uppercase tracking-wider mb-2">FastAPI + SQLite 예제 (main.py)</h4>
<pre class="!m-0 !p-4 !text-xs !border-t-0 !rounded-t-none"><code><span class="syntax-keyword">from</span> fastapi <span class="syntax-keyword">import</span> FastAPI
<span class="syntax-keyword">import</span> sqlite3
app = <span class="syntax-function">FastAPI</span>()
<span class="syntax-keyword">@app.get</span>(<span class="syntax-string">"/api/users"</span>)
<span class="syntax-keyword">def</span> <span class="syntax-function">get_users</span>():
<span class="syntax-comment"># 실제로는 SQLite 파일에서 데이터를 조회합니다.</span>
<span class="syntax-keyword">return</span> [
{<span class="syntax-string">"id"</span>: 1, <span class="syntax-string">"name"</span>: <span class="syntax-string">"AI 마스터"</span>},
{<span class="syntax-string">"id"</span>: 2, <span class="syntax-string">"name"</span>: <span class="syntax-string">"Windows 유저"</span>}
]</code></pre>
</div>
</div>
</div>
</section>
<section class="card">
<div class="step-badge">STEP 2</div>
<h2>Windows 터미널의 지휘관: Gemini CLI와 AI Studio</h2>
<div class="step-image-container">
<img src="https://images.unsplash.com/photo-1629654297299-c8506221ca97?q=80&w=1200&auto=format&fit=crop" alt="명령 프롬프트 터미널" class="step-image" style="object-position: center top;">
</div>
<p>Windows 환경에서 코딩을 시작하려면, 까만 화면의 터미널(PowerShell) 명령어만으로 AI를 제어하는 법을 알아야 합니다.</p>
<h3>1. 필수 프로그램 설치 (Windows PowerShell 관리자 권한)</h3>
<p>Windows 11에 내장된 패키지 관리자인 <code>winget</code>을 사용해 한 번에 설치합니다.</p>
<div class="terminal-box">
<span class="text-slate-400"># Node.js (프론트엔드 환경 및 npm 포함) 설치</span>
<span class="text-green-400">PS C:\></span> winget install OpenJS.NodeJS
<span class="text-slate-400"># Python (백엔드 환경) 설치</span>
<span class="text-green-400">PS C:\></span> winget install Python.Python.3.12
</div>
<h3>2. AI의 뇌 장착하기: Google AI Studio</h3>
<p>터미널이나 에디터에서 AI를 호출하려면 'API 키'라는 일종의 신분증이 필요합니다.</p>
<ol class="list-decimal pl-5 space-y-2 mb-6">
<li><a href="https://aistudio.google.com" target="_blank">Google AI Studio</a>에 접속하여 구글 계정으로 로그인합니다.</li>
<li>좌측 <strong>[Get API Key]</strong> 메뉴에서 <strong>Create API Key</strong> 버튼을 클릭합니다.</li>
<li>생성된 <code>AIzaSyB...</code> 로 시작하는 긴 문자열을 복사하여 안전한 곳에 보관합니다. 이 키는 GitHub 등에 절대 유출되면 안 됩니다.</li>
</ol>
<h3>3. Gemini CLI 설치 및 실전 활용</h3>
<p>에러 로그와 코드를 복사해서 챗GPT 웹사이트로 갈 필요가 없습니다. 내 프로젝트 폴더 안에서 즉시 AI에게 지시합니다.</p>
<div class="terminal-box">
<span class="text-slate-400"># 1. npm을 통한 글로벌 설치</span>
<span class="text-green-400">PS C:\></span> npm install -g @google/gemini-cli
<span class="text-slate-400"># 2. 발급받은 API 키를 환경변수에 등록 (현재 세션)</span>
<span class="text-green-400">PS C:\></span> $env:GEMINI_API_KEY="여러분의_API_키"
<span class="text-slate-400"># 3. 특정 파일을 분석하도록 지시하기 (에러 원인 찾기)</span>
<span class="text-green-400">PS C:\backend></span> gemini ask "이 파이썬 코드에서 Database 연결 에러가 나는 이유가 뭐야?" --file main.py
<span class="text-slate-400"># 4. 안전한 코딩을 위한 Plan 모드 진입</span>
<span class="text-green-400">PS C:\frontend></span> gemini /plan "현재 폴더 구조에 React 회원가입 화면 추가 계획을 세워줘"
</div>
</section>
<section class="card">
<div class="step-badge">STEP 3</div>
<h2>차세대 에이전트 IDE: Google Antigravity 워크플로우</h2>
<div class="step-image-container">
<img src="https://images.unsplash.com/photo-1618401471353-b98a5233c591?q=80&w=1200&auto=format&fit=crop" alt="인공지능 에이전트 워크스페이스" class="step-image">
</div>
<p>한 줄씩 코드를 추천해 주던 단순 자동완성(Copilot)의 시대는 끝났습니다. 구글의 <strong>Google Antigravity</strong>는 코드를 스스로 작성, 테스트, 수정하는 <strong>'에이전트 중심(Agent-first)'</strong> 개발 툴입니다. 이제 여러분은 코더가 아니라 여러 AI 에이전트(작업자)를 지휘하는 '오케스트라 지휘자'가 됩니다.</p>
<h3 class="mt-8">실전 시나리오: 결제 모듈 추가하기</h3>
<p>기존 에디터라면 수십 개의 파일을 넘나들며 코드를 짜야 하지만, Antigravity에서는 다음과 같이 진행됩니다.</p>
<ol class="space-y-4 mt-6">
<li class="bg-slate-900/60 p-5 rounded-xl border border-slate-700/50">
<strong class="text-indigo-300 text-lg flex items-center gap-2">1. 에이전트 호출 및 자연어 지시 (Prompting)</strong>
<p class="text-sm mt-2 mb-3">에디터에서 <code>Ctrl + L</code> 단축키로 사이드 패널을 열고, <code>@</code> 기호로 특정 파일을 참조하여 프롬프트를 입력합니다.</p>
<code class="block text-sky-300 text-sm bg-slate-950 p-3 rounded-lg border border-slate-800">"@frontend/src/App.tsx @backend/main.py 이 파일들을 참고해서, 백엔드에는 /api/pay 엔드포인트를 만들고, 프론트엔드에는 Tailwind로 꾸며진 결제 폼 컴포넌트를 연동해서 생성해줘."</code>
</li>
<li class="bg-slate-900/60 p-5 rounded-xl border border-slate-700/50">
<strong class="text-indigo-300 text-lg flex items-center gap-2">2. 계획 승인 (Implementation Plan & Task Lists)</strong>
<p class="text-sm mt-2 mb-3">에이전트가 코드를 막무가내로 덮어쓰지 않습니다. 우측 화면에 <strong>"1. models.py 생성, 2. PaymentForm.tsx 컴포넌트 추가..."</strong> 라는 <strong>작업 계획서(Task List)</strong>를 띄워줍니다. 개발자는 로직의 허점을 검토하고 문제가 없다면 <strong>[Approve (승인)]</strong> 버튼을 누릅니다.</p>
</li>
<li class="bg-slate-900/60 p-5 rounded-xl border border-slate-700/50">
<strong class="text-indigo-300 text-lg flex items-center gap-2">3. 시각적 산출물 검토 (Artifacts)</strong>
<p class="text-sm mt-2">승인이 떨어지면 에이전트가 백그라운드에서 코드를 작성합니다. 특히 프론트엔드 작업 시, 에이전트가 <strong>내장된 가상 브라우저(Headless Chrome)를 열어 자신이 만든 폼에 직접 텍스트를 입력해 보고 정상 작동하는 스크린샷이나 녹화 영상(Video)을 결과물로 제출합니다.</strong> 에러가 나면 에이전트 스스로 코드를 수정(Self-healing)합니다.</p>
</li>
</ol>
</section>
<section class="card">
<div class="step-badge">STEP 4</div>
<h2>세련된 UI/UX 적용: Vibe 벤치마킹과 Google Stitch</h2>
<div class="step-image-container">
<img src="https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=1200&auto=format&fit=crop" alt="디자인 컬러 팔레트 추출" class="step-image">
</div>
<p>개발자가 만든 투박한 디자인은 서비스의 신뢰도를 떨어뜨립니다. 포토샵이나 피그마(Figma)를 다루지 못해도, 프롬프트만으로 상용 서비스 수준의 아름다운 UI 코드를 뽑아내는 비법입니다.</p>
<h3>1. 메이저 서비스 카피캣 (Vibe 추출 공식)</h3>
<p>Toss(토스), Apple, Vercel 처럼 '디자인이 좋다'고 느껴지는 서비스의 감각(Vibe)을 내 프로젝트에 이식합니다.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 mb-8">
<div class="bg-slate-900/50 p-5 rounded-xl border border-slate-700">
<h4 class="mt-0 text-xl text-white">🎨 Color Palette</h4>
<p class="text-sm text-slate-400 mt-2">크롬 확장 프로그램 'ColorZilla'로 타겟 서비스의 색상을 추출합니다. 다크 모드 배경은 완전한 검정보다는 깊은 남색(<code>#0f172a</code>)을 쓰고, 중요 요소에는 토스 블루(<code>#3182F6</code>) 같은 포인트 컬러 1가지만 사용하세요.</p>
</div>
<div class="bg-slate-900/50 p-5 rounded-xl border border-slate-700">
<h4 class="mt-0 text-xl text-white">🔤 Typography</h4>
<p class="text-sm text-slate-400 mt-2">모던한 느낌을 주려면 폰트가 가장 중요합니다. 한글은 무조건 <strong>'Pretendard'</strong>를, 영문과 숫자는 <strong>'Inter'</strong>를 적용하세요. 기본 폰트만 바꿔도 5배는 비싸 보입니다.</p>
</div>
<div class="bg-slate-900/50 p-5 rounded-xl border border-slate-700">
<h4 class="mt-0 text-xl text-white">📐 Layout Rule</h4>
<p class="text-sm text-slate-400 mt-2">최신 트렌드는 요소 간의 여백(Padding)을 넉넉하게 주고, 카드의 모서리(Border-radius)를 <code>16px</code> 이상으로 크게 둥글리는 것입니다. 은은한 투명 테두리도 효과적입니다.</p>
</div>
</div>
<h3>2. Google Stitch 2.0으로 UI 코드 즉시 생성하기</h3>
<p><a href="https://stitch.withgoogle.com" target="_blank">Google Stitch</a>는 프롬프트나 종이에 대충 그린 스케치를 완벽한 디자인의 React + Tailwind CSS 코드로 변환해 주는 UI 특화 에이전트입니다.</p>
<div class="highlight-box">
<h4 class="mt-0 text-white">🔥 고품질 디자인을 뽑아내는 'Vibe 프롬프트' 작성법</h4>
<p class="text-sm mb-3 text-slate-300">Stitch 입력창에 "대시보드 만들어줘"라고 단순하게 치는 대신, 구체적인 디자인 룰을 묘사해 보세요.</p>
<code class="block p-4 bg-slate-950 rounded-lg border border-slate-800 text-pink-300 leading-relaxed text-sm whitespace-pre-wrap">"SaaS 서비스의 구독 요금제(Pricing) 카드를 3개 만들어줘.
[디자인 룰]
1. Vibe: Vercel이나 Toss 같은 극도의 미니멀리즘과 세련된 다크모드.
2. 컬러: 전체 배경은 Tailwind bg-slate-950, 카드 배경은 bg-slate-900, 테두리는 은은한 회색(border-slate-800).
3. 폰트: 'Inter'와 'Pretendard' 혼용. 텍스트 색상은 밝은 회색.
4. 포인트: 가장 인기 있는 중앙 카드는 테두리를 파란색(#3182F6)으로 빛나게 하고 상단에 '추천' 뱃지를 달아줘.
5. 상호작용: 마우스를 올리면 살짝 커지는 애니메이션(hover:scale-105)을 추가해줘.
결과물은 React + TypeScript + Tailwind CSS 단일 컴포넌트로 출력해."</code>
</div>
<p>생성된 디자인을 확인한 후 <strong>[Code Export]</strong> 탭을 눌러 코드를 복사하고, Antigravity 에디터에 붙여넣기만 하면 눈부신 프론트엔드가 완성됩니다.</p>
</section>
<section class="card">
<div class="step-badge">STEP 5</div>
<h2>세상 밖으로: 클라우드 서버 구축 및 배포 (Porting) 완벽 가이드</h2>
<div class="step-image-container">
<img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=1200&auto=format&fit=crop" alt="클라우드 데이터 센터 인프라" class="step-image">
</div>
<p>내 PC(<code>localhost</code>)에서만 작동하던 서비스를 전 세계 사람들이 스마트폰이나 PC로 접속할 수 있도록 인터넷 클라우드 서버에 올리는 과정입니다. 사이드 프로젝트에 최적화된 가장 경제적인 방법을 소개합니다.</p>
<div class="bg-rose-950/40 border border-rose-900 p-6 mb-8 rounded-xl mt-6">
<h4 class="text-rose-400 font-bold mt-0 mb-3 flex items-center gap-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
배포 전 필수 작업: CORS (Cross-Origin Resource Sharing) 에러 방지
</h4>
<p class="text-sm mb-4 text-slate-300">로컬에서는 프론트엔드와 백엔드가 모두 <code>localhost</code>에 있었지만, 배포를 하면 서로의 도메인 주소가 달라집니다. 브라우저는 이를 해킹 시도로 간주하여 통신을 차단(CORS Error)합니다. 백엔드(FastAPI) <code>main.py</code>에 아래 코드를 반드시 추가하여 프론트엔드의 접근을 허락해야 합니다.</p>
<div class="code-header"><span>main.py</span><span>Python</span></div>
<pre class="!m-0 !p-4 !text-xs !bg-black !rounded-t-none !border-t-0"><code><span class="syntax-keyword">from</span> fastapi.middleware.cors <span class="syntax-keyword">import</span> CORSMiddleware
app.<span class="syntax-function">add_middleware</span>(
CORSMiddleware,
<span class="syntax-comment"># 배포될 프론트엔드 도메인과 로컬 개발용 주소를 모두 허용 목록에 넣습니다.</span>
allow_origins=[<span class="syntax-string">"https://내-프로젝트.vercel.app"</span>, <span class="syntax-string">"http://localhost:5173"</span>],
allow_credentials=<span class="syntax-keyword">True</span>,
allow_methods=[<span class="syntax-string">"*"</span>],
allow_headers=[<span class="syntax-string">"*"</span>],
)</code></pre>
</div>
<h3 class="border-b border-slate-700 pb-2">🌐 1단계: 프론트엔드 배포 (Vercel) - 평생 무료 & 초간단</h3>
<p>React 코드는 빌드 시 최종적으로 화면을 그리는 정적 파일(HTML/JS/CSS)이 되므로, 글로벌 CDN에 무료로 올릴 수 있습니다.</p>
<ol class="text-sm space-y-2 mb-8 list-decimal pl-5">
<li>코드를 내 <strong>GitHub</strong> 저장소(Repository)에 업로드(Push)합니다.</li>
<li><a href="https://vercel.com" target="_blank">Vercel.com</a>에 GitHub 계정으로 로그인합니다.</li>
<li><strong>[Add New Project]</strong>를 누르고 방금 올린 GitHub 저장소를 연결(Import)합니다.</li>
<li><strong>Deploy</strong> 버튼을 누르면 약 1분 뒤 <code>https://my-awesome-app.vercel.app</code> 형태의 무료 도메인이 자동 생성됩니다.</li>
</ol>
<h3 class="border-b border-slate-700 pb-2 mt-10">🖥️ 2단계: 백엔드(FastAPI + SQLite) 클라우드 호스팅 옵션</h3>
<p>파이썬 서버는 사용자의 요청을 실시간으로 연산하고 DB 파일을 저장해야 하므로 24시간 켜져 있는 호스팅이 필요합니다.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-4">
<div class="bg-slate-900/50 p-6 rounded-xl border border-slate-700 border-t-4 border-t-emerald-500">
<h4 class="font-bold text-white mb-2 mt-0">옵션 A: 가성비 최강 VPS 서버 (가장 추천)</h4>
<p class="text-sm text-slate-400 mb-4">가상의 빈 리눅스 컴퓨터를 통째로 빌리는 방식입니다. 디스크가 영구 유지되므로 <strong>SQLite 파일 보존에 완벽</strong>합니다.</p>
<ul class="text-sm space-y-2 mb-4 text-slate-300">
<li><strong>Oracle Cloud:</strong> 고성능 ARM 서버를 <strong>평생 무료</strong>로 줍니다.</li>
<li><strong>Hetzner / Vultr:</strong> 오라클 가입 실패 시, 월 $4~$5 수준으로 쾌적한 우분투(Ubuntu) 서버 임대가 가능합니다.</li>
</ul>
<div class="bg-black p-3 rounded text-xs font-mono text-slate-400 leading-relaxed">
<span class="text-slate-600"># Windows 터미널에서 SSH로 서버 접속 후 실행</span><br>
ssh root@서버_IP_주소<br>
pip install fastapi uvicorn sqlite3<br>
<span class="text-slate-600"># 백그라운드(nohup)에서 서버 포트 열기</span><br>
nohup uvicorn main:app --host 0.0.0.0 --port 80 &
</div>
</div>
<div class="bg-slate-900/50 p-6 rounded-xl border border-slate-700 border-t-4 border-t-purple-500">
<h4 class="font-bold text-white mb-2 mt-0">옵션 B: PaaS 자동 배포 (Render.com)</h4>
<p class="text-sm text-slate-400 mb-4">리눅스 명령어를 몰라도, GitHub 저장소 연동만으로 파이썬 서버가 자동 실행되는 초보자용 서비스입니다.</p>
<ul class="text-sm space-y-2 text-slate-300">
<li>Render에서 Web Service 생성 후 GitHub 연동.</li>
<li>Start Command에 <code>uvicorn main:app --host 0.0.0.0 --port 10000</code> 입력.</li>
</ul>
<div class="bg-rose-950/30 p-4 mt-4 rounded-lg text-xs border border-rose-900/50">
<span class="text-rose-400 font-bold block mb-1">⚠️ SQLite 데이터 초기화 주의:</span>
<span class="text-slate-300">무료 PaaS는 일정 시간 접속이 없으면 서버가 잠들며, 재시작될 때마다 디스크가 날아가 DB가 초기화됩니다. 이 옵션을 쓰려면 DB만 <strong>Turso (libSQL)</strong> 같은 클라우드로 분리해야 합니다.</span>
</div>
</div>
</div>
<div class="mt-8 text-sm text-sky-200 font-semibold bg-sky-900/30 p-5 rounded-xl border border-sky-700/50">
🔗 <strong class="text-white">마지막 핵심 단계:</strong> 백엔드 배포가 끝났다면 실제 백엔드의 IP 주소나 도메인을 얻었을 것입니다. 프론트엔드 React 코드 내의 모든 API 호출 주소(<code>http://localhost:8000/...</code>)를 이 <strong>진짜 백엔드 주소로 변경</strong>한 뒤 GitHub에 다시 Push하여 Vercel에 재배포하세요. 완벽하게 통신하는 풀스택 서비스 런칭이 완료됩니다!
</div>
</section>
<footer class="text-center py-16 mt-8 border-t border-slate-800/80 relative">
<h2 class="text-2xl sm:text-3xl font-bold text-white mb-4 border-none pb-0">당신도 이제 1인 유니콘 스타트업입니다.</h2>
<p class="text-slate-400 mb-10 max-w-2xl mx-auto text-lg leading-relaxed">
과거에는 기획자, 디자이너, 프론트엔드, 백엔드, 인프라 엔지니어까지 수십 명의 팀이 필요했던 풀스택 개발을, 이제는 <strong>당신 혼자 AI 에이전트 오케스트라의 지휘자가 되어</strong> 단 며칠 만에 만들어낼 수 있습니다.<br><br>
망설이지 말고, 지금 바로 Windows 터미널을 열고 첫 프롬프트를 입력해 보세요!
</p>
<div class="inline-block bg-slate-900/80 backdrop-blur-sm px-8 py-3 rounded-full border border-slate-700/80 shadow-lg cursor-default transition-all hover:border-sky-500">
<p class="text-xs text-sky-400 uppercase tracking-widest m-0 font-bold">Built for the Agentic Developer Era • 2026 Edition</p>
</div>
</footer>
</main>
</body>
</html>