# Z-Pattern Layout — 디자인 스타일 가이드

## 기본 정보
- **ID**: z-pattern
- **카테고리**: ui-pattern
- **연도**: 2000s

## 설명
시선이 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이 더 적합

## 관련 스타일
- [f-pattern](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)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: linear-gradient(135deg, #607D8B 0%, #37474F 100%)
- textColor: #FFFFFF
- accentColor: #26C6DA

### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em

### 스페이싱
- unit: 8px
- scale: 1.2

### 그림자 (Shadows)
- sm: 0 1px 4px rgba(96,125,139,0.10)
- md: 0 4px 12px rgba(96,125,139,0.14)
- lg: 0 8px 24px rgba(96,125,139,0.18)
- xl: 0 16px 40px rgba(96,125,139,0.22)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 16px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #CFD8DC

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s ease

### 애니메이션
- duration: 300ms
- easing: ease-out

### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=border
- 배지: shape=pill / style=solid
- 아이콘: package=heroicons / strokeWidth=1.5 / defaultSize=24

### 레이아웃
- containerStyle: fluid
- sectionSpacing: spacious

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=z-pattern
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=z-pattern&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Z-Pattern Layout

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

연도

2000s

#607D8B

핵심 원칙

1

자연스러운 시선 흐름

2

효과적인 CTA 배치

3

단순성

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Z-Pattern Reading Flow

시선이 Z자 형태로 움직이는 패턴

로고

중앙 콘텐츠

대각선으로 시선이 이동합니다

추가 정보

Landing Page Header

Z-패턴을 활용한 랜딩 페이지 헤더

MyApp

당신의 비즈니스를 성장시키세요

최고의 솔루션으로 목표를 달성하세요

✓ 무료 체험 14일

✓ 신용카드 불필요

Hero Section

Z-패턴 히어로 섹션

혁신적인 솔루션

비즈니스 성장을 위한 완벽한 도구. 지금 바로 시작하세요.

이미지/일러스트

Pricing Section

Z-패턴으로 시선 유도하는 가격 섹션

요금제

30일 환불 보장

Basic

$9/월

  • ✓ 기능 1
  • ✓ 기능 2
  • ✓ 기능 3
인기

Pro

$29/월

  • ✓ 모든 Basic 기능
  • ✓ 고급 기능 1
  • ✓ 고급 기능 2

Enterprise

맞춤형

  • ✓ 모든 Pro 기능
  • ✓ 전용 지원
  • ✓ 커스터마이징

모든 요금제에 14일 무료 체험 포함

CTA Banner

Z-패턴 행동 유도 배너

지금 바로 시작하세요

무료 체험으로 모든 기능을 경험해보세요

Feature Showcase

번갈아 나타나는 Z-패턴 기능 소개

강력한 분석 도구

실시간으로 데이터를 분석하고 인사이트를 얻으세요.

간편한 협업

팀원들과 실시간으로 협업하고 생산성을 높이세요.

Z-Pattern Design Principles

Z-패턴 디자인 핵심 원칙

1. 단순한 페이지에 적합

콘텐츠가 많지 않은 랜딩 페이지나 배너에 효과적입니다.

2. CTA는 우측 하단에

주요 행동 유도 버튼은 Z의 끝부분인 우측 하단에 배치합니다.

3. 시각적 계층 활용

크기와 대비를 활용해 Z자 흐름을 강화합니다.

4. 좌우 균형 유지

좌측과 우측의 시각적 무게를 균형있게 배치합니다.

관련 스타일 탐색

F-Pattern Layout

사용자의 시선이 F자 형태로 움직이는 패턴을 활용한 레이아웃입니다.

Hero Section

페이지 상단의 대형 섹션으로 주요 메시지와 비주얼을 강력하게 전달합니다.

Storytelling Design

스크롤과 애니메이션을 활용하여 이야기를 전달합니다.