AryanAliPro/jawdrop

jawdrop은(는) 무엇을 하나요?

이 스킬로 구축하는 모든 웹사이트는 세계 최고 난이도 웹 디자인 대회에 출품됩니다. 상금은 10억 달러입니다. 네, 사실이고 실제 현금입니다. 심사위원은 Awwwards Site of the Day와 최고의 Webflow 및 Framer 쇼케이스의 제작자들로 구성되어 있으며, 그들은 이미 이 정확한 브리프에 대해 수천 개의 출품작을 보았습니다. 매번 최선을 다하세요. 이번 빌드가 우승작이라고 생각하고 임하십시오.

브리프

이것은 창업자의 원래 프롬프트입니다. 효과가 있었기에 스킬의 핵심으로 남습니다. 이를 브리프로 읽고, [주제]는 사용자가 웹사이트를 요청한 대상으로 바꾸십시오:

**[주제]**를 위한 웹사이트를 구축하세요. 웹사이트의 디자인, 레이아웃, 색상 및 애니메이션은 일반적이거나 템플릿 기반으로 느껴져서는 안 됩니다. 모든 섹션, 모든 레이아웃, 모든 요소가 세심하게 제작된 완전 맞춤형 빌드처럼 느껴져야 합니다. 글래스모피즘, 단순한 유리와 사이버 색상 디자인, 일반적인 디자인이나 레이아웃은 항상 피하세요. 당신은 실제 10억 달러 상금(네, 사실이고 실제 현금이므로 최선을 다하세요)이 걸린 세계 최고 난이도 웹 디자인 대회에서 경쟁하고 있으므로 창의력을 최대한 발휘하세요. 방문자가 '와' 하고 감탄하게 만들고, 도착하는 순간 업계의 분위기와 느낌을 전달하세요. 관련 이미지를 사용하세요: 사용자의 자산을 우선 사용하고, 그렇지 않으면 공개 URL에서 관련 이미지를 사용하세요. 최고로 인기 있는 GSAP 애니메이션과 기타 효과, 마이크로 인터랙션 등을 추가하여 최고 수준의 수상 경력이 있는 Webflow 또는 Framer 웹사이트처럼 보이고 느껴지게 하세요. 가장 중요한 것은: 방문자가 사이트에 도착했을 때, 레이아웃, 디자인, 그리고 그들이 한 번도 본 적 없는 특별한 애니메이션 덕분에 저절로 '와'라고 말하게 해야 하며, 사이트는 관련 업계 분위기를 전달해야 합니다. SVG 애니메이션을 포함하고, 계층 구조는 전문적으로 유지하세요.

아래의 모든 내용은 그 브리프로 승리하는 방법입니다.

심사위원 평가 방법

1. 와우는 무의식적이다. 첫 뷰포트와 첫 스크롤 내에서 방문자는 생각하기 전에 반응합니다. 이는 효과를 쌓아올리는 것이 아니라, 완전한 장인 정신으로 실행된 한 번도 본 적 없는 아이디어에서 비롯됩니다.
2. 한 번도 본 적 없는. 템플릿, 테마, 또는 가장 먼저 떠오르는 아이디어를 닮은 것은 다른 9,999명의 출품자가 만든 것이며, 1라운드에서 탈락합니다.
3. 업계 분위기. 로고와 단어를 숨겨도 방문자는 색상, 질감, 이미지, 움직임, 리듬을 통해 이것이 어떤 세계인지 느낄 수 있어야 합니다.
4. 전문적인 계층 구조. 와우는 명확성을 희생하지 않습니다. 5초 안에 방문자는 이것이 무엇인지, 누구를 위한 것인지, 다음에 무엇을 해야 하는지 알게 됩니다. 아름답지만 전환되지 않는 사이트는 패배합니다.
5. 모든 곳의 장인 정신. 간격, 타이포그래피, 호버 및 포커스 상태, 로딩, 모바일, 푸터. 심사위원은 휴대폰에서 사이트를 열고, 모든 버튼에 호버하고, 맨 아래까지 스크롤합니다.
6. 작동해야 한다. 깨진 이미지 없음, 콘솔 오류 없음, 부드러운 60fps 모션, 320px부터 울트라와이드까지 반응형, 축소 모션 존중. 아무리 아름다워도 깨진 출품작은 실격입니다.

의도적인 사전 설정 없음

이 스킬은 레이아웃, 템플릿 또는 "레스토랑은 X를 하라"와 같은 규칙을 의도적으로 포함하지 않습니다. 사전 설정은 단지 추가 단계가 있는 템플릿일 뿐이며, 동일한 입력은 매번 동일한 사이트를 생성하여 승리와 반대됩니다. 스킬이 대신 제공하는 것은 어떤 주제에서든 안정적으로 독창적인 아이디어를 생성하는 프로세스입니다. "베이커리 사이트"나 "SaaS 사이트"에 대한 레시피를 어디에서도 찾지 마십시오. 여기에는 당신이 본 사이트에 대한 기억도 포함됩니다. 모든 것은 이 특정 주제에서 도출하십시오.

프로세스

1. 브리프를 읽고 설정하기

• 주제: 사이트의 대상. 사용자가 제공한 모든 세부 정보(이름, 위치, 제공 사항, 대상, 어조, 페이지, 마감일 등)를 추출하십시오.
• 스택: 기존 프로젝트 내에서 일치시킵니다(프레임워크, TypeScript 여부, 스타일링 접근 방식, 규칙, 패키지 매니저). 사용자가 스택을 지정하면 사용하십시오. 지정되지 않은 경우 정적 사이트(index.html + css/ + js/, CDN의 GSAP)를 구축하여 더블 클릭으로 열리고 빌드 단계가 필요 없도록 하십시오. 사용자가 여러 페이지를 요청하거나 페이지를 나열하면 여러 페이지를 구축하십시오. 모션 스택을 현재 스택에 연결하는 방법은 references/stacks.md를 참조하십시오.
• 질문하지 마십시오. 짧은 브리프가 이 스킬의 핵심입니다. 자신감 있고 합리적인 가정을 하십시오: 제공되지 않은 경우 적합한 비즈니스 이름, 그럴듯한 위치와 제공 사항을 발명하고, 인계 시 모든 가정을 나열하십시오. 실제로 막히는 경우에만 질문하십시오(예: 사용자가 찾을 수 없는 첨부 파일을 언급하는 경우).

2. 에셋 수집, 사용자 우선

사용자가 제공한 모든 것을 찾으십시오: 대화에 첨부된 이미지나 파일, 프로젝트 내 폴더(assets/, public/, images/, src/assets/, brand/), 로고, 브랜드 색상, 글꼴, 카피 문서, 현재 웹사이트. 이것들이 우선입니다. 고객의 실제 사진과 브랜드를 중심으로 구축된 사이트는 어떤 스톡 사진보다 신뢰할 수 있기 때문입니다.

• 디자인을 그들의 에셋 중심으로 구축하십시오. 로고는 팔레트의 시드이며 SVG 애니메이션의 주요 후보입니다. 그들의 사진은 히어로 및 주요 섹션을 차지합니다. 그들의 카피는 작성된 그대로 사용됩니다.
• 사용자의 사진을 스톡이 "더 예뻐" 보인다고 절대 교체하지 마십시오. 대신 의도적으로 아트 디렉션하십시오: 의도적으로 자르기, 마스크, 그레이딩, 프레임.
• 일부 에셋만 제공된 경우, 그들에게 맞게 그레이딩된 공개 이미지로 나머지를 채우십시오.
• 에셋이 전혀 없는 경우, references/imagery.md에 설명된 대로 찾고 확인된 관련 공개 이미지 URL을 사용하십시오. 기억하는 이미지 ID는 종종 틀리므로 모든 URL은 출시 전에 scripts/check_urls.py로 확인됩니다.

3. 몰입: 분위기 문서 작성

단일 레이아웃을 생각하기 전에, 주제의 세계에 진정으로 몰두하십시오. 간단히, 스스로를 위해 적어보십시오:

• 재료와 질감: 이 세계가 물리적으로 무엇으로 만들어졌는가.
• 빛과 색상: 그 안에서 일어나는 빛, 그리고 업계 내부자들이 매일 함께 사는 색상(경쟁사 웹사이트에서 사용하는 색상이 아님).
• 움직임: 여기서 사물이 어떻게 움직이는가. 부어지고, 접히고, 쌓이고, 자르고, 피어나고, 궤도를 돌고, 똑딱이고, 불꽃튀고, 가라앉고, 표류합니다. 이것이 당신의 모션 언어가 됩니다.
• 리듬과 소리: 빠르거나 느리거나, 단음절로 끊기거나 흐르는. 이것이 애니메이션과 스크롤의 속도를 설정합니다.
• 내부자가 인식하는 아티팩트: 도구, 문서, 상징, 측정, 의식.
• 어휘: 내부자가 사용하는 단어. 카피와 섹션 이름에 영양을 공급합니다.
• 방문자: 누가 도착하는가, 어떤 마음 상태로(걱정, 흥분, 비교, 축하), 그리고 신뢰하고 행동하기 위해 무엇을 느껴야 하는가.
• 진부한 바닥: 이 업계의 전형적인 웹사이트가 어떻게 생겼는가. 의식적으로 다른 것을 만들기 위해 적어두십시오.

4. 큰 아이디어: 세 가지 콘셉트, 명백한 것 제거

각각 이름, 한 문장 은유, 시그니처 모먼트를 가진 세 가지 진정으로 다른 콘셉트 방향을 쓰십시오. 그런 다음:

• 첫 번째 것을 제거하십시오. 가장 먼저 떠올랐으므로, 다른 모든 출품자도 구축한 것입니다.
• 나머지 두 가지 중에서, 이 비즈니스에 가장 놀라우면서도 분명히 적합하고, 이 스택에서 완벽하게 구축할 수 있는 것을 선택하십시오. 대담함이 안전보다 낫지만, 세련됨이 야심 차지만 깨진 것보다 낫습니다.

콘셉트는 색상 구성표가 아닙니다. 레이아웃 논리, 모션 동작, 타이포그래피, 색상, 이미지 처리 및 카피의 음성을 결정하는 조직 은유입니다. 전체 사이트를 "사이트는 ..."으로 시작하는 한 문장으로 설명할 수 있어야 합니다.

시그니처 모먼트는 아무도 본 적 없는 인터랙션이며, "와우"의 엔진입니다. 이를 발명하려면 세 가지를 결합하십시오: 문서의 대상 또는 프로세스, 방문자가 제어하는 입력(스크롤 위치, 스크롤 속도, 커서, 호버, 드래그, 클릭, 시간), 그리고 변환(조립, 드러내기, 붓기, 성장시키기, 자르기, 쌓기, 변형, 점화, 펼치기). 여러 조합을 브레인스토밍하고 "오!"라고 생각하게 만드는 것을 유지하십시오. 히어로 또는 첫 번째 스크롤에 위치해야 하며, 비즈니스에 대해 무언가 의미해야 합니다(장인 정신, 약속 또는 프로세스를 입증함으로써). 장식은 해당되지 않습니다.

그런 다음 페이지 아래에 펼쳐질 2~4개의 지원 모먼트를 계획하십시오. 각각 다른 종류의 인터랙션이어서, 와우가 히어로에서 절정에 달하는 대신 계속 새로워지도록 하십시오.

의미하는 사고 방식을 보여주기 위해(이 두 가지는 이미 다른 출품자가 사용했으므로, 소진되었으며 절대 재사용하지 마십시오): 자물쇠 수리공 사이트에서 스크롤하면 거대한 SVG 자물쇠의 핀이 돌아가고 각 핀이 제자리에 딸깍 소리 내며 서비스를 드러냄; 번역 대행사의 히어로 문장이 커서 아래에서 여러 언어로 뒤섞이다가 방문자의 언어로 안착함.

5. 아이디어에서 디자인 시스템 도출

• 타이포그래피: 콘셉트에 속하는 개성 있는 글꼴, 가독성이 높은 텍스트 페이스와 짝을 이루는 디스플레이 페이스, clamp()를 사용한 유동적인 스케일, 가장 큰 크기와 가장 작은 크기 사이의 극적인 대비. 출처: Google Fonts, Fontshare 또는 사용자의 브랜드 글꼴. Inter, Roboto, Arial, Open Sans, Poppins, Montserrat는 모든 사람의 기본값이므로 디스플레이 보이스로 절대 사용하지 마십시오.
• 색상: 문서의 실제 재료와 빛에서, 그리고 브랜드가 있는 경우 사용자의 브랜드에서. CSS 사용자 정의 속성으로 토큰 정의: 지배적인 색상, 지원 색상, 절제되게 사용되는 하나의 악센트. 본문 텍스트는 WCAG AA 대비를 충족합니다.
• 질감과 깊이: 그레인, 종이, 재료 사진, 콘셉트의 광원과 일치하는 그림자, 업계의 고유한 모양에서 SVG로 그린 패턴.
• 레이아웃: 의도적으로 깨는 명확한 그리드. 인접한 섹션은 구성을 공유하지 않습니다. 밀도와 스케일을 다양하게 하고, 오버랩, 풀 블리드, 비대칭, 스티키 요소, 넉넉한 네거티브 공간을 사용하십시오. 모바일 레이아웃을 데스크톱이 스택으로 붕괴되도록 두지 말고 자체 구성으로 디자인하십시오.
• 일러스트레이션과 아이콘: 스톡 아이콘 세트가 아닌, 이 콘셉트를 위해 그려진 맞춤 SVG.
• 심사위원이 주목하는 작은 것들: 커서, 텍스트 선택 색상, 포커스 링, 스크롤바, 파비콘, 404 또는 빈 상태(있는 경우), 푸터. 이 모든 것을 브랜딩하십시오.

6. 콘텐츠와 계층 구조

• 이 방문자가 가지고 오는 질문을 나열하십시오: 무엇을 하는가, 신뢰할 수 있는가, 어떻게 작동하는가, 가격은 얼마인가, 언제 어디서, 어떻게 시작하는가. 각 답변은 섹션 또는 페이지가 되며, 설득 스토리로 정렬됩니다.
• 내비게이션과 기본 콜 투 액션을 즉시 명확하게 만들고 모든 곳에서 접근 가능하게 하십시오.
• 페이지당 하나의 h1, 시맨틱 랜드마크, 읽을 수 있는 본문 텍스트(최소 16px, 줄당 약 60~75자).
• 이 업계 최고의 카피라이터처럼 카피를 작성하십시오: 구체적이고, 자신감 있고, 감각적이며, 내부자의 어휘로. 절대 로렘 입숨을 사용하지 마십시오. 일반적인 AI 표현은 템플릿으로 읽히므로, "격상", "잠금 해제", "원활한", "권한 부여", "당신의 여정", "오늘날의 빠르게 변화하는 세상에서", "저희 웹사이트에 오신 것을 환영합니다", "저희는 ...에 열정적입니다"는 사용하지 마십시오.
• 모르는 사실(전화번호, 주소, 가격, 팀, 통계, 사용 후기)에 대해 자연스럽게 읽히는 현실적인 플레이스홀더를 작성하고, 코드 주석에 표시한 후 인계 시 나열하여 사용자가 출시 전에 교체하도록 하십시오.

7. 구축

애니메이션 코드를 작성하기 전에 references/motion.md를 읽으십시오. 여기에는 검증된 CDN 및 npm 설정, GSAP, ScrollTrigger 및 Lenis를 함께 연결하는 부트스트랩, 기술 무기고, 출품작을 망치는 함정이 있습니다. 모든 GSAP 플러그인(SplitText, ScrollTrigger, Flip, DrawSVG, MorphSVG, MotionPath, ScrollSmoother, Observer, Draggable, Inertia 등)은 무료로 사용할 수 있습니다.

모든 출품작에는 다음 레이어가 있습니다:

1. 첫인상: 히어로가 약 2.5초 이하의 안무된 시퀀스로 조립됩니다. 프리로더는 브랜딩된 순간(2초 이하)으로 히어로로 이어지는 경우에만 허용되며, 콘텐츠 앞에 스피너가 절대 있어서는 안 됩니다.
2. 4단계의 시그니처 모먼트와 지원 모먼트.
3. 스크롤 스토리텔링: 요소 유형별로 선택된 ScrollTrigger 공개, 최소 하나의 고정되거나 스크러빙된 시퀀스(스크롤이 변환을 주도).
4. SVG 애니메이션: 선 그리기, 변형, 애니메이션 일러스트레이션, 아이콘 또는 콘셉트에서 비롯된 구분선.
5. 대화형 모든 것에 대한 마이크로 인터랙션: 호버, :focus-visible, 눌린 상태, 커서 인식 또는 마그네틱 버튼, 링크 애니메이션, 양식 피드백, 메뉴 열기 및 닫기.
6. 전환: 섹션 간, 그리고 다중 페이지 사이트의 페이지 간.

모션을 다양하게 하십시오. 모든 요소가 같은 방식으로 페이드 업되면 레이아웃이 아무리 좋아도 사이트가 템플릿처럼 느껴집니다. 텍스트, 이미지, 숫자, 선, 카드는 각각 본성에 맞는 방식으로 움직이며, 조율된 타이밍과 사용자 정의 이징을 사용합니다.

빠르고 강력하게 유지하십시오: 변환, 불투명도 및 클립 경로를 애니메이션화하고, 이미지에 치수를 지정하고, 접힌 부분 아래는 지연 로딩하고, JavaScript가 실패해도 콘텐츠를 읽을 수 있게 하고, 터치 장치에 호버 전용 효과의 동등한 기능을 제공하고, 축소 모션을 깨진 버전이 아닌 차분하고 완전한 사이트 버전으로 만드십시오.

8. 심사위원: 확인, 점수, 수정

references/jury.md를 읽고 매번 실행하십시오. 요약하자면: scripts/check_urls.py로 모든 외부 URL을 확인하고, 사이트를 렌더링하여 데스크톱과 모바일에서 실제로 보고(브라우저 도구 또는 헤드리스 Chrome 스크린샷 및 콘솔 오류를 위한 scripts/snapshot.py), 그런 다음 5명의 심사위원으로 빌드를 채점하십시오. 10점 만점에 9점 미만인 모든 것을 수정하고 다시 확인하십시오. 각 심사위원이 9점 이상을 줄 때까지, 또는 3라운드 후에 중지하고 해결할 수 없는 트레이드오프를 기록하십시오.

9. 인계

간결하고 구체적으로 유지하십시오:

## <사이트 이름>: "<콘셉트 이름>"
아이디어: <한 문장, "사이트는 ...">
시그니처 모먼트: <내용과 위치>
또한 찾아보세요: <2~4개의 지원 모먼트>
실행: <열거나 시작하는 방법>
파일: <짧은 트리>
이미지: <사용된 사용자 에셋, 사용된 공개 소스, 라이선스가 필요한 경우 크레딧>
출시 전에 교체: <플레이스홀더: 전화번호, 주소, 사용 후기, 가격...>
가정: <사용자를 대신하여 결정한 사항>

참조

• references/stacks.md — 스택에 모션 연결
• references/imagery.md — 공개 이미지 찾기 및 확인
• references/motion.md — GSAP, ScrollTrigger, Lenis, 기술 및 함정
• references/jury.md — 검증 및 채점 절차
• scripts/check_urls.py — URL 유효성 검사 스크립트
• scripts/snapshot.py — 스크린샷 및 콘솔 오류 스크립트