topic★★★★★난이도 · 약 15분

삼분법과 CTA 배치

화면을 3x3으로 나누고 교차점에 핵심 요소를 배치하는 구도의 기술.

#삼분법#CTA#구도#F패턴

왜 배우는가

삼분법은 사진 구도의 기본이지만, UI에서도 강력하게 작동한다. 히어로 섹션의 CTA 버튼, 랜딩 페이지의 핵심 메시지를 어디에 놓을지 결정하는 데 삼분법이 확실한 가이드를 제공한다.

삼분법(Rule of Thirds)은 화면을 가로 2개, 세로 2개의 선으로 3등분하여 9개의 영역을 만드는 구도 원칙이다. 핵심 요소를 4개의 교차점 중 하나에 배치하면 중앙 배치보다 시각적 긴장감과 흥미가 생긴다.

중앙 배치 vs 삼분법 — 정중앙에 놓으면 안정적이지만 정적이고 지루하다. 삼분법 교차점에 놓으면 약간의 비대칭이 시선을 유도하고 역동성을 준다. 사진에서 수평선을 정중앙이 아닌 상단 1/3 또는 하단 1/3에 놓는 것과 같은 원리다.

UI 영역	삼분법 적용	효과
히어로 섹션	헤드라인을 좌측 상단 교차점, CTA를 좌측 하단 교차점에 배치	시선이 자연스럽게 헤드라인 → CTA로 이동한다
카드 레이아웃	3컬럼 그리드 = 삼분법의 수직 적용	정보가 균등하게 분배되어 스캔이 쉽다
대시보드	핵심 KPI를 상단 1/3에, 상세 차트를 하단 2/3에 배치	요약 → 디테일의 정보 계층이 명확해진다
모바일 앱	엄지가 닿는 하단 1/3에 주요 액션을 배치	사용성과 구도를 동시에 만족한다

삼분법은 엄격한 수학 법칙이 아니라 가이드라인이다. 모든 요소를 교차점에 억지로 맞출 필요는 없다. 핵심은 정중앙을 피하고, 화면에 비대칭적 균형을 만드는 것이다. 특히 랜딩 페이지의 CTA(Call-to-Action) 버튼은 시선 흐름의 끝에 놓아야 클릭률이 높아진다.

F패턴과 삼분법의 조합 — 사용자는 웹페이지를 F자 형태로 스캔한다(Nielsen Norman). 좌측 상단에서 시작하여 오른쪽으로, 다시 왼쪽으로 내려와 오른쪽으로. 이 F패턴의 핵심 지점이 삼분법의 교차점과 거의 일치한다. 헤드라인은 좌상단, CTA는 좌하단 교차점에 놓으면 F패턴 시선 흐름을 자연스럽게 탄다.