Cursor를 이용해 IT/앱개발 용어 학습 퀴즈 앱 만들기 도전!

### 프로젝트 개요
**목적**: IT 초보자/학습자를 위한 인터랙티브 용어 학습 플랫폼 개발
**타겟 사용자**: IT 분야 입문자, 개발자 지망생, 컴퓨터공학과 학생
**핵심 가치**: Google sheet와 연동해 실시간 업데이트 가능한 동적 학습 콘텐츠 제공

### 핵심 기능 요구사항

#### 1. 데이터 관리 시스템
- **Google Sheets 연동**: 실시간 용어 데이터베이스 동기화
- **스프레드시트 구조**: 
  - 용어명 | 정의 | 카테고리 | 난이도 | 예시 | 아이콘 | 생성일 | 수정일
- **자동 업데이트**: 페이지 새로고침 없이 새 용어 반영
- **데이터 검증**: 필수 필드 체크, 중복 용어 방지
- **버전 관리**: 변경 이력 추적 가능

#### 2. IT 용어 사전 모듈
- **동적 용어 로딩**: Google Sheets에서 실시간 데이터 fetch
- **실시간 검색 & 자동완성**: 최신 용어까지 포함
- **카테고리별 필터링**: 스프레드시트 카테고리 컬럼 기반
- **용어 통계**: 총 용어 수, 카테고리별 분포 실시간 표시

#### 3. 다양한 퀴즈 모듈 (4가지 유형)
- **동적 문제 생성**: Google Sheets 데이터 기반 실시간 문제 생성
- 객관식: 정의→용어 매칭 (15문제, 쉬움)
- 단답형: 서술형 답변 (12문제, 보통)  
- 참/거짓: 용어-정의 일치성 판단 (15문제, 쉬움)
- 응용문제: 실제 시나리오 기반 (10문제, 어려움)
- **문제 풀 확장**: 새 용어 추가 시 자동으로 문제 풀 증가

#### 4. 관리자 도구 (선택사항)
- **용어 추가/수정 폼**: 웹에서 직접 Google Sheets 업데이트
- **일괄 업로드**: CSV 파일 업로드로 대량 용어 추가
- **승인 프로세스**: 제출된 용어의 검토/승인 워크플로우

### 기술 구현 요구사항

#### Google Sheets API 연동
- **API 설정**: Google Sheets API v4 활용
- **인증**: API 키 또는 OAuth 2.0 (공개 읽기용)
- **데이터 형식**: JSON 응답을 JavaScript 객체로 변환
- **에러 핸들링**: API 실패 시 로컬 캐시 데이터 사용
- **성능 최적화**: 
  - 초기 로딩 시 전체 데이터 캐시
  - 주기적 동기화 (5분마다 체크)
  - 변경된 데이터만 업데이트

#### 데이터 구조 설계
```javascript
// Google Sheets 스키마
const SHEET_COLUMNS = {
  A: 'term',        // 용어명
  B: 'definition',  // 정의
  C: 'category',    // 카테고리
  D: 'difficulty',  // 난이도 (1-3)
  E: 'example',     // 사용 예시
  F: 'icon',        // 이모지/아이콘
  G: 'created_at',  // 생성일
  H: 'updated_at'   // 수정일
};
```

#### 캐싱 전략
- **로컬 스토리지**: 마지막 동기화 데이터 보관
- **버전 체크**: 스프레드시트 수정 시간 비교
- **점진적 업데이트**: 변경분만 다운로드
- **오프라인 모드**: 네트워크 오류 시 캐시 데이터 사용

### UI/UX 요구사항
- **실시간 상태 표시**: "데이터 동기화 중..." 인디케이터
- **업데이트 알림**: 새 용어 추가 시 사용자 알림
- **로딩 상태**: 스켈레톤 UI로 데이터 로딩 표시
- **오류 처리**: 네트워크 오류 시 친화적 메시지
- **데이터 신선도**: "마지막 업데이트: 5분 전" 표시

### 배포 및 보안
- **GitHub Pages**: 정적 호스팅에서 API 호출
- **CORS 설정**: Google Sheets 공개 액세스 설정
- **API 키 보안**: 읽기 전용 권한으로 제한
- **Rate Limiting**: API 호출 빈도 제한으로 할당량 관리

### 콘텐츠 관리 워크플로우
1. **용어 기획**: 교육팀에서 추가할 용어 선정
2. **스프레드시트 업데이트**: Google Sheets에서 직접 편집
3. **자동 반영**: 웹사이트에 실시간 동기화 (최대 5분 지연)
4. **품질 검증**: 새 용어의 퀴즈 정상 생성 확인

### 확장 가능성
- **다중 시트 지원**: 언어별, 난이도별 시트 분리
- **사용자 제안**: 사용자가 새 용어 제안할 수 있는 폼
- **Analytics 연동**: 인기 용어, 어려운 문제 데이터 수집
- **다국어 지원**: 각 언어별 Google Sheets 관리

### Google Sheets 템플릿 구조
```
IT_Terms_Database
├── Sheet1: "IT_Terms"
│   ├── A1: "용어명"
│   ├── B1: "정의" 
│   ├── C1: "카테고리"
│   ├── D1: "난이도"
│   ├── E1: "예시"
│   ├── F1: "아이콘"
│   ├── G1: "생성일"
│   └── H1: "수정일"
├── Sheet2: "Categories" (카테고리 마스터)
└── Sheet3: "Statistics" (사용 통계)
```

### 성공 지표
- **데이터 동기화**: 스프레드시트 변경 후 5분 이내 반영
- **시스템 안정성**: API 오류 시에도 기존 기능 정상 동작
- **관리 편의성**: 비개발자도 용어 추가/수정 가능
- **확장성**: 1000+ 용어까지 성능 저하 없이 지원
```

## 핵심:

1. **실시간 데이터 관리**: Google Sheets를 CMS로 활용
2. **비개발자 친화적**: 개발 지식 없이도 콘텐츠 관리 가능  
3. **확장성**: 용어 추가가 시스템 재배포 없이 가능
4. **협업 지원**: 여러 사람이 동시에 콘텐츠 관리
5. **버전 관리**: 변경 이력 추적으로 품질 관리

**1. 디자인 시스템**

- **Pretendard 폰트**: 한국어 가독성 강화
- **파란색 메인 컬러** (#3182ce): 일관된 브랜딩
- **Toss 스타일**: 깔끔한 타이포그래피, 적절한 여백, 모던한 색상 팔레트

### **2. 시각적 개선**

- **히어로 섹션**: 애니메이션 아이콘, 통계 정보 추가
- **카드 디자인**: 그라데이션 상단 바, 호버 애니메이션, 난이도 뱃지
- **그림자와 여백**: 계층적 구조, 부드러운 그림자
- **색상 체계**: 의미별 색상 구분 (성공/오류/경고/정보)

예: 1. 사전에서 'API' 검색
2. 검색 결과가 안 나타남
3. Console에 이런 에러 (캡쳐 첨부)