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 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Studio — 움직이는 갤러리 벽. 각각의 스크린은 차분하고 회색빛의 전시 표면을 나타내며, 그 안에서 타이포그래피 자료와 겹쳐진 창작물들이 시선을 사로잡기 위해 경쟁한다.
- Mollie — 캐시미어 소재의 카운터와 어두운 장부. 검은색 텍스트 주변에 충분한 여백을 남겨 편집 디자인을 활용하고, 따뜻한 크림색, 에스프레소 브라운 색상, 그리고 실제 결제 수단의 촉각적인 사진을 통해 제품 관련 정보를 강조하세요.
- Basis Theory — 디자인 스튜디오의 결제 단말기. 흰색 기술 용지, 겹쳐진 반투명 거래 용지, 그리고 청록색 제어 요소 하나가 시각적 방향을 제시합니다.
- CleanShot X — 푸른 조명이 비추는 책상이 있는 스튜디오. 간결한 검은색 텍스트를 중심으로 차분한 흰색 공간을 만들고, 풍부한 파란색 컨트롤과 레이어링된 Mac 제품 이미지가 중심이 되도록 합니다.
- Modern Treasury — 그래프 용지에 재무 장부를 작성하세요. 현금 흐름을 가는 선, 레이블이 지정된 노드, 그리고 정밀하고 숨겨진 제어 기능을 사용하여 표시하는 깔끔하고 하얀 운영 보고서와 같은 페이지를 만드세요.
- Basha-Franklin — 흰색 상인방 아래에 갤러리 격자를 배치합니다. 따뜻한 #f4ede6 색조, 은은한 검은색 구조, 그리고 인쇄된 건축 포트폴리오 사진에서 영감을 받은 비대칭 기둥을 사용합니다.
- Bajgart Office — 편집 갤러리 벽을 꾸밀 때는 넓은 여백을 활용하여 은은한 세리프체 글꼴과 포트폴리오 조각들이 화려한 인터페이스 요소보다 시각적으로 더 큰 비중을 차지하도록 하세요.
- Heptabase — 햇살이 비치는 책상. 따뜻하고 종이 같은 질감의 표면, 짙은 회색의 조절 장치, 그리고 연구를 위한 떠 있는 듯한 창들이 소프트웨어 제어판이라기보다는 정돈된 작업 공간이라는 느낌을 자아낸다.
- Bejamas — 파자마—검은 유리를 통해 보이는 신맛 나는 라임. 차분하고 밝은 회색의 편집 페이지에, 흐릿한 녹색 빛줄기가 표면과 교차하는 매혹적인 검은색 패널을 삽입하여 포인트를 줍니다.
- Baba — 붉은 햇살 속의 케어 노트. 친밀한 흰색, 분홍색, 크림색 정보 표면 주변에 넓은 붉은색 스토리텔링 줄무늬를 만들고, 사람들의 사진을 감정의 중심으로 활용하세요.
- Grafana Labs — 선라이즈 신호소의 제어실. 차분한 회색과 흰색의 작업 공간에 넓은 4색 수평선 그라데이션과 정밀한 파란색 인터페이스 신호가 조화를 이루고 있습니다.
- Kagi — 별도의 열람실을 마련합니다. 굵은 연필 글씨 주변에 탁 트인 흰색 공간을 만들고, 은은한 보라색 포인트와 따뜻한 파스텔 톤의 표면을 사용하여 고요한 분위기에 변화를 줍니다.