Apple
하얀 방에 파란색 스위치 하나가 있습니다.
애플의 디자인은 절제의 미학을 보여줍니다. 거의 흰색에 가까운 바탕, 충분한 여백, 그리고 모든 요소가 의도적으로 느껴지도록 하는 생동감 넘치는 파란색 포인트가 특징입니다. 핵심은 타이포그래피에 있는데, SF Pro 서체는 글자 크기가 커질수록 간격이 좁아지는 네거티브 자간을 사용하여 헤드라인에 지나치게 무겁지 않으면서도 건축적인 명료함을 부여합니다. 제품 자체가 디자인입니다. 커다란 제품 사진과 라이프스타일 이미지가 주를 이루고, 크롬 요소는 얇은 프레임, 반투명 내비게이션, 그리고 섬세한 선으로 둘러싸여 있습니다. 섹션들은 밝은 회색 배경과 번갈아 가며 배치되고, 홍보 자료는 풀컬러 블록으로 구성되어 장식적인 요소보다는 크기 변화를 통해 리듬감을 만들어냅니다.
페이지 레이아웃은 고정된 최대 컨테이너 너비 없이 전체 너비로 구성되어 있으며, 각 섹션은 가장자리까지 확장되고 텍스트 블록은 약 980px 크기로 중앙에 배치됩니다. 내비게이션은 고정된 하나의 글로벌 바이며, 스크롤 시 각 제품별 하위 폴더가 추가됩니다. 메인 레이아웃은 항상 중앙에 정렬되어 있으며, 큰 제품 이름, 한 줄짜리 슬로건, 두 개의 알약형 버튼, 그리고 나머지 화면을 가득 채우는 제품 이미지가 표시됩니다. 섹션들은 #f5f5f7 색상과 유색 배경이 번갈아 사용되며, 충분한 세로 간격(섹션 간 64px 이상)을 두고 세로로 쌓입니다. 페이지 하단에는 전체 너비의 서비스 카드(Apple TV+, Fitness+, Music, Arcade)가 가로로 한 줄로 배열되어 있으며, 각 카드는 오버레이 텍스트와 알약형 버튼이 있는 사진 블록으로 구성됩니다. 사이드바, 다단 콘텐츠 레이아웃, 비대칭 구성은 없으며, 모든 요소는 중앙에 정렬되고, 세로로 쌓이고, 대칭을 이룹니다.
사진은 주된 시각적 언어입니다. 제품 사진은 배경 없이 순백색 또는 부드러운 회색 배경에서 촬영되며, 기기 자체가 주인공으로 강조되어 조명됩니다. 라이프스타일 사진은 전체 너비 배너로 표시되며, 종종 특정 부분만 클로즈업하여 보여줍니다. 파스텔 블루, 핑크, 그린과 같은 색상 그라데이션은 제품 섹션의 배경 역할을 하며, 장식용으로 사용되지 않습니다. 아이콘은 텍스트와 동일한 회색조를 사용하여 1~2픽셀 두께의 선으로 구성된 미니멀한 디자인입니다. 제품 사진을 제외하고는 일러스트레이션, 추상적인 그래픽, 3D 렌더링은 일절 사용되지 않습니다.
팔레트
상표
- Apple Blue
#0071e3— 채워진 액션 버튼, 선택된 상태 - 상호작용 가능한 유일한 색상은 모든 요소가 의미를 갖도록 절제되어 사용됩니다. - Link Blue
#0066cc— 강조 표시된 액션 테두리, 내장 링크 - 채워진 태블릿이 너무 화려해 보일 경우 애플 블루보다 채도가 더 높은 색상이 사용됩니다. - Signal Blue
#2997ff— 장식 프레임, 이미지 윤곽선, 아이콘 테두리 - 시스템에서 가장 밝은 파란색으로, 사용자 상호 작용보다는 분위기를 조성하는 데 사용됩니다.
중립적
- Carbon
#1d1d1f— 본문, 제목 테두리, 탐색선, 카드 테두리 등에서 주로 사용된 잉크 색상은 따뜻한 느낌이 살짝 감도는 거의 검정색입니다. - Frost
#f5f5f7— 페이지 캔버스, 본문 배경, 바닥글 표면은 애플 특유의 밝은 회색으로, 순백색보다 약간 차가운 느낌입니다. - Ice
#f4f8fb— 표현력이 풍부한 표면 채우기, 은은한 색조, 어두운 배경의 버튼 텍스트 - 눈에 띄지 않으면서도 섹션에 생기를 불어넣는 은은한 파란색 색조. - Smoke
#333333— 보조 텍스트, 탐색 채우기, 버튼 테두리 - 중간 회색보다 더 강렬한 느낌을 필요로 하는 테두리와 아이콘에 사용하기 좋은 다용도의 중립적인 색상입니다. - Graphite
#474747— 탐색 텍스트, 탐색 테두리, 링크 테두리 - 요소 계층 구조에서 Carbon과 Smoke 사이에 중간 위치를 차지합니다. - Ash
#707070— 바닥글 텍스트, 목록 테두리, 탐색 테두리, 본문 텍스트 - 눈에 띄지 않으면서도 필요한 콘텐츠에 중간 회색을 사용합니다.
타이포그래피
12픽셀에서 56픽셀로 · 8단계
- SF Pro Display — 대사: Inter · 요점 400, 600, 700 · 제목 및 큰 텍스트(40px 이상)에는 더 좁은 여백과 더 강한 네거티브 트래킹을 위한 디스플레이 형식이 사용됩니다. 700픽셀은 광고 레이아웃에, 400픽셀은 편집 콘텐츠의 제품명에 사용됩니다.
- SF Pro Text — 대사: Inter · 요점 300, 400, 600 · 본문, 탐색 메뉴, 버튼, 소제목 - 기본 글꼴: 본문 텍스트는 400, 소제목 및 레이블은 300, 탐색 요소 및 버튼 텍스트는 600; 음수 자간은 크기에 비례하여 감소합니다(-0.022em은 12px, -0.01em은 44px).
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 12px |
| 버튼 반경 | 980px |
| 카드 반경 | 8px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 64px |
| 페이지 너비 | 1440px |
AI가 Apple 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Ui — 무광택 용지에 인쇄된 임상 계획서
- ElevenLabs — 따뜻한 크림색 톤의 사진 에세이에 은은한 제목이 더해졌습니다. 바우하우스 스타일의 노트는 달걀 껍질색 종이에 검정 잉크를 사용하고, 보라색과 주황색으로 포인트를 주어 제품을 돋보이게 합니다.
- monopo saigon — 편집자의 침묵 뒤에서 흐르는 액체처럼 영롱한 빛—녹아내리는 빛 위에 떠 있는 흑백의 편집 갤러리
- Awesomic — 편집용 아연 메시 소재에 색종이 조각을 연상시키는 주황색 구두점이 있습니다.
- Monad — 따뜻한 양피지에 대한 편집 기술 저널
- Dub — 링크의 무광택 쌀 종이 재질 컨트롤 패널
- Seline Analytics — 따뜻한 종이 위에 놓인 조용한 분석표
- Ventriloc — 따뜻한 종이 위에 펼쳐진 편집 데이터 관측소 - 흑백의 정밀함을 강조하는 하나의 주황색 불씨
- Duolingo — 흰 종이 위에 그려진 장난기 넘치는 학급 마스코트
- Stripe — 불투명 유리 위에 남색 잉크로 쓰인 회계 장부
- Notion — 한낮의 따스한 햇살 아래 따뜻한 종이 노트
- Hyer Aviation — 조종석의 황혼녘, 양피지 위로 희미한 새벽 하늘이 동체 크기의 세리프체 로고와 어우러지고, 따뜻한 흙빛 포인트 하나가 단조로운 단색의 분위기를 깨뜨린다.