# F-Pattern Layout — 디자인 스타일 가이드
## 기본 정보
- **ID**: f-pattern
- **카테고리**: ui-pattern
- **연도**: 2006
## 설명
사용자의 시선이 F자 형태로 움직이는 패턴을 활용한 레이아웃입니다.
## 핵심 원칙
- 시선 흐름 활용
- 중요도 순 배치
- 자연스러운 읽기
## 주요 특징
- 왼쪽 정렬 콘텐츠
- 중요 정보 상단 배치
- 시각적 계층 구조
- 스캔 최적화
- 자연스러운 흐름
## 컬러 시스템 가이드
F패턴 시선 경로를 강화하는 배치 중심. 색보다 레이아웃이 핵심
### 색상 역할
- heading: 첫 번째 F 수평선 — 가장 강한 시각 강조
- subheading: 두 번째 수평선 — 두 번째 강조
- body: F 수직 경로 — 좌측 정렬
### 색상 제약 조건
- 중요 정보는 반드시 좌측 상단
- 우측 콘텐츠에 중요 정보 배치 금지
### 다크모드 전략
색상 역할 유지, 배경만 전환
### 대비 요구사항
heading > subheading > body 순으로 강한 대비
## 타이포그래피 가이드
- **폰트 성격**: 가독성 최우선 — 빠른 스캐닝에 적합한 산세리프
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: 1.25 이상
### 타이포그래피 제약
- 좌측 정렬 필수 — F패턴은 좌측 스캔 기반
- heading 크게, bold — 시선이 먼저 닿는 요소
## 하면 안 되는 것 (안티패턴)
- 중요 콘텐츠 중앙·우측 정렬 금지
- 좌측 여백 과다 금지 — F 스캔 경로 방해
## 반드시 포함해야 하는 것
- 강한 H1, 명확한 H2 위계
- 좌측 정렬 기반 레이아웃
## 모션 가이드
스크롤 기반 진입 애니메이션. 좌측에서 우측으로 fade-in.
## 사용 사례
- 텍스트 중심 웹페이지
- 뉴스·블로그 사이트
- 검색 결과 페이지
- 이메일 뉴스레터
## 추천 프로젝트 유형
- 뉴스·블로그
- 검색 결과 페이지
- 텍스트 중심 콘텐츠
- 이메일 뉴스레터
## 장점
- 인간의 자연 시선 흐름과 일치
- 텍스트 스캔 효율 향상
- SEO 콘텐츠와 잘 어울림
## 단점·한계
- 시각적으로 단조롭고 지루할 수 있음
- 이미지·비주얼 중심 콘텐츠엔 부적합
- 모바일에서는 Z-Pattern이 더 적합한 경우 있음
## 관련 스타일
- [z-pattern](https://ui.buildersgate.com/styles/z-pattern)
- [swiss-design](https://ui.buildersgate.com/styles/swiss-design)
- [minimalism](https://ui.buildersgate.com/styles/minimalism)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #795548
- secondary: #5D4037
- accent: #FF8A65
- background: #FAF9F7
- surface: #FFFFFF
- text: #1A1A1A
- textSecondary: #616161
- border: #D7CCC8
### 헤더
- background: #795548
- textColor: #FFFFFF
- accentColor: #FF8A65
### 타이포그래피
- fontFamily: 'Georgia', 'Nanum Myeongjo', serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1.2
### 그림자 (Shadows)
- sm: 0 1px 3px rgba(121,85,72,0.10)
- md: 0 4px 10px rgba(121,85,72,0.12)
- lg: 0 8px 20px rgba(121,85,72,0.15)
- xl: 0 16px 36px rgba(121,85,72,0.18)
### Border Radius
- none: 0
- sm: 2px
- md: 4px
- lg: 8px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #D7CCC8
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease
### 애니메이션
- duration: 200ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=square / hoverEffect=darken / textTransform=none
- 카드: style=flat / hoverEffect=border
- 인풋: style=underlined / focusEffect=border
- 배지: shape=rounded / style=outlined
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=20
### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: F-Pattern Layout이란 무엇인가요?
A: 사용자의 시선이 F자 형태로 움직이는 패턴을 활용한 레이아웃입니다.
### Q: F-Pattern Layout의 핵심 디자인 원칙은 무엇인가요?
A: F-Pattern Layout의 핵심 원칙은 시선 흐름 활용, 중요도 순 배치, 자연스러운 읽기입니다.
### Q: F-Pattern Layout은 어떤 프로젝트에 적합한가요?
A: F-Pattern Layout은 텍스트 중심 웹페이지, 뉴스·블로그 사이트, 검색 결과 페이지, 이메일 뉴스레터, 뉴스·블로그, 검색 결과 페이지, 텍스트 중심 콘텐츠, 이메일 뉴스레터 등의 프로젝트에 적합합니다.
### Q: F-Pattern Layout의 장단점은 무엇인가요?
A: 장점으로는 인간의 자연 시선 흐름과 일치, 텍스트 스캔 효율 향상, SEO 콘텐츠와 잘 어울림이 있습니다. 단점으로는 시각적으로 단조롭고 지루할 수 있음, 이미지·비주얼 중심 콘텐츠엔 부적합, 모바일에서는 Z-Pattern이 더 적합한 경우 있음이 있습니다.
### Q: F-Pattern Layout에서 색상은 어떻게 사용하나요?
A: F패턴 시선 경로를 강화하는 배치 중심. 색보다 레이아웃이 핵심 색상 역할은 heading: 첫 번째 F 수평선 — 가장 강한 시각 강조, subheading: 두 번째 수평선 — 두 번째 강조, body: F 수직 경로 — 좌측 정렬입니다. 주의사항: 중요 정보는 반드시 좌측 상단, 우측 콘텐츠에 중요 정보 배치 금지.
### Q: F-Pattern Layout에 어울리는 폰트 스타일은 무엇인가요?
A: F-Pattern Layout에는 가독성 최우선 — 빠른 스캐닝에 적합한 산세리프 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 좌측 정렬 필수 — F패턴은 좌측 스캔 기반, heading 크게, bold — 시선이 먼저 닿는 요소.
### Q: F-Pattern Layout 디자인에서 하면 안 되는 것은 무엇인가요?
A: F-Pattern Layout에서 피해야 할 것: 중요 콘텐츠 중앙·우측 정렬 금지, 좌측 여백 과다 금지 — F 스캔 경로 방해.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=f-pattern
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=f-pattern&merged=true
F-Pattern Layout은 텍스트 중심 웹페이지, 뉴스·블로그 사이트, 검색 결과 페이지, 이메일 뉴스레터, 뉴스·블로그, 검색 결과 페이지, 텍스트 중심 콘텐츠, 이메일 뉴스레터 등의 프로젝트에 적합합니다.
F-Pattern Layout의 장단점은 무엇인가요?
장점으로는 인간의 자연 시선 흐름과 일치, 텍스트 스캔 효율 향상, SEO 콘텐츠와 잘 어울림이 있습니다. 단점으로는 시각적으로 단조롭고 지루할 수 있음, 이미지·비주얼 중심 콘텐츠엔 부적합, 모바일에서는 Z-Pattern이 더 적합한 경우 있음이 있습니다.
F-Pattern Layout에서 색상은 어떻게 사용하나요?
F패턴 시선 경로를 강화하는 배치 중심. 색보다 레이아웃이 핵심 색상 역할은 heading: 첫 번째 F 수평선 — 가장 강한 시각 강조, subheading: 두 번째 수평선 — 두 번째 강조, body: F 수직 경로 — 좌측 정렬입니다. 주의사항: 중요 정보는 반드시 좌측 상단, 우측 콘텐츠에 중요 정보 배치 금지.
F-Pattern Layout에 어울리는 폰트 스타일은 무엇인가요?
F-Pattern Layout에는 가독성 최우선 — 빠른 스캐닝에 적합한 산세리프 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 좌측 정렬 필수 — F패턴은 좌측 스캔 기반, heading 크게, bold — 시선이 먼저 닿는 요소.
F-Pattern Layout 디자인에서 하면 안 되는 것은 무엇인가요?
F-Pattern Layout에서 피해야 할 것: 중요 콘텐츠 중앙·우측 정렬 금지, 좌측 여백 과다 금지 — F 스캔 경로 방해.