Medium
황금 시간대의 크림색 하얀 신문
Medium은 마치 웹으로 옮겨진 문학 열람실처럼 기능합니다. 따뜻하고 부드러운 배경(#f7f4ed)은 SaaS에서 흔히 볼 수 있는 밋밋한 흰색을 대체하여 긴 텍스트를 마치 인쇄된 페이지처럼 느껴지게 합니다. 시각적 시스템은 과감하게 단색으로 구성되어 있습니다. 거의 모든 UI 요소, 텍스트, 테두리는 #242424에서 #6b6b6b에 이르는 따뜻한 회색 계열로 이루어져 있어 독자의 시선이 콘텐츠에 완전히 집중되도록 합니다. 유일하게 눈에 띄는 요소는 세리프체로 된 헤드라인(GT Super, 120px, 굵기 400, 자간 -0.055em)입니다. 이는 의도적인 트렌드 거부의 선택으로, 굵은 기하학적 산세리프체 대신 디스플레이에 맞춰 크기를 조정한, 거의 눈에 띄지 않는 과도기적 북 세리프체를 사용하여 "우리는 소프트웨어가 아닌 책을 출판합니다"라는 메시지를 전달합니다. 버튼은 거의 검은색에 가까운 "알약" 모양으로 되어 있어 페이지에서 유일하게 단색으로 인쇄된 부분입니다.
홈페이지는 두 개의 열로 구성되어 있습니다. 왼쪽 열은 페이지 공간의 약 55%를 차지하며, 헤드라인, 부제목, 그리고 클릭 유도 버튼이 충분한 간격을 두고 세로로 배치되어 있습니다. 오른쪽 열은 페이지 공간의 약 45%를 차지하며, 일러스트 패널이 있습니다. 왼쪽 열은 왼쪽 정렬(가운데 정렬 아님)되어 있어 페이지를 읽는 축에 맞춰 배치했습니다. 홈페이지 아래쪽에는 전체 너비의 크림색 띠 모양 공간이 있으며, 바닥글에는 중앙에 정렬된 링크들이 있습니다. 홈페이지에는 카드 그리드, 특집 섹션, 또는 교차하는 줄무늬 패턴이 없습니다. 홈페이지는 그 자체로 하나의 페이지입니다. 콘텐츠 밀도는 의도적으로 낮게 설정했습니다. 헤드라인 하나, 문장 하나, 버튼 하나, 이미지 하나만 배치했습니다. 이 페이지는 대시보드가 아닌 표지입니다.
삽화는 체계적이지 않고, 편집 과정에서 에피소드 형식으로 삽입됩니다. 메인 페이지에는 손으로 그린 삽화 하나(초록색 꽃, 기하학적 손 모양, 별자리 선 등)가 자유롭고 다소 순진한 스타일로 그려져 있습니다. 삽화들은 상설 자료실에서 가져온 것이라기보다는 계절에 따라 바뀌는 의뢰 작품처럼 보입니다. 메인 페이지에는 사진이나 아이콘이 없으며, 텍스트 로고와 텍스트만으로 모든 정보를 전달합니다. 시각적 언어는 주로 텍스트 중심이며, 삽화는 문장 부호 역할을 합니다.
팔레트
중립적
- Newsprint Cream
#f7f4ed— 페이지 캔버스, 메인 창 배경, 섹션 배경은 따뜻하고 약간 크림색을 띠어 디지털 인터페이스보다는 인쇄물과 같은 느낌을 줍니다. - Paper White
#ffffff— 카드 표면, 돌출 패널, 형태 입력 영역 및 크림색 캔버스에서 분리해야 하는 모든 표면. - Ink
#242424— 본문, 링크, 제목 - 순수한 검정색보다 약간 따뜻한 색조로, 크림색 배경에 잘 어울립니다. - Body Gray
#333333— 보조 텍스트 색상과 기본 전경색은 대비를 유지하면서 잉크 색상보다 약간 밝은 색상이 필요한 경우에 사용됩니다. - Button Black
#191919— 중립적인 색상은 보조 UI 요소, 구분선 및 차분한 레이블에 사용할 수 있습니다. 하지만 클릭 유도 버튼의 기본 색상으로는 사용해서는 안 됩니다. - Marginalia Gray
#6b6b6b— 보조 UI, 구분선 및 흐릿한 레이블에 중립 색상을 지원합니다.
타이포그래피
13픽셀에서 120픽셀로 · 5단계
- medium-content-sans-serif-font — 대사: Inter · 요점 400 · medium-content-sans-serif 글꼴 - 추출된 데이터에서 발견되었지만 AI가 설명하지 않았습니다.
- GT Super — 대사: Playfair Display · 요점 400 · 제목과 본문은 과도기적 북세리프 서체를 극단적인 크기로 사용하고, 자간을 좁게, 줄 간격을 0.83으로 설정했습니다. 400 굵기(볼드 아님)에 120px 크기를 선택한 것은 특징적인 요소입니다. 굵기가 아닌 글자 형태 자체가 중요한 역할을 합니다. 음의 자간은 시각적 간격을 좁혀 "인간의 이야기와 아이디어"라는 제목이 하나의 응집력 있는 타이포그래피 블록처럼 느껴지도록 합니다.
- Söhne — 대사: Inter · 요점 400 · UI 산세리프 글꼴은 내비게이션, 버튼, 소제목 및 작은 제목에 사용됩니다. 내비게이션 레이블과 버튼에는 13~14px 범위가 적합하고, 소제목과 제목 내 보조 텍스트에는 20~22px 범위가 적합합니다. 인체공학적 비율을 가진 깔끔한 산세리프 글꼴은 작은 크기에서도 가독성이 뛰어나고 큰 크기에서도 눈에 거슬리지 않습니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 16-24px |
| 버튼 반경 | 9999px |
| 카드 반경 | 0px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 64px |
| 페이지 너비 | 1200px |
AI가 Medium 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Steep — Warm Paper에서 세리프 글꼴 분석
- Newformcap — 탈의실에 있는 편집 신문
- Claude — 따뜻한 양피지에 인쇄된 유물—뼈로 만든 종이에 잉크로 인쇄된 것, 점토만이 유일한 색채의 흔적이다.
- 11x– Digital workers — 영화 같은 편집의 황무지—풍경의 파노라마 사진과 고급 잡지 화보처럼 읽히는 웅장한 세리프체 헤드라인이 어우러져 있다.
- Revolut — 구름 사진을 바탕으로 한 흑백 편집 디자인 - 흰색 잉크, 약통 단추, 회색조의 세상 속에 돋보이는 단 하나의 파란색 줄무늬.
- Scheduling — 크림색 종이에 인쇄된 편집용 잉크
- Titan — 따뜻한 색조의 흑백 아카이브
- Programa — 정오의 스위스 디자인 스튜디오. 하얀 갤러리 벽은 노란색 테이블 램프 하나로 환하게 밝혀져 있다. 모든 것이 회색 톤으로 이루어져 있다가 버튼, 아이콘, 또는 포인트가 눈길을 사로잡으면 그 하나의 노란색이 공간 전체의 분위기를 결정짓는다.
- Sana Agents — 흰색 배경에 라임 스파클이 있는 화보
- Visual — 따뜻한 느낌의 사미즈다트(비밀 출판물). 크림색 종이, 세리프체 포스터, 흑백 여백 메모, 노란색 마커 한 개.
- Midday — 양피지 재질의 편집 브로셔 - 따뜻한 돌색 배경에 72px 세리프체 제목, 산세리프체 본문(간격 조정), 알약 모양 컨트롤, 그림자 없음
- Chat for impact — 숲처럼 푸른색으로 꾸며진 병원, 파스텔톤의 방들