Phase 2: UI/디자인
이미지 생성, 컴포넌트 스타일링 관련 명령어:
03-image.md|04-external-resource.md
2-1. 파비콘/아이콘 이미지 (새 프로젝트)
파비콘 이미지 프롬프트 만들어줘.
1. 프로젝트 맥락 파악 (package.json, tailwind.config, globals.css)
2. 브랜드 색상 추출
3. Antigravity용 프롬프트 생성
4. 저장 경로 + 파일명 지정 (image-files.md 규칙 따라서)
Claude Code가 출력하는 형식:
🖼️ Antigravity 이미지 생성 요청
📋 프로젝트 맥락
- 프로젝트: [프로젝트명]
- 테마: [색상, 분위기]
- 용도: 파비콘
📐 스펙
- 크기: 512x512
- 형식: PNG
- 배경: 투명
🎨 Antigravity 프롬프트 (아래 내용을 Antigravity에 복사하세요)
---
Minimal flat icon of [심볼],
[색상] color scheme,
simple geometric shapes,
centered composition,
transparent background,
clean vector style
---
📁 저장 정보
- 위치: public/images/icons/
- 파일명: icon-favicon-512.png
- 전체 경로: public/images/icons/icon-favicon-512.png
⚠️ Antigravity에서 이미지 생성 후 위 경로에 정확히 저장해주세요.
저장 완료되면 알려주세요.
2-2. 아이콘 추가 (기존 프로젝트)
설정 아이콘 이미지 프롬프트 만들어줘.
먼저 기존 체계 확인:
1. ls public/images/ 로 폴더 구조 확인
2. 기존 이미지 파일명 패턴 확인
3. tailwind.config, globals.css에서 색상 확인
기존 체계에 맞춰서:
- 기존 파일명 패턴 따르기
- 기존 스타일과 일관성 유지
- Antigravity 프롬프트 + 저장 경로 + 파일명 알려줘
2-3. 이미지 세트 전체 (새 프로젝트)
이 프로젝트에 필요한 이미지 세트 파악하고 각각 프롬프트 만들어줘.
1. 프로젝트 분석 (package.json, 컴포넌트, 페이지 구조, tailwind.config, globals.css)
2. 필요한 이미지 목록 도출 (파비콘, OG, 히어로, Empty State 등)
3. 각각 Antigravity 프롬프트 + 저장 경로 + 파일명 알려줘
image-files.md 규칙에 맞춰서.
2-4. 이미지 세트 추가 (기존 프로젝트)
이 프로젝트에 추가로 필요한 이미지 파악하고 프롬프트 만들어줘.
1. public/images/ 기존 체계 확인 (폴더 구조, 파일명 패턴, 스타일)
2. 프로젝트 분석해서 아직 없는 이미지 파악
3. 기존 패턴에 맞춰서 각각 Antigravity 프롬프트 + 저장 경로 + 파일명 알려줘
2-5. 특정 스펙 이미지 요청
아래 스펙으로 이미지 프롬프트 만들어줘.
용도: 로딩 일러스트
크기: 300x300
형식: PNG
스타일: 미니멀 일러스트
색상: #3B82F6 (파란색)
배경: 투명
Antigravity 프롬프트 + 저장 경로 + 파일명 알려줘.
2-6. 이미지 저장 완료 후 연결
Antigravity에서 이미지 생성해서 저장했어.
저장 위치: public/images/icons/icon-favicon-512.png
1. 파일 존재 확인해줘
2. 코드에서 이 이미지 사용하는 곳 연결해줘
2-7. 브라우저 테스트 요청
로그인 페이지 테스트 필요해.
Antigravity 브라우저 테스트 요청 형식으로 알려줘.
Claude Code가 출력하는 형식:
🌐 Antigravity 브라우저 테스트 요청
테스트 URL: http://localhost:3000/login
확인 항목:
- [ ] 페이지 정상 렌더링
- [ ] 이메일 입력 필드 동작
- [ ] 비밀번호 입력 필드 동작
- [ ] 로그인 버튼 클릭 시 동작
- [ ] 에러 메시지 표시
스크린샷 필요: 예
스크린샷 저장 위치: public/images/ui/screenshot-login-400x300.png
⚠️ Antigravity 브라우저에서 위 URL 접속 후 확인 부탁드립니다.
📁 이미지 폴더 구조 규칙
public/images/
├── icons/ ← 파비콘, 앱 아이콘
│ └── icon-favicon-512.png
├── og/ ← OG 이미지 (소셜 공유)
│ └── og-default-1200x630.png
├── hero/ ← 히어로 배경
│ └── hero-main-1920x1080.png
├── ui/ ← Empty state, 로딩 등
│ └── empty-state-300x300.png
└── content/ ← 콘텐츠용 이미지
└── blog-thumbnail-800x600.png
📝 파일명 규칙
[용도]-[설명]-[크기].png
예:
- icon-favicon-512.png
- og-default-1200x630.png
- hero-main-1920x1080.png
- empty-state-orders-300x300.png