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

학습자가 혼자서도 LMS를 읽으며 따라할 수 있는 자율 학습 가이드입니다. Codex로 요구사항 MD를 작성하고, Antigravity로 서비스를 구현하며, Codex로 다시 검증하는 파이프라인을 구축합니다.

🎯 목표 1. 개발 환경 구성 Codex와 Antigravity에서 동일한 프로젝트 절대경로 열기

🎯 목표 2. 요구사항 MD 작성 Codex로 목표, 조건, 완료 기준 명세 작성

🎯 목표 3. MD 기반 구현 Antigravity로 MD를 분석하여 실습 웹페이지 자동 생성

🎯 목표 4. 품질 검증 & 보완 Codex로 구현 결과를 문서 대비 테스트하고 개선

🖥️ Day 1 LECTURE 핵심 슬라이드 (자율 학습 카드)

1 / 14

💡 자율 학습 팁: 강의슬라이드를 순서대로 넘기며 핵심 개념을 익히세요.

⏱️ 시간별 학습 일정 (총 6시간 / 360분)

시간	구분	주요 학습 내용	산출물
20분	오리엔테이션	과정 목표, 5일간 프로젝트 흐름, 오늘의 완료 기준 안내	학습 목표 확인
40분	강의	AI 개발의 기본 사이클(Codex ➔ Antigravity ➔ Codex)과 도구별 역할	작업 흐름 이해
30분	시연	좋은 프롬프트 작성, 파일 변경 확인, 화면 실행 및 수정 프로세스	시연 결과 확인
50분	실습 1	Codex 및 Antigravity 설치/로그인, `my-project` 폴더 생성 및 열기	개발환경 구성
50분	실습 2	Codex로 `README.md` 및 화면 요구사항 `PAGE_REQUIREMENTS.md` 작성	실습 명세 문서
70분	실습 3	Antigravity로 MD 기반 웹페이지(`index.html`) 구현 및 UI/UX 수정	실행 가능한 웹페이지
40분	검증 실습	Codex로 문서 대비 구현 결과 점검 및 `VALIDATION.md` 생성	검증 체크리스트
30분	공유 & 회고	사용한 프롬프트, 성공·실패 경험 및 도구별 역할 차이 토론	프롬프트 제출

💻 Day 1 자율 실습 과제 보드

각 실습 카드를 클릭하여 단계별 상세 가이드, 전용 프롬프트, 파일 구조 및 자가 검증 체크리스트를 확인하세요.

실습 진행률: 0 / 6 완료 (0%) 카드의 체크박스를 눌러 완료 상태를 기록하세요

Task 01 Codex Antigravity Web ChatGPT

⏱️ 50분 소요

환경 구성 & 동일 Workspace 열기

로컬에 my-project 폴더를 생성하고, Codex와 Antigravity에서 동일한 절대경로로 열어 README.md를 생성합니다.

산출물 📁 my-project/ & 📄 README.md

Task 02 Codex Web ChatGPT

⏱️ 50분 소요

Codex로 요구사항 명세서 작성

AI에게 화면을 만들기 전, 목표·구성요소·조건·완료기준이 담긴 PAGE_REQUIREMENTS.md 문서를 명세화합니다.

산출물 📄 PAGE_REQUIREMENTS.md

Task 03 Antigravity

⏱️ 70분 소요

Antigravity로 MD 기반 서비스 구현

작성된 명세 문서를 Antigravity에 전달하여 모던 다크 UI가 적용된 실제 동작 웹 애플리케이션 index.html을 자동 코딩합니다.

산출물 🌐 index.html (실행 웹앱)

Task 04 Codex Web ChatGPT

⏱️ 40분 소요

Codex 품질 검증 및 보완 파이프라인

구현된 코드와 명세서를 Codex로 비교 검증하고, 테스트 결과 보고서 VALIDATION.md를 생성하여 결함을 보완합니다.

산출물 📄 VALIDATION.md

자율 도전 A Codex Antigravity Web ChatGPT

🚀 포트폴리오 특화

개인 포트폴리오 & 경력 소개 웹사이트

자신의 핵심 역량, 기술 스택 태그 5개, 주요 프로젝트 카드 3개 및 문의하기 기능을 갖춘 원페이지 포트폴리오를 자율 구축합니다.

산출물 📄 PORTFOLIO_REQUIREMENTS.md

자율 도전 B Codex Antigravity Web ChatGPT

🚀 MVP 랜딩 특화

신규 아이템 사전 알림 신청 랜딩페이지

창업 아이템 출시 전 고객 반응 검증을 위한 혜택 카드, 이메일 사전 등록 입력폼, 성공 팝업 및 Q&A 아코디언 페이지를 만듭니다.

산출물 📄 LAUNCH_REQUIREMENTS.md

🚀 Day 1 자율형 실습 프로젝트 (선택 도전 주제 2종)

기본 따라하기 실습을 마친 후, 자신의 상황이나 관심 분야에 맞춰 아래 2가지 자율 주제 중 하나를 선택해 처음부터 스스로 구현해 보세요.

자율 주제 A 명세: PORTFOLIO_REQUIREMENTS.md

💼 AI 기반 개인 포트폴리오 & 경력 소개 페이지

수강생 자신의 경력, 핵심 스킬, 대표 프로젝트 카드 3개 및 외부 이메일/소셜 문의 버튼을 포함하는 1페이지 포트폴리오 웹사이트를 구축합니다.

📌 Codex 프롬프트 예시

PORTFOLIO_REQUIREMENTS.md 파일을 생성해 줘.
내용: "개발자/기획자 개인 포트폴리오 원페이지 웹사이트"
1. 제목: My Professional Portfolio
2. 상단: 이름, 프로필 이미지 영역, 핵심 역량 한 줄 요약
3. 중단: 기술 스택 태그 5개, 주요 프로젝트 카드 3개 (제목, 설명, 사용 기술)
4. 하단: 이메일 문의하기 버튼 및 소셜 링크
5. 조건: 모던 다크 UI, Pretendard 폰트 적용
6. 완료 기준: 브라우저에서 프로젝트 카드가 반응형으로 정렬될 것.

자율 주제 B 명세: LAUNCH_REQUIREMENTS.md

🚀 신규 아이템 사전 알림 신청 랜딩 페이지

창업 아이템 출시 전 고객 반응 및 수요를 검증하기 위한 혜택 카드, 사전 등록 신청 입력 폼, 등록 완료 팝업 알림 랜딩 페이지를 구축합니다.

📌 Codex 프롬프트 예시

LAUNCH_REQUIREMENTS.md 파일을 생성해 줘.
내용: "신규 서비스 사전 알림 신청 랜딩 페이지"
1. 제목: Service Pre-launch
2. 상단: 서비스 로고, 강렬한 헤드라인 문구, 기대 효과 3가지 카드
3. 중단: 사전 신청 입력 폼 (이름, 이메일 주소, 사전 등록 버튼)
4. 하단: 서비스 Q&A 3개 항목 accordion
5. 조건: 깔끔한 푸른색 톤 UI, 반응형 렌더링
6. 완료 기준: 이메일 입력 후 사전 등록 버튼 클릭 시 성공 메시지가 팝업될 것.

❓ Day 1 자율 이해도 체크 퀴즈

Q. Codex와 Antigravity를 함께 사용할 때 올바른 설명은 무엇일까요?

① 두 도구는 서로 다른 폴더를 열고 작업해도 자동으로 연결된다.

② 두 도구 모두 반드시 동일한 절대경로 프로젝트 폴더(my-project)를 열어야 한다.

③ Antigravity는 요구사항 문서(MD)를 읽지 않고 동작한다.

🎁 Day 1 핵심 실습 결과물 (Deliverables) 정의

오늘 Day 1 학습을 마쳤을 때 수강생 작업 공간(my-project)에 최종 완성되어 있어야 하는 5가지 핵심 실습 결과물입니다.

결과물 01. 개발 환경

📁 작업 프로젝트 폴더 (my-project)

Codex와 Antigravity 두 도구에서 동일한 로컬 절대경로로 열려있는 프로젝트 작업 공간입니다.

결과물 02. 프로젝트 개요서

📄 README.md

Codex로 작성된 프로젝트 목적("AI 개발 도구를 활용한 기본 웹 서비스 실습") 및 폴더 구조 안내 문서입니다.

결과물 03. 요구사항 명세서

📄 PAGE_REQUIREMENTS.md

Codex로 작성된 프로필 페이지 요구사항(상단 프로필, 문제/해결책 카드, 문의 버튼, 다크 UI, 완료 기준)입니다.

결과물 04. 실행 가능 웹 코드

🌐 index.html

Antigravity가 PAGE_REQUIREMENTS.md를 분석하여 생성한 브라우저에서 바로 실행 가능한 웹 애플리케이션 코드입니다.

결과물 05. 품질 검증 보고서

📄 VALIDATION.md

Codex로 문서 대비 구현 결과를 자동 검증한 테스트 체크리스트(통과/미통과) 및 추가 수정 요구사항 목록입니다.

📬 실습 과제 제출 & 등록 센터 (Deliverables & Classroom)

Day 1 실습 과제 제출 & 구글 클래스룸 등록

오늘 완성한 핵심 실습 결과물을 구글 드라이브에 업로드하고, 구글 클래스룸 해당 과제에 등록을 완료해 주세요.

💡 과제 제출 & 등록 방법 안내

[Step 1] 구글 드라이브 파일 업로드: 파일명 형식은 팀명_제목 (예: Maikaratu-Enterprice_Day1_과제) 으로 설정하여 업로드해 주세요.

[Step 2] 구글 클래스룸 과제 등록: 아래 [과제제출 등록하기] 버튼을 눌러 클래스룸 과제를 열고, 댓글에 과제 등록 완료 : 구글드라이브 링크 형태로 작성해 주세요.

☁️ Day 1 실습 과제 제출하기 (구글 드라이브) ↗ 📋 과제제출 등록하기 (구글 클래스룸) ↗