# 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

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

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

← 홈으로 돌아가기

F-Pattern Layout

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

연도

2006

#795548

핵심 원칙

1

시선 흐름 활용

2

중요도 순 배치

3

자연스러운 읽기

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

UI 컴포넌트 예제

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

F-Pattern Reading Flow

사용자의 시선이 F자 형태로 움직이는 패턴

F-Pattern 레이아웃

사용자는 먼저 상단을 가로로 스캔합니다. 이것이 F의 첫 번째 가로줄입니다.

그 다음 아래로 내려가면서 두 번째 가로줄을 스캔하지만, 첫 번째보다는 짧게 읽습니다.

마지막으로 왼쪽을 따라 세로로 스캔하며 내용을 훑어봅니다.

Blog Post Layout

F-패턴에 최적화된 블로그 레이아웃

중요한 제목이 상단에 위치합니다

2024년 1월 15일•5분 읽기

첫 문단은 굵게 표시하여 사용자의 시선을 끕니다. 가장 중요한 정보를 여기에 배치합니다.

두 번째 문단에는 부가적인 정보를 제공합니다. 사용자가 계속 읽도록 유도하는 내용을 포함합니다.

중요 소제목

소제목도 왼쪽 정렬되어 스캔하기 쉽습니다.

  • 불릿 포인트는 왼쪽에 정렬
  • 빠르게 스캔 가능
  • 핵심 정보 강조

Product List F-Pattern

상품 목록에 F-패턴 적용

제품명이 가장 먼저 보입니다

간단한 설명이 두 번째로 읽힙니다. 사용자는 이를 빠르게 스캔합니다.

$29.99

두 번째 제품의 제목

각 항목이 동일한 구조를 가져 스캔이 쉽습니다.

$39.99

Search Results Layout

검색 결과에 적합한 F-패턴

약 1,234개의 결과 (0.45초)

첫 번째 검색 결과 제목 - 중요한 키워드 포함

https://example.com/page1

검색 결과의 설명 텍스트가 여기에 표시됩니다. 사용자는 이 부분을 빠르게 스캔하여 원하는 정보가 있는지 확인합니다. 관련 키워드가 강조됩니다.

두 번째 검색 결과 - 관련성 높은 페이지

https://example.com/page2

사용자는 왼쪽부터 시작하여 제목을 읽고, 관심이 있으면 설명을 읽습니다. 이런 패턴이 F자 형태를 만듭니다.

세 번째 결과 - 추가 정보

https://example.com/page3

아래로 내려갈수록 사용자는 더 짧게 스캔하는 경향이 있습니다.

Article Layout

기사 형태의 F-패턴 레이아웃

TECHNOLOGY

왼쪽 정렬된 큰 제목이 시선을 사로잡습니다

작성자 이름
2024년 1월 15일

첫 문단은 리드 문단으로, 기사의 핵심을 요약합니다. 독자는 이 부분을 완전히 읽을 가능성이 높습니다.

두 번째 문단부터는 사용자가 더 빠르게 스캔합니다. 중요한 정보는 문단의 앞부분에 배치하는 것이 좋습니다.

세 번째 문단은 더 짧게 읽히거나 건너뛸 수 있습니다.

F-Pattern Design Principles

F-패턴 디자인 핵심 원칙

1. 중요한 정보는 상단에

가장 중요한 내용은 페이지 상단에 배치합니다.

2. 왼쪽 정렬 사용

제목과 본문을 왼쪽에 정렬하여 스캔을 용이하게 합니다.

3. 명확한 계층 구조

제목, 소제목, 본문의 계층을 명확히 구분합니다.

4. 핵심은 문단 앞부분에

각 문단의 중요한 내용은 앞부분에 배치합니다.

관련 스타일 탐색

Z-Pattern Layout

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

Swiss Design (국제 타이포그래피 양식)

스위스에서 발전한 그래픽 디자인 스타일로, 명료성과 객관성을 강조합니다.

Minimalism

"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다.