1프로젝트 생성
터미널을 열고 원하는 폴더로 이동한 뒤, 아래 명령어를 실행하세요.
# 프로젝트 생성
npm create vite@latest my-admin -- --template react-ts
# 폴더로 이동
cd my-admin
# 의존성 설치
npm install옵션 설명
- my-admin: 프로젝트 이름 (원하는 이름으로 변경 가능)
- react-ts: React + TypeScript 템플릿
중간 용어 팁: CLI / 의존성
- CLI: 터미널에서 명령어로 도구를 실행하는 방식입니다.
- npm: JavaScript 패키지(라이브러리)를 설치/관리하는 도구입니다.
- 의존성(Dependency): 내 프로젝트가 동작하려고 필요로 하는 외부 패키지입니다.
- 심화 학습: 도구 설치/터미널 기초
2Tailwind 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 로고가 보이면 프론트엔드 기본 설정이 완료된 것입니다.
4AI로 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 저장소 에서 확인할 수 있습니다.