# Advanced 웹 디자인 분석 100선

세계 최고 수준의 웹사이트 디자인을 분석하고 학습하는 프로젝트입니다.

## 프로젝트 개요

이 프로젝트는 100개의 세계적인 웹사이트를 선정하여, 각 사이트의 디자인 철학, UI/UX 패턴, 기술적 구현을 상세히 분석하고 학습할 수 있도록 구성되었습니다.

## 구성

### 메인 페이지
- `index.html`: 100개 웹사이트의 목록을 카테고리별로 정리한 메인 페이지

### 상세 페이지 (001.html ~ 100.html)
각 웹사이트에 대한 상세 분석 페이지로, 다음 내용을 포함합니다:

1. **디자인 분석 프롬프트**: Claude Code에 입력하여 해당 사이트의 디자인을 상세히 분석할 수 있는 프롬프트
2. **분석 포인트**: 시각적 디자인, 레이아웃, 인터랙션, UX 등 주요 분석 영역
3. **구현 프롬프트 예시**: 히어로 섹션, 네비게이션, 카드 그리드 등 구체적인 컴포넌트 구현을 위한 프롬프트
4. **실제 디자인 분석** (011-020): 주요 색상 팔레트, 사용된 폰트, 디자인 특징 등 실제 분석 결과
5. **추천 워크플로우**: 효과적인 학습과 구현을 위한 단계별 가이드

## 카테고리

### 1. Tech Giants & SaaS (001-030)
Apple, Stripe, Linear, Vercel, Figma, Notion, Webflow, Framer, Airbnb, Tesla, Spotify, Netflix, Adobe, Microsoft, Google, Shopify, Salesforce, Slack, Discord, Dropbox, Canva, Zoom, PayPal, Uber, Lyft, GitHub, GitLab, OpenAI, Atlassian, Intercom

### 2. Design Systems (031-040)
Material Design, Material Design 3, Carbon Design System, Atlassian Design System, Shopify Polaris, Apple Human Interface Guidelines, Google Design, IBM Design Language, Microsoft Fluent Design, Design Systems Repository

### 3. Design Agencies (041-070)
Instrument, Frog Design, Pentagram, IDEO, Giant Machines, ustwo, AKQA, R/GA, Bakken & Bæck, Resn, Dentsu Creative, Huge Inc., Code and Theory, Razorfish, Gretel, Locomotive, Active Theory, Anton & Irene, Build in Amsterdam, Wieden+Kennedy, Media.Monks, Sagmeister & Walsh, Collins, WeAreCollins, Basic Agency, GarageFarm, Unseen, Studio Dumbar, Koto, B-Reel

### 4. Design Awards & Galleries (071-080)
Awwwards SOTD, Awwwards SOTM, Awwwards Honorable Mentions, The FWA, CSS Design Awards, CSS Winner, SiteInspire, Mindsparkle Mag, Behance, Dribbble

### 5. Japanese & Asian Excellence (081-092)
teamLab, Muji, Nendo, Uniqlo, Nintendo, Hyundai, Samsung, LINE, Kakao, Naver, Good Design Award, SAF 2026

### 6. Global Brands & Media (093-100)
MoMA, Tate, Guggenheim, NASA, Nike, Patagonia, The New York Times, NYT Interactive

## 사용 방법

### 1. 웹 브라우저로 열기
```bash
# 메인 페이지 열기
open index.html

# 또는 특정 사이트 분석 페이지 열기
open 001.html
```

### 2. Claude Code와 함께 사용하기

1. 관심 있는 웹사이트의 상세 페이지를 엽니다 (예: 001.html)
2. "디자인 분석 프롬프트"를 복사합니다
3. Claude Code에 프롬프트를 입력합니다
4. 필요한 경우 해당 웹사이트의 스크린샷을 함께 첨부합니다
5. 분석 결과를 바탕으로 "구현 프롬프트 예시"를 활용하여 컴포넌트를 구현합니다

### 3. 추천 학습 워크플로우

1. **사이트 관찰**: 실제 웹사이트를 방문하여 디자인을 관찰합니다
2. **프롬프트 실행**: 디자인 분석 프롬프트를 Claude Code에 입력합니다
3. **상세 분석**: 특정 섹션의 스크린샷을 첨부하여 더 정확한 분석을 요청합니다
4. **구현 시작**: 구현 프롬프트를 활용하여 원하는 컴포넌트를 만듭니다
5. **반복 개선**: 생성된 코드를 테스트하고 개선합니다

## 프롬프트 예시

### 디자인 분석 프롬프트
각 페이지의 "디자인 분석 프롬프트" 섹션에는 다음 항목을 포함한 상세 분석 프롬프트가 있습니다:

- 전체적인 디자인 철학과 브랜드 아이덴티티
- 색상 팔레트 (Color Palette)
- 타이포그래피 (Typography)
- 레이아웃 구조 (Layout Structure)
- 주요 UI 컴포넌트
- 시각적 요소
- 사용자 경험 (UX) 패턴
- 기술적 구현 추정
- 차별화 포인트

### 구현 프롬프트
각 페이지에는 다음과 같은 구체적인 구현 프롬프트가 포함되어 있습니다:

1. 히어로 섹션 구현
2. 네비게이션 바 구현
3. 카드 그리드 구현

## 기술 스택

- HTML5
- CSS3 (Grid, Flexbox)
- JavaScript (Vanilla)
- Python 3 (페이지 생성 스크립트)

## 파일 구조

```
20260130-make-design-adv/
├── index.html                # 메인 페이지
├── 001.html ~ 100.html      # 각 웹사이트 분석 페이지
├── screenshots/              # 웹사이트 스크린샷 (011-020)
│   ├── 011.png ~ 020.png
├── generate-pages.py         # 페이지 생성 스크립트
├── update-html-simple.py     # HTML 업데이트 스크립트
├── analyze-websites.py       # 웹사이트 분석 스크립트 (Playwright)
└── README.md                # 이 파일
```

## 생성 방법

프로젝트는 Python 스크립트를 사용하여 자동으로 생성되었습니다:

### 1. 초기 페이지 생성
```bash
python3 generate-pages.py
```

이 스크립트는:
- 100개의 웹사이트 데이터를 기반으로
- 각 사이트별 상세 페이지를 자동 생성
- 일관된 템플릿과 프롬프트 구조를 적용

### 2. 디자인 분석 추가 (011-020)
```bash
python3 update-html-simple.py
```

이 스크립트는:
- 011-020번 페이지에 실제 디자인 분석 섹션 추가
- 각 사이트의 주요 색상 팔레트 (HEX 코드)
- 사용된 폰트 정보
- 디자인 특징 5가지 포함

## 활용 목적

1. **디자인 학습**: 세계 최고 수준의 웹 디자인 트렌드와 패턴 학습
2. **프롬프트 엔지니어링**: Claude Code를 활용한 효과적인 디자인 분석 방법 학습
3. **실전 구현**: 분석한 디자인을 실제로 구현하는 경험
4. **포트폴리오 구축**: 학습한 내용을 바탕으로 자신만의 디자인 시스템 구축

## 주의사항

- 각 웹사이트의 디자인은 저작권이 있으므로, 분석과 학습 목적으로만 사용하세요
- 상업적 프로젝트에 직접 복사하기보다는, 디자인 원칙과 패턴을 이해하고 응용하세요
- 일부 웹사이트는 시간이 지나면서 디자인이 변경될 수 있습니다

## 라이선스

이 프로젝트는 교육 및 학습 목적으로 제작되었습니다.

## 작성일

2026년 1월 30일