📱 Google Antigravity 브라우저를 활용하여 수업용 교육앱 제작 가이드: 기초부터 실전까지

당신은 대학 교육용 앱 기획 전문가입니다.
나는 뷰티학과 교수이며 Google Antigravity 브라우저를 활용해
수업용 웹앱을 처음 만들려고 합니다.

앱 주제: 퍼스널컬러 진단 + 메이크업 학습 가이드
대상 사용자: 뷰티 전공 대학생 (20대 초반)
목적: 수업 자료 통합 + 자기주도 학습 지원 + 과제 제출

아래 항목을 순서대로 작성해주세요:
1. 교육앱에 필수적인 핵심 화면 구성 (메인/진단/결과/자료실/제출)
2. 각 화면에 필요한 콘텐츠 요소 목록
3. Google Sheets와 연동할 데이터 구조 설계
4. 초보 교수자도 3일 안에 완성할 수 있는 개발 로드맵
5. Antigravity 브라우저에서 구현 시 주의할 점

표와 예시를 포함하여 단계별로 설명해주세요.

퍼스널컬러 4계절 타입에 맞는 메이크업 가이드 콘텐츠를
Google Sheets에 입력할 수 있도록 아래 형식으로 만들어줘.

[컬럼 구성]
타입명 / 피부톤 특징 / 추천 파운데이션 / 추천 립 컬러 /
추천 아이섀도 / 피해야 할 컬러 / 어울리는 패션 컬러 /
대표 연예인 / 한 줄 요약

[조건]
- 봄웜 / 여름쿨 / 가을웜 / 겨울쿨 각 타입별 3행씩
- 총 12행 CSV 형태로 작성
- 나는 여름쿨 타입이므로 이 타입을 가장 상세하게 작성
- 뷰티 전공 학생이 실습에 바로 활용할 수 있는 구체적인 
  색상명(예: 로즈우드, 코럴핑크)으로 작성해줘

Google Antigravity 브라우저에서 교육용 웹앱을 만들려고 해.
아래 화면 구성을 Antigravity에서 구현하는 방법을 
단계별로 알려줘.

[필요한 화면]
1. 홈 화면: 앱 소개 + 메뉴 네비게이션
2. 퍼스널컬러 진단: 이미지 포함 7문항 퀴즈
3. 결과 화면: 타입 발표 + 컬러 팔레트 + 메이크업 추천
4. 자료실: 강의 영상 링크 + PDF 자료
5. 과제 제출: 학생 정보 입력 + 파일 업로드 폼

[요청사항]
- 각 화면에서 사용할 Antigravity 컴포넌트 명시
- Google Sheets 데이터 연동 방법
- 모바일 반응형 설정 방법
- 학생 배포를 위한 링크 공유 방법

뷰티학과 여대생을 위한 퍼스널컬러 교육앱의 
디자인 가이드라인을 만들어줘.

[조건]
- 타겟: 20대 뷰티 전공 여대생
- 무드: 세련되고 전문적이되 친근한 느낌
- 메인 컬러: 여름쿨 타입에 어울리는 라벤더, 스카이블루 계열
- 폰트 스타일 제안 (Google Fonts 기준)
- 각 화면별 레이아웃 구성 텍스트로 설명
- Canva에서 만들 이미지 소재 목록 5가지

위 내용을 바탕으로 Antigravity에 입력할 
CSS 스타일 설정값도 함께 제안해줘.

/* 퍼스널컬러 교육앱 - 여름쿨 테마 */
:root {
  --primary: #B0C4DE;      /* 스틸블루 - 메인 컬러 */
  --secondary: #E6E0F8;    /* 라벤더 - 서브 컬러 */
  --accent: #7B9EA8;       /* 쿨 틸 - 포인트 */
  --text-main: #3A3A4A;    /* 다크 네이비 - 본문 */
  --bg-light: #F8F7FF;     /* 쿨 화이트 - 배경 */
  --success: #A8C5B5;      /* 세이지그린 - 결과 강조 */
}

/* 진단 퀴즈 카드 스타일 */
.quiz-card {
  background: var(--bg-light);
  border: 1.5px solid var(--secondary);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(176, 196, 222, 0.2);
  transition: transform 0.2s ease;
}

.quiz-card:hover {
  transform: translateY(-4px);
}

/* 결과 타입 배지 */
.type-badge {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border-radius: 50px;
  padding: 8px 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* 컬러 팔레트 그리드 */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.palette-chip {
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .palette-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .quiz-card {
    padding: 16px;
  }
}

// 퍼스널컬러 진단 결과 산출 로직
const calculatePersonalColor = (answers) => {
  const scores = { 봄웜: 0, 여름쿨: 0, 가을웜: 0, 겨울쿨: 0 };
  
  answers.forEach((answer, index) => {
    // 각 문항별 타입 가중치 적용
    const weights = quizData[index].weights[answer];
    Object.keys(weights).forEach(type => {
      scores[type] += weights[type];
    });
  });
  
  // 최고 점수 타입 반환
  return Object.keys(scores).reduce((a, b) => 
    scores[a] > scores[b] ? a : b
  );
};

// Google Sheets 데이터 불러오기
const fetchColorData = async (type) => {
  const SHEET_ID = 'YOUR_SHEET_ID';
  const API_KEY = 'YOUR_API_KEY';
  const range = `퍼스널컬러!A:I`;
  
  const res = await fetch(
    `https://sheets.googleapis.com/v4/spreadsheets/
     ${SHEET_ID}/values/${range}?key=${API_KEY}`
  );
  const data = await res.json();
  
  // 해당 타입 행만 필터링
  return data.values.filter(row => row[0] === type);
};
```

---

**📸 화면 구성 예시**
```
┌─────────────────────────────────┐
│  🎨 나의 퍼스널컬러 찾기         │  ← 홈 화면
│  ┌──────┐ ┌──────┐             │
│  │ 봄웜 │ │여름쿨│  ← 타입 카드  │
│  └──────┘ └──────┘             │
│  [ 진단 시작하기 → ]             │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  Q3. 혈관 색깔은?               │  ← 퀴즈 화면
│  ○ 파란/보라빛   ← 쿨톤         │
│  ○ 초록/노란빛   ← 웜톤         │
│  [이전] ━━━●━━━━━━━ [다음]      │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  ✨ 당신은 여름쿨 타입!          │  ← 결과 화면
│  [라벤더][스카이][로즈][민트]    │  ← 컬러팔레트
│  💄 추천 립: 로즈핑크, 베리      │
│  [ 메이크업 가이드 보기 ]        │
└─────────────────────────────────┘