← 목록으로 돌아가기
050

Resn

https://www.resn.co.nz/
Design Agencies

실제 디자인 분석

참고: 현재 resn.co.nz는 LINE Corporation으로 리다이렉트됩니다. 2026년 1월 기준으로 원본 사이트에 직접 접근할 수 없습니다.

Resn 웹사이트 스크린샷

주요 색상 팔레트

#00B900
LINE 그린
#FFFFFF
화이트
#000000
블랙

디자인 특징

  • 색상: LINE 브랜드 컬러 (그린) 중심
  • 레이아웃: LINE Corporation 페이지로 리다이렉트됨
  • 타이포그래피: 깔끔한 Sans-serif 계열
  • 특징: 기업 중심의 전문적인 디자인

디자인 분석 프롬프트

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

https://www.resn.co.nz/ 웹사이트의 디자인을 상세히 분석해주세요. 다음 항목들을 포함해서 분석해주세요: 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 패턴 - 기억에 남는 브랜딩 요소 분석 후, 이 디자인 스타일을 활용한 랜딩 페이지를 만드는 실용적인 구현 가이드를 제공해주세요.

분석 포인트

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

구현 프롬프트 예시

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

1. 히어로 섹션 구현

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

2. 네비게이션 바 구현

3. 카드 그리드 구현

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

학습 태그

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

추천 워크플로우

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