rik-python/apple-style-design

Apple 스타일 디자인

Dribbble apple-style 태그(64개 샷, 2026년 10월)를 역설계하고 Apple의 HIG 규칙과 교차 검증한 완전한 디자인 언어입니다. 토큰, 컴포넌트, 재질, 모션, 레이아웃, 카피 및 플랫폼별 레시피를 다룹니다.

한 문장으로 표현하는 모습: 차분한 중립 캔버스, 하나의 자신 있는 강조 색상, 콘텐츠가 주인공, 선 대신 부드러운 깊이, 물리적으로 느껴지는 모션.

이 스킬을 사용하는 방법

1. 출력 유형을 식별합니다(웹 페이지, 앱 화면, 위젯, 플러그인 패널, 아이콘, 포스터, 모션). references/layouts.md에서 일치하는 레시피를 선택합니다.
2. 모드를 선택합니다: 라이트(마케팅, 생산성, 건강 기본), 다크(미디어, 프로 도구, 금융, 게임, VFX), 또는 이미지 위에 유리(비전OS, 히어로 섹션, 플레이어). 아래 "모드 선택기"를 참조하세요.
3. 토큰을 로드합니다. 웹의 경우 assets/apple-style.css를 프로젝트에 복사(또는 인라인)하고 해당 변수와 .as-* 클래스를 사용하여 빌드합니다. 다른 플랫폼의 경우 references/platforms.md를 읽습니다(Nuke용 Qt/PySide QSS, ComfyUI 프론트엔드, Tailwind, SwiftUI, Figma, 슬라이드, Remotion).
4. references/components.md의 컴포넌트로 구성합니다. 버튼이나 목록 행에 대해 새로운 스타일을 발명하지 마세요. 레시피에 이미 미세한 세부 사항이 인코딩되어 있습니다.
5. 마지막으로 재질과 모션을 추가합니다: references/materials.md(리퀴드 글라스, 프로스티드, 메시 그라데이션, 그레인) 및 references/motion.md(스프링, 나타나기, 누름 상태).
6. 결과를 보여주기 전에 하단의 QA 체크리스트를 실행합니다.

패턴이나 시각적 참고 자료가 필요하신가요? references/shot-catalog.md는 분석된 모든 샷과 각 샷이 가르쳐주는 내용을 나열합니다. assets/demo.html은 스타일시트로 빌드된 모든 컴포넌트의 작동 갤러리입니다: 열어서 목표 품질 기준을 확인하세요.

12가지 법칙 (왜 "Apple"처럼 보이는가)

이는 거의 모든 강력한 샷에서 나타난 패턴입니다. 각각에는 이유가 있습니다. 사례가 다루어지지 않을 때 그 이유를 염두에 두세요.

1. 중립 캔버스, 색상은 콘텐츠에. 배경은 오프화이트 #F5F5F7 / 그룹화된 회색 #F2F2F7 또는 거의 검은색 #000/#1C1C1E입니다. 색상은 데이터, 상태 및 하나의 기본 작업을 위해 예약됩니다. 이유: 캔버스가 물러서서 콘텐츠와 강조 색상이 모든 의미를 전달합니다.
2. 화면당 하나의 강조 색상. 기본값은 시스템 블루 #007AFF입니다. 제품에 자체 아이덴티티가 있는 경우 바이올렛 #5E5CE6, 핑크, 오렌지 또는 그린. 두 번째 강조 색상은 데이터 시리즈(예: 오렌지/핑크 교대 막대)에만 사용합니다. 이유: 단일 강조 색상은 레이블 없이도 기본 작업을 명확하게 만듭니다.
3. 경계선 대신 높이에 의한 깊이. 카드는 부드럽고, 넓으며, 낮은 불투명도의 그림자 위에 떠 있습니다. 구분선은 왼쪽 가장자리에서 들어간 0.5px 헤어라인입니다. 무거운 1px 회색 테두리는 "웹 양식"으로 읽히고 Apple처럼 보이지 않습니다.
4. 모든 곳에서 연속적인 모서리. 스퀴클과 같은 반경: 10(컨트롤), 14(필드), 20(목록 그룹, 카드), 28(위젯, 시트), 38+(장치/창), 999(알약). 중첩 반경 = 외부 반경에서 패딩을 뺀 값.
5. 타이포그래피가 계층 구조를 결정합니다. SF Pro / Inter, 디스플레이 크기에서 좁은 네거티브 트래킹, 굵은 대형 제목, 더 작은 크기 대신 회색 보조 텍스트. 숫자는 주인공입니다: 12.203 크고 굵게, 같은 기준선에 작은 회색 단위가 옆에 있습니다.
6. 회색은 색상이 아니라 스케일입니다. 레이블 불투명도: 기본 100%, 보조 74% 라이트 / 60% 다크(Apple은 라이트에서 60%를 제공하며, 흰색에서 3.44:1에 불과), 3차 30%, 4차 18%. 임의의 #999를 절대 발명하지 마세요.
7. 작업을 위한 알약과 원. 기본 버튼은 전체 알약입니다. 아이콘 작업은 44px 원입니다. FAB는 흰색 SF 스타일 글리프와 부드러운 색상 그림자가 있는 채워진 강조 색상 원입니다.
8. 플랫 채움보다 재질. 오버레이, 툴바, 독, 사이드바 및 플레이어는 반투명 블러 재질(리퀴드 글라스)을 사용하여 컨텍스트가 보이도록 합니다.
9. 넉넉하고 리드미컬한 여백. 4pt 그리드; 16/20 내부 패딩; 섹션은 숨을 쉽니다(데스크톱에서 96-160px). 약간 비어 있는 것처럼 느껴지면 아마도 올바른 것입니다.
10. 모션은 물리적입니다. 선형 트윈이 아닌 스프링. 누름 = 스케일 0.97, 놓음 = 스프링 백. 나타나기 = 페이드 + 8-24px 상승 + 언블러. 한 번 이상 튕기는 것은 없습니다.
11. 카피는 짧고 자신감 있습니다. 문장 케이스, 태그라인에 마침표("Sound. Refined.", "Coming Soon."), 회색 또는 강조 색상 구문이 있는 투톤 헤드라인, 소문자 위젯 제목 허용("steps walked").
12. 미세한 디테일의 장인 정신. 3차 회색의 쉐브론, 데이터용 표 형식 숫자, 키캡 힌트(esc, return), 상태 점, 0.5px 헤어라인, 유리 위쪽 하이라이트, 차트 아래 색상 빛. 이러한 디테일이 "깔끔함"과 "Apple"의 차이를 만듭니다.

모드 선택기

제품 느낌	모드	캔버스	표면	강조 색상 아이디어
건강, 생산성, 커머스, 문서, SaaS 마케팅	라이트	#F5F5F7 / #F2F2F7	#FFFFFF	블루 #007AFF
미디어 플레이어, 음악, 금융 티커, 프로/VFX 도구, 게임	다크	#000000	#1C1C1E / #2C2C2E	핑크 #FF375F, 그린 #30D158, 바이올렛 #5E5CE6
사진/비디오 위 히어로, 비전OS, 플레이어, 토글	유리	이미지 또는 메시 그라데이션	리퀴드 글라스	흰색 기본, 강조 색상 보조
브랜드/포스터/런칭	그라데이션	메시 그라데이션 + 그레인	유리 또는 없음	제품 색상

핵심 토큰 (요약)

전체 테이블(다크 값 및 근거 포함): references/tokens.md. assets/apple-style.css에 구현됨.

• 글꼴 스택: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif. 크로스 플랫폼 폴백으로 Google Fonts에서 Inter(400/500/600/700)를 로드합니다. 모노: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace.
• 타입 스케일 (앱): Large Title 34/41 700 (-0.022em) · Title1 28/34 700 · Title2 22/28 700 · Title3 20/25 600 · Headline 17/22 600 · Body 17/22 400 · Callout 16/21 · Subhead 15/20 · Footnote 13/18 · Caption 12/16 · Caption2 11/13.
• 타입 스케일 (마케팅): Hero 64-96px 700, line-height 1.04, tracking -0.035em · Section 40-56px 600 -0.028em · Lead 21-24px 400 secondary color · Eyebrow 14-17px 600 in accent.
• 간격: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160.
• 반경: 6 (태그), 10 (버튼/컨트롤), 14 (필드), 20 (카드/목록), 28 (위젯/시트), 38 (창/장치), 999 (알약).
• 그림자 (라이트): 0 1px 2px rgb(0 0 0/.04), 0 4px 12px rgb(0 0 0/.05), 0 16px 40px rgb(0 0 0/.08). 플로팅: 0 32px 80px rgb(0 0 0/.12) 추가.
• 이징: 표준 cubic-bezier(.25,.1,.25,1), 강조 아웃 cubic-bezier(.32,.72,0,1), 스프링 linear() 커브(motion.md 참조). 지속 시간 150 (누름), 250 (상태), 400 (들어오기), 600-900 (히어로 나타나기).

안티패턴 (스크래핑에서 발견, 복사하지 마세요)

태그에는 스타일에서 벗어난 샷도 포함되어 있었습니다. 무엇을 피해야 하는지 가르쳐줍니다:

• 스큐어모픽 2012 광택: 엠보싱된 입력 필드, 베벨 처리된 "로그인" 버튼, 린넨 텍스처 (OTAir 앱 스토어 샷).
• 만화 마스코트, 스티커 외곽선 및 두꺼운 외곽선 (Taco, Buzz Addiction).
• 모두 대문자 모노스페이스 "테크 브루탈리스트" 페이지 (MEMBRAN): 유효한 스타일이지만 Apple은 아닙니다.
• 모든 요소에 네온 멀티 그라데이션 버튼, 카드당 두 개 이상의 그라데이션.
• 한쪽으로 치우친 하드 블랙 드롭 섀도우 ("Astro" 장치 프레임은 브루탈리스트 오프셋 섀도우 사용: Apple 스타일에 맞지 않음).
• 모든 카드에 기본 1px #ddd 테두리, #999 텍스트, Bootstrap 블루 #0d6efd.
• 바운시 오버슛 애니메이션, 모든 곳에 회전 로더, 스크롤과 싸우는 패럴랙스.
• 사용자 제품에 Apple의 로고나 상표 사용. 브랜드가 아닌 스타일을 사용하세요.

출력 계약

이 스킬이 디자인을 생성할 때:

• 설명이 아닌 작동하는 코드를 제공합니다. 웹: 시맨틱 HTML + 토큰 CSS(인라인 또는 링크) + 모션을 위한 최소한의 JS. 다른 대상: 플랫폼 레시피.
• 모드 선택기가 다크 전용이라고 말하지 않는 한 항상 라이트와 다크를 지원하고 prefers-reduced-motion을 존중합니다.
• 접근성도 디자인의 일부입니다: 4.5:1 텍스트 명암비(label-2는 흰색, 캔버스 및 그룹화된 회색에서 통과하도록 조정됨. label-3은 플레이스홀더, 쉐브론 및 비활성 상태에만 사용되며, 사람이 반드시 읽어야 하는 텍스트에는 절대 사용되지 않음), 44x44 터치 타겟, 보이는 포커스 링(3px accent-text 아웃라인, 2px 오프셋: 아웃라인, box-shadow가 아니므로 컴포넌트 그림자가 그것을 가릴 수 없음), 아이콘 버튼에 레이블.
• 원시 시스템 강조 색상은 버튼 채움 및 작은 텍스트로 명암비에 실패합니다(흰색 on #007AFF = 4.02:1, on #0A84FF = 3.65:1). 채움 버튼은 accent-fill, 색상 텍스트는 accent-text, 광선, 토글, 아이콘 및 큰 모양에는 원시 accent를 유지하세요. 색조당 안전한 음영: references/tokens.md 3a.
• 전달 후 사용자가 방향을 잡을 수 있도록 모드, 강조 색상 및 사용된 2-3가지 시그니처 세부 사항을 한 줄로 짧게 명시합니다.

QA 체크리스트 (보여주기 전에 실행)

• 캔버스는 중립적입니다. 하나의 강조 색상만 작업을 주도합니다.
• 강조 색상이 명암비를 통과합니다: 버튼 채움은 accent-fill, 강조 텍스트는 accent-text 사용(tokens.md 3a). 사용자 정의 색조의 비율이 계산되었습니다.
• 카드에 하드 테두리가 없습니다. 구분선은 헤어라인, 들어가 있으며, 1x DPR에서 더 밝습니다.
• 긴 레이블이나 힌트가 있는 라디오 그룹은 비좁은 세그먼트 컨트롤이 아닌 체크 표시가 있는 단일 선택 목록입니다.
• 조밀한 데스크톱 컨트롤은 pointer: coarse에서 44px로 커집니다.
• 반경은 스케일을 따르고 중첩 반경은 동심원입니다.
• 디스플레이 텍스트에는 네거티브 트래킹이 있습니다. 보조 텍스트는 크기가 아닌 회색 스케일을 사용합니다.
• 히어로 숫자/제목은 큽니다. 단위/레이블은 작고 회색이며 같은 기준선에 있습니다.
• 기본 작업은 알약(또는 강조 FAB)입니다. 아이콘 버튼은 44px 원입니다.
• 오버레이/툴바는 플랫 그레이가 아닌 재질 블러와 내부 하이라이트를 사용합니다.
• 그림자는 부드럽고 레이어드됩니다. 붙여넣은 것처럼 보이는 것은 없습니다.
• 누름, 호버, 포커스 상태가 존재합니다. 모션은 스프링/ease-out을 사용합니다. 감소된 모션이 존중됩니다.
• 다크 모드는 순수한 검은색 표면 대신 레이어드 그레이(#1C1C1E / #2C2C2E / #3A3A3C)를 사용합니다.
• 카피는 짧고, 문장 케이스이며, 자신감 있습니다. 전달된 작업에 로렘 입숨이 없습니다.
• 모바일 너비는 16-20px 여백에서 작동하며 수평 스크롤이 없습니다.