시선의 동선을 고려한 디자인
디자인 작업에서의 시선의 흐름, 그 중요성과 사례 분석을 통한 레이아웃 배치의 효율성
디자인 작업에서의 시선의 흐름, 그 중요성과 사례 분석을 통한 레이아웃 배치의 효율성을 살펴보려고 한다.
좋은 디자인의 레이아웃은 자연스러운 흐름을 가지고 있고, 그러한 흐름은 콘텐츠를 보다 효과적으로 사용자에게 전달할 수 있다. 때로는 중요한 내용과 덜 중요한 내용을 구분하는 방법으로 사용되기도 한다. 또한, 시선의 동선을 고려한 레이아웃은 보기도 편하고 디자인에 안정감을 부여한다. 디자인 작업에서 시선의 동선을 고려한 레이아웃을 배치하는 법을 알아보도록 하자.
보통 책을 읽을 때 좌에서 우로 읽는다. 무언가를 볼 때도 ‘좌에서 우’의 흐름이 익숙하다. 무의식적으로 이러한 패턴이 익숙하고 편하다고 느껴진다.
시선의 흐름은 디자인에 있어 중요한 요소이다. 무언가를 막연히 혹은 어떠한 의도로 보기 위해 시선을 두며 그 대상이 되는 콘텐츠는 시선의 흐름을 효과적으로 이끌기 위해 레이아웃을 고민한다. 예를 들어 중요한 콘텐츠를 좀 더 돋보이게 하기 위해 포인트 컬러를 활용한다거나, 여러 기법을 활용해 시선을 선점하도록 의도한다.
자연스러운 흐름
디자인의 레이아웃을 고민할 때 의도적으로 시선의 흐름을 의식하고 배치한다는 것이 말처럼 쉽지는 않다. 시선이 ‘Z’ 모양을 흐른다고 해서 모든 오브젝트를 ‘Z’처럼 배치할 수는 없다.
‘시선이 왼쪽에 위치해 오른쪽으로 흐른 다음 밑으로 이어진다’라는 느낌으로 이해하는 편이 좀 더 적합하다. 실제로 잘돼있는 레퍼런스들은 이러한 흐름이 자연스럽게 이어져 있음을 확인할 수 있다.
아래 그림은 예전에 작업했던 제품 상세페이지인데, 그림의 B를 보면 제품 이미지와 다양한 디자인 요소들을 좌측에서 우측으로 시선의 흐름을 염두에 두며 배치됨을 알 수 있다. 오브젝트의 위치를 선정할 때 이러한 동선을 고려해 그 흐름 위에 올려놓는 느낌으로 배치를 하면 한결 이해하기 수월할 것 같다.
이러한 배치를 함으로써 C와 같이 자연스러운 시선의 흐름을 유도할 수 있으며 안정된 레이아웃을 구성할 수 있다.
시선의 동선 위에 오브젝트를 배치한다는 느낌이지만 오브젝트가 지닌 콘텐츠의 속성을 무시하면 안 된다.
시각적인 무게감
오브젝트의 시각적 무게감을 ‘볼륨감’이라고도 한다. 보통 상단에 큰 볼륨감을 느끼며, 하단으로 갈수록 볼륨감은 작아지는 것이 일반적이다. 볼륨감은 곧 콘텐츠의 중요도와 연결되기 때문에 배치하고자 하는 오브젝트의 콘텐츠 성격을 사전에 분석하는 것 또한 중요한 디자인 과정 중 하나이다.
시선의 흐름을 고려해 배치하지만, 그 바탕엔 ‘그리드 시스템’이 적용돼야 레이아웃에 일관성을 부여할 수 있다는 점도 잊지 말자. 시선의 흐름은 여러 분야에서 과학적인 검증을 통해 적극적으로 적용되기도 한다. 아래 이미지와 같이 사용자 시선의 궤적을 반영해 적절한 콘텐츠의 위치를 정하기도 한다.
이와 같은 방식을 아이트래킹(eye tracking)기법이라 하는데 웹, 앱, 광고 등 여러 분야에 활용되고 있다.
디자인 벤치마킹 단계에서도 시선의 흐름이 적절히 적용된 레이아웃을 충분히 고려해 리서치하는 것도 좋은 습관이다. 무의식적으로 보기 편하고 안정적인 편집감을 지닌 레이아웃이 보통 이러한 요소를 적절히 충족시키는 경우가 많다.
사례를 통한 시선의 흐름 분석
① 이미지, 텍스트 등의 오브젝트를 배치함으로써 자연스럽게 시선의 흐름을 유도한다. 특히 인물 및 특정 자세가 들어간 이미지를 쓸 때 시선의 위치와 자세의 방향에 따라 시선의 흐름을 더욱더 자연스럽게 연결할 수 있다.
② 면을 사선으로 분할해 배치한 점이 특이하다. 사선의 각도로 인해 시선의 흐름을 유도하지만, 사선의 느낌이 하단까지 반복적으로 이루어져 있어 상단 비주얼과 하단 콘텐츠 영역의 볼륨 차이가 작게 느껴지는 점은 아쉽다.
③ 상단의 빅비주얼 영역에서 하단의 콘텐츠 영역까지의 흐름이 부드럽다. 콘텐츠의 중요도에 따라 이미지의 볼륨감을 적절히 삽입했다.
마치며
보기 편한 디자인은 안정적인 레이아웃의 요건을 갖춘 경우가 많다. 시선의 흐름을 고려해 배치한 다음 각 오브젝트의 콘텐츠 성격에 따라 볼륨감을 부여해보는 방법은 어떨까?
강조를 하기 위한 방법으로는 보색을 사용하거나, 혹은 과감한 텍스트를 사용하거나 보다 과감한 시도를 하는 것도 좋은 방법일 수 있다. 안정감을 바탕으로 약간의 변칙성을 부여한다면 디자인에 재미와 신선함을 첨가할 수도 있다. 혹시 전에 작업했던 디자인을 꺼내본 다음 시선의 동선이 반영된 레이아웃이 잘 배치됐는지 체크해 보는 것도 좋은 방법일 수 있다.
