랜딩 페이지 (codebyabdullah 스타일)
하나의 index.html, 빌드 단계 없음, 정적 사이트로 배포. 이 페이지들이 템플릿처럼 보이지 않고 맞춤 제작된 것처럼 보이게 만드는 것은 예외 없이 적용되는 작은 규칙들 덕분입니다. 모든 규칙은 아래에 있습니다. 참조 구현체는 templates/starter-dental.html입니다. 의문이 들면 이 파일이 어떻게 동작하는지 읽어보세요.
작업 흐름
- 브리핑 (2분). 다음을 확인하거나 결정하고 명시합니다: 업종, 브랜드 이름(아랍어 + 라틴어), 도시, 하나의 제안(예: «الكشف الأول مجاني»), 그리고 주요 행동(예약, 견적, 방문, 주문). 실제 고객의 콘텐츠(서비스, 전화번호, 주소)는 데이터로 입력하며, 리뷰, 평점, 가격, 인물을 절대 허구로 만들지 않습니다. 가상 데모의 경우 네비게이션 배지에 «مثال · مشروع وهمي للعرض»라고 명시합니다.
- 업종 키트 선택 references/niches.md에서: 팔레트, 폰트, 3D 히어로 아이디어, 시그니처 인터랙티브, 섹션 순서, JSON-LD 유형. 해당 업종이 없으면 동일한 슬롯을 사용하여 새로 설계합니다.
- 카피부터 작성. CSS를 작성하기 전에 references/copywriting-ar.md를 사용하여 모든 문장을 먼저 작성합니다. 제안은 페이지에 8~14번 등장합니다.
- 스타터에서 시작.
templates/starter-dental.html을<site>/index.html로 복사하고 스킨을 변경합니다: 토큰, 폰트, 카피, 섹션을 수정한 다음 3D 장면과 시그니처 인터랙티브를 교체합니다. 골격, 성능 계층 블록, 모션 시스템, 접근성 폴백은 유지합니다. 자세한 내용: references/design-system.md, references/page-structure.md, references/hero-3d-and-performance.md, references/motion.md, references/conversion.md. - 도구로 QA.
node tools/shoot.js verify <site>명령으로 데스크톱, 휴대폰, 정적 계층의 스크린샷을 각 섹션마다 캡처하고 콘솔 오류와 끊어진 앵커를 보고합니다. 모든 스크린샷을 확인합니다. 그런 다음 references/qa-checklist.md를 실행합니다. - 에셋 생성.
node tools/shoot.js assets <site>명령으로hero-poster.webp,og.jpg,cover.webp를 렌더링합니다. - 배포. 사이트당 자체 git 저장소, Vercel에 정적 배포, 그런 다음 canonical/OG/JSON-LD를 실제 URL로 설정합니다. 자세한 내용은 references/deploy-and-assets.md를 참조하세요.
비타협적 규칙
<html lang="ar" dir="rtl">, 논리적 CSS 속성만 사용(margin-left대신margin-inline-start).- 스톡 사진 금지, 콘텐츠에 이미지 파일 없음. 모든 시각 자료는 생성됩니다: 절차적 three.js, 인라인 SVG 라인 아트(스크롤에 따라 그림), 캔버스 텍스처. 이 사실을 푸터에 명시합니다.
- 업종당 하나의 절차적 3D 오브제로 가치 제안을 전달하며 히어로가 고정(pinned)되는 동안(스캔이 치아를 드러내고, 타워 전체에 창문이 켜지고, 카드가 뒤집혀 증거를 보여줌). 장식이 아닌 스토리입니다. 2~3개의 고정된 문장이 단어별로 스토리를 서술합니다.
- 브랜드당 하나의 포인트 컬러, 제목 안의
<em>, CTA, 작은 표식에만 사용합니다. - 크고 타이트한 아랍어 제목(
letter-spacing:-.035em)에 라틴어 디스플레이 또는 모노 폰트를 숫자, 섹션 번호, 레이블에 함께 사용합니다. - 하나의 이징 커브를 CSS(
--ease: cubic-bezier(.2,.75,.15,1))와 소규모 모션 어휘(단어 마스크 리빌, 고정된 가로 섹션, 스크러블된 리프트, 자기 버튼, 마키)에 사용합니다. - 모바일 계층 v1 블록(templates/perf-tier.html)은 첫 페인트 전에 실행됩니다:
full데스크톱,lite휴대폰,static저사양 휴대폰(포스터, three.js 없음). h1이 LCP 요소이며, 3D는 텍스트가 페인트된 후 유휴 시간에 빌드됩니다. - 모션 없는 완전한 페이지:
prefers-reduced-motion과 JS 비활성화 상태 모두에서 최종 정적 완전 읽기 가능 레이아웃을 제공합니다. - 사우디(나즈디) 백인 방언, 전문적이고 정직하게: «ليش»، «وش»، «عشان»، «الحين». 과장 금지.
- 3개 이하 필드의 양식. 화면에 다른 CTA가 이미 보일 때 숨겨지는 플로팅 CTA.
금지 사항 (이것들이 페이지를 템플릿처럼 보이게 만듭니다)
- 스톡 사진, UI 내 이모지, 일반 그라데이션 블롭, 하나 이상의 포인트 컬러.
- 모든 것을 애니메이션 처리: 모션은 스토리를 따르고, 방해가 되지 않습니다.
- 데스크톱 전용 다듬기: 휴대폰과 정적 계층을 데스크톱만큼 신중하게 확인하세요.
- 가짜 사회적 증거: 허구의 사용 후기, 별점, 고객 로고, 가격 없음.
margin-left/right,text-align:left, LTR 전용 아이콘(화살표는 RTL 방향을 가리켜야 함).shoot.js verify의 모든 스크린샷을 확인하지 않고 배포.