레이아웃 택소노미

Manuscript Grid

본문을 한 컬럼으로만 흐르게 하고 좌우 여백을 둔 타입 영역. h1·p 가 글의 의미를 정한다면, 이건 그 글이 차지하는 폭과 위치를 정하는 레이아웃 결정. 폭을 45-75자로 제한해 가독성을 만든다.

Column Grid

화면 폭을 같은 너비의 수직 컬럼으로 나누고 그 선에 맞춰 콘텐츠를 정렬하는 기본 골격. flex 로 적당히 나누는 것과 달리, 정해진 컬럼과 거터를 기준 삼아 모든 요소의 시작·끝을 맞춘다. 대부분의 웹 페이지 본문 구획에 쓴다.

Modular Grid

컬럼과 행이 교차해 균일한 모듈(셀)을 만드는 격자로, 가로뿐 아니라 세로 정렬선까지 고정한다. 카드를 flex 로 줄바꿈만 시키면 행 높이가 제각각이지만, 이건 행·열을 함께 묶어 타일을 격자에 가둔다. 카드 갤러리나 제품 목록에 쓴다.

Hierarchical Grid

균일 격자를 깨고 콘텐츠 중요도에 맞춰 셀 크기·위치를 불규칙하게 변형한 그리드. 모든 칸을 같은 크기로 두는 모듈러 그리드와 달리, 핵심 항목에 더 넓은 영역을 배정해 위계를 만든다. 매거진이나 비대칭 강조가 필요한 에디토리얼에 쓴다.

Baseline Grid

모든 줄의 밑선을 공통 가로 격자에 맞춰 세로 리듬을 통일하는 체계. p·h1 의 기본 줄간격은 제각각이지만, 이건 line-height 와 여백을 한 단위(예 8px)의 배수로 묶어 줄을 가로로 정렬한다. 인쇄에서 엄격, 웹에선 Vertical Rhythm 으로 근사.

Compound Grid

컬럼 수가 다른 둘 이상의 그리드를 같은 면에 겹쳐 쓰는 복합 구조. 12컬럼 한 종류만 쓰는 단일 그리드와 달리, 2단·3단 리듬을 한 페이지에서 번갈아 써 변화를 만든다. 리듬 변화가 필요한 고급 에디토리얼에 쓴다.

12-Column System

화면을 12등분해 4·6·8 등 약수 조합으로 폭을 자유롭게 떼어 쓰는 표준 웹 그리드. 컬럼 수를 그때그때 정하는 방식과 달리, 12라는 공통 분모로 브레이크포인트마다 같은 규칙으로 폭을 재배분한다. 반응형 웹 전반의 기본 그리드로 쓴다.

Rule of Thirds

화면을 가로·세로 3등분한 4개 교차점에 핵심 요소를 두는 구도 규칙. 무조건 정중앙에 두는 것과 달리, 초점을 살짝 비껴 놓아 긴장과 여백을 함께 만든다. 히어로 비주얼이나 이미지 중심 배치에 쓴다.

Golden Ratio

약 1:1.618 비례로 영역을 가르는 고전 분할 규칙. 좌우를 반반(50:50)으로 나누는 것과 달리, 한쪽을 1.618배 넓혀 안정감 있는 위계를 만든다. 본문·사이드바 폭 비율이나 조화로운 분할에 쓴다.

Modular Scale

고정 비율(예 1.25배)로 한 단계씩 커지는 크기 체계. 제목 크기를 눈대중으로 28·22·17처럼 임의로 정하는 것과 달리, 한 비율을 곱해 단계를 도출하므로 위계가 수학적으로 일관된다. 타이포·간격 스케일 설계에 쓴다.

Symmetric Balance

중심축을 기준으로 좌우(또는 상하)가 거울처럼 대등한 배치. 무게를 비대칭으로 분산하는 것과 달리, 양쪽을 같은 비중으로 맞춰 정적이고 안정된 인상을 준다. 신뢰감이 필요한 랜딩이나 중앙 정렬 폼에 쓴다.

Asymmetric Balance

크기·무게가 다른 요소를 여백과 위치로 시각적 균형을 맞춘 배치. 좌우를 똑같이 맞추는 대칭과 달리, 큰 요소 반대편에 작은 요소와 여백을 배치해 균형은 잡되 동적인 시선 흐름을 만든다. 현대적 인상과 시선 유도가 필요할 때 쓴다.

Optical Balance

수치상 가운데가 아니라 지각상 가운데에 맞춰 위치·여백을 미세 보정하는 정렬. 정확히 중앙값으로만 배치하면 둥근 형태나 재생 아이콘은 한쪽으로 쏠려 보이는데, 이를 눈에 맞게 살짝 옮긴다. 로고·아이콘 정렬이나 버튼 내부 광학 보정에 쓴다.

Van de Graaf Canon

지면을 대각선으로 분할해 안쪽·바깥 여백 비례를 도출하는 고전 서적 페이지 캐논. 여백을 사방 같은 값으로 두는 것과 달리, 바깥과 아래를 더 넓혀 책 펼침면의 전통 비례를 재현한다. 인쇄 지향 레이아웃이나 책 형식 페이지에 쓴다.

Scale Contrast

요소 간 크기 차이로 무엇을 먼저 볼지 정하는 가장 강한 위계 신호. 제목·본문을 비슷한 크기로 두면 시선 순서가 안 생기지만, 크기를 크게 벌리면 큰 쪽이 먼저 읽힌다. 히어로 헤드라인이나 핵심 지표 강조에 쓴다.

Weight Contrast

글자 굵기·농도 차이로 같은 크기 안에서 강약을 만드는 위계. 모든 텍스트를 한 굵기로 두면 평평하게 읽히지만, 제목을 굵게 본문을 보통으로 두면 위계가 선다. 제목·본문 구분이나 라벨 강조에 쓴다.

Spatial Grouping

가까이 둔 요소는 한 묶음으로 읽힌다는 근접성(게슈탈트) 원리로 관계를 나타내는 배치. 모든 항목을 같은 간격으로 늘어놓으면 묶음이 안 보이지만, 그룹 안은 좁게 그룹 사이는 넓게 두면 구조가 드러난다. 폼 필드 묶음이나 카드 내부 정보 정리에 쓴다.

Figure-Ground

전경과 배경을 명도·레이어로 분리해 주목 대상을 띄우는 대비. 같은 면에 평면으로 깔면 무엇이 위인지 안 보이지만, 배경을 어둡게 깔고 대상을 위로 올리면 전경이 도드라진다. 모달·오버레이 히어로·강조 카드에 쓴다.

Focal Point

시선이 가장 먼저 닿도록 화면을 지배하는 단일 요소. 동등한 버튼·링크를 여럿 늘어놓으면 시선이 분산되지만, 하나만 크게·강하게 두면 거기로 시선이 모인다. 단일 CTA 화면이나 랜딩 첫 화면에 쓴다.

Macro/Micro Whitespace

블록 사이의 큰 여백(거시)과 요소 안의 작은 여백(미시)을 다른 단위로 구분해 다루는 체계. 모든 간격을 한 값으로만 쓰면 묶음 경계가 흐려지지만, 거시·미시를 분리하면 호흡과 위계가 동시에 산다. 프리미엄 인상이나 가독성 높은 콘텐츠에 쓴다.

Margin & Gutter

콘텐츠 바깥을 두르는 여백(마진)과 컬럼 사이 간격(거터)을 따로 정의하는 기본 설정. 둘을 같은 값으로 뭉뚱그리면 가장자리와 컬럼 간격이 헷갈리지만, 분리하면 그리드 호흡이 일정해진다. 그리드 기반 모든 레이아웃의 기초 설정으로 쓴다.

Negative Space

의도적으로 비워 둬 남은 형상·메시지를 강조하는 빈 공간. 빈 곳을 무언가로 채워야 한다고 보는 것과 달리, 비움 자체를 디자인 요소로 써 대상을 도드라지게 한다. 미니멀 브랜드나 단일 메시지 강조에 쓴다.

Vertical Rhythm

일관된 수직 간격 단위로 흐름을 만드는 리듬

Density (Compact/Airy)

한 화면에 담는 정보 밀도를 조밀하게 또는 여유롭게 정하는 선택. 간격을 한 값으로 고정하는 것과 달리, 맥락에 따라 간격·행 높이를 조여 정보를 많이 담거나 넓혀 호흡을 준다. 대시보드는 조밀하게, 마케팅 화면은 여유롭게 쓴다.

Fluid Layout

영역이 fr·%·flex-grow 로 가용 폭을 비례 점유해 뷰포트와 함께 늘어나는 공간 모델. 고정 px 박스와 달리 화면이 커지면 콘텐츠도 같이 넓어져 큰 화면에 유휴 공간을 남기지 않는다. 콘텐츠 양이 가변인 피드·대시보드·갤러리에 쓴다.

Fixed Layout

고정 px 폭(또는 max-width) 박스를 중앙에 두고 뷰포트와 무관하게 일정하게 유지하는 공간 모델. 유동형과 달리 콘텐츠 폭이 변하지 않아 줄길이·정렬을 정밀하게 통제하지만, 큰 화면에서는 양옆에 유휴 여백이 생긴다. 본문 가독성·인쇄지향 화면에 쓴다.

Hybrid Layout

일부 영역은 고정 px(내비·사이드바), 일부는 유동 fr(본문)로 섞는 공간 모델. 전부 고정이거나 전부 유동인 방식과 달리 영역마다 역할에 맞는 규칙을 줘, 내비는 흔들리지 않고 본문은 화면을 채운다. 앱 셸·문서·마스터-디테일 등 실무 대부분이 이 모델이다.

Space Saturation

화면을 의도적으로 채워 불필요한 유휴 공간이나 어색하게 뚫린 구멍을 남기지 않는 원칙. 콘텐츠를 위에서부터 쌓아 아래가 휑하게 비는 것과 달리, 영역을 프레임에 맞춰 포화시킨다. 단 여백 자체가 메시지인 의도된 네거티브 스페이스와는 구분한다.

Region Sizing Policy

어떤 영역을 유동으로 두고 어떤 영역을 고정할지 기획 의도와 콘텐츠 정책으로 정하는 원칙. 전 영역을 무심코 fr 로 깔거나 전부 px 로 박는 것과 달리, 내비는 고정·본문은 유동처럼 역할별로 규칙을 배정한다. 혼합형 레이아웃 설계의 핵심 결정이다.

Balanced Fill

공간 모델에 맞게 영역을 채우되 한쪽만 뻥 뚫린 불균형을 피하는 원칙. 큰 블록 하나에 자투리가 매달린 어색한 배치와 달리, 영역 무게를 고르게 분배해 레이아웃이 완결돼 보이게 한다. 포화(구멍 없음)와 짝을 이루는 시각 균형 규칙이다.

Overflow Containment

flex·grid 자식이 콘텐츠 때문에 칸 밖으로 넘쳐 가로 스크롤과 깨짐을 만드는 것을 막는 원칙. 자식 min-width 기본값이 auto 라 긴 텍스트·URL·이미지가 칸을 밀어내는데, min-width:0 과 overflow·text-wrap 으로 콘텐츠를 칸 안에 가둔다. 레이아웃 불안정 1순위 원인을 차단한다.

Intrinsic Sizing

영역 크기를 콘텐츠가 필요로 하는 양에 맞춰 안전하게 정하는 원칙. 고정 px 로 박아 콘텐츠가 넘치거나 남는 것과 달리, min-content·max-content·fit-content·minmax() 로 영역이 콘텐츠에 적응하게 한다. 칸이 콘텐츠를 못 담아 깨지는 일을 줄인다.

CLS Prevention

이미지·임베드·폰트가 늦게 로드되며 콘텐츠를 밀어내는 누적 레이아웃 시프트(CLS)를 막는 원칙. 높이를 비워뒀다 채우는 것과 달리, aspect-ratio·width/height·min-height 로 공간을 미리 예약해 나중 로드돼도 자리가 안 밀린다. 체감 안정성과 Core Web Vitals 에 직결된다.

F-Pattern

사용자가 본문을 위에서 아래로 차근차근 읽는다는 가정과 달리, 텍스트 위주 페이지에서 시선이 위 두세 줄을 가로로 길게 훑고 이후 왼쪽 가장자리만 세로로 따라 내려가 F자를 그린다는 NN/g 아이트래킹(232명) 관찰입니다. 핵심 정보를 왼쪽과 첫 줄에 앞세워야 하며, F 출현 자체는 위계 설계가 약하다는 신호이기도 합니다.

Z-Pattern

텍스트가 적은 화면에서 시선이 좌상에서 우상, 다시 좌하에서 우하로 대각선을 그리며 이동한다고 보는 통용 모델입니다(NN/g 직접 정의 아님). 로고와 핵심 행동을 그 네 꼭짓점 동선에 맞춰 배치해 미니멀 랜딩의 시선을 단일 CTA 로 모읍니다.

Layer-Cake Pattern

글을 한 줄도 빠짐없이 읽는다는 가정과 달리, 사용자가 헤딩과 서브헤딩만 케이크 층처럼 골라 보고 사이 본문은 건너뛴다는 NN/g(2004) 스캔 관찰입니다. 서브헤딩 한 줄만 읽어도 요지가 전달되도록 소제목을 자족적으로 쓰는 배치를 요구합니다.

Gutenberg Diagram

정보 밀도가 균질한 페이지에서 시선이 좌상 1차 영역에서 우하 종착 영역으로 흐른다고 보는 4분면 모델입니다. 강한 시각 위계가 없을 때만 성립하므로, 크기나 대비로 주목점을 만든 화면에는 적용되지 않습니다. 신문형 균일 배치의 시작과 끝 자리를 잡는 근거로 씁니다.

Spotted Pattern

처음부터 끝까지 읽는다는 가정과 달리, 사용자가 찾는 링크나 숫자, 특정 단어만 시각적으로 골라 잡고 큰 텍스트 덩어리는 통째로 건너뛰는 비선형 스캔입니다(NN/g). 가격이나 결과값 같은 표적 정보를 대비로 도드라지게 만들어 탐색 과업을 빠르게 끝내게 합니다.

Dominant Entry Point

동등한 진입 후보가 여럿이라 시선이 분산된다는 상황과 달리, 화면에 다른 모든 요소를 압도하는 단 하나의 시작점을 두어 시선이 그곳에 먼저 강제로 닿게 하는 장치입니다. 크기와 대비를 한 요소에 몰아주며, 단일 목적 랜딩에서 핵심 메시지나 CTA 로 시선을 끌어옵니다.

Visual Anchor

모든 요소가 비슷한 무게로 흩어진다는 상황과 달리, 큰 이미지나 일러스트 같은 강한 시각 요소 하나가 시선을 붙들어 머무는 닻 역할을 하는 장치입니다. 주변 텍스트는 이 앵커에 종속되게 배치해, 히어로 영역에서 시선이 흩어지지 않고 한 곳에 고이게 만듭니다.

Scan Stoppers

긴 페이지를 빠르게 스크롤하며 지나친다는 흐름과 달리, 색·여백·크기의 대비가 큰 띠를 본문 사이에 끼워 스크롤 중 시선을 강제로 멈추게 하는 장치입니다. 중간 CTA 나 핵심 지표를 이 정지점에 두되, 너무 잦으면 모든 것이 강조되어 효과가 사라지므로 드물게 씁니다.

Above-the-fold Priority

필요한 정보가 어딘가에는 있으니 스크롤하면 된다는 가정과 달리, 다수 사용자가 스크롤 전 첫 화면만 보고 이탈한다는 전제에서 헤드라인·핵심 비주얼·CTA 를 폴드 위 한 화면 안에 모으는 원칙입니다. 전환 중심 랜딩에서 첫 화면 높이를 기준으로 정보 우선순위를 잡습니다.

Hero-Centric Landing

강한 히어로 + 하위 섹션으로 구성한 표준 랜딩 (NN/g 직접 정의 아님)

Long-form Sales Page

스크롤을 따라 문제 제기, 근거, 제안, 반론 해소 순으로 설득 논리를 길게 쌓는 판매 페이지. 정보만 나열하는 일반 랜딩과 달리 섹션 순서 자체가 구매 결정을 끌고 가는 서사 장치.

Single-Page Scroll

여러 페이지로 나눌 콘텐츠를 한 문서에 모아 스크롤과 앵커 이동으로만 탐색하는 구조. 라우팅으로 화면을 분리하는 멀티페이지와 달리 페이지 전환 없이 한 흐름으로 읽히는 점이 핵심.

Sectioned Stack

독립 섹션을 수직으로 쌓는 가장 흔한 랜딩 구조

Pricing Page

요금제 컬럼을 나란히 세워 항목별로 가로 비교시키는 전환 핵심 페이지. 가격을 단순 나열하는 목록과 달리 동일 행에 같은 항목을 정렬해 차이를 즉시 읽게 만드는 점이 본질.

Magazine Layout

다단 컬럼과 풀와이드 이미지를 섞는 잡지형 구조

Article / Long-read

단일 컬럼 본문에 미디어를 끼우는 읽기 중심 구조

Two-column Editorial

본문 컬럼 옆에 주석, 인용, 참고를 나란히 두어 흐름을 끊지 않고 보조 정보를 붙이는 구조. 본문 사이에 끼워 넣는 단일 컬럼과 달리 가로 병치로 본문 리듬을 지키는 점이 다름.

Sidebar + Content

고정 사이드바와 가변 본문을 나눈 구조 (web.dev·MDN 정식 패턴)

Documentation Layout

좌측 내비 + 본문 + 우측 목차의 3단 문서 구조

Holy Grail Layout

헤더·푸터와 좌우 사이드, 중앙 본문의 고전 5분할 (web.dev·Wikipedia 정의)

Sidebar Nav Shell

좌측 내비 + 우측 콘텐츠의 앱 표준 셸

Dashboard / Analytics Grid

KPI, 차트, 표 위젯을 모듈러 격자에 배치해 한 화면에서 여러 지표를 동시에 훑게 하는 데이터 화면. 위젯을 세로로 쌓는 단순 스택과 달리 위젯마다 격자 칸 수를 달리해 중요도를 면적으로 표현.

Split-view (Master-Detail)

목록(마스터)과 상세(디테일)를 좌우로 연동하는 구조 (Material canonical: list-detail)

Supporting Pane

주 영역 옆에 보조 패널을 두는 Material canonical 레이아웃 (웹앱 한정)

Kanban / Board

상태별 컬럼에 카드를 세로로 쌓고 컬럼 간 드래그로 진행 상태를 옮기는 보드. 목록 하나에 모두 담는 리스트와 달리 컬럼 위치 자체가 작업 단계를 뜻하는 점이 핵심.

Single-column Feed

하나의 컬럼에 콘텐츠를 시간순으로 흘리는 구조 (Material canonical: feed)

Card Grid

균일한 카드를 격자로 나열하는 가장 흔한 목록 구조 (NN/g 카드 컴포넌트 정의)

Masonry Gallery

높이가 다른 카드를 벽돌처럼 채우는 핀터레스트형 배치 (CSS Grid Level 3 grid-lanes)

Justified Gallery

원본 비율을 유지한 채 각 행의 높이를 맞춰 좌우 끝을 가지런히 정렬하는 사진 갤러리. 비율을 강제로 자르는 균일 그리드와 달리 사진을 안 자르면서도 행 양끝을 정렬하는 점이 특징.

Centered Form

화면 중앙에 폼만 두는 집중형 구조 (NN/g 단일 컬럼 폼 권고)

Split-screen Auth

한쪽 비주얼·한쪽 폼으로 나눈 인증 화면

Wizard / Stepper

긴 작업을 여러 단계로 쪼개 한 번에 한 단계만 보여주고 순서대로 진행시키는 구조. 모든 필드를 한 화면에 펼치는 폼과 달리 진행 표시와 뒤로/다음 버튼으로 인지 부담을 단계별로 나누는 점이 핵심.

Empty / Error Page

빈 목록이나 오류 상황을 일러스트와 메시지로 안내하고 다음 행동 버튼을 제시하는 화면. 그냥 비워 두거나 에러 코드만 노출하는 방식과 달리 사용자가 막힌 지점에서 빠져나갈 길을 함께 주는 점이 다름.

Centered Hero

헤드라인과 CTA를 화면 중앙 한 축에 세로로 정렬한 가장 단순한 히어로. 좌우 여백을 대칭으로 비워 시선을 단일 메시지에 모으며, 비주얼 분할 없이 카피만으로 첫인상을 끌고 가는 미니멀 구성에 쓴다.

Split Hero (Text/Visual)

히어로를 좌측 텍스트와 우측 비주얼 두 컬럼으로 나눈 구성. 중앙 단일 축 히어로와 달리 카피와 제품 이미지를 동시에 동등한 비중으로 보여줘, 무엇을 말하는지와 무엇인지를 한 화면에서 같이 전달할 때 쓴다.

Full-bleed Hero

이미지나 영상을 뷰포트 가장자리까지 꽉 채운 히어로. 컨테이너 여백 안에 가두는 일반 섹션과 달리 시각 요소가 화면 폭 전체를 점유해, 정보 전달보다 브랜드 분위기와 몰입을 앞세우는 캠페인 첫 화면에 쓴다.

Overlay Hero

배경 미디어 위에 텍스트를 같은 레이어에 겹쳐 올린 히어로. 이미지와 카피를 위아래로 나눠 쌓는 구성과 달리 한 면에 포개 공간을 절약하지만, 배경 대비가 낮으면 가독성이 무너지므로 어둡게 깔거나 그라데이션 오버레이를 함께 둔다.

Split-screen

뷰포트 전체를 두 패널로 갈라 양쪽에 동등한 시각 비중을 주는 구성. 한쪽이 주가 되는 일반 섹션과 달리 두 선택지나 이중 내러티브를 대등하게 맞세워, 로그인 대 가입 같은 갈림길이나 인증 화면에 쓴다. 콘텐츠가 늘면 확장성이 낮다.

50-50 Block

텍스트와 미디어를 반반 폭으로 나눈 섹션 블록. 텍스트만 흐르는 본문과 달리 설명과 그것을 보여주는 이미지를 좌우로 짝지어, 기능 하나를 말과 그림으로 동시에 납득시킬 때 쓴다. 여러 개를 이으면 교차 행으로 발전한다.

Alternating (Zig-zag) Rows

반반 블록을 여러 행으로 쌓되 행마다 텍스트와 이미지의 좌우를 번갈아 두는 배치. 같은 정렬을 반복하는 나열과 달리 지그재그 리듬으로 단조로움을 깨, 여러 기능을 순차로 소개할 때 쓴다. 빠른 스캔이 핵심인 데이터에는 부적합하다.

Bento Grid

칸막이 도시락처럼 크기 다른 박스로 콘텐츠를 구획화. 큰 박스=높은 위계 (2024~ 부상, 표준 정의 없음)

Uniform Card Grid

동일 규격 카드를 같은 간격으로 반복 배치하는 표준 격자. 크기를 차등하는 벤토와 달리 모든 칸이 균일해 위계 없이 동등한 항목을 늘어놓아, 목록과 카탈로그, 갤러리처럼 개수가 가변인 컬렉션을 보여줄 때 쓴다.

Masonry

높이가 제각각인 항목을 열 단위로 흘려 빈틈없이 채우는 배치. 행을 맞추는 카드 그리드와 달리 아이템이 가장 짧은 열로 떨어져 위아래 여백을 없애, 비율이 다른 이미지 갤러리나 핀보드에 쓴다. 항목 순서나 정렬이 중요한 비교에는 부적합하다.

Mosaic

크기가 다른 타일을 짜맞춰 면을 메우는 격자. 균일 카드 그리드와 달리 큰 타일과 작은 타일을 섞어 시각적 강약을 주면서도 전체 면은 빈틈없이 채워, 미디어 진열이나 카테고리 그리드처럼 보는 재미가 필요한 면에 쓴다.

Stacked Cards

카드를 평면에 늘어놓지 않고 z축으로 겹쳐 쌓아 깊이와 순서를 표현하는 배치. 동시 비교가 가능한 그리드와 달리 한 번에 맨 위 한 장에 집중시켜, 단계 강조나 스와이프 덱처럼 순차로 넘겨 보는 흐름에 쓴다.

Feature Grid

아이콘과 제목, 짧은 설명을 한 셀로 묶어 격자로 나열하는 기능 소개 블록. 줄글 설명과 달리 항목을 동등 규격으로 병렬해 혜택을 한눈에 훑게 해, 랜딩의 기능 요약 섹션에 쓴다. 심층 설명이나 항목 간 비교에는 맞지 않는다.

Comparison Table

항목을 행으로, 비교 대상을 열로 세워 칸마다 값을 채우는 표 구조. 서술형 설명과 달리 같은 기준선에서 차이를 나란히 대조시켜, 요금제나 제품 스펙을 고르게 할 때 쓴다. 좁은 화면에서는 열이 무너지므로 카드형 재배치가 필요하다.

Testimonial Wall

후기 카드를 벽처럼 빽빽이 채워 사회적 증거의 양감을 보여주는 블록. 후기 한두 개를 띄엄 두는 구성과 달리 다수를 한 면에 모아 신뢰의 규모 자체를 인상으로 남겨, 전환 직전 설득 구간에 쓴다. 보통 높이가 다른 카드라 메이슨리로 채운다.

Stat / Metric Band

핵심 숫자 몇 개를 한 줄 가로 띠에 등간격으로 강조하는 블록. 본문에 수치를 섞어 묻는 방식과 달리 지표만 떼어 큰 활자로 나란히 세워 성과를 즉시 각인시켜, 신뢰 지표 노출에 쓴다. 맥락 설명이 필요한 데이터에는 맞지 않는다.

CTA Banner

메시지와 버튼을 한 줄 강조 띠에 담아 행동을 유도하는 블록. 본문에 링크를 묻어 두는 방식과 달리 배경색이나 대비로 띠를 도드라지게 해 시선을 멈춰 세워, 섹션 사이나 페이지 끝 전환 지점에 쓴다. 정보 전달 본문에는 맞지 않는다.

Scrollytelling

스크롤 진행에 따라 텍스트와 비주얼이 단계별로 맞물려 전개되는 거동입니다. 한 번에 다 보여주는 정적 기사와 달리 화면을 고정한 채 스크롤 위치를 진행도로 환산해 장면을 바꿉니다. Scroll API 로 구현합니다.

Scroll-triggered Reveal

요소가 뷰포트에 진입하는 순간 점진적으로 나타나는 거동입니다. 처음부터 다 노출하는 정적 페이지와 달리 진입 시점을 감지해 페이드나 슬라이드로 페이싱을 만듭니다. IntersectionObserver 로 진입을 판정합니다.

Parallax

레이어마다 스크롤 이동 속도를 다르게 줘 깊이감을 만드는 효과입니다. 모든 층이 같은 속도로 움직이는 평면 스크롤과 달리 배경은 느리게 전경은 빠르게 움직여 입체감을 냅니다. 성능과 접근성 부담이 있어 몰입형 히어로에 한정해 씁니다.

Horizontal Scroll

콘텐츠를 세로가 아니라 가로 축으로 탐색하게 만드는 거동입니다. 기본 세로 스크롤과 달리 항목을 수평으로 늘어놓아 갤러리나 타임라인을 옆으로 훑게 합니다. overflow-x: auto 로 구현합니다.

Scroll Snap Sections

섹션 경계마다 스크롤이 딱 멈추며 정렬되는 거동입니다. 아무 데서나 멈추는 일반 스크롤과 달리 멈춤 지점을 섹션 단위로 고정해 슬라이드형 풀페이지 경험을 만듭니다. scroll-snap-type 으로 멈춤 축을 지정합니다.

Multi-directional Scroll

가로와 세로를 동시에 탐색하는 격자형 2축 스크롤입니다. 한 방향만 흐르는 선형 스크롤과 달리 평면 위를 상하좌우로 자유 이동하게 해 맵이나 아카이브 탐색에 씁니다. 선형 탐색이 필요한 서비스에는 부적합합니다.

Sticky Header/Sidebar

스크롤해도 상단·측면이 따라붙어 고정되는 거동 (position: sticky)

Pinned Section

한 섹션을 화면에 고정한 채 그 안의 콘텐츠만 단계적으로 교체하는 거동입니다. 섹션이 스크롤과 함께 흘러가는 일반 배치와 달리 컨테이너를 붙잡아 둔 채 내부만 전환합니다. position:sticky 로 섹션을 핀 고정합니다.

Sticky Stacking Cards

스크롤할수록 카드가 위에 겹겹이 쌓이며 포개지는 거동입니다. 카드가 따로 흘러가는 일반 리스트와 달리 각 카드를 같은 상단 위치에 sticky 로 붙여 누적되는 인상을 줍니다. position:sticky 로 구현합니다.

Mobile-first Stack

작은 화면에서 단일 컬럼으로 쌓고 위로 확장하는 전략 (Luke W: mostly fluid)

Reflow / Reorder

화면 폭에 따라 요소 순서·흐름을 바꾸는 재배치 (Luke W: column drop / layout shifter)

Off-canvas Panel

화면 밖 영역에 숨겨 두었다가 슬라이드로 꺼내는 패널입니다. 항상 보이는 사이드바와 달리 좁은 화면에서 패널을 밖으로 밀어 두고 필요할 때만 열어 공간을 절약합니다. transform: translateX 로 출입을 처리합니다.

Priority+ Navigation

가용 폭에 맞춰 우선순위 높은 항목만 노출하고 나머지는 더보기 메뉴로 접는 내비입니다. 폭이 모자라면 줄바꿈하거나 잘리는 일반 메뉴와 달리 넘치는 항목을 자동으로 오버플로 메뉴에 담습니다. 항목 많은 메뉴의 반응형 처리에 씁니다.

CSS Subgrid (enabler)

자식 그리드가 부모의 트랙 라인에 그대로 정렬되도록 잇는 CSS 메커니즘입니다. 의도로 고르는 패턴이 아니라 중첩 그리드 정렬을 가능케 하는 도구입니다. 카드들의 내부 행 높이를 맞출 때 subgrid 값으로 적용합니다.

Container Queries (enabler)

뷰포트가 아니라 자기 컨테이너의 폭에 반응해 스타일을 바꾸는 CSS 메커니즘입니다. 화면 전체 기준인 미디어 쿼리와 달리 부모 폭을 기준 삼아 재사용 가능한 반응형을 가능케 합니다. container-type 으로 대상을 지정합니다.

Native CSS Masonry (enabler)

JS 라이브러리 없이 높이가 제각각인 벽돌형 배치를 만드는 CSS 사양입니다. 좌표를 계산해 절대 배치하던 JS 메이슨리와 달리 그리드가 빈 공간을 채워 흐르게 합니다. 아직 표준 논의와 구현이 진행 중이라 폴백이 필요합니다.

:has() Conditional (enabler)

자식의 존재나 상태에 따라 부모의 레이아웃을 바꾸는 CSS 메커니즘입니다. 부모를 못 거슬러 올라가던 기존 선택자와 달리 JS 없이 조건부 배치를 가능케 합니다. :has() 로 자식 조건을 검사해 그리드나 카드 구성을 전환합니다.

Aspect-ratio Grid

셀마다 가로세로 비율을 고정해 균일한 타일을 만드는 격자입니다. 콘텐츠 높이에 따라 셀이 들쭉날쭉해지는 배치와 달리 비율을 박아 일관된 미디어 타일을 얻습니다. aspect-ratio 로 셀 비율을 지정해 CLS 를 막습니다.

Broken Grid

기준 칼럼 그리드를 유지하되 일부 요소만 칼럼폭·정렬·시작선을 어긋내고 겹치게 하는 비대칭 배치입니다. 모든 블록을 칸에 가지런히 맞추는 정렬 그리드와 달리 의도적 어긋남으로 시선 리듬과 개성을 만들며, 그리드가 완전히 사라지는 게 아니라 부분적으로만 깨진다는 점이 핵심입니다.

Deconstructed Grid

기준 그리드를 조각으로 분해하고 위치·크기·정렬을 재배열해 원래 격자 흔적을 흐리는 구조입니다. 칸을 부분만 어긋내는 브로큰 그리드보다 더 나아가 격자 체계 자체를 해체하므로, 정돈된 일관성이 아니라 아방가르드한 긴장감을 노리는 에디토리얼·아트 맥락에 씁니다.

Collage Layout

이미지·텍스트 조각을 오려붙인 듯 자유 위치에 겹치고 살짝 회전시켜 흩뜨리는 구조입니다. 칸에 맞춰 배치하는 카드 그리드와 달리 절대 위치와 겹침으로 손으로 붙인 콜라주 인상을 만들며, 내러티브 포트폴리오나 무드 강한 브랜드에서 정형 그리드의 단조로움을 깰 때 씁니다.

Overlap / Off-grid

인접 요소가 칸 경계를 넘어 서로 겹치도록 음수 여백과 z축 순서로 쌓는 배치입니다. 블록을 칸 안에 가둬 간격으로 분리하는 일반 그리드와 달리 레이어가 포개지며 깊이감을 만들고, 히어로·갤러리에서 평면적 정렬을 벗어나 입체적 인상을 줄 때 씁니다.

Asymmetric Layout

좌우 또는 상하 무게중심을 일부러 한쪽으로 치우치게 배분한 동적 배치입니다. 50대 50 대칭 분할이 주는 안정감 대신 비대칭 비율로 시선 흐름과 긴장감을 유도하며, 정적 그리드를 탈피해 개성과 방향성을 줄 때 씁니다.

Brutalism / Neo-brutalism

두꺼운 보더, 고대비, 시스템 폰트, 날것의 박스를 그대로 노출하는 반세련 양식입니다. 구조 자체보다 태도를 앞세우는 스타일 선언으로, 매끈하게 다듬은 디자인 트렌드에 대한 안티테제로서 강한 개성과 차별화를 노릴 때 씁니다.

Anti-design

의도적 비정렬·요소 충돌·거친 마감을 미학으로 삼는 스타일 선언입니다. 정돈과 일관성을 추구하는 일반 디자인 규범을 일부러 위반해 주목과 진정성을 노리며, 구조 규칙이 아니라 태도의 표명이라 신뢰·명료성이 핵심인 서비스에는 맞지 않습니다.

Maximalism

컬러·패턴·요소를 과밀하게 채우고 중첩해 풍부함과 과잉을 미덕으로 삼는 스타일입니다. 여백과 절제를 추구하는 미니멀리즘의 반작용으로, 정보 명료성보다 강렬한 감각적 인상을 우선할 때 쓰는 태도 표현입니다.

Editorial Revival

드롭캡, 다단 흐름, 캡션, 넓은 여백 같은 인쇄 매거진 조판 문법을 웹으로 가져온 양식입니다. 한 칼럼에 본문을 단조롭게 흘리는 기본 문서 레이아웃과 달리 인쇄 지면의 위계와 리듬을 재현해 콘텐츠 권위와 읽는 경험을 강조할 때 씁니다.

Zine Look

컷앤스틱 조각과 펑크 타이포를 겹쳐 텍스트가 이미지를 덮고 침범하게 만드는 양식입니다. 텍스트와 이미지를 칸으로 분리하는 정형 레이아웃과 달리 의도적으로 층을 포개고 회전시켜 인디 잡지의 거친 무드를 내며, 반정형 표현을 노릴 때 씁니다.

Retrofuturism / Y2K

크롬 질감, 그라데이션, 픽셀·치트한 UI 등 90s에서 00s 웹과 미래주의 모티프를 차용한 스타일입니다. 평평한 모던 미니멀 양식과 달리 광택과 장식 요소로 노스탤지어를 자극하며, 컬처 브랜드나 노스탤지어 타깃 캠페인에서 씁니다.

Oversized/Full-bleed Type

텍스트를 화면 가장자리까지 꽉 채우는 거대 크기로 키워 타이포 자체를 주인공으로 쓰는 배치입니다. 본문급 글자에 이미지로 인상을 만드는 방식과 달리 글자 크기와 여백만으로 강렬한 첫인상과 브랜드 보이스를 전달하며, 히어로에서 씁니다.

Kinetic Typography Layout

텍스트가 스크롤·호버·시간에 따라 움직이며 그 자체로 레이아웃을 구성하는 표현입니다. 정적으로 놓인 글자와 달리 모션이 위계와 흐름을 만들어 시선을 유도하며, 모션 중심 브랜드나 인터랙티브 히어로에서 씁니다.

Marquee / Ticker

텍스트나 로고를 가로로 무한히 반복 스크롤시키는 흐르는 띠입니다. 한 줄에 정적으로 나열하는 방식과 달리 끊임없는 움직임으로 반복 강조와 리듬을 만들며, 레트로·브루탈 무드나 로고 클라우드에서 씁니다.

Infinite Canvas

화면 경계 없이 끝없이 펼쳐지는 평면을 드래그·줌으로 탐색하는 공간형 구조입니다. 위에서 아래로 흐르는 선형 스크롤과 달리 2차원 자유 이동으로 탐색하게 해, 탐색형 포트폴리오나 인터랙티브 맵처럼 비선형 발견이 콘셉트일 때 씁니다.