# 실습 B: 프로젝트 소개 페이지

프로젝트 1개를 골라 상세 소개 페이지를 만듭니다.
아래 내용을 채운 후, Antigravity에 붙여넣으세요.

---

## 1. 프로젝트 기본 정보

```
프로젝트명:
클라이언트/소속:
기간:
내 역할: (예: UI 디자인, 브랜딩, 프로토타이핑)
```

## 2. 프로젝트 설명

```
한 줄 요약:
배경/문제: (왜 이 프로젝트를 했는지 2~3문장)
해결 방법: (어떻게 접근했는지 2~3문장)
결과: (성과, 수치, 반응 등 1~2문장)
```

## 3. 이미지 준비

프로젝트 이미지 3~5장을 준비하세요.
(스크린샷, 목업, 작업 과정 등)

```
이미지 1: (설명 - 예: 메인 화면)
이미지 2: (설명 - 예: 모바일 버전)
이미지 3: (설명 - 예: 디자인 시스템)
```

---

## Antigravity에 보낼 프롬프트

```
이 프로젝트를 소개하는 1페이지 웹사이트를 만들어줘.

[구조]
- Hero: 프로젝트명 + 한 줄 요약 (전체 화면)
- Overview: 클라이언트, 기간, 역할 (3열 그리드)
- Story: 배경 → 해결 → 결과 (스크롤 진행)
- Gallery: 이미지 갤러리 (큰 이미지, 세로 스크롤)
- Footer: 이름 + 다른 프로젝트 링크

[디자인]
- 배경: 어두운 색 (#0a0a0a)
- 강조색: 노란색 (#FFD600)
- 본문: Pretendard, 16px
- 제목: 큰 세리프체, 볼드
- 이미지 사이 여백 넉넉하게
- 스크롤 애니메이션 있게

[기술]
- HTML + CSS만 사용
- 외부 라이브러리 없이
- 반응형 (모바일 대응)

[프로젝트 정보]
여기에 위에서 채운 내용을 붙여넣기
```

---

## 수정 프롬프트 예시

| 원하는 변경 | 프롬프트 |
|------------|---------|
| 이미지 크기 | "갤러리 이미지를 전체 폭으로 키워줘" |
| 텍스트 배치 | "Overview를 왼쪽 정렬 리스트로 바꿔줘" |
| 여백 조정 | "섹션 사이 간격을 더 넓혀줘" |
| 타이포 강조 | "Hero 제목을 더 크게, 화면 절반 차지하게" |
| 색상 톤 | "차가운 느낌으로 바꿔줘, 강조색은 파란색" |
| 호버 효과 | "이미지에 마우스 올리면 살짝 확대되게" |
| 순서 변경 | "Gallery를 Story 위로 올려줘" |

---

## 팁

- 이미지가 없으면 "placeholder 이미지를 넣어줘"라고 말하세요
- 프롬프트는 한번에 다 말하지 말고, 하나씩 수정하세요
- "마음에 안 들어, 다시 해줘"보다 "제목을 더 크게, 여백을 줄여줘"가 정확합니다