← 목록으로 돌아가기
090

Naver

Japanese & Asian Excellence

웹사이트 스크린샷

Naver 웹사이트 스크린샷

Naver의 웹사이트 디자인을 Playwright MCP로 캡처한 이미지입니다.

디자인 분석 프롬프트

다음 프롬프트를 Claude Code 또는 Cursor AI에 입력하여 Naver의 디자인을 분석하고 유사한 디자인을 구현할 수 있습니다.

https://www.naver.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 패턴 - 기억에 남는 브랜딩 요소 분석 후, 이 디자인 스타일을 활용한 랜딩 페이지를 만드는 실용적인 구현 가이드를 제공해주세요.

분석 포인트

🎨 시각적 디자인
색상, 타이포그래피, 이미지 사용, 그래픽 요소의 조화를 분석합니다.
🏗️ 레이아웃 & 구조
그리드 시스템, 간격, 정렬, 반응형 디자인 전략을 파악합니다.
⚡ 인터랙션
애니메이션, 트랜지션, 호버 효과 등 동적 요소를 살펴봅니다.
🎯 사용자 경험
네비게이션, 정보 구조, 사용 흐름의 효율성을 평가합니다.

구현 프롬프트 예시

Naver 스타일의 구체적인 컴포넌트를 구현하고 싶을 때 사용할 수 있는 프롬프트들입니다.

1. 히어로 섹션 구현

https://www.naver.com/의 히어로 섹션 스타일을 참고하여, 다음 요구사항을 만족하는 히어로 섹션을 만들어주세요: - 반응형 디자인 (모바일, 태블릿, 데스크톱 대응) - 매력적인 제목과 부제목 - 명확한 CTA 버튼 - 배경 이미지 또는 그라데이션 - 부드러운 스크롤 애니메이션 HTML, CSS, JavaScript로 구현해주세요.

2. 네비게이션 바 구현

3. 카드 그리드 구현

https://www.naver.com/의 카드 디자인을 참고하여, 반응형 카드 그리드를 만들어주세요: - CSS Grid 또는 Flexbox 사용 - 호버 시 애니메이션 효과 - 이미지, 제목, 설명, CTA 버튼 포함 - 다크 모드 지원 - 3단 그리드 (데스크톱), 2단 (태블릿), 1단 (모바일) CSS와 HTML로 구현해주세요.

학습 태그

웹 디자인 UI/UX 반응형 디자인 색상 이론 타이포그래피 레이아웃 프론트엔드 디자인 시스템

추천 워크플로우

  1. 사이트 방문: https://www.naver.com/을 브라우저에서 열어 실제 디자인을 관찰합니다.
  2. 프롬프트 실행: 위의 "디자인 분석 프롬프트"를 Claude Code에 입력합니다.
  3. 스크린샷 첨부: 필요시 특정 섹션의 스크린샷을 Claude Code에 업로드하여 더 정확한 분석을 요청합니다.
  4. 구현 시작: "구현 프롬프트 예시"를 활용하여 원하는 컴포넌트를 구현합니다.
  5. 반복 개선: 생성된 코드를 테스트하고, 필요한 부분을 Claude Code와 함께 개선합니다.