Ch.3 비율과 조화
삼분법과 CTA 배치
사진작가의 구도 비법이 UI 디자인에도 통한다
사진을 가로·세로 3등분하면 교차점 4개가 생깁니다. 시선이 자연스럽게 머무는 '파워 포인트'입니다.
중앙이 가장 눈에 잘 띄는 거 아닌가요?
중앙 배치는 안정적이지만 지루합니다. 삼분법은 시선을 끌면서도 균형을 유지하는 비결입니다.
핵심 내용
화면을 9등분하면 시선의 교차점이 보인다
삼분법(Rule of Thirds)은 화면을 가로 3등분, 세로 3등분하여 총 9개 영역으로 나누는 구도 원칙입니다. 사진, 영화, 회화에서 수백 년간 사용되어 왔습니다.
4개의 분할선이 만나는 교차점을 '파워 포인트'라고 부릅니다. 인간의 시선은 정확히 중앙보다 이 교차점 근처에 자연스럽게 머무는 경향이 있습니다.
삼분법의 핵심: 주인공을 중앙이 아닌 '교차점'에 배치하라
사진에서의 예시: 인물 사진에서 눈의 위치를 상단 1/3 선에 맞추면 안정적이면서도 생동감 있는 구도가 됩니다. 풍경 사진에서 수평선을 하단 1/3 또는 상단 1/3에 놓으면 하늘 또는 지면의 비중을 조절할 수 있습니다.
웹사이트의 첫 화면, 삼분법으로 설계하기
왜 좌하단 교차점이 CTA 최적 위치인가? 사용자의 시선 흐름은 보통 Z패턴(좌상→우상→좌하→우하)을 따릅니다. 헤드라인(좌상)을 읽고, 이미지(우측)를 훑은 뒤, 시선이 자연스럽게 좌하단으로 내려옵니다. 이 위치에 CTA를 놓으면 별도의 시선 유도 없이 클릭을 유도할 수 있습니다.
삼분법 + Z패턴 = CTA 최적 배치
중앙이 항상 나쁜 건 아닙니다. 상황에 따라 다릅니다
Z패턴 시선 흐름에서 CTA 버튼을 배치하기에 가장 효과적인 위치는?
삼분법에서 화면은 총 6개의 영역으로 나뉜다
핵심 용어
좌측 1/3
헤드라인 텍스트 배치 — 시선이 자연스럽게 시작하는 영역 (좌→우 읽기 문화권)
우측 2/3
히어로 이미지 또는 일러스트 — 시각적 무게감이 큰 요소
좌하단 교차점
CTA 버튼의 이상적 위치 — 헤드라인을 읽고 자연스럽게 시선이 내려오는 지점
비교 정리
| 항목 | 중앙 배치 | 삼분법 배치 |
|---|---|---|
| 느낌 | 안정적, 정적, 공식적 | 역동적, 자연스러운, 시선 유도 |
| 적합한 경우 | 로그인 페이지, 에러 페이지, 단일 메시지 | 랜딩 페이지, 상품 상세, 블로그 헤더 |
| CTA 효과 | 시선을 끌지만 행동 유도력이 약함 | 자연스러운 시선 흐름 끝에 CTA 도달 |
단일 초점 → 중앙 / 스토리텔링·전환 유도 → 삼분법
핵심 정리
- 1삼분법: 화면을 9등분, 4개 교차점이 시선의 '파워 포인트'
- 2히어로 섹션: 헤드라인(좌1/3) + 비주얼(우2/3) + CTA(좌하단 교차점)
- 3Z패턴 시선 흐름과 삼분법을 결합하면 CTA 전환율이 높아진다
- 4중앙 배치는 단일 초점에 적합, 삼분법은 스토리텔링에 적합
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작