mukulmunda41-create/futuristic-web-design

미래지향적 웹 디자인

감독의 손길이 느껴지고, 생성된 듯하지 않은 단일 페이지 마케팅 사이트를 위한 작업 방법입니다: 명확한 브리핑, 하나의 디자인 시스템, 개별적으로 구축 및 검증된 섹션, 하나의 촬영처럼 일관된 비주얼, 그리고 신중하게 선택된 소량의 영화적 모션.

사이트가 평범해 보이는 이유

요청에서 명확히 정해지지 않은 모든 세부 사항은 통계적으로 가장 확률 높은 선택으로 채워집니다. 따라서 한 줄짜리 요청은 평범한 웹사이트를 만들어냅니다: 중앙 정렬된 헤드라인, 부드러운 그라데이션, 동일한 둥근 카드들의 행. 실제 작업의 대부분은 코드 작성 이전에 이루어집니다. 미해결 질문(대상 고객, 유도하려는 단일 행동, 의도한 느낌, 서체, 색상 팔레트)을 확정한 다음, 눈으로 검사할 수 있을 만큼 작은 단위로 구축하세요.

역할을 명확히 유지하세요. 사용자는 무엇을 만들지 결정합니다. 당신은 어떻게 만들지를 책임집니다. 그리고 어떤 작업도 브라우저에서 모바일 화면 너비로 확인되기 전까지는 완료된 것이 아닙니다.

시작 위치

상황	이동할 곳
새 사이트, 빈 폴더 또는 거의 빈 폴더	1단계, 그 다음 순서대로 진행
기존 사이트, 추가하거나 재구축할 섹션 하나	프로젝트 규칙을 읽고, 5단계의 섹션 루틴으로 이동
"영화적으로 / 3D / 스크롤 기반으로 만들어줘"	7단계 및 references/cinematic-moves.md
이미지, 히어로 비디오, 또는 해당 프롬프트	references/assets.md
사이트가 평범해 보이거나 AI가 만든 것 같음	references/design-system.md의 "평범한 사이트의 징후"에 대해 감사 후 3단계로 이동
모바일 수정, 다듬기, 폼, 배포, 도메인, SEO	references/ship.md

해당 단계에 도달했을 때만 참조 파일을 열고, 그 이전에는 열지 마세요. 각 파일은 독립적으로 사용됩니다.

단계

1. 브리핑

코드 작성에 앞서 한 문단으로 작성하며, 세 가지 사항을 다룹니다: 대상 고객, 방문자가 취해야 할 단 하나의 행동, 의도한 느낌 (세 개의 형용사와 하나의 비교, 예를 들어 "조용하고, 정확하며, 관대한, 평일 아침 잘 운영되는 스튜디오 같은").

사용자가 이를 제공하지 않은 경우, 단일 메시지로 요청하세요. 사용자가 그냥 진행하라고 한 경우, 직접 브리핑을 초안으로 작성하고 한 줄로 가정임을 밝힌 후 진행하세요. 이후의 선택(주요 버튼, 어떤 섹션이 존재할지, 어떤 모션이 가치 있을지)은 모두 이 문단을 다시 읽음으로써 결정됩니다. 이것이 이 단계를 건너뛸 수 없는 이유입니다.

2. 계획

위에서 아래로 섹션 목록을 작성하세요. 각 항목은 섹션의 목적을 문장으로 설명하고 의존하는 에셋을 명명합니다. 구축을 보류하세요. 아무것도 존재하기 전에는 방향을 바꾸는 것이 무료이므로, 여러 파일에 걸친 작업의 경우 계획을 제시하고 동의를 기다리세요. 에이전트에 계획 모드가 있다면 사용하세요.

일반적인 실행 순서: 탐색, 히어로, 신뢰 구간, 제공 사항, 스토리 또는 프로세스, 고객 평가, 해당되는 경우 가격, 자주 묻는 질문, 마무리 클릭 유도 문구, 바닥글. 목적을 설명할 수 없는 섹션은 제거하세요. 실제 비즈니스의 경우, 절대 고객, 리뷰 또는 통계를 조작하지 말고, 해당 섹션을 생략하거나 실제 자료를 요청하세요.

3. 디자인 시스템

전체 사이트에 대한 디자인을 한 번에 고정하고 기록하세요. 기본 미리보기 페이지에 세 가지 후보 방향을 제시하여 눈으로 선택하도록 하세요. 각 후보는 헤드라인 서체와 본문 서체를 짝짓고, 다섯 가지 헥스 색상을 역할(페이지, 잉크, 기본, 강조, 음영)에 할당하며, 분위기를 한 문장으로 요약합니다. 선택된 디자인을 프로젝트의 테마 토큰에 인코딩한 후 미리보기 페이지를 삭제하세요. 탐색 페이지는 임시 구조물입니다. 프로젝트에 남아 있으면 사이트와 함께 배포됩니다.

references/design-system.md에 세부 사항, 용어 및 템플릿이 있습니다.

4. 프로젝트 규칙

영구 규칙은 현재 에이전트가 시작 시 로드하는 규칙 파일(CLAUDE.md, AGENTS.md, GEMINI.md)에 넣으세요. 기존 파일을 재사용하거나, 이 에이전트에 맞는 올바른 파일을 생성하세요. 모든 세션에서 로드되므로 간결하게 유지하세요: 사이트가 무엇인지, 스택, 디자인 시스템, 몇 가지 상시 규칙.

프로젝트에 특별한 의견이 없을 때 합리적인 기본값:

• 스택: Next.js 및 Tailwind CSS. 대화형 위젯(아코디언, 다이얼로그, 메뉴, 입력)의 경우 shadcn/ui와 같은 접근 가능한 컴포넌트 라이브러리를 설치하고, 직접 만들지 마세요.
• 각 컴포넌트는 components/ 아래에 자체 파일로.
• 모바일 우선. 390px 너비에서 아무것도 깨지지 않아야 합니다.
• 진짜 카피만 사용. 로렘 입숨, "Feature one" 같은 것은 안 됩니다.
• 패키지 추가 전 승인을 받고 그 목적을 설명하세요.
• prefers-reduced-motion은 모든 모션을 의미합니다: 부드러운 스크롤, 호버 및 아이콘 전환을 포함하며, 핵심 효과만을 의미하지 않습니다.

영구 규칙은 이 파일에 속합니다. 현재 작업은 그렇지 않습니다.

5. 섹션별 구축

전체 페이지를 한 번에 요청하면 수리가 어려운 평범한 섹션들로 가득한 페이지가 반환됩니다. 섹션을 구축하고, 검증하고, 계속 진행하세요. 패턴이 확립되면, 덜 중요한 마무리 섹션(평가, 질문, 마무리 클릭 유도 문구, 바닥글)은 일괄 처리할 수 있습니다. 시각적으로 중요한 것은 개별적으로 구축합니다.

섹션 루틴, 추가되거나 재구축되는 각 섹션에 대해:

1. 먼저 디자인 규칙과 토큰을 읽습니다.
2. 콘텐츠를 확인합니다. 사실이 중요한 경우(가격, 주장, 인용문) 질문합니다. 그 외의 경우 진짜 카피를 작성하고 당신이 지어낸 줄을 표시합니다.
3. 섹션에 자체 컴포넌트 파일을 할당합니다.
4. 세 가지 너비(모바일 390px, 태블릿 768px, 노트북 1440px)에서 렌더링합니다. 오버플로, 보기 흉한 줄바꿈 및 잘못된 크롭을 수정합니다.
5. 위아래 간격을 인접 섹션의 간격과 비교합니다.
6. 간단한 보고서로 마무리합니다: 섹션 이름, 파일 경로, 사용자의 확인이 필요한 사항.

히어로에 가장 많은 노력을 기울이세요. 방문자가 스크롤할지 여부를 결정하기 때문입니다. 모든 중요한 세부 사항을 지정하세요:

• 제공하는 것이 무엇인지 명시하는 약 8단어 이내의 헤드라인, 하나의 보조 문장, 브랜드 마크, 몇 개의 링크 및 하나의 버튼을 담은 탐색.
• 명확한 주요 버튼: 채워진, 강조 색상, 브리핑의 행동과 연결됨. 보조 행동은 절제된 텍스트 링크가 됩니다. 동등한 가중치의 두 버튼은 결정이 내려지지 않았음을 의미합니다.
• 비주얼의 초점에서 벗어난 위치에 카피를 배치하며, 데스크탑과 모바일에서 독립적으로 결정합니다.
• 비디오나 사진 위의 카피의 경우, 텍스트 아래에 그라데이션 스크림을 사용하여 국지적으로 가독성을 해결합니다. 전체 비주얼을 어둡게 하지 마세요.
• 모바일과 데스크탑 너비의 스크린샷에서 첫 화면을 평가합니다. 큰 빈 공간, 클립 아트처럼 보이는 단일 요소, 또는 식별하기 어려울 정도로 어두운 비주얼은 히어로가 완성되지 않았음을 의미합니다. 실제 에셋이 여전히 자리 표시자이더라도 대체 요소가 그때까지 구성을 유지해야 합니다.

모든 버튼은 어딘가로 연결됩니다. 각 클릭 유도 문구에는 실제 대상(스토어 또는 체크아웃 링크, 예약 페이지, 양식, 이메일 주소)이 필요합니다. 대상을 모르는 경우 가장 가까운 정직한 대상(제품 섹션, mailto 링크)을 사용하고 보고서에 연결되지 않은 각 버튼을 나열하세요. 같은 페이지로 조용히 스크롤되는 버튼은 완성된 것처럼 보이지만 실제로는 그렇지 않습니다.

페이지가 조립되면, 처음부터 끝까지 스크롤하며 가장 약한 섹션(항상 하나는 있음)을 식별하고, 미리보기 경로에 두 가지 대안을 제안하세요. 하나가 선택되면 다른 변형과 해당 경로를 삭제하세요.

6. 비주얼

강력한 레이아웃은 약한 이미지를 구할 수 없습니다. 약 7개의 에셋으로 구성된 짧은 촬영 목록에서 시작하여, 전체에 걸쳐 단일 스타일 라인(조명, 렌즈, 팔레트)을 일관되게 유지하세요. 프롬프트 공식, 히어로 비디오 안내 및 웹 준비 사항은 references/assets.md에 있습니다.

이미지 또는 비디오 생성기가 연결되지 않은 경우, 사용자에게 프롬프트를 제공하고 명확하게 표시된 자리 표시자와 함께 계속 진행하세요. 승인 없이 생성 크레딧을 절대 사용하지 마세요.

7. 영화적 기법

다섯 가지 기법을 사용할 수 있습니다: 히어로의 느린 배경 비디오, 스크롤 위치에 연결된 모션, 콘텐츠가 변경되는 동안 고정되는 섹션, 패럴랙스 깊이, 실시간 렌더링 3D 오브젝트. 절약해서 사용하세요: 히어로 비디오와 나머지 중 최대 두 개, 각각은 무언가를 명확히 하거나 특정 느낌을 만들 수 있는 위치에 배치하세요. 모든 기법을 동시에 사용하면 데모 릴처럼 읽히고, 방문자를 지치게 하며, 각 효과를 약화시킵니다.

각 기법에는 우아한 대비책이 필요합니다: prefers-reduced-motion에서의 일반 레이아웃, 작은 모바일에서의 정적 이미지, 효과가 실패해도 견딜 수 있는 페이지. 이후 비용을 측정하세요. 레시피와 안전 장치는 references/cinematic-moves.md에 있습니다. 스크롤 또는 3D 코드를 작성하기 전에 읽으세요.

8. 모바일, 다듬기, 폼, 런칭

모바일이 대부분의 방문을 차지합니다. 390px에서 전용 패스, 일관성 패스, 속도 확인을 실행한 다음, 폼을 연결하고, 배포하고, 런칭 체크리스트를 진행하세요. references/ship.md를 참조하세요.

작업 습관

다음은 전체적으로 유지됩니다.

• 라운드당 하나의 변경. 수정을 요청받으면, 그것만 변경하고 다른 것은 변경하지 마세요. 요청보다 넓은 diff는 어떤 편집이 도움이 되었는지 숨기고, 사용자가 만족했던 것을 "정리"하는 것은 퇴행입니다.
• 보고하기 전에 확인하세요. 페이지를 로드하고 여러 너비에서 검사한 후 완료되었다고 말하세요. 레이아웃은 모든 규칙을 만족하지만 여전히 어색해 보일 수 있습니다.
• 모호한 피드백을 명명된 문제로 전환하세요. "무거워요"는 해결 가능합니다: 간격, 두께 또는 대비 중 무엇이 원인인지 파악하고, 그렇게 말하고, 그것만 조정하세요. 사용자가 선호도를 표현할 수 없는 경우, 각각 한 줄 설명과 함께 두세 가지 변형을 미리보기 경로에 제공하세요. 사람들은 지정하는 것보다 선택하는 것을 더 쉽게 합니다.
• 예상치 못한 결과를 명확히 하지 않은 사항으로 추적하세요. 출력이 사용자가 기대한 것과 다를 때, 그 뒤에 있는 미해결 질문을 찾아 규칙 파일에 정리하여, 다시 수동으로 패치되지 않도록 하세요.
• 오류를 근본에서 수정하고 원인을 한 줄로 명시하세요.
• 작업 상태를 저장하세요. 사용자가 커밋을 원하는 git 프로젝트에서, 각 작업 단계 후에 몇 주 후에도 의미 있을 메시지로 커밋하세요.
• 키와 데이터를 보호하세요. 비밀은 .env.local에 속하며 소스 파일과 git 기록에 남지 않아야 합니다. 폼이 저장을 거부할 때, 접근 규칙을 수정하세요. 작동시키기 위해 보안을 절대 비활성화하지 마세요.
• 정직하게 보고하세요. 무엇이 확인되었는지, 무엇을 확인할 수 없었는지(실물 아이폰, 프로덕션 도메인), 어떤 카피가 지어낸 것인지 명시하세요. 화면상의 확인은 아무것도 증명하지 못하며, 저장된 행이 증명합니다.
• 버전을 확인하세요. GSAP, Three.js, React Three Fiber, Motion 및 Lenis의 경우, 기억에 의존하지 말고 호환 가능한 버전에 대한 최신 문서를 참조하고 불확실성을 표시하세요.

참조 파일

파일	읽어야 할 때
references/design-system.md	서체, 색상 및 간격 선택; 모호한 스타일 단어를 구체적인 것으로 변환; 평범해 보이는 페이지 감사
references/assets.md	이미지 또는 비디오 프롬프트 작성, 비주얼 일관성 유지, 웹용 미디어 압축
references/cinematic-moves.md	비디오 히어로, 고정 스크롤 스토리, 패럴랙스, 3D 악센트, 스크롤 기반 비디오 또는 전체 라이브 3D 스크롤 스토리 추가
references/ship.md	미디어 배치, 모바일 패스, 다듬기, 속도, 문의 양식, 배포, 도메인, SEO 및 런칭 체크리스트