<title>🔜 F·Z 패턴 배치 가이드 | 시선은 어디로 흐를까?

캔버스 가로 (px)

캔버스 세로 (px)

경로 패턴

첫 수평선 위치 (세로의 %)

두 번째 수평선 위치 (세로의 %)

두 번째 수평선 길이 (가로의 %, F 패턴에서만 사용)

F·Z 경로를 좌표로 옮기는 방법

시선 흐름 이야기를 할 때 F나 Z를 손으로 그려 보긴 하지만, 시안 위에 안내선을 올리려면 결국 px 좌표가 필요합니다. 캔버스 가로·세로와 수평선 두 개의 위치를 %로 넣으면 선택한 패턴의 구간마다 시작·끝 좌표와 길이, 수직선이나 대각선이 수평선과 만나는 교차점, 경로 전체 길이가 나옵니다. 두 번째 수평선 길이도 직접 넣으므로 F의 짧은 두 번째 줄을 원하는 만큼 줄일 수 있습니다.

좌표 원점은 캔버스 왼쪽 위이고 y는 아래로 증가합니다. 수평선 y는 세로 × 비율, F의 두 번째 선 끝 x는 가로 × 길이 비율로 구합니다. Z의 대각선은 두 수평선 끝을 잇는 선분이라 길이는 피타고라스 정리로, 기울기는 아크탄젠트로 계산해 도 단위로 표시합니다. 표시는 소수 2자리이고 각도는 소수 2자리입니다. 2026년 10월 기준 기하 계산만 쓰며 시선 추적 데이터를 내장하지 않습니다.

이 도구는 경로 좌표만 계산합니다. 어느 구간에 로고·제목·버튼을 두라는 배치안은 제시하지 않습니다. F·Z 패턴은 읽기 행동을 설명하는 모형이고 모든 화면에 들어맞는 정답 좌표는 없기 때문입니다. 실제 시선 추적 결과나 히트맵 분석, 모바일에서의 세로 스크롤 패턴은 다루지 않습니다.

자주 묻는 질문

수평선 위치는 무엇을 기준으로 넣을까?

캔버스 세로 길이에 대한 비율입니다. 시안에서 제목 줄과 본문 첫 줄이 놓인 높이를 재서 비율로 바꿔 넣으면 그 화면에 맞는 경로가 나옵니다.

F와 Z 중 어느 쪽이 맞을까?

이 도구는 고르지 않습니다. 둘 다 읽기 행동을 설명하는 모형이고 공인된 선택 기준이 없어, 콘텐츠 밀도와 화면 목적을 보고 직접 판단해야 합니다.

교차점에 핵심 버튼을 두면 효과가 있을까?

이 도구가 답할 수 있는 범위를 넘습니다. 좌표만 계산하며 전환율 효과는 실제 사용자 데이터로 확인해야 합니다.

🔜시선 흐름 F·Z 패턴 배치 가이드

관련된 도구

비대칭 균형 시각 무게 배치 가이드

대시보드 위젯 배치 그리드 계산기

F·Z 경로를 좌표로 옮기는 방법

자주 묻는 질문

관련된 도구

비대칭 균형 시각 무게 배치 가이드

대시보드 위젯 배치 그리드 계산기

F·Z 경로를 좌표로 옮기는 방법

자주 묻는 질문

같은 카테고리 도구