Apple Web
Apple.com과 같은 느낌의 제품 마케팅 페이지를 만듭니다. 조용하고, 자신감 있고, 타입 중심이며, 제품을 돋보이게 하는 모션을 갖춘 페이지입니다. 이 기술에 사용된 모든 값은 실제 apple.com 제품 페이지(2026년 11월)에서 측정되었으며, reference/measured-tokens.md에 저장되어 있습니다.
이 스타일 시스템은 복제(clone)가 아닙니다. Apple의 카피, 제품명, 로고, 사진, 아이콘 또는 글꼴 파일을 절대 복사하지 마세요. 사용자의 제품을 위한 독창적인 콘텐츠를 작성하세요.
파일
| 경로 | 용도 |
|---|---|
library/apple-web.css | 토큰, 타입 클래스, 레이아웃, 컴포넌트. 먼저 링크하세요. |
library/apple-web.js | 스크롤 리빌, 고정 내비게이션 상태, 스크롤-스크럽, 갤러리, 카운트업. 의존성 없음. |
demo/index.html | 모든 컴포넌트를 사용한 완전한 작업 페이지. 시작점으로 복사하세요. |
reference/measured-tokens.md | 원시 측정값: 타입 스케일, 색상, 반경, 이징, 중단점. |
reference/page-anatomy.md | Apple 제품 페이지가 섹션별로 어떻게 구성되는지 설명합니다. |
reference/anti-slop.md | 페이지가 AI로 만들어져 보이게 하는 요소와 Apple 스타일의 수정 방법을 설명합니다. |
워크플로
library/디렉토리를 프로젝트로 복사합니다.<head>에apple-web.css를,apple-web.js를defer속성과 함께 링크합니다.demo/index.html을 시작점으로 사용합니다.reference/page-anatomy.md의 섹션 순서를 유지하세요.- 먼저 카피를 작성합니다. 헤드라인은 2~5단어로 마침표로 끝냅니다(예: "빠릅니다. 정말 빠릅니다."). 본문 카피는 회색이며 하나의 하이라이트 구문은 흰색입니다.
- 섹션당 하나의 테마를 선택합니다:
theme-dark(검정) 또는theme-light(#f5f5f7) 또는theme-white. 긴 섹션에서는 번갈아 사용하고, 같은 테마가 세 번 연속으로 오지 않도록 합니다. - 아래 체크리스트를 완료한 후에 작업을 마무리합니다.
Apple 스타일을 만드는 규칙
타입(Type)
- 하나의 패밀리만 사용합니다. Apple 기기에서는 시스템 SF Pro, 그 외에는 Inter(CSS 스택이 처리). 두 번째 디스플레이 글꼴이나 세리프 악센트는 사용하지 않습니다.
- 모든 헤드라인은 Weight 600, 본문은 400. 700~900이나 300은 절대 사용하지 않습니다.
- 트래킹은 크기에 따라 변경됩니다. 본문(17px → -0.022em)과 히어로(64px+ → -0.009em)에서는 음수, 19~32px에서는 약간 양수입니다. 타입 클래스를 사용하세요. 모든 곳에 하나의
letter-spacing값을 설정하지 마세요. - 헤드라인은 마케팅 섹션에서는 짧고 중앙 정렬, 미디어 옆에 있는 잠금 레이아웃에서는 왼쪽 정렬입니다.
- 어두운 섹션의 본문 카피는
#86868b입니다.<strong>을 사용하여 구문을 강조하면(렌더링#f5f5f7, 동일한 Weight) 됩니다. 본문에 굵게(bold) 사용은 없습니다.
색상(Color)
- 회색조 페이지. 하나의 악센트: 링크/액션 파랑
#0071e3(어두운 섹션에서는 링크에#2997ff사용). 색상은 UI가 아닌 제품 이미지에서 나옵니다. - UI나 텍스트에 그라디언트, 글로우, 색상 그림자는 사용하지 않습니다.
레이아웃(Layout)
- 콘텐츠 너비: 텍스트는 980px, 미디어 행은 1260px, 최대 뷰포트 1440px. 중단점 1068px / 734px.
- 섹션 패딩: 데스크톱에서 위쪽 120px, 아래쪽 120~176px. 넉넉하게, 절대 좁지 않게.
- 둥근 타일: 큰 타일은 반경 28px, 작은 카드는 18px. 버튼은 알약 모양(반경 980px).
모션(Motion)
- UI 상태의 이징:
cubic-bezier(0.4, 0, 0.6, 1). 지속 시간: 호버 100ms, 투명도 240ms, 색상/내비게이션 320ms, 스크롤 리빌 최대 1초. - 리빌은 투명도 + 30
40px 상승, 요소가 뷰포트의 약 15%에 들어왔을 때 한 번 실행. 형제 요소는 80120ms 간격으로 지연. - 제품 모먼트는 스크롤-스크럽(진행률이 스크롤 위치에 연결)을 사용하며, 자동 재생하지 않습니다.
- 타일 호버: 카드 내부 미디어에 미세한 scale 1.02를 적용. 카드 그림자는 절대 건드리지 않습니다.
prefers-reduced-motion: 모든 애니메이션이 즉시 페이드 인으로 전환됩니다. 라이브러리가 처리합니다.
내비게이션(Navigation)
- 44px 글로벌 내비게이션, 그 아래 52px 고정 가능한 로컬 내비게이션(왼쪽에 제품명, 오른쪽에 링크 + 작은 파란색 "구매" 알약 버튼). 고정되면 반투명(
blur(20px) saturate(180%))으로 변합니다.
체크리스트 (AI 슬롭 금지)
- 이모지, 원 안에 아이콘 기능 그리드, "✨", 보라색/청록색 그라디언트가 없습니다.
- 헤드라인은 질문이나 "Unlock / Elevate / Seamless / Revolutionize" 같은 말이 아닌, 사실적 진술입니다.
- 통계의 모든 숫자는 단위와 함께 있으며, 주장이라면 각주 표시가 있습니다.
- 섹션당 최대 하나의 CTA 스타일(파란 알약 버튼 또는 파란 텍스트 링크
›), 둘 다 크게 사용하지 않습니다. - 미디어가 지배적입니다. 텍스트는 화려한 그라디언트 위에 떠 있는 카드 안에 절대 배치하지 않습니다.
- 모든 텍스트 요소에 클래스로 트래킹이 설정되어 있습니다. 브라우저 기본 굵게(bold)를 사용하지 않습니다.
- 페이지 하단에 12px
#86868b각주 섹션이 있습니다. - 1440px, 1068px, 734px, 375px 너비에서 확인했으며, 축소된 모션(reduced motion)에서도 확인했습니다.
전체 목록과 수정 방법은 reference/anti-slop.md를 참조하세요.