brunch

You can make anything
by writing

C.S.Lewis

by 제로 Oct 25. 2024

작성 전략 2: 독자의 시선

시선 이동에 따른 중요도

에피소드


김여주와 김남주는 같은 마케팅 팀에서 일하고 있다. 둘은 새로운 제품 론칭을 앞두고 프로모션 웹페이지를 디자인해야 하는 중요한 과제를 맡았다. 여주는 서점에서 받은 영감을 떠올렸다. 


"남주야, 내가 서점에서 책을 고를 때 보니까, 시선이 자연스럽게 위에서 아래로 내려가더라. 그래서 상단에 중요한 정보를 배치하는 게 좋을 것 같아. 어때?"


남주는 고개를 끄덕이며 말했다. 

"맞아. 사실 웹사이트에서도 비슷한 일이 벌어져. 우리가 웹페이지를 볼 때 시선이 먼저 왼쪽에서 오른쪽으로 흐르고, 그다음 아래로 내려가는 패턴을 따르거든. 예를 들어, 사람들이 검색할 때나 쇼핑할 때도 왼쪽 메뉴부터 시작해서 오른쪽으로 정보를 흘려보는 경향이 있어."


여주는 이 말을 듣고 문득 떠올렸다. 

"맞아! 백화점에서도 그랬잖아. 입구에 들어설 때 사람들이 왼쪽에서 오른쪽으로 먼저 시선을 돌리잖아? 이 흐름을 우리 웹페이지에 적용하면, 자연스럽게 고객의 시선을 우리가 원하는 정보로 끌어갈 수 있겠어."


남주는 웃으며 말했다. "그렇지. 이 흐름을 Z형 패턴으로 적용해 보면 어때? 왼쪽 상단에 우리 제품의 핵심 메시지를 넣고, 오른쪽 하단으로 이어지는 구간에 구매 버튼이나 주요 기능 설명을 배치하는 거지. 사람들이 자연스럽게 그 순서로 정보를 받아들일 거야."


여주는 남주의 아이디어에 동의했다. 

"좋아! 그리고 F형 패턴도 생각해 볼 수 있어. 사람들이 텍스트를 집중적으로 읽을 때 왼쪽 위에서 오른쪽 위, 그다음 아래로 내려가면서 보잖아? 그래서 텍스트 중심 페이지에서는 왼쪽 위에 중요한 정보를 두고, 그다음 차례로 세부 정보를 배치하면 효과적일 거야."


남주는 고개를 끄덕이며 화면을 보며 말했다. 

"좋은 생각이야. 우리가 광고 배너를 오른쪽에 배치하는 것도 잊지 말자. 사람들의 시선이 왼쪽에서 오른쪽으로 흐르니까, 오른쪽 광고 배너가 더 많은 주목을 받을 거야."


여주는 생각에 잠기더니 마침내 결론을 내렸다. 

"그럼, 전체 페이지를 Z형으로 설계하되, 텍스트가 많은 구간에서는 F형 패턴을 적용하고, 페이지 하단은 세로형 흐름으로 핵심 정보를 강조하자."



1. 시선 흐름을 활용한 성공적인 설계


김여주와 김남주는 시선 흐름에 대한 연구 결과를 바탕으로 웹페이지를 설계했다. 왼쪽 상단에는 제품의 핵심 메시지를 배치하고, 오른쪽 하단에는 구매 버튼을 배치하는 Z형 시선 흐름을 적용했다. 특히, 텍스트가 많은 페이지에서는 F형 패턴을 활용해 사람들이 중요한 정보를 쉽게 파악하도록 설계했다. 마지막으로, 페이지 하단에는 세로형 시선 흐름을 적용해, 사람들의 시선이 자연스럽게 위에서 아래로 흐르며 핵심 정보를 확인할 수 있도록 했다.


이 전략은 큰 효과를 발휘했다. 김여주와 김남주가 설계한 웹페이지는 사용자들에게 정보를 직관적이고 효과적으로 전달했으며, 그 결과 매출도 크게 증가했다. 이 경험을 통해 둘은, 시선 흐름을 이해하고 그것을 활용하는 것이 단순한 디자인을 넘어, 고객의 행동을 유도하는 강력한 도구가 될 수 있다는 사실을 깨달았다.


2. 시선 흐름이란 무엇인가?


우리가 백화점에 들어섰을 때, 사람들의 시선은 자연스럽게 왼쪽에서 오른쪽으로 이동한다. 웹사이트에서 정보를 검색할 때도 마찬가지다. 화면을 스크롤할 때 시선은 먼저 왼쪽에서 오른쪽으로 흐른 다음, 아래로 내려간다. 서점에서 책을 고를 때도 위에서 아래로 시선이 자연스럽게 내려간다. 이러한 시선의 흐름은 단순한 습관이 아니라, 인간의 시각적 인지가 특정 패턴을 따르기 때문이다.


이러한 시선 흐름 패턴을 분석하면 가로형, 세로형, Z형, F형의 네 가지 유형으로 나눌 수 있다. 각각의 패턴은 사람들의 시각적 인지 방식에 맞추어 비즈니스, 마케팅, 그리고 사업계획서 작성에 적용될 수 있으며, 이를 잘 활용하면 효과적인 설계가 가능하다.



(1) 가로형: 왼쪽에서 오른쪽으로의 시선 이동


사람들은 왼쪽에서 오른쪽으로 시선을 움직이는 경향이 있다. 이는 모니터를 바라보거나, 넓은 광장에 들어설 때도 마찬가지다. Engbert & Kliegl의 연구에 따르면, 이 시선 흐름은 서양 문화권에서 왼쪽에서 오른쪽으로 읽는 습관과 관련이 있다고 한다. 하지만 이는 단순한 읽는 방향의 차원이 아니다. 문화나 언어에 상관없이 인간은 왼쪽에서 오른쪽으로 시선을 이동하는 본능적인 패턴을 보인다.


이것을 어떻게 활용할 수 있을까? 웹사이트의 UI/UX 디자인에서 볼 수 있듯이, 홈페이지에서 중요한 메뉴는 대개 왼쪽에서 오른쪽으로 배치된다. 광고 배너 또한 오른쪽 배너가 왼쪽 배너보다 더 주목받는 경우가 많다. 비유하자면, 마치 운전할 때 차선이 자연스럽게 오른쪽으로 이어지는 것처럼, 사람의 시선도 왼쪽에서 시작해 오른쪽으로 흐르는 것이 자연스러운 동선인 셈이다.


#사업계획서에 적용하기

사업계획서를 작성할 때도 이 흐름을 활용할 수 있다. 왼쪽에는 중요한 제목, 요약, 주요 내용을 배치하고, 오른쪽에는 부가적인 정보를 제공하는 것이 이상적이다. 예를 들어, 왼쪽에는 핵심 메시지나 중요한 데이터를, 오른쪽에는 그에 대한 설명이나 상세 내용을 배치하는 식이다. 이를 통해 가독성을 높이고, 중요한 정보에 집중할 수 있도록 돕는 것이다.



(2) 세로형: 위에서 아래로의 시선 흐름


사람의 시선은 위에서 아래로 자연스럽게 흐른다. 오프라인에서 마트에 들어가 물건을 고를 때, 우리는 상단 선반부터 하단 선반으로 시선을 내려간다. 이러한 패턴은 Rayner의 연구에서도 나타난다. 인간은 정보를 인지할 때, 시선을 위에서 아래로 이동시키는 자연스러운 흐름을 보인다. 이 흐름은 상품 진열 방식이나 웹페이지 구성에 매우 유용하다. 예를 들어, 화면 상단에 가장 중요한 정보나 상품을 배치하고, 아래쪽에는 추가적인 설명이나 선택지를 제공하는 것이 효과적이다. 이것은 마치 높은 산에서 아래로 내려오며 전경을 천천히 훑어보는 것과 같다. 위쪽에 가장 중요한 경관을 배치하고, 아래로 내려가면서 세부적인 요소들을 하나씩 확인하게 만드는 것이다.


#사업계획서에 적용하기

사업계획서에서 세로형 흐름을 활용하려면, 상단에 핵심 요약과 중요한 내용을 배치하고, 하단에는 세부 설명을 나열하는 것이 좋다. 이는 사업계획서의 가독성을 높이고, 중요한 정보에 대한 집중력을 유지하는 데 효과적이다.



(3) Z형: 화면을 Z형으로 따라가는 시선


사람들이 문서나 이미지를 볼 때 Z형 시선 흐름(세로형과 유사)을 자주 따른다. 책을 읽을 때나 웹툰, 만화책을 펼칠 때도 이 Z형 패턴을 따르게 된다. 왼쪽 위에서 시작해 오른쪽 아래로 시선이 이어지며, 중요한 정보를 빠르게 스캔한다. Z형 흐름은 매우 빠르게 정보를 파악하는 데 유리하다. 이는 책이나 만화뿐만 아니라 프레젠테이션 슬라이드, 포스터 디자인, 홈페이지 구성에도 적용된다. 중요한 포인트들을 빠르게 훑고 지나가며, 필요할 때 다시 집중할 수 있는 부분을 찾아낸다.


#사업계획서에 적용하기

Z형 흐름을 사업계획서에 적용하면, 중요한 정보를 페이지 상단에 배치하고, 그 뒤에 시선을 따라가면서 차례대로 정보를 배치하는 것이 좋다. 이렇게 하면 시선의 흐름을 자연스럽게 유도할 수 있고, 독자가 중요한 정보를 빠르게 파악하게 할 수 있다.



(4) F형: 정보 집중적 시선 흐름


사람들이 문서나 웹페이지에서 정보를 집중적으로 읽을 때는 F형 패턴을 따른다. Just & Carpenter의 연구에 따르면, F형 흐름은 왼쪽 위에서 시작해 오른쪽으로 넘어가고, 그다음 왼쪽 아래로 내려가는 구조를 따른다. 이는 특히 텍스트 중심 페이지에서 많이 사용된다. F형 패턴은 검색 엔진이나 포털 사이트의 정보 제공 방식에서 흔히 볼 수 있다. 예를 들어, 구글 검색 결과 페이지에서, 상단에는 가장 중요한 정보나 광고가 배치되고, 그 아래로는 검색 결과가 나열된다. 비유하자면, F형 흐름은 물결이 한쪽에서 시작해 점차 퍼져 나가는 방식과 같다. 처음 한 번에 큰 정보를 흡수한 후, 그 정보를 바탕으로 세부 사항을 차례로 확인하게 된다.


#사업계획서에 적용하기

F형 패턴을 사업계획서에 활용하려면, 가장 중요한 정보는 페이지 왼쪽 위에 배치하는 것이 효과적이다. 이는 독자의 시선을 집중시키는 중요한 포인트가 될 수 있으며, 그 이후로 추가적인 정보를 아래쪽에 배치하는 방식으로 자연스럽게 정보를 전달할 수 있다.



사람의 시선 흐름은 단순한 습관이 아니라, 과학적으로 입증된 본능적인 패턴이다. 이를 이해하고 활용하면 웹 디자인, 마케팅, 사업계획서 작성에서 중요한 정보를 효과적으로 전달할 수 있다. 가로형, 세로형, Z형, F형의 시선 흐름을 고려하여 설계된 콘텐츠는 사용자의 주의를 끌고, 메시지를 더 빠르고 강력하게 전달하는 데 유리하다.


이제 중요한 것은 이 시선 흐름을 어떻게 배치할지에 대한 전략적인 접근이다. 핵심 정보는 왼쪽, 상단, 또는 Z형의 주요 구간에 배치하여 독자나 고객의 시선 흐름을 자연스럽게 따라가게 하는 것이 중요하다. 그러나 단순히 시선을 따라가는 것만으로는 충분하지 않다. 이를 넘어, 배치된 정보가 일관된 메시지와 가치를 전달할 수 있어야 한다. 디자인이 단순히 시각적 요소에 그치는 것이 아니라, 사용자의 행동을 유도하고 목적을 이루는 도구로 활용될 때, 그 효과는 극대화된다. 정보의 배치와 흐름은 궁극적으로 사용자가 원하는 행동을 취하도록 이끄는 역할을 해야 한다.


따라서, 시선 흐름을 고려하는 것은 효과적인 정보 전달의 시작일 뿐, 최종 목적은 사용자의 행동을 유도하는 설득력 있는 콘텐츠를 제작하는 데 있다. 이러한 전략적 사고가 결합될 때, 디자인과 마케팅, 사업계획서 작성 모두에서 더 큰 성과를 기대할 수 있을 것이다.



[다음 회에 계속]






https://www.yes24.com/Product/Goods/126283906

https://www.yes24.com/Product/Goods/129085447


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari