# 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
## 자주 묻는 질문 (FAQ)
### Q: Z-Pattern Layout이란 무엇인가요?
A: 시선이 Z자 형태로 움직이도록 설계된 레이아웃 패턴입니다.
### Q: Z-Pattern Layout의 핵심 디자인 원칙은 무엇인가요?
A: Z-Pattern Layout의 핵심 원칙은 자연스러운 시선 흐름, 효과적인 CTA 배치, 단순성입니다.
### Q: Z-Pattern Layout은 어떤 프로젝트에 적합한가요?
A: Z-Pattern Layout은 랜딩 페이지, 광고 배너, Hero Section, 단일 목적 페이지, 랜딩 페이지, 광고·마케팅 페이지, Hero Section, 단일 CTA 페이지 등의 프로젝트에 적합합니다.
### Q: Z-Pattern Layout의 장단점은 무엇인가요?
A: 장점으로는 CTA 배치가 자연스럽고 효과적, 단순한 메시지 전달에 탁월, 시선 유도 예측이 가능이 있습니다. 단점으로는 콘텐츠가 많거나 복잡하면 효과 감소, 텍스트 많은 페이지엔 F-Pattern이 더 적합이 있습니다.
### Q: Z-Pattern Layout에서 색상은 어떻게 사용하나요?
A: Z패턴 시선 경로의 네 지점 강조. 좌상→우상→좌하→우하 순서 색상 역할은 point-1 (좌상): 로고·브랜드 — 인식색, point-2 (우상): CTA — 강조색, point-3 (좌하): 보조 정보입니다. 주의사항: Z 경로의 4포인트에 핵심 요소 집중 배치, Z 대각선 경로 외 영역에 중요 정보 배치 금지.
### Q: Z-Pattern Layout에 어울리는 폰트 스타일은 무엇인가요?
A: Z-Pattern Layout에는 랜딩 페이지에 적합한 임팩트 있는 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: Hero 섹션 heading 매우 크게, Z 경로 포인트 간 시각 대비 충분히.
### Q: Z-Pattern Layout 디자인에서 하면 안 되는 것은 무엇인가요?
A: Z-Pattern Layout에서 피해야 할 것: Z 경로 4지점에 약한 요소 배치 금지, 중앙 집중형 레이아웃 — Z패턴은 좌우 이동 기반.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=z-pattern
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=z-pattern&merged=true
Z-Pattern Layout의 핵심 원칙은 자연스러운 시선 흐름, 효과적인 CTA 배치, 단순성입니다.
Z-Pattern Layout은 어떤 프로젝트에 적합한가요?
Z-Pattern Layout은 랜딩 페이지, 광고 배너, Hero Section, 단일 목적 페이지, 랜딩 페이지, 광고·마케팅 페이지, Hero Section, 단일 CTA 페이지 등의 프로젝트에 적합합니다.
Z-Pattern Layout의 장단점은 무엇인가요?
장점으로는 CTA 배치가 자연스럽고 효과적, 단순한 메시지 전달에 탁월, 시선 유도 예측이 가능이 있습니다. 단점으로는 콘텐츠가 많거나 복잡하면 효과 감소, 텍스트 많은 페이지엔 F-Pattern이 더 적합이 있습니다.
Z-Pattern Layout에서 색상은 어떻게 사용하나요?
Z패턴 시선 경로의 네 지점 강조. 좌상→우상→좌하→우하 순서 색상 역할은 point-1 (좌상): 로고·브랜드 — 인식색, point-2 (우상): CTA — 강조색, point-3 (좌하): 보조 정보입니다. 주의사항: Z 경로의 4포인트에 핵심 요소 집중 배치, Z 대각선 경로 외 영역에 중요 정보 배치 금지.
Z-Pattern Layout에 어울리는 폰트 스타일은 무엇인가요?
Z-Pattern Layout에는 랜딩 페이지에 적합한 임팩트 있는 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: Hero 섹션 heading 매우 크게, Z 경로 포인트 간 시각 대비 충분히.
Z-Pattern Layout 디자인에서 하면 안 되는 것은 무엇인가요?
Z-Pattern Layout에서 피해야 할 것: Z 경로 4지점에 약한 요소 배치 금지, 중앙 집중형 레이아웃 — Z패턴은 좌우 이동 기반.