Apple에서 영감을 받은 디자인 시스템

Category: 미디어 & 컨슈머 소비자 전자제품. 프리미엄 여백, SF Pro, 영화적 이미지.

1. 비주얼 테마 & 분위기

Apple의 웹 언어는 갤러리 같은 정적함과 리테일 밀도의 정보 블록 사이를 오가는 정밀한 에디토리얼 시스템이다. 비주얼 톤은 절제되어 있다. 넓은 중립적 캔버스, 조용한 크롬, 그리고 표현의 무게를 거의 전부 부여받은 제품 이미지. 인터페이스는 하드웨어, 소재, 마감 옵션이 서사의 전경이 되도록 사라지게끔 설계되어 있다.

분석한 다섯 개 페이지 전반에서 리듬은 일관되지만 단일하지는 않다. 마케팅 표면(홈페이지와 Environment)은 영화적인 흑과 빛의 챕터링을 사용하는 반면, 커머스 표면(Store와 Shop 플로우)은 핵심 브랜드 문법을 깨지 않으면서 더 촘촘한 간격, 더 많은 유틸리티 컨트롤, 더 밀도 높은 카드 스택을 도입한다. 그 결과는 두 개의 기어를 가진 하나의 시스템이다. 쇼케이스 모드와 트랜잭션 모드.

타이포그래피는 안정화 장치다. SF Pro Display는 압축된 행간과 절제된 자간으로 히어로와 머천다이징 위계를 담당하고, SF Pro Text는 제품 메타데이터, 내비게이션, 필터, 밀도 높은 선택 UI를 처리한다. 타이포그래피는 절제된 상태를 유지하지만, 스케일 범위는 빌보드급 히어로 메시지와 마이크로 유틸리티 레이블을 모두 지원할 만큼 넓다.

핵심 특징:

• 이분법적 섹션 리듬: 깊은 블랙 장면(#000000)과 옅은 중립 필드(#f5f5f7)의 교차
• 액션과 링크 의미를 위한 단일 블루 강조 계열(#0071e3, #0066cc, #2997ff)
• 하나의 시스템 안에 있는 두 가지 작동 모드: 영화적 쇼케이스 모듈과 밀도 높은 커머스 컨피규레이터
• 이미지와 소재 마감에 대한 강한 의존; UI 크롬은 시각적으로 얇게 유지
• 촘촘한 헤드라인 지표(SF Pro Display, semibold)와 압축된 본문/링크 타이포그래피(SF Pro Text)의 조합
• 시그니처 액션 언어로서의 알약형(pill)과 캡슐형 지오메트리(18px에서 980px까지, 그리고 원형 컨트롤)
• 절제되게 사용되는 깊이; 대비와 표면 분리가 레이어링 작업의 대부분을 담당
• 멀티 페이지 컬러 블록 리듬: 블랙 히어로 챕터 -> 옅은 중립 머천다이징 필드 -> 유틸리티 화이트 리테일 표면 -> 컨트롤용 다크 마이크로 표면

2. 컬러 팔레트 & 역할

Source Pages: https://www.apple.com/, https://www.apple.com/environment/, https://www.apple.com/store, https://www.apple.com/shop/buy-iphone/iphone-17-pro, https://www.apple.com/shop/accessories/all

Primary

• Absolute Black (#000000): 몰입형 히어로 캔버스, 드라마틱한 제품 챕터, 깊은 UI 앵커.
• Pale Apple Gray (#f5f5f7): 기능 밴드, 비교 블록, 에디토리얼 전환을 위한 주요 라이트 표면.
• Near-Black Ink (#1d1d1f): 라이트 캔버스 위의 기본 텍스트 및 다크 채움 컨트롤 색상.

Secondary & Accent

• Apple Action Blue (#0071e3): 기본 액션 채움 및 포커스 신호를 주는 브랜드 강조색.
• Body Link Blue (#0066cc): 긴 글의 가독성에 최적화된 인라인 링크 색상.
• High-Luminance Link Blue (#2997ff): 더 강한 대비가 필요한 어두운 장면에서의 밝은 링크 처리.

Surface & Background

• Pure White Canvas (#ffffff): 리테일/제품 목록 배경 및 밀도 높은 트랜잭션 섹션.
• Graphite Surface A (#272729): 다크 카드 및 미디어 컨트롤 컨텍스트 레이어.
• Graphite Surface B (#262629): 컨트롤 그룹화를 위한 약간 더 깊은 다크 유틸리티 레이어.
• Graphite Surface C (#28282b): 부상된 다크 보조 표면.
• Graphite Surface D (#2a2a2c): 더 풍부한 다크 장면에서 분리를 위해 사용되는 가장 어두운 부상 단계.

Neutrals & Text

• Secondary Neutral Gray (#6e6e73): 본문 보조 카피, 도움말 설명, 3차 메타데이터.
• Soft Border Gray (#d2d2d7): 구분선, 미묘한 외곽선, 절제된 유틸리티 컨테인먼트.
• Mid Border Gray (#86868b): 제품 구성 및 필터 컨텍스트에서의 더 강한 필드 외곽선.
• Utility Dark Gray (#424245): 스토어 컨텍스트에서의 다크 중립 텍스트/표면 교차점.

Semantic & Accent

• Selection/Focus Signal (#0071e3): 마케팅과 커머스 컨텍스트 전반에 걸쳐 공유되는 포커스 및 선택 상태 신호.
• Error/Warning/Success: 추출된 표면 세트에서 일관되게 보이는 별도의 시맨틱 팔레트는 없었다.

Gradient System

• 추출된 페이지들은 압도적으로 솔리드 표면 중심이다. 비주얼의 풍부함은 지속적인 UI 그라데이션이 아니라 사진과 마감 렌더링에서 나온다.

3. 타이포그래피 규칙

Font Family

• Display Family: SF Pro Display, fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• Text Family: SF Pro Text, fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• Usage Split: Display 패밀리는 히어로/제품 헤드라인과 머천다이징 헤딩을 담당하고, Text 패밀리는 내비게이션, 컨트롤, 레이블, 밀도 높은 커머스 카피를 담당한다.

위계

원칙

• 페이지 유형 전반의 연속성: 동일한 타이포그래피 DNA가 영화적 런칭과 제품 구매 플로우를 아울러, 마케팅과 커머스 사이의 브랜드 분열을 방지한다.
• 스케일에서의 압축: Display 단계는 촘촘한 리딩과 절제된 트래킹을 사용해 기계적이고 제품 우선의 느낌을 준다.
• 리테일 깊이에서의 가독성 있는 밀도: SF Pro Text는 긴 제품 목록과 옵션 매트릭스를 위한 충분한 수직 리듬과 압축성의 균형을 맞춘다.
• 측정된 굵기 사다리: 600이 지배적인 강조 굵기다. 700은 선별적으로 등장하고, 300은 더 큰 라인에서 대비를 위해 절제되게 사용된다.

폰트 대체에 관한 참고

• 가장 가까운 무료 대체 폰트: 텍스트 중심 구현에는 Inter, 헤딩에는 Inter Tight로 근사한 SF Pro Display-like 지표.
• 대체할 때는 본문 크기에서 행간을 약간(+0.02에서 +0.06) 늘리고, 가독성을 보존하기 위해 음수 트래킹 강도를 줄인다.

4. 컴포넌트 스타일링

버튼

• Primary Fill Action: #0071e3 배경, #ffffff 텍스트, 8px 라운드, 압축된 수평 패딩(보통 8px 15px). 결정적인 구매/진행 액션에 사용.
• Dark Fill Action: #1d1d1f 배경, #ffffff 텍스트, 8px 라운드. 라이트 표면에서 절제된 고대비 프라이머리가 필요할 때 사용.
• Pill/Capsule Action Family: 18px-56px 라운드의 큰 캡슐 액션과 980px의 극단적 알약형 링크. Apple의 부드럽지만 정밀한 콜투액션 실루엣을 확립한다.
• Utility Filter/Button Shells: 밀도 높은 구성 컨텍스트를 위한 미묘한 그레이 보더(#d2d2d7 / #86868b)를 가진 라이트 셸(#fafafc 또는 반투명 화이트).
• Pressed Behavior: 활성 컨트롤은 물리적 누름 확인을 나타내기 위해 보통 스케일을 줄이거나 채움을 약간 이동시킨다.

카드 & 컨테이너

• Editorial/Product Cards: 최소한의 프레이밍과 이미지 우선 구성을 가진 #f5f5f7 또는 화이트 필드 위의 라이트 카드.
• Dark Utility Cards: 오버레이, 미디어 컨트롤, 다크 컨텍스트 모듈에 사용되는 그래파이트 단계(#272729에서 #2a2a2c).
• Configurator Panels: 명확하지만 절제된 보더 정의를 가진 라운드 컨테이너(보통 12px-18px).
• Carousel/Spotlight Modules: 피처드 콘텐츠 레인을 위한 더 큰 라운드 셸(28px-36px).

입력 & 폼

• Retail Input Fields: 반투명 또는 화이트 배경, 다크 텍스트(#1d1d1f), 보더 주도의 컨테인먼트(#86868b).
• Selection Controls: 원형/토글형 컨트롤 지오메트리가 제품 선택 인터페이스에서 자주 나타난다.
• Density Strategy: 폼 필드는 기기 이미지와 가격 위계가 지배적으로 유지되도록 시각적으로 조용한 상태를 유지한다.

내비게이션

• Global Marketing Nav: 작은 타입 링크와 절제된 아이코노그래피를 가진 압축된 다크 반투명 바.
• Store/Sub-shop Nav Layers: 카테고리 및 제품 좁히기를 위한 추가 유틸리티 바, 칩, 세그먼티드 컨트롤.
• Link Hierarchy: 링크 블루가 기본 인터랙티브 신호로 유지되며, 중립 텍스트가 밀도 높은 내비게이션 세트를 보조한다.

이미지 처리

• Object-First Photography: 하드웨어와 액세서리가 절제된 솔리드 표면 위에 전경화된다.
• 고해상도 마감 렌더링: 반사/소재 디테일이 시각적 설득의 핵심이다.
• 혼합 프레이밍: 풀블리드 히어로 장면이 라운드 리테일 카드 및 타이트하게 크롭된 머천다이징 썸네일과 공존한다.

기타 특징적 컴포넌트

• Product Configurator Matrix: 칩, 라디오형 컨트롤, 컨텍스트 가격/요약 블록을 결합한 옵션 스택과 셀렉터.
• Carousel Control Dots/Arrows: 갤러리 진행을 위한 절제된 오버레이 속 원형 컨트롤 어휘.
• Environment Story Panels: 에디토리얼 타이포그래피와 영화적 제품/환경 비주얼을 섞은 서사적 챕터.

5. 레이아웃 원칙

간격 시스템

• 기본 단위는 사실상 8px이지만, 시스템은 정밀 정렬을 위한 밀도 높은 마이크로 단계를 지원한다.
• 페이지 전반에서 자주 재사용되는 간격 값: 2, 4, 6, 7, 8, 9, 10, 12, 14, 17, 20 px.
• 마케팅과 리테일 플로우 모두에서 보이는 보편적 리듬 상수: 컴포넌트 패딩과 목록 간격을 위한 14-20px 유틸리티 간격과 8px 단위 스캐폴딩.

그리드 & 컨테이너

• 쇼케이스 페이지: 넓은 수평 여백과 풀폭 컬러 챕터를 가진 큰 중앙 컬럼.
• 커머스 페이지: 빈번한 모듈 스택을 가진 더 촘촘한 멀티 컬럼 제품 및 컨트롤 그리드.
• 컨테이너 동작: 데스크톱 너비에서 넉넉한 바깥 여백을 가진 제약된 가독 코어.

여백 철학

• 장면 페이싱: 주요 비주얼 챕터는 넓은 상/하 여백을 사용한다.
• 필요한 곳에서의 정보 압축: 리테일 페이지는 뷰포트당 더 많은 실행 가능한 정보를 노출하기 위해 의도적으로 간격을 압축한다.
• 대비 주도의 분리: 섹션 전환은 장식적 구분선보다 표면 변화에 더 의존한다.

보더 라운드 스케일

• 5px: 작은 유틸리티 링크/태그 및 소형 셸.
• 8px-12px: 표준 컨트롤 및 압축된 필드.
• 16px-18px: 카드, 모듈 프레임, 커머스 패널.
• 28px-36px: 더 큰 모듈 및 스포트라이트 컨테이너.
• 56px / 100px / 980px: 캡슐, 큰 알약형, 시그니처 길쭉한 CTA 형태.
• 50%: 원형 미디어 및 선택 컨트롤.

6. 깊이 & 입체감

깊이는 의도적으로 절제되어 있다. Apple은 무거운 그림자 스택보다 톤 대비, 표면 단계화, 구성적 위계를 선호한다.

장식적 깊이

• 장식적 깊이는 합성 UI 효과가 아니라 주로 사진적 사실성과 소재 렌더링으로 만들어진다.
• 반투명 오버레이와 글라스 같은 유틸리티 바가 내비게이션과 컨트롤에 가벼운 분위기 레이어링을 제공한다.

7. 해야 할 것과 하지 말아야 할 것

해야 할 것

• 중립 삼색조(#000000, #f5f5f7, #ffffff)를 구조적 토대로 사용하라.
• 블루 강조색은 진정한 액션 및 내비게이션 의미에만 예약하라.
• 특히 디스플레이 스케일에서 타이포그래피를 촘촘하고 의도적으로 유지하라.
• 컨트롤과 핵심 액션을 위한 캡슐/원형 지오메트리 언어를 유지하라.
• 제품 이미지가 시각적 드라마를 담당하게 하라. 크롬은 절제된 상태로 두라.
• 밀도 높은 리테일 컨텍스트에서는 무거운 카드 장식 대신 보더 주도의 컨테인먼트를 사용하라.
• 핵심 토큰을 공유하면서도 쇼케이스 모듈과 트랜잭션 모듈 사이의 명확한 분리를 보존하라.

하지 말아야 할 것

• Apple 블루와 경쟁하는 광범위한 보조 강조 팔레트를 도입하지 말라.
• 핵심 UI 크롬에서 그림자, 글로우 효과, 장식적 그라데이션을 과용하지 말라.
• 관련 없는 폰트 패밀리를 섞거나 무분별하게 트래킹을 느슨하게 하지 말라.
• 모든 모서리를 단일 라운드로 평준화하지 말라. Apple은 목적이 있는 라운드 단계를 사용한다.
• 두꺼운 보더나 요란한 시각 효과로 커머스 모듈을 과부하시키지 말라.
• 다크 챕터와 라이트 챕터 사이의 중립 대비 리듬을 제거하지 말라.
• 마케팅과 구매 플로우를 별개의 디자인 시스템으로 취급하지 말라.

8. 반응형 동작

브레이크포인트

터치 타겟

• 기본 및 보조 액션은 일반적으로 탭하기 쉬운 알약형/버튼 지오메트리로 제시된다.
• 원형 미디어 및 선택 컨트롤은 모바일 컨텍스트에서 최소 터치 가능 의도에 맞춘다.
• 밀도 높은 커머스 UI는 압축된 레이블을 사용하지만 둘러싼 형태 패딩을 통해 명확한 히트 영역을 유지한다.

접힘 전략

• 마케팅 히어로 타이포그래피는 위계 대비를 보존하면서 이산적인 단계로 축소된다.
• 제품 및 커머스 그리드는 셀렉터 가시성을 지속적으로 유지하면서 멀티 컬럼에서 스택형 카드로 접힌다.
• 유틸리티 내비게이션은 핵심 액션을 보존하면서 더 단순한 링크/컨트롤 그룹화로 압축된다.
• 옵션/구성 클러스터는 작은 화면에서 구매 플로우를 선형으로 유지하기 위해 수직으로 순차 배열된다.

이미지 동작

• 제품 이미지는 브레이크포인트 전반에서 비율과 중심성을 보존한다.
• 히어로 비주얼은 모바일에서 지배적으로 유지되며, 텍스트는 미디어 우선순위 주위로 재배치된다.
• 리테일 썸네일은 더 촘촘한 크롭 로직과 밀도 높은 카드 스택을 통해 가독성을 유지한다.
• 이미지 주도 모듈은 레이아웃 밀도가 증가해도 계속해서 리듬을 고정한다.

9. 에이전트 프롬프트 가이드

빠른 컬러 참조

• Primary action blue: Apple Action Blue (#0071e3)
• Inline link blue: Body Link Blue (#0066cc)
• Dark chapter canvas: Absolute Black (#000000)
• Light chapter canvas: Pale Apple Gray (#f5f5f7)
• Primary text on light: Near-Black Ink (#1d1d1f)
• Secondary text: Secondary Neutral Gray (#6e6e73)
• Retail border soft: Soft Border Gray (#d2d2d7)
• Retail border strong: Mid Border Gray (#86868b)

컴포넌트 프롬프트 예시

• “블랙 캔버스(#000000) 위에 SF Pro Display semibold 헤드라인(48-56px), 간결한 보조 카피, #0071e3와 #1d1d1f를 사용한 두 개의 캡슐 CTA를 갖춘 Apple 스타일 제품 히어로를 디자인하라.”
• “화이트(#ffffff) 위에 18px 라운드 카드, #86868b 보더 필드, SF Pro Text 17px 본문 카피, 압축된 옵션 셀렉터를 갖춘 커머스 구성 패널을 만들라.”
• “#f5f5f7와 화이트 표면을 교차하고, 이미지 우선 카드, 절제된 그림자, 14-17px SF Pro Text 메타데이터를 갖춘 머천다이징 카드 그리드를 구축하라.”
• “원형 버튼(50% 라운드), 절제된 그레이 오버레이, 갤러리 내비게이션을 위한 명확한 활성 피드백을 사용하는 캐러셀 컨트롤 클러스터를 생성하라.”
• “다크 쇼케이스 챕터 -> 라이트 기능 챕터 -> 밀도 높은 제품 목록 모듈로 이어지는 혼합 마케팅 + 리테일 페이지 리듬을 구성하되, 블루 강조색은 액션과 링크에만 유지하라.”

반복 가이드

1. 강조색을 조정하기 전에 중립 토대(#000000, #f5f5f7, #ffffff)를 먼저 고정하라.
2. 블루 강조색을 희소하고 목적이 있게 유지하라. 모든 것이 블루라면 위계가 무너진다.
3. 타이포그래피를 다음 순서로 조정하라: 디스플레이 스케일, 본문 가독성, 그다음 마이크로 레이블.
4. 일률적인 라운딩이 아니라 컴포넌트 클래스(필드, 카드, 캡슐, 원형)별로 라운드를 맞추라.
5. 쇼케이스 섹션에서 커머스 섹션으로 이동할 때 밀도를 점진적으로 높이라.
6. 각 수정 후에도 제품 이미지가 가장 강한 비주얼 레이어로 남아 있는지 검증하라.

알려진 공백

• 별도의 시맨틱 상태 색상(error/warning/success)은 추출된 페이지 세트에서 일관되게 보이지 않았다.
• 일부 인터랙션 마이크로 상태는 모듈에 따라 다르며 보편적 시스템 토큰으로 표현되지 않는다.
• 몇몇 리테일 모듈은 다섯 개 페이지 전반에 나타나지 않는 컨텍스트별 타이포그래피 오버라이드를 노출한다.