다음 프롬프트를 Claude Code 또는 Cursor AI에 입력하여 Nintendo의 디자인을 분석하고 유사한 디자인을 구현할 수 있습니다.
https://www.nintendo.com/ 웹사이트의 디자인을 상세히 분석해주세요.
다음 항목들을 포함해서 분석해주세요:
1. **전체적인 디자인 철학과 브랜드 아이덴티티**
- 사이트가 전달하고자 하는 핵심 메시지와 감성
- 타겟 사용자와 그들에게 어필하는 방식
2. **색상 팔레트 (Color Palette)**
- 주요 색상 (Primary colors)
- 보조 색상 (Secondary colors)
- 배경색, 텍스트 색상
- 색상의 HEX/RGB 코드 추출
3. **타이포그래피 (Typography)**
- 사용된 폰트 패밀리
- 제목, 본문, 버튼 등의 폰트 크기와 굵기
- 행간(line-height), 자간(letter-spacing)
4. **레이아웃 구조 (Layout Structure)**
- 그리드 시스템과 간격(spacing)
- 섹션 구성 방식
- 반응형 디자인 전략 (모바일, 태블릿, 데스크톱)
5. **주요 UI 컴포넌트**
- 네비게이션 바
- 버튼 스타일
- 카드 컴포넌트
- 폼 요소
- 기타 특징적인 UI 요소
6. **시각적 요소**
- 이미지 사용 방식 (크기, 비율, 처리 방법)
- 아이콘 스타일
- 그래픽 요소와 일러스트레이션
- 애니메이션과 마이크로 인터랙션
7. **사용자 경험 (UX) 패턴**
- 네비게이션 흐름
- 콜투액션(CTA) 배치와 디자인
- 스크롤 경험과 페이지 전환
- 로딩 상태와 피드백
8. **기술적 구현 추정**
- 사용된 것으로 보이는 프레임워크/라이브러리
- CSS 기법 (Flexbox, Grid, 등)
- 애니메이션 기술
- 성능 최적화 기법
9. **차별화 포인트**
- 다른 사이트와 구별되는 독특한 디자인 요소
- 혁신적인 UX 패턴
- 기억에 남는 브랜딩 요소
분석 후, 이 디자인 스타일을 활용한 랜딩 페이지를 만드는 실용적인 구현 가이드를 제공해주세요.
분석 포인트
🎨 시각적 디자인
색상, 타이포그래피, 이미지 사용, 그래픽 요소의 조화를 분석합니다.
🏗️ 레이아웃 & 구조
그리드 시스템, 간격, 정렬, 반응형 디자인 전략을 파악합니다.
⚡ 인터랙션
애니메이션, 트랜지션, 호버 효과 등 동적 요소를 살펴봅니다.
🎯 사용자 경험
네비게이션, 정보 구조, 사용 흐름의 효율성을 평가합니다.
구현 프롬프트 예시
Nintendo 스타일의 구체적인 컴포넌트를 구현하고 싶을 때 사용할 수 있는 프롬프트들입니다.
1. 히어로 섹션 구현
https://www.nintendo.com/의 히어로 섹션 스타일을 참고하여, 다음 요구사항을 만족하는 히어로 섹션을 만들어주세요:
- 반응형 디자인 (모바일, 태블릿, 데스크톱 대응)
- 매력적인 제목과 부제목
- 명확한 CTA 버튼
- 배경 이미지 또는 그라데이션
- 부드러운 스크롤 애니메이션
HTML, CSS, JavaScript로 구현해주세요.
2. 네비게이션 바 구현
https://www.nintendo.com/의 네비게이션 바 디자인을 참고하여, 다음 기능을 가진 네비게이션 바를 구현해주세요:
- 로고와 메뉴 항목
- 스크롤 시 배경색 변화
- 모바일 햄버거 메뉴
- 부드러운 트랜지션 효과
- 현재 페이지 하이라이트
React 또는 Vanilla JavaScript로 구현해주세요.
3. 카드 그리드 구현
https://www.nintendo.com/의 카드 디자인을 참고하여, 반응형 카드 그리드를 만들어주세요:
- CSS Grid 또는 Flexbox 사용
- 호버 시 애니메이션 효과
- 이미지, 제목, 설명, CTA 버튼 포함
- 다크 모드 지원
- 3단 그리드 (데스크톱), 2단 (태블릿), 1단 (모바일)
CSS와 HTML로 구현해주세요.
학습 태그
웹 디자인UI/UX반응형 디자인색상 이론타이포그래피레이아웃프론트엔드디자인 시스템
추천 워크플로우
사이트 방문: https://www.nintendo.com/을 브라우저에서 열어 실제 디자인을 관찰합니다.
프롬프트 실행: 위의 "디자인 분석 프롬프트"를 Claude Code에 입력합니다.
스크린샷 첨부: 필요시 특정 섹션의 스크린샷을 Claude Code에 업로드하여 더 정확한 분석을 요청합니다.
구현 시작: "구현 프롬프트 예시"를 활용하여 원하는 컴포넌트를 구현합니다.
반복 개선: 생성된 코드를 테스트하고, 필요한 부분을 Claude Code와 함께 개선합니다.