기술 브랜드 쇼케이스 웹사이트
브랜드 포지셔닝을 Awwwards급 완성도를 추구하는, 바로 열어볼 수 있는 기술 웹사이트로 변환합니다. 모든 스타일, 상호작용 및 반응형 로직이 포함된 완전한 index.html을 제공합니다. 의사 코드나 핵심 부분을 생략하지 않습니다. 품질 목표는 수상이나 브랜드 보증과 동일하지 않습니다.
사용법 및 출력
- 사용자가 제공한 브랜드명, 제품, 대상, 언어, 자료, CTA 목표 및 기존 코드를 읽습니다. 사용자의 새로운 요구사항이 이 스킬의 기본값보다 우선합니다.
- 정보가 부족한 경우 명확한 데모 브랜드와 일관된 사본으로 페이지를 완성합니다. 실제 고객, 인증, 성능 점수 또는 수상 정보를 지어내지 마십시오. 예제 데이터는 데모 값임을 식별할 수 있어야 합니다.
- 기본적으로 중국어 사본을 사용합니다. 먼저 핵심 브랜드 스토리와 시각적 축을 결정한 다음 아래 디자인 기능을 통합합니다. 여러 브랜드의 로고와 타이포그래피를 기계적으로 콜라주하지 마십시오.
- 웹사이트를 생성할 때 작업의 쓰기 가능한 출력 디렉토리에
index.html을 저장합니다. 사용자가 코드를 직접 출력하도록 요청하면 전체 HTML 코드 블록으로 응답합니다. 사용자가 파일을 요청하면 파일 링크를 전달합니다. 스킬 생성 자체를 예제 웹사이트 생성 요청으로 오인하지 마십시오. - 이것은 로컬 HTML 제작 워크플로입니다. 사용자가 배포, 호스팅 또는 게시를 요청하는 경우에만 해당 외부 작업을 실행합니다.
시각 시스템
8px 기본 간격 그리드를 사용하고 CSS 변수를 사용하여 배경, 텍스트, 테두리, 강조 색상, 간격, 둥근 모서리 및 모션 매개변수를 중앙에서 관리합니다. prefers-color-scheme를 통해 밝은 모드와 어두운 모드를 자동으로 조정합니다. 두 모드 모두 완전한 계층 구조와 가독성을 가져야 합니다.
다음 네 가지 디자인 DNA를 융합하고 콘텐츠에 따라 주종을 배분합니다:
- Apple: 넉넉한 여백과 중앙 초점; 흰색
#FFFFFF, 검은색#000000, 본문#1D1D1F, 파란색#0066CC. Inter 또는 시스템 산세리프 글꼴, 300–600 자간 우선, 큰 제목과 가는 본문 텍스트의 계층 구조. 유리 효과 내비게이션, 가벼운 그림자, 누를 때scale(0.98); 점진적 공개는cubic-bezier(0.25, 0.1, 0.25, 1), 400–600ms. - Google: 모듈식 Bento 그리드와 명확한 정보 그룹화. 파란색
#4285F4보조 강조; 빨간색#EA4335, 노란색#FBBC05, 녹색#34A853은 소량의 차트 또는 상태 세부 정보에만 사용됩니다. 자연스러운 시차 및 뷰포트 트리거 애니메이션, 충분한 여백 유지. - Microsoft: 어두운 기술 섹션, 낮은 투명도의 디지털 매트릭스 또는 그리드, 청자색 광원. 카드 둥근 모서리 6–12px, 날카로운 테두리, 미묘한 그라데이션 가장자리 및 호버 외부 광선; 레이어 및 방향성 조명/음영을 통한 깊이 표현.
- 영화 촬영 스타일: 전체 화면 영화적 스토리텔링 히어로, 큰 제목 오버레이, 자막 스타일의 줄 단위 등장 및 긴 스크롤 섹션 전환. 차가운 색조와 청남색 광선, 입자, 스캔 라인 및 데이터 그래픽이 스토리텔링에 기여합니다. 시각적으로 선명하고 투명하며 과도한 장식을 피합니다.
밝은 콘텐츠 영역과 어두운 기술 영역을 번갈아 사용할 수 있지만 글꼴, 간격 및 구성 요소는 일관되게 유지합니다. 색상 악센트는 절제하여 사용하고 모든 카드가 동시에 다른 고채도 색상을 사용하지 않도록 합니다.
기본 페이지 구조
- 내비게이션: 상단 고정, 유리 효과 배경, 스크롤 후 약간 좁아지고 배경 불투명도 증가; 호버 시 밑줄 추적 또는 부드러운 확장. 모바일 햄버거 메뉴 완전히 작동 가능.
- 히어로: 최소 뷰포트 1개 분량의 영화적 비주얼, 내비게이션이 제목과 CTA를 가리지 않음. 데스크탑 제목 약 64px, 모바일 약 48px, 좁은 화면에 맞게
clamp()사용; 부제목 약 1.5rem. 기본 및 보조 CTA 2개, 저채도 그라데이션, 입자 또는 그리드 배경; 콘텐츠가 순서대로 지연 진입. 적합한 동영상이 없는 경우 정교하게 제작된 CSS/SVG 제품 비주얼 사용, 외부 링크 동영상에 강하게 의존하지 않음. - 하이라이트: 데스크탑에서 12열 Bento 사용, 7:5, 6:6 등 조합으로 비대칭 리듬 형성, 모든 카드를 고정된 균등 분할로 만들지 않음. 카드 호버 시 상승, 약간 확대 및 테두리 광선, 가벼운 포인터 기울기 지원.
- 콘텐츠 스토리텔링: 텍스트-이미지 왼쪽, 오른쪽, 왼쪽 교대, 섹션 간 명확한 진행 관계. 모바일에서는 통일된 자연스러운 읽기 순서. 뷰포트 진입 시 부드럽게 페이드 인, 내부 요소는 약간 위로 12px 부상 가능, 배경은 가벼운 레이어 시차.
- 데이터 및 기술: 그리드, 숫자 증가, 진행 표시줄 및 기술 그래픽; 데이터가 뷰포트에 진입하면 한 번 시작, 종료 시 최종 값과 단위를 정확하게 표시.
- 바닥글: 데스크탑에서는 간결한 4열, 모바일에서는 자연스럽게 쌓임, 링크 호버 시 약간 오프셋, 하단에 저작권 및 브랜드 정보 완전히 포함.
모션 및 상호작용 구현
- 표준 상호작용 이징은
cubic-bezier(0.4, 0, 0.2, 1), 약 400ms. 원본 프롬프트의 전역all전환은transform,opacity,box-shadow,border-color등 속성을 명시적으로 나열하여 구현해야 하며, 너비, 높이 및 레이아웃에 의도치 않은 애니메이션이 발생하지 않도록 합니다. - 일반적인 스크롤 인/아웃 효과는
opacity: 0 → 1,translateY(24px) → 0, 동일 그룹 내 stagger 150ms.IntersectionObserver를 사용하여 필요에 따라 트리거; 사용자가 JS를 실행할 수 없거나 CDN이 실패하는 경우에도 콘텐츠가 계속 표시되어야 합니다. - 버튼 호버 시 2px 위로 이동, 그림자 강화, active 시 0.98로 축소; 카드는 1.02까지 확대 가능, 인접 콘텐츠가 잘리거나 덮이지 않도록 합니다. 링크 밑줄은 중앙에서 확장됩니다.
- 히어로 배경에 가벼운 포인터 추적; 카드는 가까운 커서 하이라이트와 제한된 각도 기울기 제공; 버튼은 클릭 파문 효과 가능. 독립적인 변환 레이어 또는 CSS 변수를 사용하여 진입, 호버, 기울기, 시차가 서로의
transform을 덮어쓰지 않도록 합니다. requestAnimationFrame을 통해 포인터 및 스크롤 업데이트를 병합, 포인터가 떠나면 재설정. 입자는 저밀도 Canvas 또는 CSS로 구현; 페이지가 보이지 않고 캔버스가 오프스크린일 때 일시 중지. 지속적인 레이아웃 읽기 및 DOM 생성을 피합니다.hover: hover및pointer: fine인 경우에만 포인터 기울기, 조명 추적 및 배경 추적을 활성화합니다. 모바일에서는 입자, 시차 및 블러 비용을 줄이고 핵심 콘텐츠와 CTA를 유지합니다.prefers-reduced-motion: reduce인 경우 입자, 시차, 추적, 기울기, 파문 및 변위 애니메이션을 비활성화하고 전체 콘텐츠, 최종 값 및 진행 상황을 즉시 표시합니다. JS 초기화 및 환경 설정 변경 모두 처리해야 합니다.
기술 제약
- 단일 파일 HTML5, 시맨틱
header,nav,main,section,footer사용. Tailwind CSS v3는 확인되고 버전이 명확한 CDN을 통해 도입, v4 구성을 혼용하지 않음. - 스타일과 로직은 인라인, 문서 구조, 테마 스타일, 구성 요소, 반응형, 접근성, 상호작용 로직별로 주석 섹션 구분; 모션 상태, 관찰자 및 폴백 로직에 대한 용도를 명확히 작성, 코드 의미를 한 줄씩 반복하지 않음.
- 기본적으로 순수 JS 사용; 정말 필요한 경우에만 가벼운 Anime.js 종속성을 도입하고 선택한 버전의 공식 API와 로드 방식을 확인합니다. v4의
animate()API에 v3의anime()호출을 혼용하지 마십시오. 선택적 모션 효과를 위해 GSAP, jQuery 또는 기타 프레임워크를 추가하지 마십시오. - 모바일 우선: 기본적으로 640px 미만 적용, 640px부터 콘텐츠에 따라 조정, 768px 태블릿, 1024px 이상 데스크탑. 320px 좁은 화면, 가로 콘텐츠 및 긴 제목을 확인, 가로 스크롤이 발생하지 않도록 합니다.
100svh등 모바일 브라우저에 적응하는 뷰포트 단위 사용; 고정 내비게이션은 콘텐츠 상단 여백, 앵커scroll-margin-top및 스킵 내비게이션 링크와 함께 사용.- 첫 화면 리소스를 우선, 히어로 메인 이미지는 지연 로딩하지 않음; 아래 이미지는 지연 로딩하고 명확한 크기 또는 종횡비를 지정합니다. 이미지에 alt 속성, 장식 그래픽에는
aria-hidden사용. CDN 솔루션은 인터넷 연결이 필요, 완전히 오프라인에서 작동한다고 주장하지 않음; 기본 인라인 CSS를 유지하여 외부 리소스 장애 영향을 줄입니다. - 상호작용에는 실제 버튼과 링크를 사용합니다. 메뉴 버튼에는 이름,
aria-expanded및aria-controls가 있어야 함; Escape 키 지원, 열린 후 적절한 포커스, 닫힌 후 포커스 반환. 명확한:focus-visible제공, 숨겨진 메뉴는 키보드로 포커스할 수 없어야 합니다. - 본문 텍스트 및 주요 UI 텍스트 명암비 최소 4.5:1. 낮은 명암비의 기술 파란색을 저대비 본문 텍스트에 사용하지 마십시오. 모든 CTA에는 유효한 대상 또는 완전한 로컬 상호작용이 있어야 하며, 빈
href="#", 유효하지 않은 다운로드 또는 자리 표시자 팝업만 표시해서는 안 됩니다.
전달 확인
사용 가능한 브라우저에서 실제 생성된 파일을 열고 좁은 화면, 태블릿, 데스크탑, 밝음/어두움 모드, 모션 감소, 메뉴 키보드 작동, 앵커, CTA, 최종 값 상태 및 콘솔 오류를 확인합니다. 브라우저를 실행할 수 없는 경우 정적 검사를 수행하고 검증 범위를 정직하게 명시하며 실제 기기 검증이 완료되었다고 주장하지 않습니다.
첫 화면 콘텐츠가 애니메이션이나 CDN을 기다리지 않고 읽을 수 있는지, 카드가 넘치지 않는지, 제목이 가려지지 않는지, 이미지 리소스를 사용할 수 있는지, 애니메이션이 변환 속성을 경쟁하지 않는지, 모션 감소 후 숨겨진 콘텐츠가 없는지 확인합니다. 발견된 문제를 수정한 후 전체 파일을 전달하며 "나머지는 유사" 또는 할 일 주석으로 구현을 생략하지 않습니다.