ACE AI Startup Bootcamp · 자기주도 학습 교재

D1

AI 개발 도구와
작업 방식 익히기

AI 도구로 아이디어를 실제 서비스로 만드는 첫 번째 단계

🤖

Chapter 1

AI 개발 도구 소개

⚙️

Chapter 2

Codex vs Antigravity

📝

Chapter 3

개발 환경 세팅

🚀

Chapter 4

첫 번째 AI 실습

교육 기관

ODA AI SW · ACE Program

과정

창업 지망생 AI 웹 개발

ACE AI Startup Bootcamp · Day 1 도입 및 학습 안내

ACE AI Startup Bootcamp · Day 1 자기주도 학습 교재

AI 개발 도구와 작업 방식 익히기

📚 이 교재는 혼자 읽으면서 완전히 이해하고 따라할 수 있도록 설계되었습니다.
개념 설명 → 실제 예시 → 단계별 실습 → 셀프 체크 순서로 진행합니다.

1. 왜 AI 개발 도구를 써야 하는가?

💬 실제 창업자 이야기

김 대표는 "강아지 산책 대행 매칭 앱"을 만들고 싶었습니다. 개발 외주 업체에 맡겼더니 3개월 뒤 앱이 나왔는데 "산책 신청하기 버튼이 있긴 한데 눌러도 아무 일도 안 일어났습니다." 원하던 게 아니었습니다. 다시 수정하려니 추가 비용 500만원이 필요했습니다.

문제의 근본 원인: 머릿속 생각을 정확한 문서로 표현하지 못했습니다.
AI 개발 도구를 사용하면 창업자 본인이 직접 "무엇을 어떻게 만들어라"를 문서로 작성하고, AI가 그 문서를 읽고 실제로 동작하는 웹 서비스를 만들어줍니다.

이 과정에서 배우는 핵심 가치:

✍️

생각을 문서로

머릿속 아이디어를 AI가 이해할 수 있는 명확한 요구사항 문서로 변환합니다.

🤖

문서를 코드로

작성한 문서를 AI가 읽고 실제 동작하는 웹 서비스 코드로 자동 생성합니다.

🔄

빠른 반복 개선

마음에 안 들면 문서를 수정하고 다시 요청하는 방식으로 빠르게 개선합니다.

ACE AI Startup Bootcamp · Day 1 Codex와 Antigravity 비교

2. Codex와 Antigravity — 무슨 차이인가?

🏗️ 건축 비유로 이해하기
집을 짓는다고 생각해보세요.
Codex = 건축 설계사 — "이 집은 방 3개, 거실 1개, 화장실 2개가 필요합니다"라고 도면을 그리는 사람
Antigravity = 시공사 — 도면을 받아 실제로 집을 짓는 사람
도면(요구사항 MD 문서) 없이 시공사에게 집을 지어달라고 하면 원하는 집이 나오지 않습니다.

구분	🤖 Codex (OpenAI)	🌐 Antigravity (Google AGY)
핵심 역할	생각을 정리하고 문서를 작성 · 검토	문서를 읽고 실제 동작하는 코드 생성
언제 사용	요구사항 작성, 내용 검토, 문서 보완할 때	웹 화면 구현, 코드 수정, 기능 추가할 때
주요 산출물	`PAGE_REQUIREMENTS.md`, `VALIDATION.md`	`index.html`, CSS, JavaScript 파일들
비유	설계사 (도면 작성)	시공사 (실제 건설)

📌 개발 파이프라인 전체 흐름

1. Codex
요구사항 작성 → 2. Antigravity
서비스 구현 → 3. 브라우저
결과 확인 → 4. Codex
품질 검증 → 5. 필요시
반복

💡 핵심 원칙: Codex와 Antigravity가 항상 동일한 프로젝트 폴더를 바라봐야 합니다. 두 도구가 서로 다른 폴더를 보고 있으면, 한 쪽에서 만든 문서를 다른 쪽이 못 읽습니다.

ACE AI Startup Bootcamp · Day 1 폴더와 절대경로 이해

3. 폴더, 파일, 절대경로 완전 이해하기

AI 도구에게 "이 파일을 수정해줘"라고 말할 때, AI가 파일을 찾을 수 있으려면 정확한 위치 주소가 필요합니다. 이 주소를 절대경로라고 합니다.

❌ 이렇게 하면 안 됨

"프로젝트 폴더에 있는 requirements 파일 수정해줘"

문제: AI가 프로젝트 폴더가 어디 있는지, requirements 파일이 어떤 파일인지 알 수 없습니다.

✅ 이렇게 해야 함

"C:\Users\kim\Desktop\my-project\PAGE_REQUIREMENTS.md 파일을 수정해줘"

이유: 컴퓨터 어디에 있는지 정확한 주소를 주면 AI가 바로 찾아갑니다.

📂 절대경로 찾는 방법

A

Windows (윈도우)

폴더를 열고 → 주소창을 클릭하면 전체 경로가 보입니다.
예: C:\Users\홍길동\Desktop\my-project

B

Mac (맥북)

Finder에서 폴더 우클릭 → "정보 가져오기" → "위치" 항목 확인
예: /Users/홍길동/Desktop/my-project

📁 프로젝트 폴더 구조 (권장)

아래 구조로 폴더를 만들면 Codex와 Antigravity가 서로 파일을 찾기 쉽습니다.

📁 my-project/

├── 📄 README.md 프로젝트 목적 및 개요

├── 📄 PAGE_REQUIREMENTS.md ★ Codex가 작성, Antigravity가 읽음

├── 📄 VALIDATION.md Codex 검증 체크리스트

└── 🌐 index.html ★ Antigravity가 생성하는 웹 서비스

⚠️ 자주 하는 실수: 폴더 이름이나 파일 이름에 한글, 공백, 특수문자를 사용하면 경로를 읽을 때 오류가 납니다.
✅ 권장: my-project ❌ 비권장: 내 프로젝트 (1)

ACE AI Startup Bootcamp · Day 1 프롬프트 작성의 3요소

4. 프롬프트 작성의 3요소 — AI에게 잘 말하는 방법

AI에게 지시할 때, 대답의 품질을 결정하는 가장 중요한 요소는 프롬프트(지시문)의 구체성입니다. 막연하게 요청하면 막연한 결과가 나옵니다.

🎯

① 목표 (Goal)

어떤 결과물 파일이나 화면을 만들어야 하는지 구체적으로 명시

예: "PAGE_REQUIREMENTS.md 파일을 생성해줘"

📋

② 조건 (Constraints)

디자인 스타일, 포함해야 할 내용, 하지 말아야 할 것 명시

예: "다크 모드, Pretendard 폰트 사용"

✅

③ 완료 기준 (Acceptance Criteria)

브라우저에서 무엇이 보이면 성공인지 확인 가능한 기준 제시

예: "버튼 클릭 시 팝업이 뜨면 완료"

📝 나쁜 프롬프트 vs 좋은 프롬프트 비교

❌ 나쁜 프롬프트 예시

"웹사이트 만들어줘. 이쁘게."

문제점:
• 어떤 내용의 웹사이트인지 불명확
• "이쁘게"는 주관적 기준
• 파일명, 폴더 위치 미지정
• 성공 기준 없음

✅ 좋은 프롬프트 예시

"PAGE_REQUIREMENTS.md 파일을 생성해줘.
내용: 예비창업자 소개 페이지
구성: 이름/소개/태그(상단), 문제/해결책 카드 2개(중단), 문의 버튼(하단)
스타일: 다크 모드, Pretendard 폰트
완료 기준: 브라우저에서 카드가 반응형으로 보일 것"

좋은 이유:
• 생성할 파일명 명확
• 구성 요소 구체적
• 스타일 조건 명시
• 검증 가능한 완료 기준

💡 프롬프트 작성 꿀팁: 요청 후 AI가 뭔가 이상한 결과를 줬다면,
"방금 생성한 파일에서 [구체적인 문제]를 수정해줘. 수정 전에 변경할 내용을 먼저 나에게 알려줘."
라고 요청하면 실수를 줄일 수 있습니다.

ACE AI Startup Bootcamp · Day 1 실습: 폴더 및 요구사항 문서

5. 오늘의 실습 — 단계별 따라하기

🎯 오늘의 목표: 예비창업자 소개 웹페이지 1개를 Codex와 Antigravity를 활용하여 처음부터 끝까지 만들어본다.

🔧 실습 전 준비

1

프로젝트 폴더 만들기

바탕화면에 my-project 폴더를 생성합니다. (한글, 공백 없이)
경로 예: C:\Users\이름\Desktop\my-project

2

Codex 열기

Codex 앱을 실행하고 위에서 만든 my-project 폴더를 프로젝트로 설정합니다.
Codex → 상단 폴더 아이콘 → 폴더 선택

3

Antigravity 열기

Antigravity(Google AGY)를 실행하고 동일한 my-project 폴더를 작업 경로로 지정합니다.

📝 실습 1 — Codex로 환경 구성 문서 만들기

먼저 프로젝트의 기본 설명 파일인 README.md를 Codex로 만들어봅니다.

📌 Codex에 다음 프롬프트를 입력하세요: 이 프로젝트 폴더(my-project)의 기본 역할을 정의해줘. 프로젝트 목적은 "AI 개발 도구를 활용한 기본 웹 서비스 실습"이야. 기본 README.md 파일을 생성하고 아래 구조로 작성해줘: - 프로젝트 이름 - 목적 (한 줄 설명) - 사용 도구 (Codex, Antigravity) - 폴더 구조 설명 - 사용 방법

✅ 이렇게 보이면 성공입니다:
my-project 폴더 안에 README.md 파일이 생성되고,
Codex 화면에 위에서 지시한 구조대로 내용이 작성된 것을 확인할 수 있습니다.

📝 실습 2 — Codex로 요구사항 명세서 작성하기

이제 핵심 문서인 PAGE_REQUIREMENTS.md를 작성합니다. 이 문서가 Antigravity가 웹페이지를 만들 때 기준이 됩니다.

📌 Codex에 다음 프롬프트를 입력하세요: PAGE_REQUIREMENTS.md 파일을 생성해줘. 내용: "예비창업자 프로필 및 서비스 소개 페이지" ## 페이지 구성 1. 제목: My Startup Pitch 2. 상단 섹션: 창업자 이름, 한 줄 소개, 핵심 분야 태그 2~3개 3. 중단 섹션: 내가 해결하려는 문제 설명, 해결책 카드 2개 4. 하단 섹션: 문의하기 버튼 (클릭 시 이메일 주소 표시) ## 디자인 조건 - 다크 모드 스타일 (배경 #0f172a) - Pretendard 폰트 사용 - 모바일과 PC 모두 잘 보이는 반응형 레이아웃 ## 완료 기준 - 브라우저에서 열었을 때 모든 섹션이 올바르게 표시될 것 - 문의하기 버튼 클릭 시 이메일 주소가 나타날 것

💡 이 단계의 핵심: Codex는 이 문서를 파일로 저장합니다. Codex 화면에서 "파일 저장" 또는 "Create file" 버튼을 눌러 반드시 저장하세요. 저장 후 my-project 폴더 안에 PAGE_REQUIREMENTS.md 파일이 생겼는지 확인하세요.

ACE AI Startup Bootcamp · Day 1 실습: 웹페이지 구현 및 검증

⚙️ 실습 3 — Antigravity로 웹페이지 구현하기

Codex가 만든 문서를 Antigravity가 읽고 실제로 동작하는 웹페이지를 만듭니다.

📌 Antigravity에 다음 프롬프트를 입력하세요: PAGE_REQUIREMENTS.md 파일을 읽고, 명시된 요구사항을 완벽히 만족하는 index.html 웹페이지를 만들어줘. 조건: 1. 디자인: Pretendard 폰트와 모던 다크 글래스모피즘 UI 적용 2. CSS: <style> 태그 안에 모두 작성 (외부 CSS 파일 사용 안 함) 3. JavaScript: <script> 태그 안에 작성 4. 구성: 상단 프로필, 중단 카드 2개, 하단 문의 버튼 5. 완료 기준: 브라우저에서 바로 열어볼 수 있는 단일 index.html 파일 완성 작업 후 생성/수정한 파일 목록을 알려줘.

1

Antigravity 실행 확인

Antigravity가 파일을 생성하는 동안 잠시 기다립니다. (10~30초 소요)

2

생성된 파일 확인

my-project 폴더 안에 index.html 파일이 생성되었는지 확인합니다.

3

브라우저에서 열기

index.html 파일을 더블클릭하거나, 크롬 브라우저에 파일을 드래그하여 엽니다.

✅ 이렇게 보이면 성공입니다:
• 브라우저에 어두운 배경의 소개 페이지가 열림
• 창업자 이름, 소개 문구, 태그가 상단에 표시됨
• 문제/해결책 카드 2개가 중단에 보임
• "문의하기" 버튼이 하단에 있고, 클릭하면 이메일 주소가 나타남

🔍 실습 4 — Codex로 품질 검증하기

Antigravity가 만든 결과물이 요구사항을 제대로 구현했는지 Codex로 검증합니다.

📌 Codex에 다음 프롬프트를 입력하세요: index.html 코드를 검토하고 PAGE_REQUIREMENTS.md 내용과 비교해줘. 1. 누락된 요구사항이나 잘못 구현된 부분이 있는지 점검해줘 2. VALIDATION.md 파일을 새로 만들고 아래 형식으로 체크리스트를 작성해줘: - 요구사항 항목 | 구현 여부(통과/미통과) | 비고 3. 누락 부분이 있다면 PAGE_REQUIREMENTS.md에 수정 요청사항으로 추가해줘

📄 VALIDATION.md 예시 결과물


# 품질 검증 체크리스트

작성일: 2026-09-05



## 요구사항 검증 결과

| 요구사항 | 구현 여부 | 비고 |

|---------|--------|------|

| 창업자 이름 표시 | ✅ 통과 | 상단에 정상 표시 |

| 핵심 분야 태그 표시 | ✅ 통과 | 2개 표시 |

| 해결책 카드 2개 | ✅ 통과 | 반응형 그리드 |

| 문의하기 버튼 | ✅ 통과 | 클릭시 이메일 표시 |

| 반응형 레이아웃 | ⚠️ 미통과 | 모바일에서 카드 겹침 |



## 수정 필요 항목

- 모바일(375px 이하) 카드 레이아웃 수정 필요

ACE AI Startup Bootcamp · Day 1 도전! 자율형 실습 주제 2종

6. 도전! 자율형 실습 주제 2종

기본 실습을 완료했다면 아래 주제 중 하나를 선택해서 처음부터 스스로 만들어보세요.

🏆 [자율 주제 A] 개인 포트폴리오 웹페이지

만들 것: 나를 소개하는 포트폴리오 한 페이지 웹사이트
핵심 구성: 프로필 헤더, 기술/역량 태그 5개, 주요 프로젝트·경험 카드 3개, 연락처

📌 Codex 시작 프롬프트 예시: PORTFOLIO_REQUIREMENTS.md 파일을 생성해줘. 내용: "개발자/기획자 개인 포트폴리오 원페이지 웹사이트" ## 페이지 구성 1. 제목: My Professional Portfolio 2. 상단: 이름, 프로필 이미지 영역(이미지 없이 이니셜 원형), 핵심 역량 한 줄 요약 3. 중단: 역량/기술 태그 5개, 주요 경험 카드 3개 (제목, 설명, 기간) 4. 하단: 이메일 문의 버튼 ## 완료 기준 - 경험 카드 3개가 PC에서 가로로, 모바일에서 세로로 정렬될 것 - 다크 모드 스타일 적용

🚀 [자율 주제 B] 서비스 사전 신청 랜딩 페이지

만들 것: 내가 만들 서비스를 소개하고 관심 있는 사람을 모으는 랜딩 페이지
핵심 구성: 헤드라인, 혜택 카드 3개, 사전 신청 이메일 폼, 신청 완료 메시지

📌 Codex 시작 프롬프트 예시: LAUNCH_REQUIREMENTS.md 파일을 생성해줘. 내용: "신규 서비스 사전 신청 랜딩 페이지" ## 페이지 구성 1. 제목: [내 서비스 이름] - Pre-launch 2. 상단: 로고 영역, 강렬한 헤드라인, 혜택 3가지 카드 3. 중단: 사전 신청 폼 (이름, 이메일, 신청 버튼) 4. 하단: 자주 묻는 질문 3개 아코디언 ## 완료 기준 - 이메일 입력 후 버튼 클릭 시 "신청 완료!" 메시지가 화면에 표시될 것

ACE AI Startup Bootcamp · Day 1 트러블슈팅 가이드

7. 막혔을 때 트러블슈팅 가이드

실습 중 문제가 생겼을 때 아래 체크리스트를 순서대로 확인하세요.

🔴 AI가 엉뚱한 결과를 줬을 때

1

프롬프트에 파일명을 명확히 지정했는가?

"파일 만들어줘" → "PAGE_REQUIREMENTS.md 파일을 생성해줘"로 수정

2

프롬프트에 완료 기준이 있는가?

"완료 기준: 버튼 클릭 시 팝업이 뜰 것"처럼 검증 가능한 기준 추가

3

수정 요청 시 구체적으로 무엇이 문제인지 설명

"이상해" → "버튼이 클릭되지 않습니다. 클릭 이벤트가 연결되지 않은 것 같습니다. 수정해줘"

🔴 파일이 폴더에 보이지 않을 때

1

Codex/Antigravity가 올바른 폴더를 보고 있는가?

각 도구에서 현재 작업 경로가 my-project 폴더인지 확인

2

파일 저장 버튼을 눌렀는가?

Codex에서 파일 생성 후 반드시 "저장" 또는 "Create" 버튼 클릭 필요

3

폴더 새로고침

탐색기/Finder에서 F5 또는 폴더 닫고 다시 열기

🔴 브라우저에서 페이지가 안 열릴 때

1

파일 이름이 index.html인지 확인

index.HTML, Index.html 등 대소문자도 주의하세요.

2

Chrome 브라우저로 열기

파일을 Chrome 브라우저 창에 직접 드래그앤드롭으로 넣어보세요.

ACE AI Startup Bootcamp · Day 1 핵심 용어 사전

8. 핵심 용어 사전

Codex

OpenAI의 AI 코딩 어시스턴트. 이 과정에서는 요구사항 문서 작성과 검증에 사용합니다.

Antigravity

Google의 AI 개발 도구(AGY). 작성된 문서를 읽고 실제 웹 코드를 생성합니다.

.md (Markdown)

마크다운 파일. 간단한 문법으로 제목, 목록, 표를 작성할 수 있는 텍스트 형식입니다. AI가 읽기 좋아합니다.

절대경로

파일의 정확한 위치 주소. 예: C:\Users\kim\Desktop\my-project

MVP

Minimum Viable Product. 핵심 기능만 포함한 최소 버전 제품. 빠르게 만들어 사용자 반응을 확인하는 전략입니다.

요구사항 명세

서비스가 무엇을 해야 하는지, 어떻게 보여야 하는지를 명확하게 기술한 문서입니다.

반응형 레이아웃

PC, 태블릿, 스마트폰 화면 크기에 따라 자동으로 레이아웃이 조정되는 디자인입니다.

프롬프트

AI에게 작업을 지시하는 텍스트 입력. 구체적이고 명확할수록 좋은 결과를 얻습니다.

ACE AI Startup Bootcamp · Day 1 체크리스트 및 안전 원칙

9. Day 1 완료 셀프 체크리스트

아래 항목들을 순서대로 확인하세요. 모두 체크되면 Day 1 완료입니다! 🎉

my-project 폴더를 바탕화면에 만들었다 (한글/공백 없이)
Codex를 열고 my-project 폴더를 작업 폴더로 설정했다
Antigravity를 열고 동일한 my-project 폴더를 작업 경로로 지정했다
Codex로 README.md 파일을 생성했다
Codex로 PAGE_REQUIREMENTS.md 파일을 생성하고 저장했다
Antigravity로 index.html 웹페이지를 생성했다
브라우저에서 index.html을 열어 정상 작동을 확인했다
Codex로 VALIDATION.md 품질 검증 체크리스트를 작성했다
프롬프트의 3요소(목표, 조건, 완료 기준)를 이해했다
(선택) 자율 주제 A 또는 B를 직접 시도해봤다

10. 안전 원칙 및 주의사항

🔒 반드시 지켜야 할 보안 원칙

• API 키, 개인 비밀번호를 프롬프트에 절대 입력하지 마세요.
• 타인의 개인정보(이름, 전화번호, 이메일 등)를 실습에 사용하지 마세요.
• AI가 수정한 파일 목록을 실행 전에 미리 확인하세요.
• 중요한 파일은 AI에게 수정 요청 전에 반드시 복사본을 만드세요.

📌 다음 시간 예고 — Day 2: AI와 개발 가능한 프로젝트 기획하기
Day 2에서는 내가 만들 서비스 아이디어를 AI가 이해할 수 있는 체계적인 기획 문서(PROJECT.md)로 만드는 방법을 배웁니다. 오늘 배운 Codex 사용법이 Day 2의 기초가 됩니다!

AI 개발 도구와작업 방식 익히기