AI 코딩 마스터클래스

핵심 기술 스택: 프론트엔드와 백엔드의 이해 및 예제

AI에게 올바른 지시를 내리려면 우리가 무엇을 만들고 있는지 전체 구조(아키텍처)를 알아야 합니다. 현대 웹 서비스는 화면을 그리는 프론트엔드와 데이터를 처리하는 백엔드로 완전히 분리되어 JSON 형태의 데이터를 주고받습니다.

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
}

export default function UserProfile() {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    fetch('http://localhost:8000/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div className="p-4 bg-slate-800 text-white">
      {users.map(u => <p key={u.id}>{u.name}님 환영합니다.</p>)}
    </div>
  );
}

from fastapi import FastAPI
import sqlite3

app = FastAPI()

@app.get("/api/users")
def get_users():
    # 실제로는 SQLite 파일에서 데이터를 조회합니다.
    return [
        {"id": 1, "name": "AI 마스터"},
        {"id": 2, "name": "Windows 유저"}
    ]

Windows 터미널의 지휘관: Gemini CLI와 AI Studio

Windows 환경에서 코딩을 시작하려면, 까만 화면의 터미널(PowerShell) 명령어만으로 AI를 제어하는 법을 알아야 합니다.

1. 필수 프로그램 설치 (Windows PowerShell 관리자 권한)

Windows 11에 내장된 패키지 관리자인 winget을 사용해 한 번에 설치합니다.

2. AI의 뇌 장착하기: Google AI Studio

터미널이나 에디터에서 AI를 호출하려면 'API 키'라는 일종의 신분증이 필요합니다.

1. Google AI Studio에 접속하여 구글 계정으로 로그인합니다.
2. 좌측 [Get API Key] 메뉴에서 Create API Key 버튼을 클릭합니다.
3. 생성된 AIzaSyB... 로 시작하는 긴 문자열을 복사하여 안전한 곳에 보관합니다. 이 키는 GitHub 등에 절대 유출되면 안 됩니다.

3. Gemini CLI 설치 및 실전 활용

에러 로그와 코드를 복사해서 챗GPT 웹사이트로 갈 필요가 없습니다. 내 프로젝트 폴더 안에서 즉시 AI에게 지시합니다.

차세대 에이전트 IDE: Google Antigravity 워크플로우

한 줄씩 코드를 추천해 주던 단순 자동완성(Copilot)의 시대는 끝났습니다. 구글의 Google Antigravity는 코드를 스스로 작성, 테스트, 수정하는 '에이전트 중심(Agent-first)' 개발 툴입니다. 이제 여러분은 코더가 아니라 여러 AI 에이전트(작업자)를 지휘하는 '오케스트라 지휘자'가 됩니다.

실전 시나리오: 결제 모듈 추가하기

기존 에디터라면 수십 개의 파일을 넘나들며 코드를 짜야 하지만, Antigravity에서는 다음과 같이 진행됩니다.

1. 1. 에이전트 호출 및 자연어 지시 (Prompting)

   에디터에서 Ctrl + L 단축키로 사이드 패널을 열고, @ 기호로 특정 파일을 참조하여 프롬프트를 입력합니다.

   "@frontend/src/App.tsx @backend/main.py 이 파일들을 참고해서, 백엔드에는 /api/pay 엔드포인트를 만들고, 프론트엔드에는 Tailwind로 꾸며진 결제 폼 컴포넌트를 연동해서 생성해줘."
2. 2. 계획 승인 (Implementation Plan & Task Lists)

   에이전트가 코드를 막무가내로 덮어쓰지 않습니다. 우측 화면에 "1. models.py 생성, 2. PaymentForm.tsx 컴포넌트 추가..." 라는 작업 계획서(Task List)를 띄워줍니다. 개발자는 로직의 허점을 검토하고 문제가 없다면 [Approve (승인)] 버튼을 누릅니다.

3. 3. 시각적 산출물 검토 (Artifacts)

   승인이 떨어지면 에이전트가 백그라운드에서 코드를 작성합니다. 특히 프론트엔드 작업 시, 에이전트가 내장된 가상 브라우저(Headless Chrome)를 열어 자신이 만든 폼에 직접 텍스트를 입력해 보고 정상 작동하는 스크린샷이나 녹화 영상(Video)을 결과물로 제출합니다. 에러가 나면 에이전트 스스로 코드를 수정(Self-healing)합니다.

세련된 UI/UX 적용: Vibe 벤치마킹과 Google Stitch

개발자가 만든 투박한 디자인은 서비스의 신뢰도를 떨어뜨립니다. 포토샵이나 피그마(Figma)를 다루지 못해도, 프롬프트만으로 상용 서비스 수준의 아름다운 UI 코드를 뽑아내는 비법입니다.

1. 메이저 서비스 카피캣 (Vibe 추출 공식)

Toss(토스), Apple, Vercel 처럼 '디자인이 좋다'고 느껴지는 서비스의 감각(Vibe)을 내 프로젝트에 이식합니다.

2. Google Stitch 2.0으로 UI 코드 즉시 생성하기

Google Stitch는 프롬프트나 종이에 대충 그린 스케치를 완벽한 디자인의 React + Tailwind CSS 코드로 변환해 주는 UI 특화 에이전트입니다.

생성된 디자인을 확인한 후 [Code Export] 탭을 눌러 코드를 복사하고, Antigravity 에디터에 붙여넣기만 하면 눈부신 프론트엔드가 완성됩니다.

세상 밖으로: 클라우드 서버 구축 및 배포 (Porting) 완벽 가이드

내 PC(localhost)에서만 작동하던 서비스를 전 세계 사람들이 스마트폰이나 PC로 접속할 수 있도록 인터넷 클라우드 서버에 올리는 과정입니다. 사이드 프로젝트에 최적화된 가장 경제적인 방법을 소개합니다.

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    # 배포될 프론트엔드 도메인과 로컬 개발용 주소를 모두 허용 목록에 넣습니다.
    allow_origins=["https://내-프로젝트.vercel.app", "http://localhost:5173"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

🌐 1단계: 프론트엔드 배포 (Vercel) - 평생 무료 & 초간단

React 코드는 빌드 시 최종적으로 화면을 그리는 정적 파일(HTML/JS/CSS)이 되므로, 글로벌 CDN에 무료로 올릴 수 있습니다.

1. 코드를 내 GitHub 저장소(Repository)에 업로드(Push)합니다.
2. Vercel.com에 GitHub 계정으로 로그인합니다.
3. [Add New Project]를 누르고 방금 올린 GitHub 저장소를 연결(Import)합니다.
4. Deploy 버튼을 누르면 약 1분 뒤 https://my-awesome-app.vercel.app 형태의 무료 도메인이 자동 생성됩니다.

🖥️ 2단계: 백엔드(FastAPI + SQLite) 클라우드 호스팅 옵션

파이썬 서버는 사용자의 요청을 실시간으로 연산하고 DB 파일을 저장해야 하므로 24시간 켜져 있는 호스팅이 필요합니다.