Spotify
야간 주크박스 제어실
Spotify의 웹 인터페이스는 밀도 높고 어두운 미디어 제어 센터입니다. 거의 검은색 바탕에 생동감 넘치는 앨범 아트, 시그니처 색상인 녹색 포인트, 그리고 알약 모양의 컨트롤이 배치되어 있습니다. 타이포그래피는 간결하고 실용적입니다. 맞춤 디자인된 기하학적 산세리프 서체를 작은 크기로 사용하여 앨범 아트와 아티스트 사진이 시각적 역할을 충분히 수행할 수 있도록 했습니다. 레이아웃은 고정된 2단 구조(사이드바 + 메인 피드)에 정사각형 앨범 아트와 원형 아바타가 격자 형태로 배치되어 기하학적 형태가 리드미컬하게 교차합니다. 인터페이스는 높이의 급격한 변화를 피하고 미묘한 표면 대비(예: #000000 바탕의 #121212 카드)와 에너지를 불어넣는 커다란 그라데이션 배너를 활용합니다. 그 결과, 마치 DJ 부스처럼 정보가 풍부하고, 음향적으로 어두우며, 한눈에 음악을 재생할 준비가 된 듯한 느낌을 줍니다.
고정된 2단 레이아웃은 왼쪽 사이드바("내 라이브러리")와 반응형 메인 콘텐츠 영역으로 구성됩니다. 상단 바는 전체 너비의 검은색 막대이며, 왼쪽에는 검색, 오른쪽에는 계정 작업이 있습니다. 메인 콘텐츠는 세로로 스크롤되며, 인기곡은 5열 정사각형 그리드에, 인기 아티스트는 5열 원형 그리드에, 인기 앨범/싱글은 이와 같은 패턴으로 가로 캐러셀 형태로 표시됩니다. 섹션 간 간격은 촘촘합니다(32cm). 하단 광고 배너는 화면 하단에 고정되어 있습니다. 탐색은 상단 바와 사이드바를 통해서만 이루어지며, 메가 메뉴나 브레드크럼은 없습니다. 정사각형 카드 → 원형 카드 → 정사각형 카드 순으로 배열되어 각 섹션 간에 기하학적 대비를 만들어냅니다.
앨범 커버와 아티스트 사진이 주요 시각 콘텐츠입니다. 커버 이미지는 6픽셀 반경의 정사각형 조각(1:1 비율)으로 표현되어, 편집적인 느낌을 주면서도 현대적인 감각을 더합니다. 아티스트 사진은 원형 조각으로, 얼굴을 강조하여 정체성을 드러냅니다. 메인 인터페이스에는 장식적인 사진, 라이프스타일 이미지 또는 추상적인 그래픽이 없습니다. 유일하게 사진이 아닌 시각적 요소는 하단에 있는 보라색에서 파란색으로 그라데이션되는 배너로, 브랜드 색상을 나타내는 유일한 요소입니다. 아이콘은 미니멀하고 단선적인 형태로, 어두운 배경에 흰색으로 표시되며, 작고 기능적이며 장식적인 요소는 전혀 없습니다.
팔레트
상표
- Spotify Green
#1ed760— 녹색은 장식적인 디테일을 위한 보조적인 색상으로 사용되거나 사용 빈도가 낮은 검색어를 강조하는 데 사용됩니다. 행동 유도 버튼의 주요 색상으로 사용해서는 안 됩니다.
중립적
- Pure White
#ffffff— 눈에 거슬리지 않는 배경을 만들고 섹션을 구분하는 데 사용할 수 있는 가벼운 보조 색상입니다. 행동 유도 문구의 주요 색상으로 사용해서는 안 됩니다. - Signal Red
#b85850— 붉은색은 장식적인 디테일을 돋보이게 하거나 흔하지 않은 색상을 강조하는 보조적인 색상으로 사용됩니다. 지위를 나타내는 색상이 아니라 보조적인 색상으로 활용하세요. - Void Black
#000000— 페이지 캔버스, 상단 탐색 배경, 가장 깊은 표면 레이어 - Carbon
#121212— 판지 표면, 측면 패널, 캔버스 위에 덧씌운 2차 표면층 - Graphite
#1f1f1f— 돌출된 표면 - 마우스 오버 상태, 입력 필드, 선택된 탐색 요소. - Smoke
#292929— 활성 탐색 배경에 은은한 백라이트 효과가 있습니다.
타이포그래피
11픽셀에서 24픽셀로 · 4단계
- SpotifyMixUI — 대사: Inter · 요점 400, 600, 700 · 본문, 내비게이션, 버튼, 메타데이터, 짧은 캡션 등 모든 요소는 간결하면서도 정보가 풍부하게 담겨 있으며, 예술적 요소가 돋보이도록 은은하게 디자인되었습니다.
- SpotifyMixUITitle — 대사: Inter weight 700 · 요점 700 · 섹션 제목("인기곡", "인기 아티스트")은 굵고 적당한 크기의 글꼴을 사용하여 카드 그리드를 과도하게 복잡하게 만들지 않으면서도 제목이 눈에 띄도록 했습니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 8-12px |
| 버튼 반경 | 9999px |
| 카드 반경 | 6px |
| 그림자 | 최소한의 |
| 구간 사이 | 32-48px |
AI가 Spotify 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Resend — 보라색 네온 컬러가 들어간 검은색 벨벳
- Neon — 어둠이 내린 서버실. 칠흑 같은 어둠 속에서 데이터와 사용자 상호작용에서만 빛이 새어 나온다.
- Discord — 게임 세계는 팝업 채팅창 뒤에 숨겨져 있으며, 각 구역은 고유한 조명과 캐릭터 세트를 갖춘 독립적인 환경입니다.
- Idle Finance — 심해 터미널의 네온사인으로 가득한 거래장은 어두컴컴한 해군 터미널과 같으며, 그곳에서 푸른 불빛 하나가 어둠을 뚫고 빛을 발한다.
- Midjourney — 심해 속 생물 발광 단말기. 지능이 ASCII 스트림으로 시각적으로 생성되고, 제어 버튼이 희미하게 빛나는 패턴으로 나타나는 심해 세계.
- Netflix — 무한 디지털 선반. 칠흑 같은 극장 배경을 바탕으로 끝없이 펼쳐지는 콘텐츠 라이브러리를 감상할 수 있는 영화 같은 경험.
- Wope — Wope는 보라색 지평선 인터페이스입니다. 어두운 천문대 테이블에서 유리 아래에서 보라색 빛이 뿜어져 나오는 모습을 상상해 보세요.
- basement — 새벽 3시의 텅 빈 인쇄기 - 거대하고 압축된 글꼴들이 칠흑 같은 어둠 속에 펼쳐져 있고, 내비게이션 바에 희미한 주황색 불빛 하나만 빛나고, 나머지는 모두 하얗거나 희미한 회색이다.
- Ori — 한밤중의 서버실은 칠흑 같은 공허함 속에 하얀 불빛 하나만 켜져 있을 뿐이다.
- Amaterasu — 천상의 청록색 성역
- Stink Studios — 한밤중의 영화 스튜디오 - 영사기가 윙윙거리고, 방은 어둡고, 오직 필름만 빛을 발하고 있다.
- Obsidian — 수정처럼 맑은 지식의 보고. 명확성과 집중력을 위해 설계된, 빛나는 보라색의 상호작용 통로가 있는, 투명하고 다면적인 디지털 공간.