디자인에 감동을 더하다 – 리듬감 그리고 선택적 주의 (Selective Attention)

디자인에 감동을 더하다 – 리듬감 그리고 선택적 주의 (Selective Attention)

디자인에 감동을 더하다 – 리듬감 그리고 선택적 주의 (Selective Attention)
Category
Share Story

GUI가 뛰어난 웹사이트를 만났을 때, 그 호감의 이유가 이미지나 타이포그래피, 콘텐츠 디자인 때문이 아니라 전체적인 ‘리듬감’ 때문이라는 점을 발견할 때가 있습니다. 그것은 디자인을 넘어서 새로운 감동을 선사합니다. ‘사용자를 배려하는’ 디자이너의 의도가 나도 모르게 화면에 좀 더 주의를 기울이게 만듭니다.
물 흐르듯이 매끄럽게 사용자의 시선을 유도하고, 특정 콘텐츠 영역에 주목하게 만드는 것은 많은 GUI 디자이너들이 꿈꾸는 바램 중 하나일 것입니다.

리듬감이란 무엇인가?

일단 리듬감의 정의부터 내려보면, ‘리듬감’이란, 유사한 시각적 형상을 반복해서 사용하거나 자연스럽게 변화를 줌으로써 화면 상에 일관된 시각적인 흐름을 만들어 내는 것입니다. 리듬감 있는 디자인은 시선의 이동을 경쾌하고 가볍게 하여 사용자가 지속적으로 대상에 주의를 기울이게 돕습니다.

아래 두 화면은 리듬감이 살아있는 좋은 GUI 사례입니다.

01

<출처. Edward Jones>

위 Edward Jones 메인화면은 색상(Yellow)의 반복적 활용을 화면 내에 규칙적으로 배치함으로써, 사용자들의 시선이 자연스럽게 하단으로 내려가도록 유도하고 있습니다.
Fold(스크롤하지 않아도 보여지는 모니터 상의 화면 영역) 내에서는 상단 네비게이션 > 메인 이미지 영역 > 우측의 블록 > 좌측의 탭 등으로 자연스럽게 노란색 면들이 이어집니다. 메인 이미지 영역은 교묘하게 테두리만 두름으로써 사용자들의 시선이 좀 더 많이 머물도록 강조하고 있습니다.

02

<출처. GSK>

GSK 홈페이지는 색상이 아닌 둥근 라운딩 형태(브랜드 로고에서 파생됨)가 반복되면서 사용자들이 GSK만의 특별한 아이덴티티를 느낄 수 있도록 유도하고 있습니다.
자세히 들여다보면 시선의 흐름이 매우 자연스럽죠. 상단의 이미지는 흰색 바탕의 형상을 겹쳐 놓음으로써 메뉴와 메인 이미지에 대한 주목을 이끌고 있습니다. 그 옆에(우측) 놓인 GSK 로고가 상단의 이미지와 묘한 비례를 만들어 주고, 하단의 청록색 박스에 다시 로고 형상이 등장하여 전체적으로 통일된 인상을 자아내고 있습니다.

무질서하게 콘텐츠를 늘어놓은 것 같지만, 위에서 언급한 리듬감 있는 조화가 그 안에 들어 있는 콘텐츠들을 매우 짜임새있게 묶어주고 있습니다.

아래 Fever의 화면은 더 뛰어난 사례를 보여주고 있습니다.
Fever는 좌측과 우측의 레이아웃을 교차시키면서 메인화면의 콘텐츠들을 배치했습니다. 이렇게 의도적으로 콘텐츠들을 수평으로 교차시킨 것은 이웃한 콘텐츠와의 강한 결속을 만들어 냅니다.
다시 말해 텍스트에서 읽은 의미를 이미지에서 확인하고, 이미지에서 얻은 의미를 텍스트에서 보완할 수 있도록 되어 있는 것이죠.

03

 

04

<출처. Fever>

리듬감은 왜 중요한가?

리듬감이 중요한 이유는 인간의 주의력이 한시적이고, 일방적이기 때문입니다.
외부의 정보를 머리 속에서 처리하는 과정은 자극(Stimulus) > 지각(Perception)을 거쳐 주의 (attention)로 이어지는데, 인간은 어떤 시점에서 여러 가지 자극 중 자신이 원하는 하나만 선택해서 주의를 기울인다는 특성을 지니고 있습니다.
주의는 병렬적이지 않고 직렬적입니다. 어떤 사람은 동시에 멀티태스킹을 한다고 얘기하지만, 사실은 여러 개의 직렬적인 처리과정이 빠르게 교차되는 것일 뿐입니다.(이러한 멀티태스킹은 실제로 효율적이지도 못합니다)

여러 가지 자극 중에서 하나만 선택해서 주의를 기울이는 인간의 보편적인 사고 경향을 ‘선택적 주의’ (Selective Attention)이라고 하는데, 자신의 목표에 관련성이 높거나 자극이 갖는 무의식적인 영향력이 높을수록 우리는 다른 자극을 무시하고 해당 자극에만 주의를 기울이게 됩니다. 특히 본능적 욕구일수록 선택적 주의에 미치는 영향력이 크죠. (예: 지나가는 멋진 이성에게 갑자기 눈길이 갈 때 우리가 잠시 이어폰에서 나오는 음악을 듣지 못하는 경우)

선택적 주의는 어떤 단서에 의해서 도움을 받으며, 스스로 불필요하다고 판단되는 정보는 걸러내기도 합니다.
앞에서 얘기한 사례에서는 Yellow 색상이나 로고의 형상 등이 단서라고 볼 수 있습니다.
Fever의 경우에는 의도적으로 좌측과 우측의 콘텐츠를 교차 배치함으로써 사용자들이 좀 더 편안하게 콘텐츠를 볼 수 있도록 했는데, 좌측에 텍스트를 먼저 배치하고 우측에 이미지를 배치한 것은 텍스트를 먼저 본 사용자가 ‘이미지라는 단서로부터 도움을 받도록 한’, 교묘한 디자인이라고 할 수 있습니다.

선택적 주의를 잘 활용하면, 아래 광고와 같이 디자인에 매력을 더할 수 있습니다.
밋밋하고 어디에서나 볼 수 있을법한 디자인 대신에 사람들의 웃음을 자아낼 수 있는 것이죠.

문제 하나!
중앙에 놓인 텅빈 색조 화장품과 우측 하단에서 수줍게 모습을 드러낸 기초 화장품이 나온 아래 광고는 무엇을 전달하려는 걸까요?

05

위 광고를 보면서 여러분의 선택적 주의는 어떤 식으로 이해 했습니까?
어떤 단서로부터 내용을 파악하고, 해당 광고가 전달하려는 메시지를 단정지었나요?
그 과정에 걸린 시간은 몇 초인가요?

– 컨설팅 본부 조성봉

[catlist name=”UX & Psychology” numberposts=5 excerpt=”yes” pagination=”yes” excerpt_size=”0″ title_only=”yes“]