1 프로젝트 생성
터미널을 열고 원하는 폴더로 이동한 뒤, 아래 명령어를 실행하세요.
# 프로젝트 생성
npm create vite@latest my-admin -- --template react-ts
# 폴더로 이동
cd my-admin
# 의존성 설치
npm install옵션 설명
- my-admin: 프로젝트 이름 (원하는 이름으로 변경 가능)
- react-ts: React + TypeScript 템플릿
2 Tailwind CSS 설치
Tailwind CSS를 설치하면 클래스만으로 예쁜 UI를 만들 수 있습니다.
# Tailwind 설치
npm install -D tailwindcss postcss autoprefixer
# 설정 파일 생성
npx tailwindcss init -p tailwind.config.js 파일을 열고 아래처럼 수정하세요:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
} src/index.css를 열고 맨 위에 추가하세요:
@tailwind base;
@tailwind components;
@tailwind utilities;3 개발 서버 실행
npm run dev
브라우저에서 http://localhost:5173을 열면 Vite 기본 페이지가 보입니다.
Vite 로고가 보이면 프론트엔드 기본 설정이 완료된 것입니다.
4 AI로 UI 만들기
이제 AI에게 프로젝트 관리 UI를 만들어달라고 요청합니다. 아래 프롬프트를 복사해서 Antigravity 또는 ChatGPT에 붙여넣으세요.
AI 프롬프트
작업 필요
"React + TypeScript + Tailwind로 프로젝트 관리 앱을 만들어줘. 요구사항: 1. src/App.tsx에 메인 레이아웃 (헤더 + 콘텐츠) 2. 프로젝트 목록을 보여주는 카드 UI 3. 새 프로젝트 생성 폼 (이름, 설명 입력) 4. 프로젝트 삭제 버튼 5. 지금은 로컬 state로 데이터 관리 (나중에 API 연결할 거야) 스타일: - 다크 모드 배경 (bg-gray-900) - 카드는 bg-gray-800에 hover 효과 - 파란색 계열 액센트 (blue-500) 파일 구조: - src/App.tsx - src/components/ProjectCard.tsx - src/components/ProjectForm.tsx - src/types/index.ts"
위 프롬프트를 AI에게 전달하세요. Antigravity를 사용한다면 Cmd+L로 에이전트 패널을 열 수 있습니다.
AI 응답 활용 팁
- AI가 생성한 코드를 그대로 파일에 붙여넣기
- 에러가 나면 에러 메시지를 AI에게 보여주기
- "이 에러 어떻게 해결해?" 라고 물어보기
5 예상 결과물
AI가 만들어준 코드를 적용하면 이런 화면이 나옵니다:
프로젝트 관리
새 프로젝트
내 첫 프로젝트
AI로 만든 웹서비스
두 번째 프로젝트
완성된 예제 코드는 GitHub 저장소 에서 확인할 수 있습니다.