Apple 웹 디자인
웹 앱이 마치 네이티브 iPhone 앱이나 Apple.com 제품 페이지처럼 느껴지도록 설계된 디자인 언어입니다. 실제 출시된 식단 플래너 앱의 단일 index.html을 기준으로, 실제 iPhone에서 테스트되고 화면 단위로 정제되었습니다. 모든 것은 순수 CSS와 바닐라 JS로 작성되어 프레임워크나 라이브러리 없이 어떤 프로젝트에도 바로 적용할 수 있습니다.
목표는 하나의 조용한 제품을 처음부터 끝까지 만드는 것입니다: 연한 회색 페이지, 흰색 타일, 하나의 파란색 액센트, 크고 자신감 있는 타이포그래피, 모든 탭에 인플레이스 모션으로 응답합니다. 아무것도 튀지 않고, 전체 화면을 다시 렌더링하지 않으며, 입력된 텍스트와 스크롤 위치를 절대 잃지 않습니다.
이 스킬 사용 방법
- 새 UI: 먼저
references/tokens.css를 페이지에 붙여넣습니다. 그런 다음references/components.md의 컴포넌트 레시피를 사용하여 화면을 구축합니다. 상태 변경으로 UI가 다시 렌더링되면assets/morph.js와references/motion.md의 모션 레이어를 추가합니다. - 기존 UI: 프로젝트의 구조와 데이터를 유지합니다. 색상, 타이포그래피, 모양을 토큰으로 교체한 다음 컴포넌트를 하나씩 변환합니다. 스타일만 변경하기 위해 로직을 다시 작성하지 마십시오.
- 글래스: 사용자가 Liquid Glass / iOS 26 글래스(탭 바, 플로팅 버튼, 토스트, 시트 버튼)를 원할 때만
references/liquid-glass.md를 읽습니다. - 어두운 쇼케이스 화면 (런치 화면, 파티/포커스 모드 등):
references/keynote.md. - 완료했다고 판단하기 전:
references/checklist.md를 실행하세요 — 390×844에서 라이트/다크 모드 스크린샷을 찍습니다. - 앱을 판매할 예정이라면 (App Store 또는 상업적으로): 먼저
references/commercial.md를 읽으세요. 가장 Apple스러워 보이는 세부 사항 중 일부는 Apple이 문제 삼는 부분입니다.
필요한 레퍼런스만 읽으세요; 각각 독립적으로 구성되어 있습니다.
핵심 규칙 (중요한 이유)
색상: 하나의 액센트, 절제되게 사용. 페이지 #f5f5f7, 타일 #fff, 잉크 #1d1d1f, 보조 #6e6e73, 액션 블루 #0071e3 (다크: #000 / #1d1d1f / #f5f5f7 / #86868b / #2997ff). 파란색은 "여기서 행동할 수 있음"을 의미하므로, 기본 버튼, 링크, 선택된 탭, 진행 표시줄에만 사용됩니다 — 장식용으로는 사용하지 않습니다. 상태 색상(--ok 초록, --warn 호박, --bad 빨강)은 오직 의미를 전달할 때만 사용합니다. 추가 색조(물 시안, 단계 주황)는 한 종류의 데이터를 일관되게 레이블링할 때만 허용됩니다. 브랜드 그라데이션이 있다면, 오직 하나의 특별한 화면에만 속합니다.
다크 모드는 휴대폰을 따릅니다. 모든 색상은 prefers-color-scheme: dark 아래에서 재정의된 CSS 변수입니다. 다크 모드는 진정한 검은색 페이지와 #1d1d1f 타일을 사용하며, 그림자는 꺼집니다(--shadow:none). 검은색 위에서 그림자는 때처럼 보이기 때문입니다.
타이포그래피가 계층을 만들고, 박스가 아닙니다. 시스템 폰트 스택(-apple-system, BlinkMacSystemFont, system-ui, sans-serif, Apple 기기에서 SF 폰트 제공), 17px 본문, 큰 글자에는 좁은 네거티브 자간:
- 페이지 제목 40–48px 볼드,
-0.035em, 마침표로 끝남: "Recipes." — Apple.com 헤드라인 스타일. - 이중 톤 섹션 헤드, 24px 볼드: 첫 부분은 잉크색, 나머지는 회색: "Pirkiniai. Trūksta 15 produktų.". 두 부분 모두 마침표로 끝납니다.
- 큰 숫자는 얇게(weight 200–300) 그리고 매우 크게(38–72 px)
font-variant-numeric: tabular-nums와 함께 사용하여 숫자가 변경될 때 떨리지 않도록 합니다. 더 작은 통계 숫자(사양 행)는 600입니다. - 캡션 13–14 px 회색. 12 px 이하로 내려가지 마세요.
모양: 테두리 없는 타일, 필, 넉넉한 공간. 반경 8 / 14 / 22 / 28 px; 타일은 테두리가 없고 매우 부드러운 그림자(0 4px 18px rgba(0,0,0,.06))를 가집니다. 타일 내부의 행은 가장자리가 아닌 텍스트부터 시작하는 가는 선(iOS 인셋 구분선)으로 분리됩니다. 버튼은 필(border-radius: 999px): 기본은 파란색 채움에 흰색 텍스트, 보조는 회색 채움에 파란색 텍스트, 파괴적 작업은 회색 채움에 빨간색 텍스트. 사진은 타일 내부에서 가장자리까지 채웁니다.
레이아웃: 한 열, 휴대폰 우선. max-width: 720px 중앙 정렬, 16px 측면 거터, 모든 고정 가장자리에 safe-area 인셋(env(safe-area-inset-*)), 하단 패딩 110px(탭 바 아래 콘텐츠가 보이도록). 터치 대상 ≥ 44px.
모션: 모든 것이 제자리에서 움직입니다. innerHTML 대신 DOM 모핑으로 다시 렌더링하여 노드를 유지합니다; 새 행은 자라나고, 제거된 행은 사라지는 고스트로 남으며, 이동된 행은 미끄러지고(FLIP), 변경된 숫자는 굴러가고, 필은 슬라이드, 시트는 스프링처럼 올라오고, 버튼은 눌리고(scale .96, 스프링 커브). 두 가지 커브가 거의 모든 것을 커버합니다: --spring: cubic-bezier(.3,1.4,.5,1) (누름, 작은 팝) 및 --ease: cubic-bezier(.2,.8,.2,1) (페이드, 바); 시트와 큰 움직임에는 iOS의 cubic-bezier(.32,.72,0,1) (오버슈트 없음). 이 모든 것은 prefers-reduced-motion: reduce 아래에서 꺼집니다 — 확인하세요, 가정하지 마세요.
카피: 짧고, 인간적이며, Apple 스타일. 마침표로 끝나는 제목, 버튼의 동사 ("Pagaminau", "Pridėti"), 로케일에 맞게 포맷된 숫자 (toLocaleString(lang); 리투아니아어는 천 단위 공백과 소수점 쉼표 사용), 느낌표 없음, 크롬에 이모지 없음 (이모지는 콘텐츠 아이콘으로 괜찮습니다, 예: 🍸 음료 입력). 오류 텍스트는 다음에 무엇을 해야 하는지 알려줍니다.
이미 결정된 사항 (다시 논의하지 마세요)
다음은 레퍼런스 앱을 구축하는 동안 실제 피드백에서 나온 결정 사항입니다:
- 기본 파란색 액션 버튼은 글래스 UI 내부에서도 고체 파란색을 유지합니다 — 반투명 파란색 버튼은 시도되었다가 거부되었습니다.
- Liquid Glass는 기본적으로 켜져 있지만 사용자가 전환할 수 있으며 강도 슬라이더가 있습니다; 콘텐츠 카드는 텍스트 가독성을 위해 고체를 유지합니다. 글래스는 떠다니는 크롬에만 사용됩니다.
- 레시피/제품 사진이 이미지이며; 일러스트레이션이나 스톡 장식은 없습니다.
- 의심스러울 때는 iOS 26 동작을 우선합니다: 탭 바는 캡슐 형태로 떠 있다가 아래로 스크롤할 때 작은 버튼으로 접힙니다; 글래스는 손가락 아래에서 커집니다(확대), 움푹 들어가지 않습니다.
- 각 탭은 자체 스크롤 위치를 기억합니다; 활성 탭을 탭하면 상단으로 스크롤됩니다.
- 토스트는 위로 스와이프하여 닫을 수 있으며, 모든 파괴적 또는 데이터 변경 탭에 대해 Atšaukti / 실행 취소 동작이 있습니다.
파일
references/tokens.css— 완전한 토큰 블록 (라이트/다크, 반경, 그림자, 커브). 그대로 붙여넣습니다.references/components.md— 모든 컴포넌트에 대한 복사-붙여넣기 HTML + CSS, 동작 참고 사항 포함.references/motion.md— 애니메이션 헬퍼, 모핑 훅, FLIP, 숫자 롤, 탭 전환, 시트, 스와이프 및 홀드 제스처, 햅틱 틱, 축소 모션.references/liquid-glass.md— iOS 26 글래스 재질, Chromium 굴절 렌즈, 접히는 탭 바.references/keynote.md— 하나의 특별한 화면을 위한 검은색 "키노트" 스타일.references/checklist.md— 리뷰 체크리스트 및 스크린샷 스크립트.references/commercial.md— 이 스타일로 앱을 판매하기 전에 변경해야 할 사항.assets/morph.js— 70줄의 DOM 모핑 (키가 있는 행, 포커스 및 타이핑 안전, innerHTML으로 대체).