시선의 동선을 고려한 디자인

상세페이지

  • HOME > 디지털 디자인

시선의 동선을 고려한 디자인

지난 회차에서는 ‘웹스타일 가이드를 통한 효율적이고 일관된 웹디자인’이라는 주제로 웹스타일의 개념과 가이드가 필요한 이유, 활용 방법 등에 대해 알아봤다.
이번 회차에서는 권오형 디자이너와 함께 하는 마지막 시간으로 디자인 작업에서의 시선의 흐름, 그 중요성과 사례 분석을 통한 레이아웃 배치의 효율성을 살펴보려고 한다.



권오형 wizrdbass@me.com
프리랜서 디자이너로 일하고 있으며, 5bro라는 이름의 브런치 작가로 활동 중이다(brunch.co.kr/@5bro). 최근에는 ‘웹사이트 디자인 제작기’라는 주제로 웹사이트 디자인 실습 강좌를 진행하고 있다.
좋은 디자인의 레이아웃은 자연스러운 흐름을 가지고 있고, 그러한 흐름은 콘텐츠를 보다 효과적으로 사용자에게 전달할 수 있다. 때로는 중요한 내용과 덜 중요한 내용을 구분하는 방법으로 사용되기도 한다. 또한, 시선의 동선을 고려한 레이아웃은 보기도 편하고 디자인에 안정감을 부여한다. 디자인 작업에서 시선의 동선을 고려한 레이아웃을 배치하는 법을 알아보도록 하자.

보통 책을 읽을 때 좌에서 우로 읽는다. 무언가를 볼 때도 ‘좌에서 우’의 흐름이 익숙하다. 무의식적으로 이러한 패턴이 익숙하고 편하다고 느껴진다.
시선의 흐름은 디자인에 있어 중요한 요소이다. 무언가를 막연히 혹은 어떠한 의도로 보기 위해 시선을 두며 그 대상이 되는 콘텐츠는 시선의 흐름을 효과적으로 이끌기 위해 레이아웃을 고민한다. 예를 들어 중요한 콘텐츠를 좀 더 돋보이게 하기 위해 포인트 컬러를 활용한다거나, 여러 기법을 활용해 시선을 선점하도록 의도한다.


자연스러운 흐름

디자인의 레이아웃을 고민할 때 의도적으로 시선의 흐름을 의식하고 배치한다는 것이 말처럼 쉽지는 않다. 시선이 ‘Z’ 모양을 흐른다고 해서 모든 오브젝트를 ‘Z’처럼 배치할 수는 없다.
‘시선이 왼쪽에 위치해 오른쪽으로 흐른 다음 밑으로 이어진다’라는 느낌으로 이해하는 편이 좀 더 적합하다. 실제로 잘돼있는 레퍼런스들은 이러한 흐름이 자연스럽게 이어져 있음을 확인할 수 있다.
아래 그림은 예전에 작업했던 제품 상세페이지인데, 그림의 B를 보면 제품 이미지와 다양한 디자인 요소들을 좌측에서 우측으로 시선의 흐름을 염두에 두며 배치됨을 알 수 있다. 오브젝트의 위치를 선정할 때 이러한 동선을 고려해 그 흐름 위에 올려놓는 느낌으로 배치를 하면 한결 이해하기 수월할 것 같다.

이러한 배치를 함으로써 C와 같이 자연스러운 시선의 흐름을 유도할 수 있으며 안정된 레이아웃을 구성할 수 있다.
시선의 동선 위에 오브젝트를 배치한다는 느낌이지만 오브젝트가 지닌 콘텐츠의 속성을 무시하면 안 된다.

시각적인 무게감

오브젝트의 시각적 무게감을 ‘볼륨감’이라고도 한다. 보통 상단에 큰 볼륨감을 느끼며, 하단으로 갈수록 볼륨감은 작아지는 것이 일반적이다. 볼륨감은 곧 콘텐츠의 중요도와 연결되기 때문에 배치하고자 하는 오브젝트의 콘텐츠 성격을 사전에 분석하는 것 또한 중요한 디자인 과정 중 하나이다.
시선의 흐름을 고려해 배치하지만, 그 바탕엔 ‘그리드 시스템’이 적용돼야 레이아웃에 일관성을 부여할 수 있다는 점도 잊지 말자. 시선의 흐름은 여러 분야에서 과학적인 검증을 통해 적극적으로 적용되기도 한다. 아래 이미지와 같이 사용자 시선의 궤적을 반영해 적절한 콘텐츠의 위치를 정하기도 한다.

출처. www.useit.com

이와 같은 방식을 아이트래킹(eye tracking)기법이라 하는데 웹, 앱, 광고 등 여러 분야에 활용되고 있다.
디자인 벤치마킹 단계에서도 시선의 흐름이 적절히 적용된 레이아웃을 충분히 고려해 리서치하는 것도 좋은 습관이다. 무의식적으로 보기 편하고 안정적인 편집감을 지닌 레이아웃이 보통 이러한 요소를 적절히 충족시키는 경우가 많다

사례를 통한 시선의 흐름 분석

① 이미지, 텍스트 등의 오브젝트를 배치함으로써 자연스럽게 시선의 흐름을 유도한다. 특히 인물 및 특정 자세가 들어간 이미지를 쓸 때 시
선의 위치와 자세의 방향에 따라 시선의 흐름을 더욱더 자연스럽게 연결할 수 있다.

출처. Pinterest

② 면을 사선으로 분할해 배치한 점이 특이하다. 사선의 각도로 인해 시선의 흐름을 유도하지만, 사선의 느낌이 하단까지 반복적으로 이루어져 있어 상단 비주얼과 하단 콘텐츠 영역의 볼륨 차이가 작게 느껴지는 점은 아쉽다.


③ 상단의 빅비주얼 영역에서 하단의 콘텐츠 영역까지의 흐름이 부드럽다. 콘텐츠의 중요도에 따라 이미지의 볼륨감을 적절히 삽입했다.


마치며

보기 편한 디자인은 안정적인 레이아웃의 요건을 갖춘 경우가 많다. 시선의 흐름을 고려해 배치한 다음 각 오브젝트의 콘텐츠 성격에 따라 볼륨감을 부여해보는 방법은 어떨까?
강조를 하기 위한 방법으로는 보색을 사용하거나, 혹은 과감한 텍스트를 사용하거나 보다 과감한 시도를 하는 것도 좋은 방법일 수 있다. 안정감을 바탕으로 약간의 변칙성을 부여한다면 디자인에 재미와 신선함을 첨가할 수도 있다. 혹시 전에 작업했던 디자인을 꺼내본 다음 시선의 동선이 반영된 레이아웃이 잘 배치됐는지 체크해 보는 것도 좋은 방법일 수 있다.  

tags 디아이매거진 , 디아이투데이 , ditoday , 권오형 , 오브로 , 5bro , 디자이너 , 디자인

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
월드리포트
뷰티 서비스의 새로운 바람, 스마트 뷰티
기업탐방
나를 성장시키는 디딤돌, 아이파트너즈
디지털 디자인
시선의 동선을 고려한 디자인
리뷰 & 하우투
유쾌함을 주는 아이디어
리뷰 & 하우투
03 오늘 나는 모바일 은행을 찾았다

정기구독신청