Superhuman
골든아워 편집 패널
Superhuman은 에디토리얼 사진과 소프트웨어 UI의 교차점에 서 있습니다. 따뜻한 양피지 같은 캔버스(순백색은 절대 아님) 위에 진홍색 브랜드 요소와 생동감 넘치는 보라색 악센트가 자리 잡고 있습니다. 460pt 폰트로 설정된 헤드라인은 요란하게 강조하기보다는 은은하게 속삭이듯 배치되어, 전면을 장식하는 영화 같은 사진이 중심이 되도록 합니다. 반투명 제품 UI 카드는 이미지 위에 유리처럼 떠 있는 듯한 느낌을 줍니다. 대부분의 색상은 차분하고 에디토리얼한 느낌을 유지합니다. 크림색 표면, 짙은 회색 텍스트, 은은한 따뜻한 회색 테두리, 요소 사이의 넉넉한 간격 등이 사용되었으며, 색상은 의도적인 브랜드 강조를 위해 사용됩니다. 진홍색 콜투액션 버튼, 보라색 링크, 연한 라일락색 추가 기능 버튼 등이 그 예입니다. 이 시스템은 UI 표면에 강한 그림자나 그라데이션을 의도적으로 피했습니다. 깊이감은 여러 겹의 사진과 제목 부분의 은은한 배경 흐림 효과를 통해 표현되며, 단순히 이미지를 쌓아 올리는 효과를 사용하지 않습니다.
메인 요소는 전체 너비의 사진과 중앙에 위치한 헤드라인(48-64px/460) 및 와인 이미지가 포함된 단일 콜 투 액션(CTA)으로 구성됩니다. 좌우 가장자리에는 반투명 제품 UI 카드가 겹쳐져 있습니다. 메인 요소 아래에는 흰색 줄무늬 로고(행당 6개 셀, 최대 너비 제한)가 있고, 그 아래에는 양피지 캔버스 위에 흰색 카드 표면이 있는 탭 섹션이 있습니다. 페이지의 약 3분의 2 지점에서 짙은 청록색 줄무늬가 전체 너비의 두 열(왼쪽에는 이미지, 오른쪽에는 텍스트)로 배치되어 스크롤 시 유일한 색상 대비를 만들어냅니다. 그 뒤에는 그라데이션 분위기의 줄무늬가 이어집니다. 섹션 사이의 세로 간격은 64-96px입니다. 콘텐츠의 최대 너비는 중앙 정렬 시 약 1200px이며, 메인 요소와 짙은 줄무늬가 뷰포트 전체 너비를 차지합니다. 내비게이션은 배경이 흐릿한 고정 헤더 하나로 구성되며, 사이드바나 메가 메뉴는 없습니다. 푸터는 전체 너비의 버건디 색상 페이지로, 여러 열로 링크가 배치되어 있습니다. 전체적인 흐름은 다음과 같습니다: 메인 프레임 → 차분한 흰색/크림색 콘텐츠 → 메인 이미지가 포함된 어두운 줄무늬 → 분위기 있는 그라데이션 → 버건디 색상의 바닥글, 밝고 어두운 줄무늬가 번갈아 나타나 편집의 리듬감을 만들어냅니다.
주요 시각적 요소는 영화 같은 사진 기법입니다. 탁 트인 하늘을 배경으로 한 인물 사진이 중심을 이루고, 그 아래에는 분위기를 자아내는 두 번째 줄무늬가 배치되어 있습니다. 따뜻한 색조와 은은한 차분함이 돋보이는 이 사진은 측면에서 촬영되어 황금 시간대를 연상시키며, 기업적인 느낌보다는 에디토리얼적인 분위기를 연출합니다. 생각에 잠긴 남자의 사진 위에는 반투명 기하학적 사각형과 손글씨가 있는 어두운 줄무늬가 겹쳐져 있는데, 이는 단일 이미지가 아닌 여러 표면의 콜라주와 같습니다. 사용자 인터페이스는 별도의 스크린샷이 아닌, 사진 위에 직접 겹쳐진 떠 있는 유리 카드 형태로 제공됩니다. 스톡 일러스트, 3D 렌더링, 추상적인 장식 형태는 사용되지 않았으며, 그라데이션으로 처리된 분위기 줄무늬만 예외입니다. 아이콘은 미니멀한 흑백 라인 아이콘으로, 폭은 약 16~20픽셀이며, 460포인트 텍스트 두께에 해당하는 단일 폭을 사용합니다.
팔레트
상표
- Midnight Wine
#421d24— 주요 액션 버튼, 배너 광고 및 푸터는 따뜻한 느낌의 거의 검정에 가까운 버건디 색상으로, 빨간색보다는 잉크에 더 가까운 느낌을 주어 색상 팔레트의 중심을 잡아주면서도 과하지 않습니다. - Royal Violet
#714cb6— 보라색은 링크, 태그 및 짧은 문구를 강조하는 데 사용됩니다. 클릭 유도 문구의 주요 색상으로 사용해서는 안 됩니다.
중립적
- Lilac Mist
#d4c7ff— 보조 표면 채우기, 조명 아이콘 및 고스트 버튼 배경은 모두 은은한 보라색을 사용하여 브랜드 스타일을 암시하면서도 과도한 관심을 끌지 않습니다. - Deep Lagoon
#0c4243— 만화의 주요 서사 요소로 사용되는 어두운 배경은 시스템 내에서 유일하게 어두운 표면이며, 그 위에 기하학적 패턴이 겹쳐져 있습니다. - Warm Parchment
#f2f0eb— 페이지의 작업 표면이 가장 중요한 요소이며, 따뜻한 크림색이 바탕색으로 흰색을 대체하여 전체 시스템에 편집적인 온기를 더합니다. - Soft Mist
#e3e3e2— 섬세한 테두리, 카드 윤곽선, 구분선—따뜻하고 밝은 회색은 양피지와 어우러지면서도 가장자리를 명확하게 구분합니다. - Ink Charcoal
#292827— 본문, 제목, 아이콘 윤곽선 - 따뜻하고 거의 검정에 가까운 색상으로, 종이에 잉크로 쓴 듯한 느낌을 주며 차가운 느낌이 전혀 들지 않습니다. #000 - Stone Gray
#666666— 본문 보조 자료, 보충 설명, 간략한 설명에는 중간 회색 한 가지 색상만 사용하며, 본문과 경쟁하지 않도록 최소한으로 사용합니다.
타이포그래피
12픽셀에서 64픽셀로 · 8단계
- Super Sans VF — 대사: Inter (closest open equivalent for variable weight range) · 요점 460, 500, 540, 600, 700 · 시스템 전체에 단 하나의 글꼴만 사용됩니다. 축 변수는 460(모든 큰 제목 텍스트에 사용되는 서명처럼 약간 잘린 글꼴)부터 540(강조된 본문 텍스트) 및 700(작고 굵은 캡션)까지 다양한 범위를 지원합니다. 특별히 설계된 VF(시각 함수)를 통해 460 굵기의 제목은 48~64px의 좁은 자간에서 더욱 의도적이고 의도적인 느낌을 줍니다. 이러한 "약간 잘린" 효과는 가늘어 보이는 대신 자신감 있는 인상을 줍니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 8px |
| 버튼 반경 | 16px |
| 카드 반경 | 16px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 64-96px |
| 페이지 너비 | 1200px |
AI가 Superhuman 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- AI for Business — 따뜻한 회색 톤의 브루탈리즘 양식 편집 쇼룸
- Jeton — 따뜻한 대리석 위에 핀테크에 관한 사설
- Airtable — 각 장이 서로 다른 색깔로 표시된 아늑한 세미나
- Osmo — 회색 콘크리트 위에 세워진 개발자 박물관
- Linktr — 신문 포스터들이 사탕처럼 쌓여 있다. 웹사이트는 색상 블록으로 디자인되었는데, 코발트 블루 배경에 밝은 녹색 헤드라인이 눈에 띄고, 버건디 색 바탕 위에는 흰색 알약 모양의 내비게이션 요소가 떠 있다.
- Outsource Consultants — 뼈 종이에 인쇄된 대형 건축 도면. 단색조 미학을 바탕으로, 따뜻한 색감과 타이포그래피적 요소가 극대화된 격자 구조 속에 밝은 남색 얼룩 하나가 강렬한 인상을 더한다.
- Streamtime — 촉각적 크리에이티브 무드 보드 - 디자이너 스크랩북 테이블
- Switch-Lit — 크림색 종이에 잉크로 인쇄된 편집 그리드
- HubSpot — 따뜻한 크림색 바탕에 오렌지색 포인트가 돋보이는 HubSpot은 고급스러운 디자인의 잡지를 연상시킵니다. 세리프체 제목, 따뜻한 크림색 페이지, 그리고 가장 중요한 내용만을 강조하는 강렬한 오렌지색 포인트가 특징입니다.
- Granola — 따뜻한 양피지에 적힌 현장 기록—그래놀라는 햇살 가득한 책상 위에 펼쳐진 낡은 몰스킨 노트처럼 읽힙니다. 세리프체 제목은 견고함을 더하고, 식물성 잉크처럼 자연스러운 녹색 포인트가 돋보이며, 카드 여백의 가는 선은 손글씨 메모를 연상시킵니다.
- Secure — 은은한 햇살이 비추는 유럽 카페에서의 대화는 영상 통화에 대한 따뜻하고 세련된 해석이며, 세리프체로 쓰인 제목은 기술 제품 페이지라기보다는 사려 깊은 잡지 기사처럼 읽힌다.
- Mockups made easy — 백서에 대한 편집 디자인 스튜디오