페이지 레이아웃 디자인하기은(는) 무엇을 하나요?

개요

대부분의 페이지는 아이디어가 아닌 리듬에서 실패합니다. 타이포그래피도 괜찮고, 색상도 괜찮지만, 여전히 템플릿처럼 보입니다. 그 이유는 섹션별로 수직 간격이 결정되어 아무것도 정렬되지 않았기 때문입니다.

핵심 원칙: 스타일링을 시작하기 전에 하나의 간격 스케일, 하나의 타입 스케일, 하나의 섹션 시스템을 선택하고, 그 스케일에 없는 값은 절대 도입하지 마세요.

섹션 시스템

콘텐츠 섹션은 몇 가지 공통 값을 공유합니다. 고정된(pinned) 장면은 예외입니다.

부분	규칙
섹션 제목	모든 콘텐츠 섹션에 대해 하나의 크기 (예: 데스크톱 48, 휴대폰 38)
왼쪽 여백	하나의 여백, 내비게이션 로고 여백과 동일. 높이에 맞춰지는 스케일은 여백을 이동시키므로 측정하세요
레이블	제목 위에 하나의 알약 스타일
카드	하나의 테두리 반경, 하나의 가는 선, 하나의 색조. 테두리와 그림자와 채우기를 절대 함께 사용하지 마세요
종료 카드	그리드 행에 제목, 다음 행에 버튼, 추가 문장 없음

고정되거나 스크러빙되는 장면은 자체적인 스테이지 크기를 유지합니다. 이들은 설계상 뷰포트 높이이며, 여백은 스크롤 활주로 역할을 합니다. 고정된 스테이지를 백분율로 위치가 설정된 모든 요소를 다시 고정하지 않고 줄이지 마세요.

각 섹션이 고유한 제목 크기, 고유한 왼쪽 여백, 고유한 카드를 가진 페이지는 조립된 것처럼 보입니다. 이 표가 그런 상황을 막아줍니다.

간격 리듬

스케일은 한 번만 결정하세요. 4px 베이스의 기하학적 램프로 모든 것을 커버합니다.

0.4  0.8  1.6  2.4  3.2  4.8  6.4  8  12  16 rem

모든 섹션 간격을 두 개의 토큰으로 구동하세요: 섹션 사이의 --sec과 섹션 내 블록 사이의 --blk. 느슨한 페이지를 조이는 것은 40개의 숫자를 변경하는 것이 아니라 두 개의 숫자만 변경하면 됩니다. 한 페이지에서 데스크톱은 48과 40단위, 휴대폰은 36과 28을 사용하여 문서 전체를 약 10% 줄였습니다.

리듬을 조일 때 요소 크기는 변경되지 않습니다. 카드, 타이포그래피, 로고, 버튼: 설계된 대로 유지하세요. 이전 빌드와 새 빌드의 컴포넌트 크기를 비교하여 확인하세요.

섹션 패딩은 페이지가 무너지는 지점입니다. 모든 섹션이 아닌 모든 접합부를 감사하세요.

접합부	총 간격	읽히는 방식
관련 없는 두 섹션	200-240px	별개의 장(chapter)
위 섹션을 이어가는 블록	40-80px	하나의 장, 두 부분
전체 너비 미디어와 섹션이 만나는 경우	0	하나의 컷(cut)

위 섹션의 padding-bottom과 아래 섹션의 padding-top의 합계를 측정하세요. 120/60, 64/20, 24/0, 0/120을 가진 페이지는 각각 180, 84, 24, 120의 간격을 논리 없이 만들어냅니다. 독자는 이름을 붙일 수는 없지만 엉성함으로 느낍니다.

단일 배경색에서 약 240px를 초과하는 간격은 무언가를 넣어야 합니다. 간격을 조이거나 그곳에 CTA를 넣으세요.

첫 화면

영웅 섹션의 크기를 조정하여 다음 스트립이 첫 화면에 보이도록 하세요. clamp(620, 100svh - 150, 900) 단위는 한 번 스크롤하면 증거 스트립이 보이도록 합니다. 뷰포트를 가득 채우고 그 아래에 아무것도 보여주지 않는 영웅 섹션은 페이지가 의존하는 증거를 숨깁니다.

공유 컴포넌트는 사이트에 속합니다

라이브 사이트에 존재하는 내비게이션, 푸터 또는 버튼은 설계 그 자체입니다. 새 페이지에서 다시 스타일링하지 마세요. 새 페이지에서 다르게 보일 때, 거의 항상 원인은 페이지 수준의 오버라이드가 새어 나오기 때문입니다. 라이브 사이트와 계산된 스타일을 비교하고 오버라이드를 제거하되, 그것이 새어 나오는 중단점으로 범위를 지정하세요.

타입 스케일

최대 두 개의 패밀리: 하나는 디스플레이용, 하나는 텍스트용입니다. 디스플레이 서체의 숫자는 설계된 대로 읽히고, 일반 본문 서체의 숫자는 데이터처럼 읽힙니다.

다른 숫자와 같은 행에 있는 모든 숫자에는 항상 font-variant-numeric: lining-nums tabular-nums를 설정하세요. 그렇지 않으면 "3,000"과 "500,000+"가 정렬되지 않으며 그 이유를 알 수 없습니다.

음수 자간은 크기에 따라 조정됩니다: 대략 디스플레이 크기에서 -0.02em, 본문에서 0, 대문자 눈썹에서 양수 0.08em입니다.

디자인의 타입 너비를 정확히 일치시키세요. 광학 크기 함정에 대해서는 extracting-figma-truth를 참조하세요.

카드와 그리드

가장 흔한 카드 버그는 불균일한 콘텐츠로 인해 불균일한 카드가 생성되는 것입니다.

전	후	이유
그리드에서 `.card { padding: 2rem }`	그리드에 `align-items: stretch` 추가, 카드에 `height: 100%` 추가	그렇지 않으면 카드 높이가 자체 콘텐츠 높이에 따라 달라짐
콘텐츠가 위에서 아래로 흐름	맨 아래에 있어야 하는 요소에 `margin-top: auto`	메트릭 또는 CTA를 카드 전체의 공통 기준선에 고정
한 카드에서는 레이블이 1줄, 다른 카드에서는 2줄로 줄바꿈	레이블에 2줄과 동일한 `min-height`	모든 카드의 기준선을 동일하게 유지
고유 크기를 가진 `<img>`	`aspect-ratio` + 이미지에 `object-fit: cover`를 가진 래퍼	혼합 종횡비 이미지의 그리드는 그리드가 아님
카드 뒤의 회색 채우기	흰색에 `1px` 가는 선	채우기는 플레이스홀더로 읽히고, 가는 선은 설계된 것으로 읽힘

통계 및 숫자 블록

숫자 블록은 고정된 순서의 세 부분으로 구성됩니다: 위에 출처 또는 레이블, 숫자, 아래에 캡션. 숫자는 블록에서 가장 큰 요소이며, 행의 모든 숫자는 기준선을 공유합니다.

숫자 슬롯에 숫자가 아닌 것을 절대 넣지 마세요. "150+" 및 "3,000"과 함께 있는 행의 "Creative Ops"는 실수로 읽힙니다. 숫자를 찾거나 그 사실을 산문으로 옮기세요.
두 줄로 줄바꿈되는 숫자는 행을 망가뜨립니다. "6 weeks to 24 hours"는 나머지 부분을 캡션으로 보내고 "24h"가 됩니다.
캡션을 두 줄로 제한하세요. 세 줄이 필요하면 캡션이 숫자의 역할을 대신하고 있는 것입니다.

로고 스트립

로고는 **결코 경계 상자(bounding box)가 아닌 광학적 무게(optical weight)**로 크기가 조정됩니다. 스택형 로고, 정사각형 배지, 한 줄 워드마크를 동일한 CSS 높이로 설정하면 세 가지 다른 방식으로 잘못 보일 것입니다.

시작점: 스택형 로고 44px, 정사각형 배지 40px, 워드마크 22px, 그런 다음 눈으로 조정하세요. 모든 마크를 하나의 잉크 색상으로 정규화하세요. 혼합된 로고 색상은 스트립을 긁어모은 것처럼 보이게 만듭니다. 스트립에는 정리된(cleared) 로고만 넣으세요 (writing-claims-that-hold 참조).

공유 CSS 및 휴대폰 오버플로우

데스크톱 컴포넌트를 위해 작성된 width: 37rem !important와 같은 너비 규칙은 전체 문서를 휴대폰 너비(390 대 428)보다 넓게 만들 수 있습니다. 증상은 오른쪽 가장자리에 흰색 띠가 나타나는 것입니다. 390에서 scrollWidth를 clientWidth와 확인하고, 고정 너비를 설계된 중단점으로 범위를 지정하세요.

템플릿 페이지의 징후

모든 섹션이 중앙 정렬됨
섹션 패딩이 관계와 관계없이 모두 120px임
카드에 테두리와 그림자와 채우기가 모두 있음
제목이 더 무거운 두께의 본문 서체로 설정됨
숫자가 본문 서체로 설정됨
두 개의 악센트 색상, 그중 어느 것도 브랜드 색상이 아님
한 페이지에 border-radius 값이 4, 8, 12, 16으로 모두 있음

페이지 레이아웃 디자인하기