Rule of Thirds 01

왜 웹페이지에 삼등분 법칙이 적용 되어야할까?

웹 사이트에서 제품/서비스를 판매하는 경우 제품의 이미지와 콘텐츠가 사용자의 관심을 끄는 것은 상당히 중요하다. 콘텐츠의 아름다움은 이미지 자체의 아름다움이나 타이포그래피나 색상의 스타일에서만 나올 뿐만 아니라 공간 안에서 각각의 오브젝트를 배열하는 방식에서 아름다움을 더욱 끌어낼 수 있다.

삼등분의 법칙은 르네상스 시대 그림에 처음 사용된 오래된 기법이다. 그러나 웹사이트나 모바일 앱에서의 콘텐츠와 제품 이미지에도 적용할 수 있다. 일반적인 제품 콘텐츠에는 다음 요소가 있다.

제품/서비스 사진
헤드 라인 (제품/서비스명)
바디 카피 (제품/서비스 설명)
CTA 버튼 (목표달성버튼)
배경 그래픽







삼등분 법칙
삼등분 법칙


삼등분 법칙 적용하기

삼등분 법칙 적용을 위해선 스크린 안에서 모듈의 가로와 세로를 1/3로 나눈다. 그러면 9개의 직사각형과 4개의 교차점이 생성된다. 선이 교차하는 곳에 4개의 점을 배치 후. 그리드 교차점이 있는 곳에 가장 중요한 오브젝트를 배치한다. 나머지 오브젝트들은 교차점에 가까울수록 좋다.






삼등분법칙 잘못된방법 예시1
예시 1


잘못된 방법

잘못된 콘텐츠는 삼등분법칙이 잘 적용 돼 있지 않다. 왜냐하면 사용자가 각 오브젝트를보고 페이지 주위로 시선을 움직이게 만들기 때문이다. 상단 제품 이미지 (예시1)에서 그리드 교차점에 닿는 유일한 오브젝트는 제품 사진이다. 다른 모든 오브젝트는 가장자리에 흩어져있어 전체적인 콘텐츠의 집중력이 떨어진다.





삼등분법칙 올바른방법 예시2
예시 2

올바른 방법

제품/서비스 콘텐츠에 1/3의 법칙을 적용하면 사용자에게 제품을 가장 잘 볼 수 있는 방식으로 이러한 요소를 정렬할 수 있다. 상단 제품 이미지 (예시2)에는 각각의 오브젝트 사이에 공간적 균형이 있다.

모든 오브젝트들이 그리드의 교차 선에 닿기 때문에 무시되거나 간과되지 않는다. 사용자가 제품의 콘텐츠를 시각적으로 쉽게 포착할 수 있도록 모든 오브젝트가 정리되어 배열되어있다.




삼등분 법칙은 제품이나 서비스의 콘텐츠를 더 아름답게 만들 수 있는 효과적인 기술이며 사용자가 이미지를 볼 때 시선을 덜 움직이게 한다. 그리고 이것은 제품이나 서비스 판매를 극대화할 수 있는 좋은 방법중에 하나이다.

SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top