# 웹 디자인 분석 사이트 071-080 가이드

## 개요

이 디렉토리에는 071번부터 080번까지의 디자인 어워드 및 갤러리 사이트에 대한 분석 자료가 포함되어 있습니다.

## 파일 구조

```
/var/www/tkim.planitai.co.jp/blog/20260130-make-design-adv/
├── 071.html                    # Awwwards SOTD 분석 페이지
├── 072.html                    # Awwwards SOTM 분석 페이지
├── 073.html                    # Awwwards Honorable Mentions 분석 페이지
├── 074.html                    # The FWA 분석 페이지
├── 075.html                    # CSS Design Awards 분석 페이지
├── 076.html                    # CSS Winner 분석 페이지
├── 077.html                    # SiteInspire 분석 페이지
├── 078.html                    # Mindsparkle Mag 분석 페이지
├── 079.html                    # Behance 분석 페이지
├── 080.html                    # Dribbble 분석 페이지
├── screenshots/                # 스크린샷 저장 폴더
├── capture-screenshots.sh      # 스크린샷 캡처 스크립트
├── ANALYSIS_SUMMARY_071-080.md # 작업 요약
└── README-071-080.md          # 이 파일
```

## 사이트 목록

| 번호 | 사이트명 | URL | 특징 |
|------|----------|-----|------|
| 071 | Awwwards SOTD | https://www.awwwards.com/websites/sites_of_the_day/ | 일간 최고 디자인 수상작 |
| 072 | Awwwards SOTM | https://www.awwwards.com/websites/sites_of_the_month/ | 월간 최고 디자인 수상작 |
| 073 | Awwwards Honorable Mentions | https://www.awwwards.com/websites/honorable-mentions/ | 주목할 만한 디자인 |
| 074 | The FWA | https://thefwa.com/ | 권위있는 웹 디자인 어워드 |
| 075 | CSS Design Awards | https://www.cssdesignawards.com/wotd-award-winners | CSS 디자인 전문 어워드 |
| 076 | CSS Winner | https://www.csswinner.com/winners | CSS 디자인 커뮤니티 |
| 077 | SiteInspire | https://siteinspire.com/ | 디자인 영감 갤러리 |
| 078 | Mindsparkle Mag | https://www.mindsparklemag.com/ | 크리에이티브 디자인 매거진 |
| 079 | Behance | https://www.behance.net/ | Adobe 포트폴리오 플랫폼 |
| 080 | Dribbble | https://dribbble.com/ | 디자이너 커뮤니티 |

## HTML 페이지 사용법

각 HTML 파일에는 다음 내용이 포함되어 있습니다:

### 1. 디자인 분석 프롬프트
웹사이트를 상세히 분석하기 위한 9가지 분석 항목:
- 디자인 철학과 브랜드 아이덴티티
- 색상 팔레트
- 타이포그래피
- 레이아웃 구조
- 주요 UI 컴포넌트
- 시각적 요소
- 사용자 경험 패턴
- 기술적 구현
- 차별화 포인트

**사용 방법**:
1. HTML 페이지를 브라우저로 열기
2. "프롬프트 복사" 버튼 클릭
3. Claude Code, Cursor AI, ChatGPT 등에 붙여넣기
4. 웹사이트 URL과 함께 분석 요청

### 2. 구현 프롬프트 예시
구체적인 컴포넌트 구현을 위한 프롬프트:
- 히어로 섹션
- 네비게이션 바
- 카드 그리드

**사용 방법**:
1. 구현하고 싶은 컴포넌트의 프롬프트 복사
2. AI 도구에 붙여넣기
3. 생성된 코드를 프로젝트에 적용

### 3. 학습 태그
각 사이트에서 배울 수 있는 디자인 개념들

### 4. 추천 워크플로우
효과적인 학습을 위한 5단계 가이드

## 스크린샷 캡처 방법

### 방법 1: 자동 스크립트 실행 (권장)

```bash
cd /var/www/tkim.planitai.co.jp/blog/20260130-make-design-adv
./capture-screenshots.sh
```

이 스크립트는 Node.js와 Puppeteer를 사용하여 자동으로 모든 사이트의 스크린샷을 캡처합니다.

**요구사항**:
- Node.js 설치
- npm 사용 가능
- 인터넷 연결

### 방법 2: 수동 캡처

각 브라우저별 스크린샷 방법:

#### Chrome/Edge
1. 사이트 방문
2. F12 (개발자 도구 열기)
3. Ctrl+Shift+P (명령 팔레트)
4. "Capture full size screenshot" 입력 후 실행
5. `screenshots/{번호}.png`로 저장

#### Firefox
1. 사이트 방문
2. F12 (개발자 도구 열기)
3. 오른쪽 상단 "..." 메뉴
4. "Take a screenshot" > "Save full page"
5. `screenshots/{번호}.png`로 저장

#### 확장 프로그램 사용
- "Full Page Screen Capture"
- "GoFullPage"
- "Fireshot"

### 방법 3: 온라인 도구

다음 온라인 서비스를 활용할 수 있습니다:
- https://www.screenshotapi.net/
- https://www.urlbox.io/
- https://screenshotmachine.com/

## 실습 가이드

### 초급 학습자
1. 071.html (Awwwards SOTD)부터 시작
2. 사이트 방문하여 전체적인 느낌 파악
3. 분석 프롬프트를 AI 도구에 입력
4. 생성된 분석 내용을 정리

### 중급 학습자
1. 여러 사이트 (071-074) 비교 분석
2. 공통된 디자인 패턴 찾기
3. 구현 프롬프트로 간단한 컴포넌트 만들기
4. CodePen 또는 JSFiddle에서 테스트

### 고급 학습자
1. 전체 사이트 (071-080) 종합 분석
2. 각 사이트의 차별화 포인트 정리
3. 자신만의 디자인 시스템 구축
4. 포트폴리오 프로젝트에 적용

## AI 도구 활용 팁

### Claude Code
```
1. 프롬프트 복사
2. 스크린샷과 함께 첨부 (선택사항)
3. "이 디자인을 분석하고 React 컴포넌트로 구현해주세요" 추가
```

### Cursor AI
```
1. 프로젝트에서 새 파일 생성
2. 프롬프트를 주석으로 붙여넣기
3. Cmd/Ctrl+K로 AI 생성 요청
```

### ChatGPT
```
1. 프롬프트 붙여넣기
2. 이미지 업로드 (GPT-4 Vision)
3. 구체적인 구현 요청
```

## 학습 추천 순서

1. **디자인 어워드 사이트** (071-076)
   - 업계 표준 디자인 패턴 학습
   - 트렌드 파악

2. **디자인 갤러리** (077-078)
   - 다양한 스타일 탐색
   - 영감 얻기

3. **커뮤니티 플랫폼** (079-080)
   - 실전 포트폴리오 연구
   - 네트워킹 및 피드백

## 문제 해결

### Q: HTML 파일이 열리지 않아요
A: 웹 브라우저에서 직접 파일을 열거나, 로컬 서버를 실행하세요.
```bash
# Python 간단한 HTTP 서버
python3 -m http.server 8000
# 브라우저에서 http://localhost:8000/071.html 접속
```

### Q: 프롬프트 복사가 안 돼요
A: 수동으로 텍스트를 선택하여 복사하거나, 개발자 도구에서 확인하세요.

### Q: 스크린샷 스크립트가 실행되지 않아요
A: Node.js가 설치되어 있는지 확인하고, 수동 방법을 사용하세요.

### Q: AI 도구가 분석을 잘 못해요
A:
1. 스크린샷과 함께 프롬프트를 제공하세요
2. 더 구체적인 질문을 추가하세요
3. 한 번에 하나의 요소만 분석 요청하세요

## 추가 리소스

### 디자인 학습
- MDN Web Docs: https://developer.mozilla.org/
- CSS-Tricks: https://css-tricks.com/
- Smashing Magazine: https://www.smashingmagazine.com/

### 코드 실습
- CodePen: https://codepen.io/
- JSFiddle: https://jsfiddle.net/
- CodeSandbox: https://codesandbox.io/

### 디자인 도구
- Figma: https://www.figma.com/
- Adobe XD: https://www.adobe.com/products/xd.html
- Sketch: https://www.sketch.com/

## 라이선스 및 주의사항

- 이 자료는 학습 목적으로 제공됩니다
- 각 웹사이트의 디자인은 해당 사이트의 저작권으로 보호됩니다
- 상업적 사용 시 원 저작자의 허가를 받으세요
- 학습한 내용을 바탕으로 자신만의 독창적인 디자인을 만드세요

## 피드백 및 기여

문제 발견 시 또는 개선 제안이 있으시면 연락 주세요.

---

작성일: 2026-01-30
버전: 1.0