# Z-Pattern Layout

> 시선이 Z자 형태로 움직이도록 설계된 레이아웃 패턴입니다.

- 층: 아카이브 (UI 패턴)
- ID: z-pattern
- 연도: 2000s
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/z-pattern

## 정의

시선이 Z자 형태로 움직이도록 설계된 레이아웃 패턴입니다.

## 주요 특징

- 수평적 시선 이동
- 대각선 흐름
- CTA 우측 하단 배치
- 단순한 페이지에 적합
- 명확한 행동 유도

## 핵심 원칙

- 자연스러운 시선 흐름
- 효과적인 CTA 배치
- 단순성

## 컬러 시스템

Z패턴 시선 경로의 네 지점 강조. 좌상→우상→좌하→우하 순서

### 색상 역할

- point-1 (좌상): 로고·브랜드 — 인식색
- point-2 (우상): CTA — 강조색
- point-3 (좌하): 보조 정보
- point-4 (우하): 최종 CTA — 가장 강한 강조

### 색상 제약

- Z 경로의 4포인트에 핵심 요소 집중 배치
- Z 대각선 경로 외 영역에 중요 정보 배치 금지

### 다크모드 전략

역할 구조 유지, 팔레트만 전환

### 대비 요구사항

CTA (point-2, point-4) WCAG AA 이상

## 타이포그래피

- 폰트 성격: 랜딩 페이지에 적합한 임팩트 있는 폰트
- 권장 폰트 수: 최대 2개
- 타입 스케일: 1.5 이상 — 랜딩 페이지 스케일

### 타이포그래피 제약

- Hero 섹션 heading 매우 크게
- Z 경로 포인트 간 시각 대비 충분히

## 설계 제약

### 하면 안 되는 것

- Z 경로 4지점에 약한 요소 배치 금지
- 중앙 집중형 레이아웃 — Z패턴은 좌우 이동 기반

### 반드시 포함할 것

- Z 시선 경로를 따른 레이아웃 설계
- 최종 우하단 CTA

### 모션 가이드

Z 경로를 따라 순차 등장 애니메이션 효과적.

## 사용 사례

- 랜딩 페이지
- 광고 배너
- Hero Section
- 단일 목적 페이지

## 추천 프로젝트 유형

- 랜딩 페이지
- 광고·마케팅 페이지
- Hero Section
- 단일 CTA 페이지

## 장단점

### 장점

- CTA 배치가 자연스럽고 효과적
- 단순한 메시지 전달에 탁월
- 시선 유도 예측이 가능

### 단점·한계

- 콘텐츠가 많거나 복잡하면 효과 감소
- 텍스트 많은 페이지엔 F-Pattern이 더 적합

## 자주 묻는 질문

### Q1. Z-Pattern Layout이란 무엇인가요?

시선이 Z자 형태로 움직이도록 설계된 레이아웃 패턴입니다.

### Q2. Z-Pattern Layout의 핵심 디자인 원칙은 무엇인가요?

Z-Pattern Layout의 핵심 원칙은 자연스러운 시선 흐름, 효과적인 CTA 배치, 단순성입니다.

### Q3. Z-Pattern Layout은 어떤 프로젝트에 적합한가요?

Z-Pattern Layout은 랜딩 페이지, 광고 배너, Hero Section, 단일 목적 페이지, 랜딩 페이지, 광고·마케팅 페이지, Hero Section, 단일 CTA 페이지 등의 프로젝트에 적합합니다.

### Q4. Z-Pattern Layout의 장단점은 무엇인가요?

장점으로는 CTA 배치가 자연스럽고 효과적, 단순한 메시지 전달에 탁월, 시선 유도 예측이 가능이 있습니다. 단점으로는 콘텐츠가 많거나 복잡하면 효과 감소, 텍스트 많은 페이지엔 F-Pattern이 더 적합이 있습니다.

### Q5. Z-Pattern Layout에서 색상은 어떻게 사용하나요?

Z패턴 시선 경로의 네 지점 강조. 좌상→우상→좌하→우하 순서 색상 역할은 point-1 (좌상): 로고·브랜드 — 인식색, point-2 (우상): CTA — 강조색, point-3 (좌하): 보조 정보입니다. 주의사항: Z 경로의 4포인트에 핵심 요소 집중 배치, Z 대각선 경로 외 영역에 중요 정보 배치 금지.

### Q6. Z-Pattern Layout에 어울리는 폰트 스타일은 무엇인가요?

Z-Pattern Layout에는 랜딩 페이지에 적합한 임팩트 있는 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: Hero 섹션 heading 매우 크게, Z 경로 포인트 간 시각 대비 충분히.

### Q7. Z-Pattern Layout 디자인에서 하면 안 되는 것은 무엇인가요?

Z-Pattern Layout에서 피해야 할 것: Z 경로 4지점에 약한 요소 배치 금지, 중앙 집중형 레이아웃 — Z패턴은 좌우 이동 기반.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #607D8B
- secondary: #455A64
- accent: #26C6DA
- background: #ECEFF1
- surface: #FFFFFF
- text: #1A1A2E
- textSecondary: #607D8B
- border: #CFD8DC

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1.2
- borderRadius: sm 4px / md 8px / lg 16px / full 9999px
- shadow sm: 0 1px 4px rgba(96,125,139,0.10)
- shadow md: 0 4px 12px rgba(96,125,139,0.14)
- shadow lg: 0 8px 24px rgba(96,125,139,0.18)
- border: 1px solid #CFD8DC

### 컴포넌트 형태

- button: pill / hover lift / text none
- card: elevated / hover lift
- input: outlined / focus border
- badge: pill / solid
- icon: heroicons / stroke 1.5 / size 24px
- layout: fluid / section spacious
- animation: 300ms ease-out

## 관련 링크

### 관련 스타일

- [F-Pattern Layout](https://ui.buildersgate.com/styles/f-pattern)
- [Hero Section](https://ui.buildersgate.com/styles/hero-section)
- [Storytelling Design](https://ui.buildersgate.com/styles/storytelling-design)

---

HTML 버전: https://ui.buildersgate.com/styles/z-pattern

이 문서는 https://ui.buildersgate.com/styles/z-pattern.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.