디자인에서 가장 어려운 질문 중 하나는 ‘무엇을 만들까?’보다 ‘어디에 둘까?’일지도 몰라요.
같은 버튼이라도 위치가 달라지면 시선의 흐름이 달라지고, 같은 이미지라도 배치가 달라지면 화면의 인상까지 달라지니까요.
사실 이 질문에 먼저 답을 찾아낸 건 화면이 아니라 사진과 예술, 건축이었어요. 오래전부터 예술과 사진에서 쌓아온 구도의 원칙들이, 지금 우리가 매일 들여다보는 화면 위에서도 그대로 통해요.
버튼이나 로고, 이미지처럼 화면 안의 요소는 몇 개 되지 않아요. 그 몇 안 되는 요소를 감이 아니라 검증된 원칙 위에 배치할 수 있다면, 레이아웃 앞의 막막함도 훨씬 수월해져요.
1. 황금비율, 눈이 편안해하는 비례
1:1.618. 이 숫자를 한 번쯤은 들어봤을 거예요.
황금비율이라고 불리는 이 비례는 앵무조개 껍데기의 나선, 해바라기 씨앗의 배열, 심지어 사람 얼굴의 이목구비 간격에서도 반복해서 발견돼요.
자연에서 반복되다보니 사람 눈에는 이 비율이 유독 안정적으로 느껴진대요. 그래서 오래전부터 회화와 건축에서 활용됐고, 지금은 로고나 레이아웃을 설계할 때도 기준선으로 쓰여요.
다만 황금비율을 실무에 그대로 적용하기엔 계산이 꽤 까다로워요. 정확한 1:1.618 비율로 요소를 나누는 건 감으로 되는 일이 아니거든요.
그래서 실무에서는 황금비를 그대로 계산하기보다, 훨씬 간단한 방식으로 비슷한 효과를 얻는 경우가 많아요.
2. 삼분할법, 황금비율보다 쉬운 계산
출처: 뉴트리원
화면을 가로세로 각각 3등분해서 총 9개의 칸으로 나눠보세요. 그리고 그 선들이 교차하는 네 개의 점을 봐요.
그게 바로 삼분할법이에요.
2-1. 정중앙 배치: 안정적인 선택
화면 한가운데에 요소를 놓으면 눈이 흔들릴 곳 없이 편안하게 자리를 잡아요.
이 배치가 특히 힘을 발휘하는 순간은 따로 있는데, 그 얘기는 조금 뒤 대칭 파트에서 더 자세히 짚어볼게요.
2-2. 교차점 배치: 시선이 자연히 머무는 자리
앞서 나눈 9개 칸의 교차점에 요소를 놓으면, 사람의 시선은 화면 한가운데보다 이 지점을 더 오래 바라보는 경향이 있어요.
그래서 랜딩페이지의 핵심 카피나 CTA 버튼을 정중앙이 아니라 교차점 쪽에 살짝 비껴 배치하라는 말을 들어본 적 있을 거예요.
시선이 자연스럽게 그쪽으로 끌려가면서도, 나머지 공간엔 여백이 살아있는 느낌이 들거든요.
황금비율의 원리를 훨씬 쉬운 격자로 바꿔놓은 셈이라, 랜딩페이지의 히어로 이미지, 배너 속 카피나 로고 위치까지 폭넓게 쓰여요.
결국 황금비율도, 삼분할법도 하고 있는 이야기는 하나예요. 정중앙이 항상 정답은 아니라는 거죠.
3. 대칭은 신뢰를, 비대칭은 움직임을
그럼 정중앙은 언제 정답이 될까요. 바로 대칭을 쓸 때예요.
3-1. 대칭: 흔들리지 않는 신뢰감
출처: apple
화면 한가운데를 축으로 양쪽이 똑같이 배치된 구도는 안정적이고 정돈된 인상을 줘요.
병원이나 금융, 공공기관처럼 신뢰가 중요한 브랜드가 대칭 레이아웃을 자주 쓰는 이유가 여기 있어요.
로고를 정중앙에 두고 내비게이션을 좌우로 똑같이 나누는 식으로요. 눈이 어느 한쪽으로 쏠릴 필요가 없으니, 편안하게 정지해요.
3-2. 비대칭: 시선을 깨우는 역동성
출처: magazine-b
반대로 비대칭은 양쪽 무게가 다르게 느껴지도록 요소를 배치해요.
큰 이미지 하나와 작은 텍스트 블록, 혹은 왼쪽엔 여백만 남기고 오른쪽에 모든 요소를 몰아넣는 식으로요.
이렇게 무게가 한쪽으로 쏠리면 시선이 균형을 찾으려고 화면 안을 움직이기 시작해요.
그래서 비대칭 구도는 정적이지 않고, 어딘가 역동적으로 느껴져요. 패션이나 테크, 스타트업처럼 실험적이고 트렌디한 인상을 주고 싶은 브랜드가 비대칭을 즐겨 쓰는 이유죠.
같은 로고, 같은 컬러를 쓰더라도 대칭이냐 비대칭이냐에 따라 브랜드가 주는 인상이 완전히 달라져요. 안정감을 팔 것인가, 역동성을 팔 것인가. 구도가 이미 그 답의 절반을 정해놓는 셈이에요.
4. 결국 구도는, 시선이 도착하는 자리를 만드는 일
황금비율, 삼분할법, 대칭과 비대칭. 이름은 다 다르지만 세 가지가 하고 있는 일은 사실 하나예요. 시선이 어디서 멈출지를 미리 설계해두는 거죠.
지난 글의 F패턴, Z패턴이 눈이 지나가는 길을 그린 거였다면, 구도는 그 길 위에 놓일 정류장을 정하는 일이에요.
아무 데나 서지 않고, 교차점에, 혹은 정중앙에, 혹은 의도적으로 기울어진 자리에 정류장을 세우는 거예요. 로고가 시선을 못 받으면 브랜드는 기억되지 않고, 구매 버튼이 시선 밖에 있으면 아무도 누르지 않겠죠.
그래서 이 세 가지는 지켜야 할 규칙이 아니라, 시선을 원하는 자리로 데려가기 위해 골라 쓰는 도구에 가까워요.
브랜드가 신뢰를 말하고 싶다면 대칭으로 정중앙에 힘을 실을 수 있고, 역동성을 말하고 싶다면 비대칭으로 균형을 흔들 수 있어요.
결국 질문은 하나로 돌아와요.
이 화면에서, 사람들의 눈이 가장 먼저 머물렀으면 하는 자리는 어디일까. 그 답을 먼저 정하고 나면, 황금비율이든 삼분할법이든 대칭이든 비대칭이든 그저 그 자리로 시선을 데려가는 방법일 뿐이에요.
written by 디자이너 이솔
