# F-Pattern Layout

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

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

## 정의

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

## 주요 특징

- 왼쪽 정렬 콘텐츠
- 중요 정보 상단 배치
- 시각적 계층 구조
- 스캔 최적화
- 자연스러운 흐름

## 핵심 원칙

- 시선 흐름 활용
- 중요도 순 배치
- 자연스러운 읽기

## 컬러 시스템

F패턴 시선 경로를 강화하는 배치 중심. 색보다 레이아웃이 핵심

### 색상 역할

- heading: 첫 번째 F 수평선 — 가장 강한 시각 강조
- subheading: 두 번째 수평선 — 두 번째 강조
- body: F 수직 경로 — 좌측 정렬

### 색상 제약

- 중요 정보는 반드시 좌측 상단
- 우측 콘텐츠에 중요 정보 배치 금지

### 다크모드 전략

색상 역할 유지, 배경만 전환

### 대비 요구사항

heading > subheading > body 순으로 강한 대비

## 타이포그래피

- 폰트 성격: 가독성 최우선 — 빠른 스캐닝에 적합한 산세리프
- 권장 폰트 수: 최대 2개
- 타입 스케일: 1.25 이상

### 타이포그래피 제약

- 좌측 정렬 필수 — F패턴은 좌측 스캔 기반
- heading 크게, bold — 시선이 먼저 닿는 요소

## 설계 제약

### 하면 안 되는 것

- 중요 콘텐츠 중앙·우측 정렬 금지
- 좌측 여백 과다 금지 — F 스캔 경로 방해

### 반드시 포함할 것

- 강한 H1, 명확한 H2 위계
- 좌측 정렬 기반 레이아웃

### 모션 가이드

스크롤 기반 진입 애니메이션. 좌측에서 우측으로 fade-in.

## 사용 사례

- 텍스트 중심 웹페이지
- 뉴스·블로그 사이트
- 검색 결과 페이지
- 이메일 뉴스레터

## 추천 프로젝트 유형

- 뉴스·블로그
- 검색 결과 페이지
- 텍스트 중심 콘텐츠
- 이메일 뉴스레터

## 장단점

### 장점

- 인간의 자연 시선 흐름과 일치
- 텍스트 스캔 효율 향상
- SEO 콘텐츠와 잘 어울림

### 단점·한계

- 시각적으로 단조롭고 지루할 수 있음
- 이미지·비주얼 중심 콘텐츠엔 부적합
- 모바일에서는 Z-Pattern이 더 적합한 경우 있음

## 자주 묻는 질문

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

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

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

F-Pattern Layout의 핵심 원칙은 시선 흐름 활용, 중요도 순 배치, 자연스러운 읽기입니다.

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

F-Pattern Layout은 텍스트 중심 웹페이지, 뉴스·블로그 사이트, 검색 결과 페이지, 이메일 뉴스레터, 뉴스·블로그, 검색 결과 페이지, 텍스트 중심 콘텐츠, 이메일 뉴스레터 등의 프로젝트에 적합합니다.

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

장점으로는 인간의 자연 시선 흐름과 일치, 텍스트 스캔 효율 향상, SEO 콘텐츠와 잘 어울림이 있습니다. 단점으로는 시각적으로 단조롭고 지루할 수 있음, 이미지·비주얼 중심 콘텐츠엔 부적합, 모바일에서는 Z-Pattern이 더 적합한 경우 있음이 있습니다.

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

F패턴 시선 경로를 강화하는 배치 중심. 색보다 레이아웃이 핵심 색상 역할은 heading: 첫 번째 F 수평선 — 가장 강한 시각 강조, subheading: 두 번째 수평선 — 두 번째 강조, body: F 수직 경로 — 좌측 정렬입니다. 주의사항: 중요 정보는 반드시 좌측 상단, 우측 콘텐츠에 중요 정보 배치 금지.

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

F-Pattern Layout에는 가독성 최우선 — 빠른 스캐닝에 적합한 산세리프 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 좌측 정렬 필수 — F패턴은 좌측 스캔 기반, heading 크게, bold — 시선이 먼저 닿는 요소.

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

F-Pattern Layout에서 피해야 할 것: 중요 콘텐츠 중앙·우측 정렬 금지, 좌측 여백 과다 금지 — F 스캔 경로 방해.

## 참고 디자인 토큰

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

### 색상

- primary: #795548
- secondary: #5D4037
- accent: #FF8A65
- background: #FAF9F7
- surface: #FFFFFF
- text: #1A1A1A
- textSecondary: #616161
- border: #D7CCC8

### 타이포그래피

- fontFamily: 'Georgia', 'Nanum Myeongjo', serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

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

- spacing: unit 8px × scale 1.2
- borderRadius: sm 2px / md 4px / lg 8px / full 9999px
- shadow sm: 0 1px 3px rgba(121,85,72,0.10)
- shadow md: 0 4px 10px rgba(121,85,72,0.12)
- shadow lg: 0 8px 20px rgba(121,85,72,0.15)
- border: 1px solid #D7CCC8

### 컴포넌트 형태

- button: square / hover darken / text none
- card: flat / hover border
- input: underlined / focus border
- badge: rounded / outlined
- icon: lucide / stroke 1.5 / size 20px
- layout: boxed / section spacious
- animation: 200ms ease

## 관련 링크

### 관련 스타일

- [Z-Pattern Layout](https://ui.buildersgate.com/styles/z-pattern)
- [Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/styles/swiss-design)
- [Minimalism](https://ui.buildersgate.com/styles/minimalism)

---

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

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