Substack
편집부 책상 위에 주황색 잉크 자국
Substack은 마치 오랜 시간 사용해 온 뉴스룸 대시보드처럼 보입니다. 하얀 바탕에 따뜻한 느낌의 거의 검정에 가까운 텍스트, 그리고 콘텐츠 제작의 각 단계를 표시하는 밝은 주황색 포인트가 있습니다. 시각적 계층 구조는 장식보다는 밀도에 기반을 두고 있습니다. 얇은 회색 선이 피드 요소를 구분하고, 아바타는 작으며, 메타데이터는 눈에 띄지 않게 처리되어 있습니다. 사용자의 시선은 주황색 클릭 유도 버튼, 로고, "구독" 링크, "만들기" 버튼에 집중되도록 유도됩니다. 표면은 평평하고 제약이 없습니다. 카드 그림자나 크롬 패널 요소는 없으며, 타이포그래피(간결한 크롬 시스템 UI 요소와 맞춤형 세리프 헤드라인 글꼴의 조합)가 편집의 무게를 온전히 담당합니다. 절제된 크롬 요소와 생동감 넘치는 단색 포인트가 특징인 Substack은 마치 출판 도구처럼 느껴지는 읽기 앱입니다.
데스크톱 레이아웃은 세 개의 열로 구성됩니다. 왼쪽에는 고정된 사이드바(약 200px, 아이콘과 레이블이 있는 탐색 메뉴, 고정), 가운데에는 피드(최대 너비 약 600px, 세로 스크롤 방식의 게시물 목록), 오른쪽에는 고정된 사이드바(약 300px, 검색 + 추천 + 회원가입)가 있습니다. 가운데 피드는 핵심 콘텐츠 영역으로, 카드 없이 게시물들이 얇은 구분선과 32px 간격으로 쌓여 있습니다. 메인 배너는 피드 상단에 전체 너비의 카드 형태로 표시됩니다. 왼쪽 사이드바에는 브랜드 로고(겹쳐진 선이 있는 주황색 기호), 6개의 탐색 메뉴, 그리고 하단에 전체 너비의 주황색 "만들기" 버튼이 있습니다. 오른쪽 사이드바에는 검색 필드, 회원가입 카드, 그리고 읽을 "다음 게시물" 목록이 있습니다. 탐색은 최소화되어 있으며, 상단 메뉴나 이동 경로가 없습니다. 사이드바 자체가 탐색 메뉴 역할을 합니다. 콘텐츠 밀도가 높습니다. 게시물은 12~13px의 메타데이터와 15~19px의 본문 텍스트를 사용하여 마켓플레이스의 카드 그리드 느낌보다는 신문과 같은 리듬감을 만들어냅니다.
사진은 사용자가 직접 만든 콘텐츠(작성자 아바타, 게시물 썸네일, 게시물 이미지)이며, Substack은 자체적으로 장식용 사진을 제공하지 않습니다. 메인 카드는 청록색에서 녹색으로 이어지는 그라데이션 배경에 기하학적 도형, 펜이나 메모와 같은 스타일화된 사물 등의 추상적인 일러스트 요소를 사용했습니다. 오른쪽 사이드바의 게시물 썸네일은 크기가 작고(64px), 8px 반경으로 둘러싸여 있으며, 읽기 목록의 미리보기 역할을 합니다. 전체적인 시각적 디자인은 텍스트 기반입니다. 인터페이스는 읽기 캔버스 역할을 하며, 이미지는 분위기를 조성하기보다는 작은 시각적 앵커 역할을 합니다.
팔레트
상표
- Signal Orange
#ff6719— 주황색은 장식적인 디테일을 강조하거나 드물게 나타나는 단서를 부각하는 데 보조적인 색상으로 사용됩니다. 행동을 유도하는 주요 색상으로 사용해서는 안 됩니다.
중립적
- Ink
#363737— 본문 텍스트(주제, 제목, 게시물 제목, 타임스탬프 및 작성자 이름)는 가독성을 높이기 위해 순수한 #000 색상 대신 따뜻한 느낌의 거의 검정색에 가까운 색상을 사용합니다. - Paper
#ffffff— 페이지 캔버스, 카드 표면, 입력 필드 및 탐색 배경은 인터페이스의 대부분을 차지하는 주요 표면입니다. - Charcoal
#232525— 마우스 오버 상태는 선택 수준이 높은 경우 추가 텍스트 및 링크를 표시하며, 코드 블록 및 선택 블록의 경우 잉크 모드보다 더 깊게 표시됩니다. - Stone
#777777— 중립적인 색상은 보조 UI 요소, 구분선 및 차분한 레이블에 사용할 수 있습니다. 하지만 클릭 유도 버튼의 기본 색상으로는 사용해서는 안 됩니다. - Ash
#b6b6b6— 얇은 테두리선, 버튼 윤곽선, 아이콘 윤곽선, 비활성화된 컨트롤의 테두리. - Mist
#c8c8c8— 구분선, 아이콘에 눈에 띄지 않는 배경, 빈 칸을 뼈대 형태로 채우기.
타이포그래피
12px에서 32px로 · 5단계
- system-ui — 대사: -apple-system · 요점 400, 500, 600 · 사용자 인터페이스와 본문 텍스트에 사용되는 기본 글꼴은 탐색 레이블, 버튼, 메시지 텍스트, 메타데이터, 입력 필드 및 모든 인터페이스 요소에 적용됩니다. 메타데이터에는 12~13px, 본문 텍스트에는 15~19px의 컴팩트한 크기를 사용하여 밀도 있는 뉴스 피드 느낌을 연출합니다. 글꼴 두께는 본문 텍스트에 400, 탐색 요소 및 버튼 레이블에 500, 강조된 메시지 제목 및 섹션 제목에 600을 사용합니다.
- Cahuenga — 대사: Charter · 요점 500 · 제품 수준의 제목(사이드바 제목, 회원가입 카드 제목, 본문)에 사용되는 시그니처 장식 세리프 폰트입니다. 중간 굵기와 약간의 줄 간격은 투박해 보이지 않으면서도 품격 있는 느낌을 줍니다. 주황색과 함께 Substack의 정체성을 나타내는 유일한 폰트입니다.
- Spectral — 대사: Charter · 요점 400 · 긴 게시글에 적합한 세리프체로, 열람실이나 뉴스피드 콘텐츠에서 편집 자료의 가독성을 높이는 데 사용됩니다. 줄 간격을 약간 좁게(1.20) 설정하여 문단을 편안하게 읽을 수 있도록 하면서도 뉴스룸에서 흔히 볼 수 있는 간결함을 유지합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 8px |
| 버튼 반경 | 9999px |
| 카드 반경 | 12px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 32px |
| 페이지 너비 | 1200px |
AI가 Substack 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Mollie — 캐시미어 소재의 카운터와 어두운 장부. 검은색 텍스트 주변에 충분한 여백을 남겨 편집 디자인을 활용하고, 따뜻한 크림색, 에스프레소 브라운 색상, 그리고 실제 결제 수단의 촉각적인 사진을 통해 제품 관련 정보를 강조하세요.
- Kagi — 별도의 열람실을 마련합니다. 굵은 연필 글씨 주변에 탁 트인 흰색 공간을 만들고, 은은한 보라색 포인트와 따뜻한 파스텔 톤의 표면을 사용하여 고요한 분위기에 변화를 줍니다.
- Milanote — Milanote는 전문적인 크리에이티브 스튜디오입니다. 어두운 프레임 벽, 흰색 디스플레이 공간, 그리고 부드러운 깊이감을 가진 실제 사물처럼 보이는 스크린샷으로 구성된 플로팅 비주얼 보드를 사용하여 편집 갤러리 스타일의 페이지를 제작해 보세요.
- Co2 — 겨울 풍경을 담은 기후 지도. 항공 사진처럼 페이지를 구성하여, 세리프체 제목, 범주별 코드로 분류된 데이터, 그리고 얼음 이미지가 넓은 흰색 여백을 돋보이게 하세요.
- GitButler — 텍스트 끝부분에 청록색이 사용되었습니다. 대비가 강한 세리프 헤드라인과 은은한 기술적 격자, 따뜻한 흑연색 표면, 그리고 절제된 청록색 악센트가 조화를 이루고 있습니다.
- ElevenLabs — 따뜻한 크림색 톤의 사진 에세이에 은은한 제목이 더해졌습니다. 바우하우스 스타일의 노트는 달걀 껍질색 종이에 검정 잉크를 사용하고, 보라색과 주황색으로 포인트를 주어 제품을 돋보이게 합니다.
- Awesomic — 편집용 아연 메시 소재에 색종이 조각을 연상시키는 주황색 구두점이 있습니다.
- Monad — 따뜻한 양피지에 대한 편집 기술 저널
- Dub — 링크의 무광택 쌀 종이 재질 컨트롤 패널
- Seline Analytics — 따뜻한 종이 위에 놓인 조용한 분석표
- Notion — 한낮의 따스한 햇살 아래 따뜻한 종이 노트
- Anthropic — 따뜻한 느낌의 양피지에 인쇄된 과학 분야 저널—차분한 상아색 표면, 세리프체로 쓰인 편집 제목, 그리고 필요한 순간에만 나타나는 단 하나의 점토색 포인트.